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

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

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

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

相关演示

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

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

HTML5画布Canvas基础入门

相关演示

键盘控制屌丝移动和碰撞

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

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

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

 

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

1. //键盘控制效果
2. var update = function () {
3. if (87 in keysDown) { // up
4. ds.y -= ds.speed;
5. }
6. if (83 in keysDown) { // down
7. ds.y += ds.speed;
8. }
9. if (65 in keysDown) { // left
10. ds.x -= ds.speed;
11. }
12. if (68 in keysDown) { // right
13. ds.x += ds.speed;
14. }
16. // 判断是否追上女生，即判断是否两个方框重叠
17. if (
18. ds.x <= (ns.x + 30)
19. && ns.x <= (ds.x + 30)
20. && ds.y <= (ns.y + 30)
21. && ns.y <= (ds.y + 30)
22. ) {
23. reset();
24. }
25. };

 

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

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

 

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

1. //游戏主程序，使用requestAnimationFrame生成动画效果
2. var main =function(){
3. update();
4. render();
5. requestAnimationFrame(main);
6. };

 

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

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

相关演示

添加记分牌和游戏倒计时

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

1. function gameover(){
2. setTimeout(function(){endflag=true;},10000);
3. }
5. //添加倒计时
6. function countdown(){
7. var countinterval = setInterval(function(){count--;},1000);
8. if(count===0){
9. clearInterval(countinterval);
10. }
11. }

 

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

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

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

 

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

完整的学习课程，请点击如下地址：

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