HTML5 ゲームフレームワーク cnGameJS 開発記録 - ゲームループ

ゲーム全体がゲームループで行われるため、ゲームループはゲームの核心部分と言えます。 ループするたびに、ゲームオブジェクトのプロパティを更新し、ゲーム要素を描画します。

前のリソースの読み込みの記事で述べたように、リソースの読み込みが完了すると、ゲームの開始時にゲーム ループが開始されます。 次に、コードのこの部分を確認してみましょう:

/**
     *图像加载完毕的处理程序
    **/    
    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);    
    }

まず第一に、ゲーム ループ 関数 は、呼び出し後に constructor の形式で呼び出されることも確認する必要があります。 、オブジェクトは初期化されます:

/**
         *初始化
        **/
        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;
        },

ユーザー 設定する必要があるパラメーターは 1 つだけです。それは fps (フレーム/秒) です。このパラメーターに基づいて、1 秒あたりに実行されるフレーム数を計算できます。ゲームループを実行するのに数ミリ秒かかります (間隔パラメーター)。 さらに、ループは一時停止と停止の 2 つのモードをサポートします。

/**
         *开始循环
        **/    
        start:function(){
            if(this.stop){        //如果是结束状态则可以开始
                this.stop=false;
                
                this.now=new Date().getTime();
                this.startTime=new Date().getTime();
                this.duration=0;    
                loop.call(this)();    
            }    
        },

ループが開始されると、ループの継続時間を継続的に更新できるように開始時間を保存できます。次に、loop 関数を呼び出してループを実装します。

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 中国語 Web サイトの他の関連記事を参照してください。