게임 전체가 게임 루프에서 진행되기 때문에 게임 루프는 게임의 핵심이라고 할 수 있습니다. 루프를 실행할 때마다 게임 개체의 속성이 업데이트되고 게임 요소가 그려집니다.
이전 리소스 로딩 기사에서 언급했듯이 리소스 로딩이 완료된 후 게임을 시작할 때 게임 루프가 시작됩니다. 이제 코드의 이 부분을 검토해 보겠습니다.
/** *图像加载完毕的处理程序 **/ var imgLoad=function(self){ return function(){ self.loadedCount+=1; self.loadedImgs[this.srcPath]=this; this.onLoad=null; //保证图片的onLoad执行一次后销毁 self.loadedPercent=Math.floor(self.loadedCount/self.sum*100); self.onLoad&&self.onLoad(self.loadedPercent); if(self.loadedPercent===100){ self.loadedCount=0; self.loadedPercent=0; loadingImgs={}; if(self.gameObj&&self.gameObj.initialize){ self.gameObj.initialize(); if(cg.loop&&!cg.loop.stop){//结束上一个循环 cg.loop.end(); } cg.loop=new cg.GameLoop(self.gameObj);//开始新游戏循环 cg.loop.start(); } } } }
이미지 리소스가 로드된 후 게임 개체의 초기화 메서드를 호출하고 게임 루프 개체가 존재하는지 확인합니다. 존재하는 경우 이전 루프를 종료합니다(이 상황은 일반적으로 레벨을 전환하고 새 게임 개체를 전달할 때 발생합니다). 그렇지 않으면 게임 루프가 시작됩니다.
좋습니다. 이제 게임 루프의 구현 코드를 살펴보겠습니다.
var gameLoop=function(gameObj,options){ if(!(this instanceof arguments.callee)){ return new arguments.callee(gameObj,options); } this.init(gameObj,options); }
우선 게임 루프 함수 도 이를 기반으로 하는지 확인해야 합니다. 생성자 에서 호출 후 개체를 초기화합니다.
/** *初始化 **/ init:function(gameObj,options){ /** *默认对象 **/ var defaultObj={ fps:30 }; options=options||{}; options=cg.core.extend(defaultObj,options); this.gameObj=gameObj; this.fps=options.fps; interval=1000/this.fps; this.pause=false; this.stop=true; },
사용자가 설정해야 하는 매개변수는 fps(초당 프레임 수) 단 하나뿐입니다. 이 매개변수는 초당 실행되는 프레임 수입니다. 이 매개변수에 따라 게임 루프를 실행하는 데 몇 밀리초가 소요되는지 계산할 수 있습니다(간격 매개변수). 또한 루프는 일시 중지와 중지의 두 가지 모드를 지원합니다.
/** *开始循环 **/ start:function(){ if(this.stop){ //如果是结束状态则可以开始 this.stop=false; this.now=new Date().getTime(); this.startTime=new Date().getTime(); this.duration=0; loop.call(this)(); } },
루프가 시작되면 시작 시간을 저장하여 루프 지속 시간을 지속적으로 업데이트할 수 있습니다. 그런 다음 루프 함수를 호출하여 루프를 구현합니다.
var timeId; var interval; /** *循环方法 **/ var loop=function(){ var self=this; return function(){ if(!self.pause&&!self.stop){ self.now=new Date().getTime(); self.duration=self.startTime-self.now; if(self.gameObj.update){ self.gameObj.update(); } if(self.gameObj.draw){ cg.context.clearRect(0,0,cg.width,cg.height); self.gameObj.draw(); } } timeId=window.setTimeout(arguments.callee,interval); } }
일시 중지되거나 중지되지 않으면 게임 개체의 업데이트 및 그리기가 호출됩니다. (게임 개체의 업데이트는 레벨의 모든 요소 업데이트를 호출하는 역할을 담당하며, 무승부는 사실입니다). 그런 다음 setTimeout을재귀적으로호출하여 자신을 호출하여 루프를 구현합니다.
게임루프 전체 소스코드 :
/** * *游戏循环 * **/ cnGame.register("cnGame",function(cg){ var timeId; var interval; /** *循环方法 **/ var loop=function(){ var self=this; return function(){ if(!self.pause&&!self.stop){ self.now=new Date().getTime(); self.duration=self.startTime-self.now; if(self.gameObj.update){ self.gameObj.update(); } if(self.gameObj.draw){ cg.context.clearRect(0,0,cg.width,cg.height); self.gameObj.draw(); } } timeId=window.setTimeout(arguments.callee,interval); } } var gameLoop=function(gameObj,options){ if(!(this instanceof arguments.callee)){ return new arguments.callee(gameObj,options); } this.init(gameObj,options); } gameLoop.prototype={ /** *初始化 **/ init:function(gameObj,options){ /** *默认对象 **/ var defaultObj={ fps:30 }; options=options||{}; options=cg.core.extend(defaultObj,options); this.gameObj=gameObj; this.fps=options.fps; interval=1000/this.fps; this.pause=false; this.stop=true; }, /** *开始循环 **/ start:function(){ if(this.stop){ //如果是结束状态则可以开始 this.stop=false; this.now=new Date().getTime(); this.startTime=new Date().getTime(); this.duration=0; loop.call(this)(); } }, /** *继续循环 **/ run:function(){ this.pause=false; }, /** *暂停循环 **/ pause:function(){ this.pause=true; }, /** *停止循环 **/ end:function(){ this.stop=true; window.clearTimeout(timeId); } } this.GameLoop=gameLoop; });
위 내용은 HTML5 게임 프레임워크 cnGameJS 개발 기록 - 게임 루프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!