캔버스를 사용하여 미로 게임 구현

이 글은 주로 미로 게임을 구현하기 위해 캔버스를 사용하는 방법을 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은 참고할 수 있습니다.

머리말

#🎜 🎜# (요즘 디자인 패턴에 좀 푹 빠져서 맨날 순수 js를 마주하는 게 좀 지루하네요 -_-. 그래서 재미를 더하려고 재미있는 글을 썼습니다)

이제 canvas는 더 이상 중요하지 않습니다. 새로운 것이지만 일상 업무에서 흔히 사용되지 않기 때문에 오늘은 간단한 canvas를 구현하는 방법을 공유하고 싶습니다. 미로. 이 예제는 "html5 cheats"의 두 번째 버전에서 가져온 것이며 코드가 약간 조정되었습니다.
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 <p>上述代码中，移动函数比较简单，绘制帧的函数里面比较重要的就是碰撞检测函数，在下面详细解释。</p><h3 id="碰撞检测">碰撞检测</h3><p>要检测物体与墙体是否碰撞，<strong>通常情况</strong>是要先把地图信息保存到内存里，然后在移动物体时检测是否与当前的某个墙体碰撞，但是<strong>由于我们的地图背景是黑白迷宫，所以可以使用颜色来检测碰撞</strong>。具体的做法是：</p><p><strong>获取当前物体的坐标位置，利用<code>canvas</code>检测当前地图上这个位置的颜色是否为黑色，如果是，说是是墙体，不应该执行移动</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>在这里，<code>15</code>是小人的宽度，我们检测小人两侧各1px范围（对应代码中的<code>getImageData(x - 1, y - 1, 15 + 2, 15 + 2)</code>캔버스를 사용하여 이미지 정보를 얻을 때 중간 단계가 있으므로 <strong>서버 환경</strong>을 사용해야 합니다. 그래서 먼저 샘플을 작성해서 서버에 던져봤습니다. (성취감을 원동력으로 삼아보세요 ㅎㅎ) </p><h3 id="Text">Text</h3><p> 이것을 구현해보세요. 작은 게임 어렵지 않습니다. 미로 게임의 기본 요소에 대해 생각해 봅시다. </p><ol class=" list-paddingleft-2">우선 <strong>지도</strong>가 있어야 하고, 그 다음에는 <strong>움직이는 사람</strong>이 있어야 합니다. 우리는 이것을 그리기 위해 캐번을 사용합니다. two; #🎜🎜 #<li> 다음은 <strong>객체 이동</strong> 프로그램입니다. 이 프로그램에는 주로 두 가지 측면이 포함됩니다. <p></p>1. #🎜 🎜#2. 물체가 벽에 닿는지 감지합니다. </li>
<li>미로의 지도 그리기와 움직이는 작은 사람들<p></p>지도를 그리는 주요 단계는 다음과 같습니다. </li>
</ol><p>#🎜 🎜#지도 사진 가져오기 </p><h2></h2><p>은 캐번을 사용하여 이미지를 그립니다. </p><p></p><p> 미로 지도는 Google의 온라인 미로 생성기를 사용하여 생성할 수 있습니다. </p><p class="post-topheader custom- pt0">악당을 그릴 때도 마찬가지입니다. 다만, 여기서 주목해야 할 것은 <strong>정사각형의 그림을 찾아야 한다는 것입니다. Strong>, 나중에 이동해야 하기 때문에 충돌 감지를 위해서는 사각형 모양이 판단하기 더 쉽습니다. <a title="HTML5 Canvas API制作简单的猜字游戏" href="http://www.php.cn/html5-tutorial-405761.html" target="_blank"></a>다음 단계는 미로와 악당을 그리는 주요 함수를 작성하는 것입니다. <br>rrreee</strong></p><code>mazeFile</code>은 미로의 이미지 주소, startingX code> 및 <code>startingY</code>는 시작점의 좌표입니다. 여기서 사진을 소개하는 방법은 2가지가 있는데, 그 이유는 악역 사진을 자주 바꾸지 않아서 그냥 페이지에 직접 적어두는 것이라서 미로의 지도를 가변적으로 만들어서 소개합니다. js에서 모든 사진을 원하시면 js를 이용하여 직접 import하시면 문제 없습니다. 다른 부분은 상대적으로 간단하므로 다시 설명하지 않겠습니다. <p class="mb20"><a title="HTML5 Canvas实现烟花绽放的特效" href="http://www.php.cn/html5-tutorial-405760.html" target="_blank">이동 기능</a></p>이동의 주요 원리는 다음과 같습니다. #🎜🎜#지정된 사용자 입력(여기서는 응답 방향 키)을 받아 해당 이동 명령으로 변환합니다. 그런 다음 이동 지침을 <strong>주기적으로 확인</strong>하고 해당 대상 위치를 그립니다. 간단한 예를 들어보겠습니다: #🎜🎜##🎜🎜#예를 들어 위쪽 방향 키를 누를 때마다 위쪽으로 이동해야 한다고 기록하고, 100밀리초마다 현재 이동 명령을 확인하고, 위쪽 방향 키를 누를 때마다 위쪽으로 이동해야 하는 대상 위치를 그립니다. 이동하고 이 과정을 반복합니다. 코드도 비교적 간단합니다. #🎜🎜#rrreee#🎜🎜#위 코드에서 이동 기능은 비교적 간단합니다. 프레임 그리기에서 더 중요한 기능은 충돌 감지 기능입니다. 이에 대해서는 아래에서 자세히 설명합니다. #🎜🎜##🎜🎜#충돌 ​​감지#🎜🎜##🎜🎜#객체가 벽과 충돌하는지 감지하려면 <strong>일반적으로</strong> 먼저 지도 정보를 메모리에 저장해야 하며, 그런 다음 이동하세요. 개체는 현재 특정 벽과 충돌하는지 여부를 감지하지만 <strong>지도의 배경이 흑백 미로이므로 색상을 사용하여 충돌을 감지할 수 있습니다</strong>. 구체적인 방법은 다음과 같습니다. #🎜🎜##🎜🎜#<strong>현재 객체의 좌표 위치를 가져오고 <code>캔버스</code>를 사용하여 현재 지도에서 이 위치의 색상이 검은색인지 여부를 감지합니다. 예라고 대답하세요. 벽은 움직여서는 안 됩니다</strong>, 코드는 다음과 같습니다: #🎜🎜#rrreee#🎜🎜#여기, <code>15</code>는 악당의 너비입니다. 우리는 1px를 감지합니다. 악당 Range의 양쪽(코드의 <code>getImageData(x - 1, y - 1, 15 + 2, 15 + 2)</code>에 해당합니다. 여기서 +2인 이유를 생각해 볼 수 있습니다.) 검은색이면 충돌이 감지되었음을 의미합니다. #🎜🎜##🎜🎜#나머지#🎜🎜##🎜🎜#코드에 답변 프롬프트 등과 같은 다른 기능을 추가했습니다. 지도를 변경하는 방법은 비교적 간단합니다. 지도에 해당하는 파일 주소, 시작점 좌표, 응답 이미지 경로 등을 객체에 저장한 다음 지도 배열을 설정하고 지도를 전환하고 클릭하면 다시 렌더링합니다. 다음과 같이 최적화할 가치가 있는 일부 영역도 있습니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#모서리에서는 충돌 감지 경험이 좋지 않습니다. 🎜 🎜#현재상황에서 실행시 흔적이 있습니다. 응답모드에서 흔적을 제거하는 방법은 무엇인가요? #🎜🎜##🎜🎜##🎜🎜##🎜🎜#관심 있는 학생이 직접 구현해 볼 수 있습니다. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#이 예제는 비교적 간단하며 높은 js가 필요하지 않습니다. #🎜🎜##🎜🎜#위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! #🎜🎜##🎜🎜#관련 권장 사항: #🎜🎜##🎜🎜##🎜🎜#간단한 추측 게임을 만들기 위한 HTML5 캔버스 API #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜 🎜#HTML5 Canvas는 불꽃이 피는 특수 효과를 구현합니다#🎜🎜##🎜🎜#

위 내용은 캔버스를 사용하여 미로 게임 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!