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

HTML5 ゲームフレームワーク cnGameJS 開発記録 - ゲームマップオブジェクト

黄舟

リリース： 2017-03-24 16:18:31

オリジナル

3092 人が閲覧しました

1. ゲームマップオブジェクトを使用する必要があるのはどのような場合ですか?

ゲームマップオブジェクトは、戦車戦、プッシュボックスなどのゲームに適しています。これらのゲームのマップは小さなグリッドで構成されており、この種のマップはゲームマップオブジェクトを使用して簡単に生成できます。

2. 例: マップを生成する

マップオブジェクトを使用すると、二次元配列に基づいてマップを生成するために必要なコードはほんのわずかです。

コード：

<body>
<canvas id="gameCanvas">请使用支持canvas的浏览器查看</canvas>
</body>
<script src="http://files.cnblogs.com/Cson/cnGame_v1.0.js"></script>
<script>
/*    地图绘制test    */

cnGame.init(&#39;gameCanvas&#39;,{width:200,height:200});
var gameObj={};
gameObj.initialize=function(){

    var mapMatrix=[ 
                    [1,1,1,1,1],
                    [1,0,1,0,1],
                    [1,0,0,0,1],
                    [1,1,0,0,1],
                    [1,1,1,1,1]
                   ];
                 
    var map=cnGame.Map(mapMatrix,{cellSize:[40,40]});
    map.draw({"1":{src:"brick.gif",x:0,y:0},"0":{src:"floor.png",x:0,y:0}});
}
cnGame.loader.start(["brick.gif","floor.png"],gameObj);
</script>

ログイン後にコピー

生成された地図：

地図の二次元行列を転送し、どの値がどの絵に対応するかを地図オブジェクトに伝えれば地図を生成できます。

3.実装

次に、コードを使用してマップオブジェクトを実装する方法を説明します。まず初期化関数を見てみましょう:

map.prototype={
        /**
         *初始化
        **/    
        init:function(mapMatrix,options){
            /**
             *默认对象
            **/    
            var defaultObj={
                cellSize:[32,32],   //方格宽，高
                beginX:0,            //地图起始x
                beginY:0            //地图起始y
        
            };
            options=options||{};
            options=cg.core.extend(defaultObj,options);
            this.mapMatrix=mapMatrix;
            this.cellSize=options.cellSize;
            this.beginX=options.beginX;
            this.beginY=options.beginY;
            this.row=mapMatrix.length;//有多少行
                
        },

ログイン後にコピー

マップオブジェクトを決定するには、まずマップグリッドのサイズ、マップの開始 x 座標、および開始 y 座標を決定する必要があるパラメーターが含まれます。次に、これらのパラメーターに基づいてマップオブジェクトを生成して描画し、パラメーターに基づいてマップを描画する方法を確認します:

/**
         *根据map矩阵绘制map
        **/    
        draw:function(options){//options：{"1":{src:"xxx.png",x:0,y:0},"2":{src:"xxx.png",x:1,y:1}}
            var mapMatrix=this.mapMatrix;
            var beginX=this.beginX;
            var beginY=this.beginY;
            var cellSize=this.cellSize;
            var currentRow;
            var currentCol
            var currentObj;
            var row=this.row;
            var img;
            for(var i=beginY,ylen=beginY+row*cellSize[1];i<ylen;i+=cellSize[1]){    //根据地图矩阵，绘制每个方格
                    currentRow=(i-beginY)/cellSize[1];
                for(var j=beginX,xlen=beginX+mapMatrix[currentRow].length*cellSize[0];j<xlen;j+=cellSize[0]){
                    currentCol=(j-beginX)/cellSize[0];
                    currentObj=options[mapMatrix[currentRow][currentCol]];
                    img=cg.loader.loadedImgs[currentObj.src];
                    cg.context.drawImage(img,currentObj.x,currentObj.y,cellSize[0],cellSize[1],j,i,cellSize[0],cellSize[1]);//绘制特定坐标的图像
                }
            }
        
        },

ログイン後にコピー

描画メソッドでは、開始座標とグリッドサイズに基づいてマップグリッドを 1 つずつ描画します。。グリッドは 2 次元マトリックスの各要素と 1 対 1 に対応しており、上の例では、2 次元マトリックスの対応する値が 1 で描画され、2 で床が描画されます。

/**
         *获取特定对象在地图中处于的方格的值
        **/
        getPosValue:function(elem){
            return this.mapMatrix[Math.floor(elem.y/this.cellSize[1])][Math.floor(elem.x/this.cellSize[0])];
            
        }

ログイン後にコピー

また、getPosValueを通じて要素のマップ位置の値を取得することができます。このメソッドは、ゲームオブジェクトのマップ位置を決定するときに役立ちます。

マップオブジェクトのすべてのソースコード:

/**
 *
 *地图
 *
**/
cnGame.register("cnGame",function(cg){
                                                            
    var map=function(mapMatrix,options){
        
        if(!(this instanceof arguments.callee)){
            return new arguments.callee(mapMatrix,options);
        }
        this.init(mapMatrix,options);
    }
    map.prototype={
        /**
         *初始化
        **/    
        init:function(mapMatrix,options){
            /**
             *默认对象
            **/    
            var defaultObj={
                cellSize:[32,32],   //方格宽，高
                beginX:0,            //地图起始x
                beginY:0            //地图起始y
        
            };
            options=options||{};
            options=cg.core.extend(defaultObj,options);
            this.mapMatrix=mapMatrix;
            this.cellSize=options.cellSize;
            this.beginX=options.beginX;
            this.beginY=options.beginY;
            this.row=mapMatrix.length;//有多少行
                
        },
        /**
         *根据map矩阵绘制map
        **/    
        draw:function(options){//options：{"1":{src:"xxx.png",x:0,y:0},"2":{src:"xxx.png",x:1,y:1}}
            var mapMatrix=this.mapMatrix;
            var beginX=this.beginX;
            var beginY=this.beginY;
            var cellSize=this.cellSize;
            var currentRow;
            var currentCol
            var currentObj;
            var row=this.row;
            var img;
            for(var i=beginY,ylen=beginY+row*cellSize[1];i<ylen;i+=cellSize[1]){    //根据地图矩阵，绘制每个方格
                    currentRow=(i-beginY)/cellSize[1];
                for(var j=beginX,xlen=beginX+mapMatrix[currentRow].length*cellSize[0];j<xlen;j+=cellSize[0]){
                    currentCol=(j-beginX)/cellSize[0];
                    currentObj=options[mapMatrix[currentRow][currentCol]];
                    img=cg.loader.loadedImgs[currentObj.src];
                    cg.context.drawImage(img,currentObj.x,currentObj.y,cellSize[0],cellSize[1],j,i,cellSize[0],cellSize[1]);//绘制特定坐标的图像
                }
            }
        
        },
        /**
         *获取特定对象在地图中处于的方格的值
        **/
        getPosValue:function(elem){
            return this.mapMatrix[Math.floor(elem.y/this.cellSize[1])][Math.floor(elem.x/this.cellSize[0])];
            
        }
        
    }
    this.Map=map;
                                       
});

ログイン後にコピー

以上がHTML5 ゲームフレームワーク cnGameJS 開発記録 - ゲームマップオブジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。