Cadre de jeu HTML5 enregistrement de développement cnGameJS - explication détaillée du code du module de chargement des ressources

1. Fonction　　

Ce module est l'entrée du jeu. Nous chargeons les ressources via ce module et appelons la fonction d'entrée de l'objet du jeu une fois le chargement des ressources terminé. De plus, ce module comprend également la commutation entre les scènes de jeu, ainsi que le calcul et l'affichage du pourcentage de chargement.

Lors du démarrage du jeu, transmettez d'abord la liste des ressources qui doivent être chargées, puis transmettez l'objet du jeu, et enfin transmettez la fonction qui est appelée après le chargement de chaque ressource. Cette fonction peut obtenir. le pourcentage de chargement. Comme suit :

cnGame.loader.start(["src1","src2","src3"],gameObj,function(loadedPercent){});

Dans ce cas, les trois ressources d'image transmises précédemment seront chargées en premier, et chaque fois qu'une image est chargée, la fonction de rappel suivante , <🎜 sera être appelé. >Cette fonction peut obtenir le pourcentage de chargement, implémenter l'interface de chargement et indiquer à l'utilisateur la progression actuelle du chargement et d'autres fonctions. Une fois le chargement terminé, appelez la méthode initialize de l'objet de jeu gameObj pour démarrer le jeu.

2. Implémentation spécifique :

/**
     *图像加载器
    **/    
    var loader={
        sum:0,            //图片总数
        loadedCount:0,    //图片已加载数
        loadingImgs:{}, //未加载图片集合
        loadedImgs:{},    //已加载图片集合
        /**
         *图像加载，之后启动游戏
        **/    
        start:function(src,gameObj,onLoad){//可传入src数组或单个src "xxx.jpg" or ["xxx.jpg","ggg,gif","www.png"]
        
            if(cg.core.isArray(src)){ 
                this.sum=src.length;
                for(var i=0,len=src.length;i<len;i++){
                    this.gameObj=gameObj;
                    this.onLoad=onLoad;
                    this.loadingImgs[src[i]]=new Image();
                    this.loadingImgs[src[i]].onload=imgLoad(this);
                    this.loadingImgs[src[i]].src=src[i];
                    this.loadingImgs[src[i]].srcPath=src[i];//没有经过自动变换的src
                }
                    
            }
            
        }
        
    }

array et génère un objet image pour le chargement. De plus, nous devons enregistrer srcPath pour chaque objet image, qui est le paramètre src d'origine (car par défaut le navigateur convertira le paramètre src en un chemin d'image complet) . L'étape suivante consiste à ajouter un gestionnaire onLoad pour chaque image. Nous devons calculer le pourcentage de chargement dans ce gestionnaire et enregistrer l'objet image chargé dans l'objetloadImgs pour faciliter son utilisation ultérieure par les utilisateurs. Le processus de chargement de l'image est le suivant :

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

Enfin, vous devez supprimer le gestionnaire de l'image (car l'image a été chargée, le gestionnaire est inutile et peut être libéré pour économiser les ressources mémoire). Lorsque le pourcentage de chargement est de 100%, toutes les valeurs seront réinitialisées et les chargementImgs seront libérés pour le prochain chargement des ressources. De plus, la boucle du jeu sera également démarrée (la boucle de jeu). est responsable de tous les objets de jeu dans chaque image) mis à jour et dessiné)

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!