Canvas を使用して迷路ゲームを実装する

この記事は、主に迷路ゲームを実装するためのキャンバスの使用方法を紹介しています。これは、必要な友人に参考にしていただけるように共有します。デザインパターンを認識しており、それに直面しています。純粋な JS は本当に退屈です -_-。だから、それにスパイスを加えるために何か面白いものを書いてください)

canvas は新しいものではありませんが、一般的には使用されないためです。今日は、簡単な canvas 迷路を実装する方法を紹介します。この例は「html5 cheats」の第 2 版に由来しており、コードはわずかに調整されています。

キャンバスを使用して画像情報を取得する場合は途中にステップがあるためサーバー環境を使用する必要があります。そこで、まずサンプルを書いてサーバーに投げてみました。まずはその効果を体験してください(達成感を原動力にします笑)

テキストcanvas已经不算新鲜了，不过由于日常业务中并不常用，所以实践并不多，今天分享一下，如何实现简单canvas迷宫。这个例子来源于《html5秘籍》第二版，代码有稍微做了点调整。

由于中间有一步使用canvas获取图片信息的时候，必须使用服务器环境。所以我先写了一个样例扔在服务器上，大家可以先体验一下效果（用成就感作为驱动力哈哈哈）

正文

实现这个小游戏也不难，让我们想想，一个迷宫游戏有哪些基本要素。

首先当然得有个地图，然后得有个移动的小人，这两个我们利用cavans来绘制；

接下来是物体移动的程序，这个程序主要包括2个方面：

1.让物体跟我们指定的指令来移动；
2.检测物体是否碰到墙体或者出口。

绘制迷宫的地图和移动的小人

绘制地图的主要步骤是：

1. 获取一张地图的图片

2. 利用cavans绘制图像。

迷宫地图的生成，可以借助谷歌的一个迷宫在线生成器来获得。

绘制小人也是一样直接找一个小人的图片即可，不过这里要注意的是，要找正方形的图片，因为一会我们需要做移动的碰撞检测，方形比较好判断。

接下来就要写绘制迷宫和小人的主要函数

function drawMaze(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.stroke()
  }
  imgMaze.src = mazeFile
}

mazeFile是迷宫的图片地址，startingX和startingY，是起始点的坐标。在这里图片引入的方式用了2种，原因是小人的图片我不经常更换，就直接写在页面里，迷宫的地图打算做成可变的，所以在js里引入，你想把图片都直接用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
  }
}

// 绘制帧
function drawFrame() {
  if (dx != 0 || dy != 0) {
    // context.clearRect(x,y,canvas.width,canvas.height)
    // 绘制移动轨迹
    context.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
    }
    // 这里如果重置的话变成非自动移动，也就是每按下一次方向键只前进一步，由于目前体验不好所以先不做重置
    // dx = 0
    // dy = 0
  }
  setTimeout(drawFrame, 20)
}

上述代码中，移动函数比较简单，绘制帧的函数里面比较重要的就是碰撞检测函数，在下面详细解释。

碰撞检测

要检测物体与墙体是否碰撞，通常情况是要先把地图信息保存到内存里，然后在移动物体时检测是否与当前的某个墙体碰撞，但是由于我们的地图背景是黑白迷宫，所以可以使用颜色来检测碰撞。具体的做法是：

获取当前物体的坐标位置，利用canvas检测当前地图上这个位置的颜色是否为黑色，如果是，说是是墙体，不应该执行移动，下面就是代码：

function checkForCollision() {
  var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2)
  var pixels = imageData.data

  for (var i = 0, len = pixels.length; i < len; i++) {
    var red = pixels[i],
        green = pixels[i + 1]
        blue = pixels[i + 2]
        alpha = pixels[i + 3]

    // 检测是否碰到黑色的墙
    if (red === 0 && green === 0 && blue === 0) {
      return true
    }
  }
  return false
}

在这里，15是小人的宽度，我们检测小人两侧各1px范围（对应代码中的getImageData(x - 1, y - 1, 15 + 2, 15 + 2)

