げぇむのページ

Lesson3で自キャラを表示させた。今回はキーボード入力で操作できるようにする。

今日の流れ
1.Lesson3をフォルダごとコピー後名前の変更をしてLesson4とする。
2.canvas.jsを変更する。
3.index.htmlを開く

1.いつもどおりコピー

2.canvas.jsを変更する。
内容

var context;
var keys = new Array();//キーの状態
var char_posx;//自キャラのx座標
var char_posy;//自キャラのy座標
var char_x;//自キャラの幅
var char_y;//自キャラの高さ

window.onload = function()
{
    var canvas1 = document.getElementById('CV1');//指定したidの要素を取得

    canvas1.height = 300;//画面の高さ
    canvas1.width = 300;//画面の幅
   
    context = canvas1.getContext('2d');//描画メソッドを使用するための準備

    context.strokeStyle = "rgb(0, 0, 0)";
    context.strokeRect(0,0,300,300);//枠を描画

    char_x = 30;
    char_y = 30;

    char_posx = 135;//自キャラの初期位置
    char_posy = 270;//自キャラの初期位置

    draw();
}

function draw()
{
    if(keys[0] == true)
    {
        char_posx -= 5;
    }
   
    if(keys[1] == true)
    {
        char_posy -= 5;
    }

    if(keys[2] == true)
    {
        char_posx += 5;
    }
   
    if(keys[3] == true)
    {
        char_posy += 5;
    }

    context.fillStyle = "rgb(255, 255, 255)";
    context.fillRect(0,0,300,300);//古い表示を消去するために上書きする:

    context.strokeStyle = "rgb(0, 0, 0)";
    context.strokeRect(0,0,300,300);//枠を描画

    context.fillStyle = "rgb(0, 0, 0)";

    context.fillRect(char_posx,char_posy,char_x,char_y);//四角を描画:
   
    setTimeout(draw, 20);//指定時間毎に呼び出す
}

document.onkeydown = function(e)
{

         switch(e.keyCode)
        {
            case 37:
            keys[0] = true;   
            break;

            case 38:
            keys[1] = true;       
            break;
       
            case 39:
            keys[2] = true;
            break;

            case 40:
            keys[3] = true;       
            break;

        }
}


document.onkeyup = function(e)
{

         switch(e.keyCode)
        {
            case 37:
            keys[0] = false;
            break;

            case 38:
            keys[1] = false;
            break;
       
            case 39:
            keys[2] = false;
            break;

            case 40:
            keys[3] = false;
            break;
        }

}


3.index.htmlを開く

成功していればこのようになっているはず。

変数は関数の外で宣言することで他の関数でも使用することができる。
その関数の中で宣言した変数は、基本的にその関数の中でしか使用できない。
あまり多用すると不具合の元なので最少限がいいと思う。

drawという関数を作成し、そちらで描画などの操作をするように変更。
また、setTimeoutという関数で、指定した時間ごとにdrawが呼び出される。

document.onkeydown = function(e)はキーを押した時に呼び出され、eという変数を渡す。

switchはその変数の内容によって処理を分けたい時に使う。
case 37: とはe.keyCodeが37の時に以下の処理を行うという意味である。
この時に使うのはコロンであり、セミコロンではないので注意。
キーコードはブラウザによって違うので注意。

var keys = new Array();は変数 keysは配列であることを示す。
配列とは変数の集まりのようなものである。
keys[0] = 19;
keys[1] = 7;
のように扱う。

true;は論理式に使う。真ならtrue、偽ならfalseである。onとoffのような意味。

break;はcaseの処理を終了してswitchの外に出すことを意味する。

document.onkeyup = function(e) はキーを離した時に呼び出される。

なぜキー押した時と離した時の処理が必要かというと、基本的にキーは一個ずつしか処理できないからだ。しかし、ゲームには同時押しという処理が必要になるので、何らかの処理をしなければならない。
今回の処理は、キーを押したら、trueを入れ、キーを離せば、falseが入るようにしている。
そしてdraw()が呼び出される毎に、trueと判定されたキーのみ処理するようにしている。

→と←を同時に押して見れば分かるが、停止しているように見える。しかし内部的にはｘ座標がマイナスされた後にプラスされ、移動量は差し引き０になっている。

[0回]

Lesson2で画面サイズの変更方法を示した。 しかし、実はfillRectは塗りつぶすものであるため、後に用いると既に描画したものを上書きしてしまう。
というわけで、枠だけ描画する方法と自キャラらしきものを作る。

今日の流れ
1.Lesson2をフォルダごとコピー後名前の変更をしてLesson3とする。
2.canvas.jsを変更する。
3.index.htmlを開く

1.いつもどおりコピー

