一.簡介

1976年，Gremlin平臺推出了一款經典街機游戲Blockade。游戲中，兩名玩家分別控制一個角色在屏幕上移動，所經之處砌起圍欄。角色只能向左、右方向90度轉彎，游戲目標保證讓對方先撞上屏幕或圍欄。 聽起來有點復雜？其實就是下面這個樣子：

基本上就是兩條每走一步都會長大的貪吃蛇比誰后完蛋，玩家要做的就是避免撞上障礙物和越來越長的身體。更多照片、視頻可以看 GamesDBase 的介紹。

Blockade 很受歡迎，類似的游戲先后出現在 Atari 2600、TRS-80、蘋果 2 等早期游戲機、計算機上。但真正讓這種游戲形式紅遍全球的還是21年后隨諾基亞手機走向世界的貪吃蛇游戲——Snake。

二.相關算法

a.移動,蛇尾去掉，蛇頭加一個元素

 p.push({ x: p[p.length - 1].x + 1, y: p[p.length - 1].y });
p.shift();

b.生成蛇的食物（這里可以加一個遞歸，如果生成的位置和蛇的位置重疊，重新生成，一直遞歸下去直到沒有重疊）

 var MR = Math.random;
function drawSnakeAndFood(p) {
if (foodPositions.x == -1 && foodPositions.y == -1) {
//random____0----39
foodPositions.x = MR() * 40 | 0;
foodPositions.y = MR() * 40 | 0;
}
cxt.fillStyle = randomColor();
cxt.fillRect(foodPositions.x * width, foodPositions.y * height, height, width);
}

c.吃食物，如果蛇頭的位置和食物的位置是相同的話，代表吃到了食物，不進行p.shift()，這樣的話蛇身就變長

 if (p[p.length - 1].x == foodPositions.x && p[p.length - 1].y == foodPositions.y) {
foodPositions.x = -1;
foodPositions.y = -1;
} else {
clearColor(p[0]);
p.shift();
}

d.GameOver判斷

gameover分兩種，

第一種是撞到墻壁的障礙物

if (p[p.length - 1].x < 0 || p[p.length - 1].x > 39 || p[p.length - 1].y < 0 || p[p.length - 1].y > 39) {
gameOver = true;
}

第二種是撞到自己的身體

function IsInSnake(bodyPositions, p) {
for (i = 0; i < bodyPositions.length - 1; i++) {
if (bodyPositions[i].x == p.x && bodyPositions[i].y == p.y ) {
return true;
}
}
return false;
}

d.控制核心（Jscex）

 var gameAsync = eval(Jscex.compile("async", function (p) {
while (true) {
$await(Jscex.Async.sleep(100));
if (p[p.length - 1].x < 0 || p[p.length - 1].x > 39 || p[p.length - 1].y < 0 || p[p.length - 1].y > 39) {
gameOver = true;
}
``````
``````
``````
if (IsInSnake(p, { x: p[p.length - 1].x, y: p[p.length - 1].y })) {
gameOver = true;
}
drawSnakeAndFood(p);
if (gameOver) {
drawGameOver();
document.getElementById("btnReset").disabled = "";
break;
}
}
}));

that’s all！就這么簡單。這可謂是html5 canvas編程入門最合適不過的游戲了。

您可能還喜歡：

javascript異步編程系列【目錄】

HTML5版3D實驗室系列【目錄】