LemonteaのUnity部屋

C#とかのお話です~

JavaScript入門 テトリスをつくる

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

今回はJavaScriptテトリスです。


↓で実際に遊べます。
https://slemontea7948.github.io/testRep/



使っているのはこのブログで書いたJavaScript入門記事の内容の組み合わせです。


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

JavaScript入門 簡単な迷路ゲーム

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

今回は今までの記事を組み合わせた簡単な迷路ゲームです。

黄色がプレイヤーで、矢印キーで操作して
水色のゴールにたどり着けたらクリアです。
ただし途中でピンクの敵と重なるとゲームオーバーです。
(記事が複数表示されている状態だと動きません。)







矢印キーを押すと画面まで動く場合は↑の空欄にカーソルを合わせてください。

使ったのは↓を含むいくつかの記事で書いた内容です。
www.sawalemontea.com


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


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


JavaScript入門 キーボード入力を受け取る

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

今回はキーボード入力を受け取ります。

使うのはdocument.body.onkeydownです。

document.body.onkeydown = function(e){
  //処理 
}

のように使います。
e.keyCodeでキーコードを取得できるので
どのキーが押されたか判別できます。

キーコード一覧は↓
キーコード一覧

即席チェックサンプルは↓


ここにキーを入力

キーコード


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

<form name="f1">
ここにキーを入力
<input type="text" name="t1" value="">

キーコード
<input type="text" name="t2" value="">
</form>

JS

<script>
document.body.onkeydown = function(e){
  document.f1.t1.value = "";
  document.f1.t2.value = e.keyCode;
}
</script>


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