HTML5 ゲームフレームワーク cnGameJS 開発記録 - ゲームループ-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-03-25 15:08:06

オリジナル

1765 人が閲覧しました

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

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

/**
     *图像加载完毕的处理程序
    **/    
    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 サイトの他の関連記事を参照してください。