1.Canvas佈局
<body style="text-align: center; margin: 100px; background: #aaa;">
<canvas id="canv" width="400" height="400" style="background-color: gray;"></canvas>
<div>
<button id="bth" type="button" onclick="run()">開始遊戲</button>
</div>
</body>
變成下面這個效果:
2.定義變量
//聲明變量
var box = document.getElementById('canv').getContext('2d'); //創建2D路徑
var snake;
var direction; //1向右。-1向左，20向下，-20向上
var n; //下次移動相關
var food;
3.繪製地圖
//繪製地圖
function draw(point, color) {
box.fillStyle = color;
box.fillRect(point % 20 * 20 + 1, ~~(point / 20) * 20 + 1, 18, 18);
}
function ready() {
for(var i = 0; i < 400; i++) {
draw(i, "#313131");
}
snake = [66, 65, 64];
direction = 1;
food = 344;
draw(food, "yellow");
draw(66, "#00b7ee");
draw(65, "#00b7ee");
draw(64, "#00b7ee");
}
ready();
效果如下:
4.核心算法
function run() {
document.getElementById("bth").setAttribute("disabled", true);
snake.unshift(n = snake[0] + direction);
if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || (direction == -1 && n % 20 == 19) || (direction == 1 && n % 20 == 0)) {
ready();
document.getElementById("bth").removeAttribute("disabled");
return alert("遊戲結束");
}
draw(n, "#00b7ee");
if(n == food) {
while(snake.indexOf(food = ~~(Math.random() * 400)) > 0);
draw(food, "yellow");
} else {
draw(snake.pop(), "#313131");
}
setTimeout(arguments.callee, 200);
}
5.添加鍵盤事件
document.onkeydown = function(e) {
if(direction == 1 || direction == -1) {
if(e.keyCode == 38) {
direction = -20;
}
if(e.keyCode == 40) {
direction = 20;
}
}
if(direction == 20 || direction == -20) {
if(e.keyCode == 39) {
direction = 1;
}
if(e.keyCode == 37) {
direction = -1;
}
}
}
最終效果:
