html5游戏与传统游戏可比性,一个HTML 5 躲避游戏的实现(3)

Step 3 游戏动起来！

先添加一个事件来接收键盘的动作，上下左右用对应的ascii码。因为游戏并不是摁一下方向键，就移动一段距离。而是，判断一个时间间隔内的动作(最后的动作，中间有可能会变化，故用数组保存最后结果)。

varkeysDown= {};

addEventListener("keydown", function (e) {

keysDown[e.keyCode] = true;//如果有"keydown"这个动作，即摁下某键，就会存进keysDown数组

}, false);

addEventListener("keyup", function (e) {

delete keysDown[e.keyCode];

});

下面上主函数

varmain=function() {

varnow=Date.now();

vardelta=now- then;

Move(delta / 1000);//每次间隔时间根本不是1ms，比1ms要大得多

Draw();

Check();

then=now;

}

main函数就是主函数，就是一个刷新所执行的函数。now、then两个变量记录两次刷新的时间间隔，这个时间间隔并不是固定的，一般为几百毫秒。delta 是两者之差，单位为毫秒。下面依次解释各个函数:Move()用来计算英雄和怪物的新位置。Draw()用来画背景、人物、文字。Check()用来检查，怪物和英雄是否相撞。

Move():

varMove=function(modifier) {

if (38 in keysDown) {

hero.y-=hero.speed * modifier;

}

if (40 in keysDown) {

hero.y += hero.speed * modifier;

}

if (37 in keysDown) {

hero.x-=hero.speed * modifier;

}

if (39 in keysDown) {

hero.x += hero.speed * modifier;

}

if (hero.x>= canvas.width - 32) {

hero.x=0;

}else if (hero.x<= 0) {

hero.x=canvas.width - 32;

}

if (hero.y>= canvas.height - 32) {

hero.y=0;

}else if (hero.y<= 0) {

hero.y=canvas.height - 32;

}

for (vari=0; i<= monsterSum; i++) {

monsterList[i].move(modifier);

}

}

这里很好理解，判断这段时间间隔英雄的动作。算出新位置后，判断英雄是否跑出了画布，跑出了就从另一头出来(感谢 @昭曈 的创意)。接下来依次调用各个怪物的move函数，计算他们的新位置。

Draw():

varDraw=function() {

if (bgReady) {

ctx.drawImage(bgImage, 0 ,0);

}

if (heroReady) {

ctx.drawImage(heroImage, hero.x, hero.y);

}

if (monsterReady) {

for (vari=0; i<= monsterSum; i++)

ctx.drawImage(monsterImage, monsterList[i].x, monsterList[i].y);

}

ctx.fillStyle="rgb(250, 250, 250)";

ctx.font="24px Helvetica";

ctx.textAlign="left";

ctx.textBaseline="top";

last=Date.now() - start;

ctx.fillText(last/1000, 32, canvas.height - 64);

}

前三个函数类似，就是如果准备好了图片就画东西上去(前面的三个ready函数派上了用场)。下面先定义了文字的style，然后计算出时间间隔last，然后画上去。

Check():

varCheck=function() {

if (monsterSum != Math.floor(last / 5000)){//如果时间经过5秒就增加一个怪兽实例

monsterSum ++;

monsterList[monsterSum] = new monster();

}

for (vari=0; i<= monsterSum; i++) {

if (

(monsterList[i].x - 32)<= hero.x

&& hero.x<= (monsterList[i].x + 32)

&& (monsterList[i].y - 32)<= hero.y

&& hero.y<= (monsterList[i].y + 32)

) {

end=Date.now();

alert("你坚持了" + (end - start)/1000 + "秒");

End();

}

}

}

第一步是 如果经过5秒就增加一个怪兽，然后下面一个个判断怪兽与英雄是否接触。(这里用的是矩形，@小樟 说可以用圆心，感兴趣的可以试试: ) )

大家注意到了下面用到了一个end函数。下面补充，如果不停止一直刷新就浏览器就一直动了，故要有个结束函数。

End():

varEnd=function() {

if (bgReady) {

ctx.drawImage(bgImage, 0 ,0); //留住背景

}

window.clearInterval(timer);

return;

}

用到的clearInterval()稍后会说到。