JavaScript入門 Canvas 矢印キーで移動する四角形

こんにちは。レモンティーです。

今回は矢印キーで移動する四角形をつくります。

サンプルはこんな感じです。

はじめから

画面まで動く場合ここ↑にマウスでフォーカスしてからキー操作してください。

使ったのは↓の二つの記事の内容です。
www.sawalemontea.com
www.sawalemontea.com

キー入力で受け取ったキーコードは連想配列で座標の変化量に変えて…

var moovKeys = {
                37: [-10,0], //left
                39: [10,0], //right
                40: [0,10], //down
                38: [0,-10], //up
            };

座標を動かして、
Canvasからはみ出していないかチェックしてから再描画します。

 document.body.onkeydown = function(e){
                
                if(moovKeys[e.keyCode]){
                    let moov = moovKeys[e.keyCode];
                    playerPosX += moov[0];
                    playerPosY += moov[1];
                }

                checkPosition();                
                render();
            };

function render(){
                con.clearRect(0,0,canvasW,canvasH);
                con.fillRect(playerPosX,playerPosY,playerW,playerH);
            }

これで矢印キーで動かすことができます。

今回はこれでおしまいです。
www.sawalemontea.com