当前位置:Gxlcms > html代码 > HTML5游戏框架cnGameJS开发实录-游戏循环篇

HTML5游戏框架cnGameJS开发实录-游戏循环篇

时间:2021-07-01 10:21:17 帮助过:27人阅读

  由于整个游戏都在一个游戏循环中进行,所以游戏循环可以说是游戏的核心部分。每次循环时,更新游戏对象的属性,以及绘制游戏元素。

  在之前的资源加载篇已经提到过,在资源加载完成后,启动游戏的同时会启动一个游戏循环,现在再来回顾这部分代码:

  1. /**
  2. *图像加载完毕的处理程序
  3. **/
  4. var imgLoad=function(self){
  5. return function(){
  6. self.loadedCount+=1;
  7. self.loadedImgs[this.srcPath]=this;
  8. this.onLoad=null; //保证图片的onLoad执行一次后销毁
  9. self.loadedPercent=Math.floor(self.loadedCount/self.sum*100);
  10. self.onLoad&&self.onLoad(self.loadedPercent);
  11. if(self.loadedPercent===100){
  12. self.loadedCount=0;
  13. self.loadedPercent=0;
  14. loadingImgs={};
  15. if(self.gameObj&&self.gameObj.initialize){
  16. self.gameObj.initialize();
  17. if(cg.loop&&!cg.loop.stop){//结束上一个循环
  18. cg.loop.end();
  19. }
  20. cg.loop=new cg.GameLoop(self.gameObj);//开始新游戏循环
  21. cg.loop.start();
  22. }
  23. }
  24. }
  25. }

  图像资源加载完毕后,调用游戏对象的initialize方法,并且判断游戏循环对象是否存在,如果存在,则结束上一个循环(这种情况一般在切换关卡,传入新的游戏对象时出现),否则建立并开始游戏循环。

  好了,现在正式来看看游戏循环的实现代码:

  1. var gameLoop=function(gameObj,options){
  2. if(!(this instanceof arguments.callee)){
  3. return new arguments.callee(gameObj,options);
  4. }
  5. this.init(gameObj,options);
  6. }

  首先游戏循环函数也必须保证是以构造函数的形式调用,在调用之后,为对象初始化:

  1. /**
  2. *初始化
  3. **/
  4. init:function(gameObj,options){
  5. /**
  6. *默认对象
  7. **/
  8. var defaultObj={
  9. fps:30
  10. };
  11. options=options||{};
  12. options=cg.core.extend(defaultObj,options);
  13. this.gameObj=gameObj;
  14. this.fps=options.fps;
  15. interval=1000/this.fps;
  16. this.pause=false;
  17. this.stop=true;
  18. },

  用户需要设置的参数只有一个,就是fps(frame per second),该参数是每秒钟执行的帧的次数,根据该参数,我们可以计算出多少毫秒执行一次游戏循环(interval参数)。另外循环支持暂停和停止两种模式。

  1. /**
  2. *开始循环
  3. **/
  4. start:function(){
  5. if(this.stop){ //如果是结束状态则可以开始
  6. this.stop=false;
  7. this.now=new Date().getTime();
  8. this.startTime=new Date().getTime();
  9. this.duration=0;
  10. loop.call(this)();
  11. }
  12. },

  当循环开始,我们可以保存开始的时间,这样就可以不断更新循环所经历的时间(duration)。之后调用loop这个似有函数,实现循环。

  1. var timeId;
  2. var interval;
  3. /**
  4. *循环方法
  5. **/
  6. var loop=function(){
  7. var self=this;
  8. return function(){
  9. if(!self.pause&&!self.stop){
  10. self.now=new Date().getTime();
  11. self.duration=self.startTime-self.now;
  12. if(self.gameObj.update){
  13. self.gameObj.update();
  14. }
  15. if(self.gameObj.draw){
  16. cg.context.clearRect(0,0,cg.width,cg.height);
  17. self.gameObj.draw();
  18. }
  19. }
  20. timeId=window.setTimeout(arguments.callee,interval);
  21. }
  22. }

  如果不是暂停或停止,则调用游戏对象的update和draw(注意游戏对象的update负责调用该关卡所有元素的update,draw也一样)。之后调用setTimeout递归调用自己,实现循环。

游戏循环所有源码:

  1. /**
  2. *
  3. *游戏循环
  4. *
  5. **/
  6. cnGame.register("cnGame",function(cg){
  7. var timeId;
  8. var interval;
  9. /**
  10. *循环方法
  11. **/
  12. var loop=function(){
  13. var self=this;
  14. return function(){
  15. if(!self.pause&&!self.stop){
  16. self.now=new Date().getTime();
  17. self.duration=self.startTime-self.now;
  18. if(self.gameObj.update){
  19. self.gameObj.update();
  20. }
  21. if(self.gameObj.draw){
  22. cg.context.clearRect(0,0,cg.width,cg.height);
  23. self.gameObj.draw();
  24. }
  25. }
  26. timeId=window.setTimeout(arguments.callee,interval);
  27. }
  28. }
  29. var gameLoop=function(gameObj,options){
  30. if(!(this instanceof arguments.callee)){
  31. return new arguments.callee(gameObj,options);
  32. }
  33. this.init(gameObj,options);
  34. }
  35. gameLoop.prototype={
  36. /**
  37. *初始化
  38. **/
  39. init:function(gameObj,options){
  40. /**
  41. *默认对象
  42. **/
  43. var defaultObj={
  44. fps:30
  45. };
  46. options=options||{};
  47. options=cg.core.extend(defaultObj,options);
  48. this.gameObj=gameObj;
  49. this.fps=options.fps;
  50. interval=1000/this.fps;
  51. this.pause=false;
  52. this.stop=true;
  53. },
  54. /**
  55. *开始循环
  56. **/
  57. start:function(){
  58. if(this.stop){ //如果是结束状态则可以开始
  59. this.stop=false;
  60. this.now=new Date().getTime();
  61. this.startTime=new Date().getTime();
  62. this.duration=0;
  63. loop.call(this)();
  64. }
  65. },
  66. /**
  67. *继续循环
  68. **/
  69. run:function(){
  70. this.pause=false;
  71. },
  72. /**
  73. *暂停循环
  74. **/
  75. pause:function(){
  76. this.pause=true;
  77. },
  78. /**
  79. *停止循环
  80. **/
  81. end:function(){
  82. this.stop=true;
  83. window.clearTimeout(timeId);
  84. }
  85. }
  86. this.GameLoop=gameLoop;
  87. });

以上就是HTML5游戏框架cnGameJS开发实录-游戏循环篇的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行