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

HTML中的H5標籤是什麼？May 09, 2025 am 12:11 AM

HTML中的H5標籤是第五級標題，用於標記較小的標題或子標題。 1)H5標籤幫助細化內容層次，提升可讀性和SEO。 2)結合CSS可定製樣式，增強視覺效果。 3)合理使用H5標籤，避免濫用，確保內容結構邏輯性。

H5代碼：Web結構的初學者指南May 08, 2025 am 12:15 AM

HTML5構建網站的方法包括：1.使用語義化標籤定義網頁結構，如、、等；2.嵌入多媒體內容，使用和標籤；3.應用表單驗證和本地存儲等高級功能。通過這些步驟，你可以創建一個結構清晰、功能豐富的現代網頁。

H5代碼結構：組織內容以實現可讀性May 07, 2025 am 12:06 AM

通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容，使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計，確保頁面在不同屏幕尺寸上自適應。

H5與較舊的HTML版本：比較May 06, 2025 am 12:09 AM

HTML5（H5）與舊版本HTML的主要區別包括：1）H5引入了語義化標籤，2）支持多媒體內容，3）提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力，如和標籤，提高了用戶體驗和SEO效果，但需注意兼容性問題。

H5與HTML5：澄清術語和關係May 05, 2025 am 12:02 AM

H5和HTML5的區別在於：1）HTML5是網頁標準，定義結構和內容；2）H5是基於HTML5的移動網頁應用，適用於快速開發和營銷。

HTML5特徵：H5的核心May 04, 2025 am 12:05 AM

HTML5的核心特性包括語義化標籤、多媒體支持、表單增強和離線存儲與本地存儲。 1.語義化標籤如、等提高了代碼可讀性和SEO效果。 2.多媒體支持通過和標籤簡化了嵌入媒體內容的過程。 3.表單增強引入了新的輸入類型和驗證屬性，簡化了表單開發。 4.離線存儲和本地存儲通過ApplicationCache和localStorage等提高了網頁性能和用戶體驗。

H5：探索最新版本的HTMLMay 03, 2025 am 12:14 AM

html5isamajorrevisionofthehtmlStandardThatRevolutionsWebDevelopmentBybyIntroDucingNewSemanticeLementSemelementsandAndCapabilities.1）itenhancesCodereAdabilityAndSeowitability andSeowithelientsLike，and.2）