HTML5ゲームフレームワーク cnGameJS開発記録 - コア機能モジュールのコード例

ディレクトリに戻る

1.cnGameJsフレームワークコード構成

Core関数モジュール、主な機能はその後のフレームワーク開発とゲームのユーザー開発に利便性を提供することですフレームワーク全体はグローバルスコープの汚染を避けるために密閉されたパッケージ。その後、それぞれの異なるモジュールが独自のクロージャ内に置かれ、異なるモジュールの分離がより明確になります。したがって、フレームワークのモジュール分割は次のようになります:

(function(win,undefined){//最大的闭包

var fun1=function(){//各模块公用的方法
}

//这里放各个小模块，它们有各自的闭包

}(window,undefined)

それでは、他の小さなモジュールをどのように分割すればよいでしょうか?それぞれの小さなモジュールが独自の 名前空間 と独自のクロージャ を持つことを容易にするために、異なる名前空間 で独自のモジュールを展開できる register メソッドを追加しました。最初に渡す必要があるのは次の名前です。このメソッドは名前空間オブジェクトを生成します。次に、独自のメソッドを実行して、名前空間オブジェクトに対応する拡張操作を実行します:

/**
         *生成命名空间,并执行相应操作
        **/
        register:function(nameSpace,func){
            var nsArr=nameSpace.split(".");
            var parent=win;
            for(var i=0,len=nsArr.length;i<len;i++){
                (typeof parent[nsArr[i]]==&#39;undefined&#39;)&&(parent[nsArr[i]]={});
                parent=parent[nsArr[i]];
            }
            if(func){
                func.call(parent,this);    
            }
            return parent;
        }

上と同様に、最初に受信した名前空間 string を分割し、次にオブジェクトを生成します。次に、展開操作のためにユーザーが渡した関数を次のように実行します:

cnGame.register("cnGame.core",function(){this.func=function(){}});

このようにして、コア モジュールが生成され、func メソッドがモジュールに追加されます。これにより、フレームワークのコード構成が表示されます。このように:

(function(win,undefined){

var cnGame={
    register:function(nameSpace,handler){

    }
}

/*core模块*/
cnGame.register("core",function(){
  //添加该模块内容
})

/*input模块*/
cnGame.register("input",function(){
  //添加该模块内容
})

win["cnGame"]=cnGame;


})(window,undefined);

2. フレームワークの初期化

フレームワークが初期化されるとき、保存する必要があるオブジェクトは次のとおりです: canvas オブジェクト、コンテキスト オブジェクト、キャンバスの位置、サイズなど。初期化関数を見てください:

/**
         *初始化
        **/
        init:function(id,options){
            options=options||{};
            this.canvas = this.core.$(id||"canvas");    
            this.context = this.canvas.getContext('2d');
            this.width = options.width||800;
            this.height = options.height||600;
            this.title = this.core.$$('title')[0];
            canvasPos=getCanvasPos(this.canvas);
            this.x=canvasPos[0]||0;
            this.y=canvasPos[1]||0;
            this.canvas.width=this.width;
            this.canvas.height=this.height;
            this.canvas.style.left=this.x +"px";
            this.canvas.style.top=this.y +"px";
            
        },

非常に簡単で、後で使用するためにいくつかの初期化値を保存するだけです。さらに、キャンバスの位置パラメーターを取得するために getCanvasPos メソッドを呼び出していることに注目してください。このパラメーターはループしてオブジェクトの offsetsetParent を取得し、offsetLeft と offsetTop を重ね合わせてページ上のキャンバスの位置を取得します。この関数のソース コードは次のとおりです:

/**
    *获取canvas在页面的位置
    **/      
    var getCanvasPos=function(canvas){
        var left = 0;
        var top = 0;
        while (canvas.offsetParent) {
            left += canvas.offsetLeft;
            top += canvas.offsetTop;
            canvas = canvas.offsetParent;

        }
        return [left, top];

    }

3. ツール関数モジュール

その後、上記の register メソッドを使用して最初のモジュールであるコア モジュールを追加できます。このモジュールも非常にシンプルで、その主な機能は、その後のフレームワーク開発とユーザー ゲーム開発を容易にするツール機能を追加することです。 ID による要素の取得、プロトタイプ継承、オブジェクトコピー、イベントバインディングなどなど、一般的に使用されるツール関数をいくつか紹介します。なお、ブラウザごとに互換性がある場合は、毎回ブラウザの種類を判断するのではなく、最初からブラウザに合わせて機能を設定して対応する処理を行う方が効率的です。イベントバインディングを例に挙げます:

/**
        事件绑定
        **/
        this.bindHandler=(function(){
                            
                        if(window.addEventListener){
                            return function(elem,type,handler){
                                elem.addEventListener(type,handler,false);
                                
                            }
                        }
                        else if(window.attachEvent){
                            return function(elem,type,handler){
                                elem.attachEvent("on"+type,handler);
                            }
                        }
        })();

ブラウザの特性に応じて事前に異なる関数を返すことで、以降の使用時にブラウザの特性を判断する必要がなくなり、効率が向上します。

すべてのツール機能のソースコードを添付します。非常に簡単なので、モジュールについては詳しく説明しません。

りー

以上がHTML5ゲームフレームワーク cnGameJS開発記録 - コア機能モジュールのコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。