2.canvas.jsを変更する。
内容

window.onload = function()
{
    var canvas1 = document.getElementById('CV1');//指定したidの要素を取得

    canvas1.height = 300;//画面の高さ
    canvas1.width = 300;//画面の幅
   
    var context = canvas1.getContext('2d');//描画メソッドを使用するための準備

    context.strokeStyle = "rgb(0, 0, 0)";//枠の色を指定する
    context.strokeRect(0,0,300,300);//枠を描画

    var char_x = 30;//自キャラ幅
    var char_y = 30;//自キャラ高さ

    context.fillStyle = "rgb(0, 0, 0)";//四角の色を指定する
    context.fillRect(135,270,char_x,char_y);//自キャラを描画:
}

3.index.htmlを開く
成功していればのゲーム3ように黒枠に黒の自キャラが表示されているはず。
自キャラと言っても、ただの四角だが。
strokeRectは枠を描画する
fillRectは塗りつぶした四角を描画する
という違いがある。


キー操作【HTML5 JavaScript ゲーム作成 講座】4

[0回]

Lesson1で表示した黒い長方形が、ゲーム画面である。
このままだと画面サイズが使い難い。
というわけで、画面のサイズを好きなサイズに変更する方法の説明。

今日の流れ
1.Lesson1をフォルダごとコピー後名前の変更をしてLesson2とする。
2.canvas.jsを変更する。
3.index.htmlを開く

1.フォルダアイコンを右クリック→コピー、右クリック→貼り付けでコピー後名前の変更をしてLesson2とする。

2.canvas.jsを変更する。

内容
window.onload = function()
{
    var canvas1 = document.getElementById('CV1');//指定したidの要素を取得

    canvas1.height = 300;//画面の高さ
    canvas1.width = 300;//画面の幅
    
    var context = canvas1.getContext('2d');//描画メソッドを使用するための準備

    context.fillRect(0,0,500,500);//四角を描画
}

3.index.htmlを開く

成功していれば、黒い正方形が表示されている。

今回の変更点は
canvas1.height = 300;//画面の高さ
canvas1.width = 300;//画面の幅

//はコメントアウトと言い、プログラムには影響しないメモ書きのことである。
//の後から改行するまで有効。

300のところを大きい数字に変更すると画面が大きくなる。
小さい数字にすると画面が小さくなる。

縦と横は同じ大きさでなくても良い。

成功していればゲーム2のようになっているはず。


枠と塗りつぶし【HTML5 JavaScript ゲーム作成 講座】3

[0回]

超初心者向けにJavaScriptゲーム開発講座を作ってみようと思いたった。

と言っても、講師が初心者なので深い説明はできない。
それどころか所々、非常識だったり、間違っている。

「取りあえず動けばいいや」という人のみ受講して欲しい。

必要なものと言っても、このブログが読めるPCがあれば、基本的に問題ないと思う。

では早速。

＊ブラウザはfirefoxを使用

今日の流れ

1.どこでもいいので、Lesson1というフォルダを作る。
2.Lesson1というフォルダの中にindex.htmlというファイルを作る
3.Lesson1というフォルダの中にcanvas.jsというファイルを作る
4.index.htmlを開く

となっている。

1.どこでもいいので、Lesson1というフォルダを作る
右クリック→新規作成→フォルダで作れる

2.Lesson1というフォルダの中にindex.htmlというファイルを作る
右クリック→新規作成→テキストドキュメントで一旦テキストファイルを作成する。
右クリック→名前の変更でindex.htmlという名前にする。
＊拡張子を表示する設定にしておくこと。方法はググると良い。
拡張子とは*.htmlとか*.txtとか点以下の名前のこと。

内容
<!DOCTYPE html>
<meta charset="utf-8">
<script src="canvas1.js"></script>
<canvas id="CV1"></canvas>

リネーム以降は、右クリック→プログラムから開くでテキストエディタを選ぶと良い。

3.Lesson1というフォルダの中にcanvas1.jsというファイルを作る
やり方は基本的には２と同じ。

JavaScriptでは、基本的に文末には「;」（セミコロン）をつけなければいけない。
つけなければいけない所と、つけてはいけない所があるので注意して欲しい。

内容
window.onload = function()
{
    var canvas1 = document.getElementById('CV1');//指定したidの要素を取得
   
    var context = canvas1.getContext('2d');//描画メソッドを使用するための準備

    context.fillRect(0,0,500,500);//四角を描画
}

4.index.htmlを開く

全て成功していれば、このようになっているはずだ。
失敗したら、何か間違っていないか見直して欲しい。



画面サイズの変更【HTML5 JavaScript ゲーム作成 講座】2

[0回]