javascript异步编程系列【十一】----HTML5 canvas编程入门游戏发布

一.简介

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实验室系列【目录】