国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

快速實(shí)現(xiàn)一個(gè)簡單的canvas迷宮游戲

wangdai / 1463人閱讀

摘要:所以我先寫了一個(gè)樣例扔在服務(wù)器上,大家可以先體驗(yàn)一下效果用成就感作為驅(qū)動力哈哈哈點(diǎn)我體驗(yàn)地址正文實(shí)現(xiàn)這個(gè)小游戲也不難,讓我們想想,一個(gè)迷宮游戲有哪些基本要素。迷宮地圖的生成,可以借助谷歌的一個(gè)迷宮在線生成器來獲得。

前言

(最近設(shè)計(jì)模式看的有點(diǎn)頭大,一直面對純js實(shí)在是有些枯燥-_-。所以寫一點(diǎn)有趣的東西調(diào)劑一下)
現(xiàn)在canvas已經(jīng)不算新鮮了,不過由于日常業(yè)務(wù)中并不常用,所以實(shí)踐并不多,今天分享一下,如何實(shí)現(xiàn)簡單canvas迷宮。這個(gè)例子來源于《html5秘籍》第二版,代碼有稍微做了點(diǎn)調(diào)整。

由于中間有一步使用canvas獲取圖片信息的時(shí)候,必須使用服務(wù)器環(huán)境。所以我先寫了一個(gè)樣例扔在服務(wù)器上,大家可以先體驗(yàn)一下效果(用成就感作為驅(qū)動力哈哈哈)

點(diǎn)我體驗(yàn)

git地址

正文

實(shí)現(xiàn)這個(gè)小游戲也不難,讓我們想想,一個(gè)迷宮游戲有哪些基本要素。

首先當(dāng)然得有個(gè)地圖,然后得有個(gè)移動的小人,這兩個(gè)我們利用cavans來繪制;

接下來是物體移動的程序,這個(gè)程序主要包括2個(gè)方面:

1.讓物體跟我們指定的指令來移動;
2.檢測物體是否碰到墻體或者出口。

繪制迷宮的地圖和移動的小人

繪制地圖的主要步驟是:

獲取一張地圖的圖片

利用cavans繪制圖像。

迷宮地圖的生成,可以借助谷歌的一個(gè)迷宮在線生成器來獲得。

繪制小人也是一樣直接找一個(gè)小人的圖片即可,不過這里要注意的是,要找正方形的圖片,因?yàn)橐粫覀冃枰鲆苿拥呐鲎矙z測,方形比較好判斷。

接下來就要寫繪制迷宮和小人的主要函數(shù)

function drawMaze(mazeFile, startingX, startingY) {
  var imgMaze = new Image()
  imgMaze.onload = function () {
    // 畫布大小調(diào)整
    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是迷宮的圖片地址,startingXstartingY,是起始點(diǎn)的坐標(biāo)。在這里圖片引入的方式用了2種,原因是小人的圖片我不經(jīng)常更換,就直接寫在頁面里,迷宮的地圖打算做成可變的,所以在js里引入,你想把圖片都直接用js引入也沒有問題。其他部分比較簡單,不再贅述。

移動函數(shù)

移動的主要原理是:
接受指定的用戶輸入(在這里是響應(yīng)方向鍵),轉(zhuǎn)換成對應(yīng)的移動指令。然后周期性的檢查移動指令,繪制對應(yīng)的目標(biāo)位置。舉個(gè)簡單的例子:

比如每按下一次方向鍵上,就記錄下應(yīng)該往上移動,然后每隔100毫秒檢查當(dāng)前的移動指令,繪制應(yīng)該移動的目標(biāo)地點(diǎn),重復(fù)這個(gè)過程。代碼也比較簡單:

// 移動函數(shù)
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
    }
    
    //繪制小人應(yīng)該移動的地點(diǎn)
    var imgFace = document.getElementById("face")
    context.drawImage(imgFace, x, y)

    if (canvas.height - y < 17) {
      // isFirst = false
      alert("恭喜你通關(guān) 游戲結(jié)束")
      return false
    }
    // 這里如果重置的話變成非自動移動,也就是每按下一次方向鍵只前進(jìn)一步,由于目前體驗(yàn)不好所以先不做重置
    // dx = 0
    // dy = 0
  }
  setTimeout(drawFrame, 20)
}

