HTML5 게임 프레임워크 cnGameJS 개발 기록-게임 맵 객체-H5 튜토리얼-php.cn

HTML5 게임 프레임워크 cnGameJS 개발 기록-게임 맵 객체

黄舟

풀어 주다： 2017-03-24 16:18:31

원래의

2984명이 탐색했습니다.

1. 게임 맵객체는 언제 필요한가요?

게임 맵 개체는 탱크 전투, 푸시박스 등의 게임에 적합합니다. 이러한 게임의 지도는 작은 격자로 구성되어 있습니다. 이러한 종류의 지도는 게임 지도 개체를 사용하여 쉽게 생성할 수 있습니다.

2. 예시: 지도 생성

지도 객체를 사용하면 소량의 코드만으로 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>

로그인 후 복사

생성된 지도:

지도로 바로 이동 2차원 행렬을 사용하여 어떤 값이 어떤 그림에 해당하는지 지도 객체에 알려주면 지도가 생성될 수 있습니다.

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

로그인 후 복사

그리기 메서드에서는 시작 좌표를 기준으로 지도 그리드를 하나씩 그립니다. 그리고 그리드 크기. 그리드는 2차원 행렬의 각 요소와 일대일 대응을 갖습니다. 이미지 선택의 기본은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!