使用canvas实现迷宫游戏

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}

// 移动函数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 <p>上述代码中，移动函数比较简单，绘制帧的函数里面比较重要的就是碰撞检测函数，在下面详细解释。</p><h3>碰撞检测</h3><p>要检测物体与墙体是否碰撞，<strong>通常情况</strong>是要先把地图信息保存到内存里，然后在移动物体时检测是否与当前的某个墙体碰撞，但是<strong>由于我们的地图背景是黑白迷宫，所以可以使用颜色来检测碰撞</strong>。具体的做法是：</p><p><strong>获取当前物体的坐标位置，利用canvas检测当前地图上这个位置的颜色是否为黑色，如果是，说是是墙体，不应该执行移动</strong>，下面就是代码：</p><pre class="brush:php;toolbar:false">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 <p>在这里，15是小人的宽度，我们检测小人两侧各1px范围（对应代码中的getImageData(x - 1, y - 1, 15 + 2, 15 + 2)可以稍微思考下这里为什么是+2），如果是黑色，说明检测到碰撞。</p><h3>其余</h3><p>在代码里，我加了一些其他的功能，比如提示答案等。至于更换地图也比较简单：把地图对应的文件地址，起点坐标，答案图片路径等存在一个对象里，然后设置一个地图数组，点击的时候切换地图并重新渲染就可以了。还有一些值得优化的地方，比如：</p><ol class=" list-paddingleft-2"><li><p>碰撞检测在拐弯的地方体验不佳；</p></li><li><p>当前情况运行时有轨迹，在答案模式下应该如何去掉轨迹？</p></li></ol><p>有兴趣的同学可以试着自己实现下。</p><h2>小结</h2><p>这个例子相对比较简单，对js的要求不高，拿来玩一下还是挺不错的。</p><p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p><p>