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回]
PR
