前回、JavaScriptにて矢印キーでキャラクターを動かす方法を紹介しました。
とりあえず上下左右に自由自在に動かせるようになりましたが、山をすり抜けてしまうので、今回は当たり判定を実装して通れる所と通れない所を分けるようにします。
【JavaScript】マップデータの当たり判定の実装について
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title></title> | |
| </head> | |
| <body onload="initialize()"> | |
| <canvas id="test" width="320" height="320"></canvas> | |
| <img id="map001" src="map001.png" style="display:none" /> | |
| <img id="map002" src="map002.png" style="display:none" /> | |
| <img id="character1" src="character1.png" style="display:none" /> | |
| <script> | |
| "use strict"; | |
| var map = [//マップデータ | |
| [0,0,0,0,0,0,0,0,0,1], | |
| [0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,1], | |
| [0,0,0,0,0,1,0,0,0,0], | |
| [0,0,0,0,0,1,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,1], | |
| [0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0], | |
| ]; | |
| var gc,px=0,py=0; | |
| function initialize(){ | |
| gc = document.getElementById("test").getContext("2d"); | |
| document.onkeydown = keydown; | |
| paint(); | |
| } | |
| function keydown(e){ | |
| var hitx = px,hity = py;//当たり判定用の変数を作成 | |
| switch(e.keyCode){ | |
| case 39: | |
| if((map[hity][hitx+1]) == 0){ | |
| px++;//右移動 | |
| } | |
| break; | |
| case 37: | |
| if((map[hity][hitx-1]) == 0){ | |
| px--;//左移動 | |
| } | |
| break; | |
| case 38: | |
| if(py > 0){ | |
| if((map[hity-1][hitx]) == 0){ | |
| py--;//上移動 | |
| } | |
| } | |
| break; | |
| case 40: | |
| if(py < 9){ | |
| if((map[hity+1][hitx]) == 0){ | |
| py++;//下移動 | |
| } | |
| } | |
| break; | |
| } | |
| paint(); | |
| } | |
| function paint(){ | |
| for(var y = 0; y<map.length;y++){ | |
| for(var x = 0;x<map[y].length;x++){ | |
| if(map[y][x] == 0){ | |
| gc.drawImage(map001,x*32,y*32,32,32); | |
| } | |
| if(map[y][x] == 1){ | |
| gc.drawImage(map001,x*32,y*32,32,32); | |
| gc.drawImage(map002,x*32,y*32,32,32); | |
| } | |
| } | |
| } | |
| gc.drawImage(character1,px*32,py*32,32,32); | |
| } | |
| </script> | |
| </body> | |
| </html> |
修正を加えた部分は、キー入力が行われたイベントハンドラの中ですね。
何かしらキー入力が行われたら当たり判定用の変数「hitx」と「hity」を作成します。
キャラクターの座標を取得して、それぞれ当たり判定用の変数に代入します。
基本的にキャラクターは、その場から上下左右4か所に移動するので、各方向の座標が分かれば当たり判定をチェックすることが出来ます。
各座標は上の画像のように割り出す事が出来ます。
あとは、if文を使って座標上のマップデータをチェックすれば良いですね。
私の場合は、マップデータの種類が現状少ないため、「0」以外ならすり抜けない仕様にしています。今後他にもすり抜け可能なマップデータを使用する場合は、その都度対応する必要があります。
また、前回と異なる点として、画面外にキャラクターが消えることが無くなった点です。
ただしy座標に関しては、画面外に移動しようとすると、目には見えませんがエラーが発生してしまうので、上下キーが入力された場合は、キャラクターが移動できるかチェックしておきます。
動画プレーヤー
00:00
00:00
ゲームを実行すると、画面内にある山をすり抜けないようになりましたね。
また、何か新しい要素を追加したらその都度紹介していきたいと思います。今回はこの辺で。
