Cadre de jeu HTML5 Développement cnGameJS boucle de jeu d'enregistrement

Étant donné que l'ensemble du jeu se déroule dans une boucle de jeu, la boucle de jeu peut être considérée comme la partie centrale du jeu. À chaque passage de la boucle, les propriétés de l'objet du jeu sont mises à jour et les éléments du jeu sont dessinés.

Comme mentionné dans l'article précédent sur le chargement des ressources, une fois le chargement des ressources terminé, une boucle de jeu sera lancée au démarrage du jeu. Passons maintenant en revue cette partie du code :

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

Une fois les ressources d'image chargées, appelez la méthode initialize de l'objet de jeu et déterminez si l'objet de boucle de jeu existe. S'il existe, terminez la boucle précédente (cette situation se produit généralement lors du changement de niveau et du passage de nouveaux objets de jeu. ). Sinon la boucle de jeu est établie et démarrée.

Bon, regardons maintenant le code d'implémentation de la boucle de jeu :

var gameLoop=function(gameObj,options){
    
        if(!(this instanceof arguments.callee)){
            return new arguments.callee(gameObj,options);
        }
        this.init(gameObj,options);    
    }

Tout d'abord, la fonction boucle de jeu

doit également s'assurer qu'elle est basé sur le constructeur< Appelé sous la forme de 🎜>, après l'appel, initialisez l'objet :

Il n'y a qu'un seul paramètre que l'utilisateur doit définir, qui est fps ( frame par seconde). Ce paramètre est le nombre d'images exécutées par seconde, en fonction de ce paramètre, nous pouvons calculer le nombre de millisecondes nécessaires pour exécuter la boucle de jeu (paramètre d'intervalle).

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

De plus, la boucle prend en charge deux modes : pause et arrêt.

Lorsque la boucle démarre, nous pouvons enregistrer l'heure de début afin que la durée de la boucle puisse être continuellement mise à jour. Appelez ensuite la fonction loop pour implémenter la boucle.

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

S'il n'est pas mis en pause ou arrêté, la mise à jour et le tirage de l'objet de jeu sont appelés (à noter que la mise à jour de l'objet de jeu se charge d'appeler la mise à jour de tous les éléments du niveau, et il en va de même pour le tirage au sort). Appelez ensuite setTimeout

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);
        }
    }

récursivement

pour s'appeler afin d'implémenter une boucle. Tout le code source de la boucle du jeu :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!