(私は最近デザインパターンに少し夢中になっており、常に純粋な JS に直面するのは少し退屈です -_-。そこで、スパイスとして面白いものを書きました)
キャンバスは新しいものではありませんが、日常業務ではあまり使用されないため、今日は簡単なキャンバス迷路の実装方法を紹介します。この例は「html5 cheats」の第 2 版に由来しており、コードはわずかに調整されています。
Canvasを使用して画像情報を取得する場合は途中にステップがあるため、サーバー環境を使用する必要があります。なので、まずは誰でも効果を実感できるようにサンプルを書いてサーバーに放り込みました（達成感を原動力に笑）
クリックして体験してください
gitアドレス
文章この小さなゲームを実装するのは難しくありません。迷路ゲームの基本的な要素について考えてみましょう。
もちろん、まず地図が必要で、次に移動する悪役が必要です。これら 2 つを描くためにキャバンを使用します。
次に、オブジェクト移動プログラムです。このプログラムには主に 2 つの側面が含まれています。
1. 指定した指示に従ってオブジェクトを移動させます。
2. 物体が壁に接触したか、壁から出たかを検出します。
迷路の地図を描いてフィギュアを動かす
地図を描画する主な手順は次のとおりです。
迷路マップの生成は、Google のオンライン迷路ジェネレーターを利用して取得できます。
悪役を描く場合も同様です。ただし、ここで注意する必要があるのは、後でモバイル衝突検出を行う必要があるため、正方形の画像を見つける必要があることです。判断しやすくなります。
次に、迷路や悪役を描画するための主な機能を書いていきます。
functiondrawMaze(mazeFile, startingX, startingY) { var imgMaze = new Image() imgMaze.onload = function () { // キャンバスサイズ調整 Canvas.width = imgMaze.width Canvas.height = imgMaze.height // 笑顔を描くvar imgFace = document.getElementById(face) context.drawImage(imgMaze, 0, 0) x = startingX y = startingY context.drawImage(imgFace, x, y) context.drawImage() } imgMaze.src = mazeFile}mazeFile は迷路の画像アドレス、startingX と startingY は開始点の座標です。ここで画像を紹介する方法は2つあります。理由は、悪役の画像は頻繁に変更しないため、迷路のマップは可変であることを目的としており、ページに直接書きます。 jsを使用して直接インポートしても問題ありません。他の部分は比較的単純なので、再度説明しません。
移動機能動きの主な原則は次のとおりです。
指定されたユーザー入力 (この場合は方向キーに応答) を受け入れ、それを対応する移動命令に変換します。その後、定期的に移動命令を確認し、対応する目標位置を描画します。簡単な例を挙げてみましょう。
たとえば、上方向キーが押されるたびに、上方向に移動する必要があることが記録され、100 ミリ秒ごとに現在の移動コマンドを確認し、移動すべきターゲット位置を描画し、このプロセスを繰り返します。コードも比較的単純です。
// 移動関数 function processKey(e) { dx = 0 dy = 0 // 上下左右方向キー検出 if (e.keyCode === 38) { dy = -1 } if (e.keyCode = == 40) { dy = 1 } if (e.keyCode === 37) { dx = -1 } if (e.keyCode === 39) { dx = 1 }}// フレーム描画関数drawFrame() { if (dx != 0 || dy != 0) { // context.clearRect(x,y,canvas.width,canvas.height) // 移動軌跡コンテキストを描画します。 beginPath(); context.fillStyle = rgb(254,244,207) context.rect(x, y, 15, 15) context.fill() x += dx y += dy // 衝突検出 if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } // 悪役が移動すべき位置を描画 var imgFace = document.getElementById( ' face') context.drawImage(imgFace, x, y) if (canvas.height - y < 17) { // isFirst = false alert('ゲーム終了おめでとうございます') return false } // ここでリセットすると、非自動移動になります。つまり、方向キーを押すたびに、現在のエクスペリエンスから 1 ステップしか進みません。これは良くありません。今はリセットしません/ / dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}上記のコードでは、移動関数は比較的単純ですが、フレームを描画するためのより重要な関数は、以下で詳しく説明する衝突検出関数です。
衝突検知オブジェクトが壁に衝突したかどうかを検出するには、通常、最初にマップ情報をメモリに保存し、次にオブジェクトを移動するときに現在の壁に衝突したかどうかを検出する必要があります。白い迷路では、色を使用して衝突を検出できます。具体的な方法は次のとおりです。
現在のオブジェクトの座標位置を取得し、キャンバスを使用して、現在のマップ上のこの位置の色が黒であるかどうかを検出し、その場合は壁であるとみなされ、移動は実行されません。
function checkForCollision() { var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2) var ピクセル = imageData.data for (var i = 0, len = ピクセル.長さ; i < len ; i++) { var red = ピクセル[i]、緑 = ピクセル[i + 1]、青 = ピクセル[i + 2] アルファ=ピクセル[i + 3] // 黒い壁にぶつかるかどうかをチェック if (red === 0 && green === 0 && blue === 0) { return true } } return false}ここで、15 は悪役の幅です (コード内の getImageData(x - 1, y - 1, 15 + 2, 15 + 2) に相当します)。ここで + になっている理由 2)、黒の場合は衝突が検出されたことを意味します。
残りコードには、回答を求めるプロンプトなどの他の機能を追加しました。マップの変更に関しては比較的単純で、マップに対応するファイルアドレス、始点座標、回答画像のパスなどをオブジェクトに格納し、マップ配列を設定し、クリックするとマップを切り替えて再描画するだけです。次のような、最適化する価値のある領域がまだいくつかあります。
興味のある学生は自分で実装してみることができます。
まとめこの例は比較的単純で、js に対する高い要件はありません。これを使ってみるのは非常に良いです。
そして、毎回同じ結末になりますが、もし内容に誤りがあればご指摘いただき、転載する前に「いいね！」をして、出典を明記してください。ご質問がございましたら、ホームページのプライベート メッセージでご連絡ください。メール アドレスを取得しました〜。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。