上述代碼中,移動函數(shù)比較簡單,繪制幀的函數(shù)里面比較重要的就是碰撞檢測函數(shù),在下面詳細(xì)解釋。

碰撞檢測

要檢測物體與墻體是否碰撞,通常情況是要先把地圖信息保存到內(nèi)存里,然后在移動物體時(shí)檢測是否與當(dāng)前的某個(gè)墻體碰撞,但是由于我們的地圖背景是黑白迷宮,所以可以使用顏色來檢測碰撞。具體的做法是:

獲取當(dāng)前物體的坐標(biāo)位置,利用canvas檢測當(dāng)前地圖上這個(gè)位置的顏色是否為黑色,如果是,說是是墻體,不應(yīng)該執(zhí)行移動,下面就是代碼:

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是小人的寬度,我們檢測小人兩側(cè)各1px范圍(對應(yīng)代碼中的getImageData(x - 1, y - 1, 15 + 2, 15 + 2)可以稍微思考下這里為什么是+2),如果是黑色,說明檢測到碰撞。

其余

在代碼里,我加了一些其他的功能,比如提示答案等。至于更換地圖也比較簡單:把地圖對應(yīng)的文件地址,起點(diǎn)坐標(biāo),答案圖片路徑等存在一個(gè)對象里,然后設(shè)置一個(gè)地圖數(shù)組,點(diǎn)擊的時(shí)候切換地圖并重新渲染就可以了。還有一些值得優(yōu)化的地方,比如:

碰撞檢測在拐彎的地方體驗(yàn)不佳;

當(dāng)前情況運(yùn)行時(shí)有軌跡,在答案模式下應(yīng)該如何去掉軌跡?

有興趣的同學(xué)可以試著自己實(shí)現(xiàn)下。

小結(jié)

這個(gè)例子相對比較簡單,對js的要求不高,拿來玩一下還是挺不錯(cuò)的。

然后依然是每次都一樣的結(jié)尾,如果內(nèi)容有錯(cuò)誤的地方歡迎指出;如果對你有幫助,歡迎點(diǎn)贊和收藏,轉(zhuǎn)載請征得同意后著明出處,如果有問題也歡迎私信交流,主頁有郵箱地址~溜了

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/95815.html

相關(guān)文章

  • canvas實(shí)例 --- 制作簡易迷宮

    摘要:整個(gè)思路十分簡單首先我們將迷宮視為一個(gè)行列的單元格組合,每一個(gè)單元格便可以表示為。用來儲存我們已訪問過的單元格,則記錄我們的訪問路徑。我們通過將單元格的,,,屬性設(shè)置為或來標(biāo)識這個(gè)方向是否應(yīng)該有邊框,同時(shí)該方向是否可走。 這個(gè)系列分為兩部分,第一部分為迷宮的生成及操作,第二部分為自動尋路算法。 我們先看效果:點(diǎn)擊查看 我們直入正題,先說一說生成迷宮的思路。 整個(gè)思路十分簡單: 首先...

    孫吉亮 評論0 收藏0
  • canvas實(shí)例 --- 制作簡易迷宮

    摘要:整個(gè)思路十分簡單首先我們將迷宮視為一個(gè)行列的單元格組合,每一個(gè)單元格便可以表示為。用來儲存我們已訪問過的單元格,則記錄我們的訪問路徑。我們通過將單元格的,,,屬性設(shè)置為或來標(biāo)識這個(gè)方向是否應(yīng)該有邊框,同時(shí)該方向是否可走。 這個(gè)系列分為兩部分,第一部分為迷宮的生成及操作,第二部分為自動尋路算法。 我們先看效果:點(diǎn)擊查看 我們直入正題,先說一說生成迷宮的思路。 整個(gè)思路十分簡單: 首先...

    twohappy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<