HTML5遊戲框架cnGameJS開發實錄-遊戲地圖物件篇-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5遊戲框架cnGameJS開發實錄-遊戲地圖物件篇

黄舟

Mar 24, 2017 pm 04:18 PM

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]);//绘制特定坐标的图像
                }
            }
        
        },

登入後複製

　　在draw方法中，根據起始座標和格子尺寸，逐個繪製地圖格子。格子與二維矩陣的每個元素一一對應，圖片選擇的依據就是二維矩陣對應的值，在上面的例子中，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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn