原生js寫乙個貪吃蛇小遊戲 內含詳細注釋

上下左右鍵控制方向使貪吃蛇吃葡萄

遊戲結束時左上角為總得分。

遊戲效果：

介面和css**這裡就不加贅述了，主要貼js**（加了注釋）：

var config =

var snake =
null
,//snake的例項
food =
null
,//food的例項
game =
null
;//遊戲的例項
//我們把蛇移動的整個區域設定成乙個具有30列30行的網格座標
//方塊(格仔)座標位置
/**0,0 (0,0)
20,0 (1,0)
40,0 (2,0)
*/function
square
(x, y, classname)
square.prototype.
create
=function()
;square.prototype.
remove
=function()
;//蛇
function
snake()
, right:
, up:
, down:}}
snake.prototype.
init
=function()
;//獲取蛇頭下乙個位置對應的元素,根據元素做下乙個動作
snake.prototype.
getnextpos
=function()
});if
(self)
else
if(nextpos[0]
<
0|| nextpos[1]
<
0|| nextpos[0]
> config.td-
1|| nextpos[1]
> config.tr-1)
else
if(food && food.pos[0]
=== nextpos[0]
&& food.pos[1]
=== nextpos[1]
)else};
//處理碰撞後的事件
snake.prototype.collide =
deg)`
newhead.
create()
;//新增蛇頭
//刪除蛇尾：吃食物則不刪if(
!iseat)
// console.log(this.pos); //列印陣列,驗證},
eat:
function()
, end:
function()
}snake =
newsnake()
;//建立食物
function
createfood()
;while
(include)})
;}//生成食物
food =
newsquare
(x, y,
"food");
food.pos =
[x, y]
;//記錄食物座標
food.
create()
;}//遊戲邏輯
function
game()
game.prototype.
init
=function()
else
if(event.which ==
38&& snake.direction != snake.directionkey.down)
else
if(event.which ==
39&& snake.direction != snake.directionkey.left)
else
if(event.which ==
40&& snake.direction != snake.directionkey.up)
}this
.start()
;};game =
newgame()
;//開始遊戲
game.prototype.
start
=function()
,200);
};//遊戲結束
game.prototype.
gameover
=function()
`;//將分數記入該介面};
//開啟遊戲
function
startgame()
}startgame()
;

canvas寫乙個貪吃蛇小遊戲

截圖 開始 js snake.js function snake canvas this.ctx canvas.getcontext 2d this.state score 0,分數 this.getpoint this.init this.state.startx,this.state.start...

乙個簡單的「貪吃蛇」小遊戲

乙個簡單的 貪吃蛇 小遊戲 分享人 鄭漲 頁面結構 簡單的21x21的方塊，頁面結構 id為container的div包含所21個class名為row的div，每個row代表貪吃蛇的一整行，每個row中又包含21個div，代表這一行的每乙個div方格，如果這個方格是空的話，div的類名為blank，...

JS寫懷舊小遊戲系列（四）貪吃蛇

直接copy 到html檔案下直接可以執行玩。tips 老鳥跳過，希望對新手有所幫助 ie element.innertext ff element.textcontent setattribute cellpadding 0 在ie中無效，正確寫法cellpadding 一不小心就犯錯了 ff中，...