HTML5-Spielframework cnGameJS-Entwicklungsaufzeichnungs-Spielkartenobjekt-H5-Tutorial-php.cn

HTML5-Spielframework cnGameJS-Entwicklungsaufzeichnungs-Spielkartenobjekt

黄舟

Freigeben： 2017-03-24 16:18:31

Original

3166 Leute haben es durchsucht

1. Wann wird das Spielkartenobjekt benötigt?

Das Spielkartenobjekt eignet sich für Spiele wie Panzerschlachten und Push-Boxen. Die Karten dieser Spiele bestehen aus kleinen Gittern. Diese Art von Karte kann einfach mit dem Spielkartenobjekt erstellt werden.

2. Beispiel: Karte generieren

Mithilfe des Kartenobjekts ist nur wenig Code erforderlich, um eine Karte basierend auf dem

zweidimensionalen zu generieren Array.

Code:

<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>

Nach dem Login kopieren

Generierte Karte:

Einfach Enter übertragen die zweidimensionale Matrix der Karte und teilen dem Kartenobjekt mit, welcher Wert welchem Bild entspricht, um eine Karte zu generieren.

3. Implementierung

Als nächstes erklären wir, wie das Kartenobjekt mithilfe von Code implementiert wird. Schauen Sie sich zunächst die Initialisierungsfunktion an:

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;//有多少行
                
        },

Nach dem Login kopieren

Um ein Kartenobjekt zu bestimmen, müssen zunächst folgende Parameter ermittelt werden: die Größe des Kartengitters, die Start-x-Koordinate der Karte und der Start y-Koordinate. Anschließend können Sie Kartenobjekte basierend auf diesen Parametern generieren und zeichnen und sich dann ansehen, wie Sie eine Karte basierend auf den Parametern zeichnen:

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

Nach dem Login kopieren

Zeichnen Sie in der Zeichenmethode die Kartengitter einzeln basierend auf die Startkoordinaten und die Rastergröße. Das Raster weist eine Eins-zu-eins-Entsprechung mit jedem Element der zweidimensionalen Matrix auf. Die Grundlage für die Bildauswahl ist der entsprechende Wert der zweidimensionalen Matrix. Im obigen Beispiel zeichnet 1 Ziegel und 2 den Boden.

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

Nach dem Login kopieren

Darüber hinaus können Sie über getPosValue den Wert der Kartenposition des Elements abrufen. Diese Methode ist nützlich, wenn Sie den Kartenstandort eines Spielobjekts bestimmen möchten.

Alle Quellcodes von Kartenobjekten:

Das obige ist der detaillierte Inhalt vonHTML5-Spielframework cnGameJS-Entwicklungsaufzeichnungs-Spielkartenobjekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!