HTML5-Spielframework cnGameJS-Entwicklungsaufzeichnung-Spielschleife-H5-Tutorial-php.cn

HTML5-Spielframework cnGameJS-Entwicklungsaufzeichnung-Spielschleife

黄舟

Freigeben： 2017-03-25 15:08:06

Original

1765 Leute haben es durchsucht

Da das gesamte Spiel in einer Spielschleife stattfindet, kann man sagen, dass die Spielschleife der Kernbestandteil des Spiels ist. Jedes Mal, wenn die Schleife durchlaufen wird, werden die Eigenschaften des Spielobjekts aktualisiert und die Spielelemente werden gezeichnet.

Wie im vorherigen Artikel zum Laden von Ressourcen erwähnt, wird beim Starten des Spiels eine Spielschleife gestartet:

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

Nach dem Login kopieren

Rufen Sie nach dem Laden der Bildressourcen die Initialisierungsmethode des Spielobjekts auf und ermitteln Sie, ob das Spielschleifenobjekt vorhanden ist. Beenden Sie die vorherige Schleife (diese Situation tritt normalerweise auf, wenn Sie Ebenen wechseln und neue Spielobjekte übergeben). ). Ansonsten wird die Spielschleife aufgebaut und gestartet.

OK, schauen wir uns nun den Implementierungscode der Spielschleife an:

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

Nach dem Login kopieren

Zunächst muss die Spielschleifen--Funktion auch dafür sorgen, dass dies der Fall ist basiert auf dem Konstruktor<. Wird in der Form 🎜> aufgerufen. Initialisieren Sie nach dem Aufruf das Objekt:

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

Nach dem Login kopieren

Es gibt nur einen Parameter, den der Benutzer festlegen muss, nämlich fps ( Frame pro Sekunde). Dieser Parameter ist die Anzahl der pro Sekunde ausgeführten Frames. Basierend auf diesem Parameter können wir berechnen, wie viele Millisekunden die Spielschleife ausführen muss (Intervallparameter).

Darüber hinaus unterstützt die Schleife zwei Modi: Pause und Stopp.

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

Nach dem Login kopieren

Wenn die Schleife startet, können wir die Startzeit speichern, sodass die Dauer der Schleife kontinuierlich aktualisiert werden kann. Rufen Sie dann die Schleifenfunktion auf, um die Schleife zu implementieren.

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

Nach dem Login kopieren

Wenn es nicht angehalten oder gestoppt wird, werden die Aktualisierung und das Zeichnen des Spielobjekts aufgerufen (beachten Sie, dass die Aktualisierung des Spielobjekts für den Aufruf der Aktualisierung aller Elemente des Levels verantwortlich ist, und das Gleiche gilt für Draw). Rufen Sie dann setTimeout

rekursivauf, um sich selbst aufzurufen und eine Schleife zu implementieren.

Gesamter Quellcode der Spielschleife:

Das obige ist der detaillierte Inhalt vonHTML5-Spielframework cnGameJS-Entwicklungsaufzeichnung-Spielschleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!