Heim > Artikel > Web-Frontend > HTML5-Spielframework cnGameJS-Entwicklungsaufzeichnungs-Spielkartenobjekt

HTML5-Spielframework cnGameJS-Entwicklungsaufzeichnungs-Spielkartenobjekt

黄舟Original: 2017-03-24 16:18:312968Durchsuche

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>

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

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

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])];
            
        }

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Entwicklungsdatensatz des HTML5-Spielframeworks cnGameJS – grundlegendes GrafikmodulNächster Artikel：Entwicklungsdatensatz des HTML5-Spielframeworks cnGameJS – grundlegendes Grafikmodul

In Verbindung stehende Artikel

Mehr sehen