javascript异步编程系列【十一】—-HTML5 canvas编程入门游戏发布 – 【当耐特】 – 博客园

一.简介

1976年,Gremlin平台推出了一款经典街机游戏Blockade。游戏中,两名玩家分别控制一个角色在屏幕上移动,所经之处砌起围栏。角色只能向左、右方向90度转弯,游戏目标保证让对方先撞上屏幕或围栏。 听起来有点复杂?其实就是下面这个样子:

基本上就是两条每走一步都会长大的贪吃蛇比谁后完蛋,玩家要做的就是避免撞上障碍物和越来越长的身体。更多照片、视频可以看 GamesDBase 的介绍。

Blockade 很受欢迎,类似的游戏先后出现在 Atari 2600、TRS-80、苹果 2 等早期游戏机、计算机上。但真正让这种游戏形式红遍全球的还是21年后随诺基亚手机走向世界的贪吃蛇游戏——Snake。

image

 

 

 

二.相关算法

a.移动,蛇尾去掉,蛇头加一个元素

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

 

b.生成蛇的食物(这里可以加一个递归,如果生成的位置和蛇的位置重叠,重新生成,一直递归下去直到没有重叠)

?
1
2
3
4
5
6
7
8
9
10
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(),这样的话蛇身就变长

?
1
2
3
4
5
6
7
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分两种,

第一种是撞到墙壁的障碍物

?
1
2
3
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;
}

 

第二种是撞到自己的身体

?
1
2
3
4
5
6
7
8
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)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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编程入门最合适不过的游戏了。

来源URL:http://www.cnblogs.com/iamzhanglei/archive/2011/10/08/2200858.html