© 拿破仑的破轮
Powered by LOFTER

【课程速递】HTML5画布游戏基础框架代码解析:屌丝追女神

极客标签编程学习和分享平台:

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

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

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

相关演示

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

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

   HTML5画布Canvas基础入门 

相关演示

  键盘控制屌丝移动和碰撞

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

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

  1. //键盘事件处理

  2. addEventListener("keydown",function(e){

  3. keysDown[e.keyCode]=true;

  4. },false);

  5. addEventListener("keyup",function(e){

  6. delete keysDown[e.keyCode];

  7. },false);

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

  1. //键盘控制效果

  2. var update =function(){

  3. if(87in keysDown){//  up

  4. ds.y -= ds.speed;

  5. }

  6. if(83in keysDown){//  down

  7. ds.y += ds.speed;

  8. }

  9. if(65in keysDown){//  left

  10. ds.x -= ds.speed;

  11. }

  12. if(68in keysDown){//  right

  13. ds.x += ds.speed;

  14. }

  15. // 判断是否追上女生,即判断是否两个方框重叠

  16. if(

  17. ds.x <=(ns.x +30)

  18. && ns.x <=(ds.x +30)

  19. && ds.y <=(ns.y +30)

  20. && ns.y <=(ds.y +30)

  21. ){

  22. reset();

  23. }

  24. };

以上代码中,使用两个绘制正方向的坐标来判断是否重叠,重叠则调用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. }

  4. //添加倒计时

  5. function countdown(){

  6. var countinterval = setInterval(function(){count--;},1000);

  7. if(count===0){

  8. clearInterval(countinterval);

  9. }

  10. }

以上方法控制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画布游戏基础框架代码解析:屌丝追女神


评论
热度 ( 1 )
  1. 拿破仑的破轮极客标签编程学习和分享平台 转载了此文字
TOP