キーを押して、箱を任意の方向に動かす

今まで作成してきた動く箱を、好きな方向に動かせる様にキーボードの矢印キーに対応して、矢印キーを押した方向に箱が動くように修正します。箱の動作をキーに連動させるためには、documentオブジェクトにあるaddEventListenerでキーを押した時と、キーを離した時の処理を追加します。

<script>
var canvas;
var ctx;

var mx = 20;
var my = 20;

//どのキーを押しているかを記録しておくための変数
var keyCode;

var dx;
var dy;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    //キーを離した(keyup)時の処理。キーの記録の変数の値を消す(nullにする)
    document.addEventListener("keyup", function(event){
        keyCode = null;
    });
  
    //キーを押した(keydown)時の処理。キーの番号を記録しておく
    document.addEventListener("keydown", function(event){
        keyCode = event.keyCode;
    });
  
    setInterval(draw, 40);
};

function draw(){
 //処理は省略
}
</script>

document.addEventListenerはイベントというユーザがブラウザ上で何か操作した時に処理を開始する(ハンドラ－)ために用意しておくもので、addEventListenerの第一引数にkeyup、keydownやclick等の操作を入れて、第二引数には実行したい処理を関数の形式で用意しておきます。document.addEventListener(“keydown”, 実行したい関数名);で何のキーを押した時に実行される処理を追加します。今回はキーを押すか、離すかで用意したkeyCode変数に現在の状況を入れてます。キーボードにある各キーには番号が振り分けられており、下矢印のキーには38が当てられています。event.keyCodeで各キーの番号を取得できます。次にsetIntervalでセットされているdraw関数を見ていきます。

function draw(){

    //今押しているキーから、どの向きに箱を移動するかを設定する関数を実行する
    changeDirection();

    //処理の順番を方向を決めた直後に変更する
    mx = mx + dx;
    my = my + dy;
  
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);
  
    ctx.beginPath();
    ctx.moveTo(mx, my);
    ctx.lineTo(mx, my + 20);
    ctx.lineTo(mx + 20, my + 20);
    ctx.lineTo(mx + 20, my);
    ctx.lineTo(mx, my);
    ctx.strokeStyle = "blue";
    ctx.stroke();
}

function changeDirection(){
  
    //ボタンを押してない時の挙動、keyCodeにはundefinedかnullが入っている
    if(keyCode == undefined || keyCode == null){
        dx = 0;
        dy = 0;
    }
  
    //左のカーソル(37のキー)を押したとき
    if(keyCode == 37){
        dx = -1;
    }
  
    //上のカーソル(38のキー)を押したとき
    if(keyCode == 38){
        dy = -1;
    }
  
    //右のカーソル(39のキー)を押したとき
    if(keyCode == 39){
        dx = 1;
    }
  
    //下のカーソルを押したとき
    if(keyCode == 40){
        dy = 1;
    }
}

draw関数の最初にchangeDirectionという関数を追加して、addEventListener内でkeyCodeに入れたキーの番号を元にdxとdyの数字を決定させ、その後に四角い箱用のmxとmyを変更して四角を描きます。

このコードを追加したことにより、キーに対応して箱が動くアニメーションになります。