首页技术文章HTML5画布游戏基础框架代码解析:屌丝追女神

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

发布时间：2025-04-25 17:01:57
·
10 阅读
·
0 评论
文章标签： 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秒倒计时后，游戏结束

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