使用canvas實現迷宮游戲

來源：懂視網責編：小采時間：2020-11-27 15:04:55

使用canvas實現迷宮游戲

使用canvas實現迷宮游戲:這篇文章主要介紹了關于使用canvas實現迷宮游戲，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下前言（最近設計模式看的有點頭大，一直面對純js實在是有些枯燥-_-。所以寫一點有趣的東西調劑一下）現在canvas已經不算新鮮了，不過由于日常業

推薦度：

點擊下載本文 文檔為doc格式

導讀使用canvas實現迷宮游戲:這篇文章主要介紹了關于使用canvas實現迷宮游戲，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下前言（最近設計模式看的有點頭大，一直面對純js實在是有些枯燥-_-。所以寫一點有趣的東西調劑一下）現在canvas已經不算新鮮了，不過由于日常業

這篇文章主要介紹了關于使用canvas實現迷宮游戲，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

前言

（最近設計模式看的有點頭大，一直面對純js實在是有些枯燥-_-。所以寫一點有趣的東西調劑一下）
現在canvas已經不算新鮮了，不過由于日常業務中并不常用，所以實踐并不多，今天分享一下，如何實現簡單canvas迷宮。這個例子來源于《html5秘籍》第二版，代碼有稍微做了點調整。

由于中間有一步使用canvas獲取圖片信息的時候，必須使用服務器環境。所以我先寫了一個樣例扔在服務器上，大家可以先體驗一下效果（用成就感作為驅動力哈哈哈）

正文

實現這個小游戲也不難，讓我們想想，一個迷宮游戲有哪些基本要素。

首先當然得有個地圖，然后得有個移動的小人，這兩個我們利用cavans來繪制；

接下來是物體移動的程序，這個程序主要包括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），如果是黑色，說明檢測到碰撞。