HTML5画布游戏基础框架代码解析:屌丝追女神

本课程介绍基础的HTML5游戏的基础框架代码及其游戏实现演示：屌丝追女神

最终开发完成的游戏：屌丝追女神

请使用a，w，s，d键控制灰色游戏元素移动并且靠近红色元素

相关演示

生成基础游戏人物图形和游戏背景

本节轻视频中将介绍如何使用基础的HTML5画布方法，生成游戏背景及其游戏人物，如果你对于HTML5画布不太了解，请参考如下教程：

HTML5画布Canvas基础入门

相关演示

键盘控制屌丝移动和碰撞

本节将介绍如何控制屌丝移动

首先将添加如下的键盘事件处理：

//键盘事件处理
addEventListener("keydown",function(e){
keysDown[e.keyCode]=true;
},false);
addEventListener("keyup",function(e){
delete keysDown[e.keyCode];
},false);

以上我们使用keysDown对象来存储用户按键，这样可以组合按键的效果，接下来是具体按键的控制：

//键盘控制效果
var update = function  {
if (87 in keysDown) { // up
ds.y -= ds.speed;
}
if (83 in keysDown) { // down
ds.y += ds.speed;
}
if (65 in keysDown) { // left
ds.x -= ds.speed;
}
if (68 in keysDown) { // right
ds.x += ds.speed;
}
// 判断是否追上女生，即判断是否两个方框重叠
if (
ds.x <= (ns.x + 30)
&& ns.x <= (ds.x + 30)
&& ds.y <= (ns.y + 30)
&& ns.y <= (ds.y + 30)
) {
reset;
}
};

以上代码中，使用两个绘制正方向的坐标来判断是否重叠，重叠则调用reset方法来重置生成新的“女神”坐标，reset方法如下：

//重新设置女神位置
var reset =function{
ns.x =20+(Math.random*(canvas.width -40));
ns.y =20+(Math.random*(canvas.height -40));
};

最后是游戏主程序，使用javascript的requestAnimation来生成动画，如下：

//游戏主程序，使用requestAnimationFrame生成动画效果
var main =function{
update;
render;
requestAnimationFrame(main);
};

如果你对requestAnimationFrame使用不是很了解，请参考如下课程：

使用requestAnimationFrame来实现浏览器的基础动画效果

相关演示

添加记分牌和游戏倒计时

为了统计指定时间内追到的女神，并且添加倒计时，这里我们创建如下方法：

function gameover{
setTimeout(function{endflag=true;},10000);
}
//添加倒计时
function countdown{
var countinterval = setInterval(function{count--;},1000);
if(count===0){
clearInterval(countinterval);
}
}

以上方法控制10秒内游戏结束，并且控制计分牌的显示

render方法中，添加如下代码生成记分牌：

var render =function{
if(bgReady){
ctx.drawImage(bgImage,0,0);
}
drawCharactor(ns.x, ns.y,'eb281d','ffffff');
drawCharactor(ds.x, ds.y,'AAAAAA','ffffff');
//这里添加相关的游戏积分和倒计时
ctx.fillStyle ="rgb(250, 250, 250)";
ctx.font ="18px microsoft yahei";
ctx.fillStyle ='#efb73e';
ctx.textAlign ="left";
ctx.textBaseline ="top";
if(endflag){
ctx.fillText("游戏结束：追上 "+ nsCaught +" 位女神",20,20);
}else{
ctx.fillText("倒计时("+ count +")：已追 "+ nsCaught +" 位女神",20,20);
}
};

这样可以看到倒计时效果，并且10秒倒计时后，游戏结束

完整的学习课程，请点击"阅读原文"