我們一起寫個Web貪吃蛇小游戲吧（二） | 新手向 ?

昨日成果

小改進(jìn)

發(fā)現(xiàn)速度太慢，所以將速度調(diào)整為750毫秒

修改的代碼如下：

gameInterval = setInterval(gameRoutine, 750)

為了怕蛇的身體粘在一起，我們讓蛇的身體不占滿一格。

context.fillStyle = 'lime' for(var i=0;i

寫控制蛇的部分

接下來是寫控制蛇的方向：

//在頁面加載完成后 onPageLoaded 方法會被調(diào)用。 window.onload = onPageLoaded function onPageLoaded() { //建立事件- document.addEventListener('keydown', handleKeyDown) } function handleKeyDown(event) { if(mode === '1'){ var originX = snake.direction.x var originY = snake.direction.y if(event.keyCode === 37){//左方向鍵 snake.direction.x = originY snake.direction.y = -originX } else if(event.keyCode === 39){//右方向鍵 snake.direction.x = -originY snake.direction.y = originX } }else if(mode === '2'){ // keycode: ←37 ↑38 →39 ↓40 if(event.keyCode === 37){ snake.direction.x = -1 snake.direction.y = 0 }else if(event.keyCode === 38){ snake.direction.x = 0 snake.direction.y = -1 }else if(event.keyCode === 39){ snake.direction.x = 1 snake.direction.y = 0 }else if(event.keyCode === 40){ snake.direction.x = 0 snake.direction.y = 1 } } }

什么是Event 對象

Event對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。

事件通常與函數(shù)結(jié)合使用，函數(shù)不會在事件發(fā)生前被執(zhí)行！

本函數(shù)調(diào)用了DOM的event對象，通過event的keyCode屬性來獲取玩家動作。

本游戲設(shè)置了兩種模式：雙方向模式、四方向模式。

其中雙方向模式的編寫邏輯可能不太好理解，但是可以通過觀察來找到規(guī)律：

實現(xiàn)游戲結(jié)束邏輯

function snakeIsDead(){ //碰墻 if(snake.body[0].x < 0){ return true }else if(snake.body[0].x > BLOCK_COUNT){ return true }else if(snake.body[0].y < 0){ return true }else if(snake.body[0].y >= BLOCK_COUNT){ return true } //撞身體 for(var i=1;i

很簡單的思路，當(dāng)蛇的頭超過了畫布就相當(dāng)于撞墻，撞身體就是頭的坐標(biāo)等于身體的坐標(biāo)。這樣蛇就die了。

function gameover() { //停止更新畫布 clearInterval(gameInterval) }

蛇死后，我們就停止畫布更新。

今天到此為止吧，明天寫蛇吃蘋果啦…

5G游戲 web前端

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。