この小さなゲームを実装するのは難しくありません。迷路ゲーム 基本的な要素は何ですか。

まず第一に、 もちろん地図がなければならず、 次に動く人間がなければなりません。これら 2 つを描くためにキャバンを使用します。ステップはオブジェクトの移動プログラムで、このプログラムには主に次の 2 つの側面が含まれています:

1. オブジェクトが壁に接触したかどうかを検出します。

1. 迷路と動く小さな人々の地図を描きます
   地図を描くための主な手順は次のとおりです:

2. 地図の写真を入手します

キャバンを使用して画像を描きます。

迷路マップの生成は、Google のオンライン迷路ジェネレーターを利用して取得できます。

悪役を描く場合も同様です。ただし、 ここで注意する必要があるのは正方形の絵を見つける必要があることです。モバイルの衝突検出と四角形の比較を後で行うため、適切な判断が必要です。

次のステップは、迷路と悪役を描画するためのメイン関数を記述することです

rrreeemazeFile は迷路の画像アドレス、startingX と startingY code> は開始点の座標です。ここで画像を紹介する方法は2つあります。理由は、悪役の画像は頻繁に変更しないので、迷路のマップは可変であることを目的としており、ページに直接書き込むだけです。すべての画像が必要な場合は、js を使用して直接インポートしても問題ありません。他の部分は比較的単純なので、再度説明しません。
移動関数

移動の主な原理は次のとおりです: 指定されたユーザー入力 (ここでは方向キーへの応答) を受け入れ、それを対応する移動命令に変換します。次に、 動作指示を定期的に確認し、対応する目標位置を描画します。簡単な例を見てみましょう:

たとえば、上方向キーを押すたびに、上に移動する必要があることが記録され、100 ミリ秒ごとに現在の移動コマンドを確認し、移動するターゲット位置を描画し、これを繰り返します。プロセス。コードも比較的単純です: 🎜rrreee🎜 上記のコードでは、移動関数は比較的単純です。フレームを描画する最も重要な関数は、以下で詳しく説明します。 🎜🎜衝突検出🎜🎜 物体が壁に衝突したかどうかを検出するには通常、まず地図情報をメモリに保存し、次にオブジェクトを移動したときに現在の壁に衝突するかどうかを検出する必要があります。 object ですがマップの背景は白黒の迷路なので、 色を使用して衝突を検出できます。具体的な方法は次のとおりです: 🎜🎜現在のオブジェクトの座標位置を取得し、canvas を使用して、現在のマップ上のこの位置の色が黒であるかどうかを検出します。移動するには、次のコードを使用します: 🎜rrreee🎜 ここで、 15 は悪役の幅で、両側の 1px の範囲を検出します。悪役の (コードの getImageData(x) - 1, y - 1, 15 + 2, 15 + 2) が黒の場合は、なぜ +2 なのかを考えることができます)。 、衝突が検出されたことを意味します。 🎜🎜残り🎜🎜 コードには、回答を求めるプロンプトなどの他の機能を追加しました。マップの変更に関しては比較的単純で、マップに対応するファイルアドレス、始点座標、回答画像のパスなどをオブジェクトに格納し、マップ配列を設定し、クリックするとマップを切り替えて再描画するだけです。次のような最適化する価値のある領域もいくつかあります。 🎜🎜🎜🎜 コーナーでの衝突検出エクスペリエンスが良くありません。 🎜🎜🎜🎜 現在の状況で走行中にトラックが存在します。応答モードでトラックを削除するにはどうすればよいですか? 🎜🎜🎜🎜興味のある学生は、自分で実装してみることができます。 🎜🎜概要🎜🎜 この例は比較的単純で、js に対する高い要件はありません。これを使ってみるのは非常に良いです。 🎜🎜上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 🎜🎜関連する推奨事項: 🎜🎜🎜単純な推測ゲームを作成するための HTML5 Canvas API🎜🎜🎜🎜🎜花火の特殊効果を実現するための HTML5 Canvas🎜🎜

以上がCanvas を使用して迷路ゲームを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。