js/canvas populate map

Question

我正在學習js和canvas.I'd喜歡用小瓷磚填充地圖（例如，20px乘20px）到目前爲止，我用字符填充它，但瓷磚會更好。我是否必須得到一組小圖像或是否有繪製圖塊的方法？ 我想我可以在主畫布內創建很多20x20的畫布，但我想這將遠離最佳狀態。

這是我到目前爲止。

var mapArray = [ 
[0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] 
]; 

function popMap() { 
    var canvas = document.getElementById('playground'); 
    var ctx = canvas.getContext('2d'); 

    ctx.font="18px Georgia"; 
    ctx.fillStyle="white"; 
    for (i=0;i<mapArray.length;i++) { 
     for (j=0;j<mapArray.length;j++) { 
      ctx.fillText(mapArray[i][j], i*20, j*20); 
     } 
    } 
} 

popMap(); 

順便說一句，最後，我想作一個簡單的RPG遊戲出來就那麼請告知在地圖上的最佳方法（與鍵移動到地圖上所控制的角色）。謝謝。

Answer 1

以下是如何將瓷磚繪製到您的遊戲畫布上。

開始與這樣的瓦片spritesheet圖像：

左（草）瓦片由mapArray值0的權利表示（粘土）瓦片由下式表示值爲1.

然後使用擴展形式drawImage在遊戲畫布上的任意位置繪製任意一個圖塊。

drawImage(

    // use the spritesheet image as the image source 
    spritesheetImage, 

    // clip a portion from the spritesheet image 
    clipAtX, clipAtY, clipWidth, clipHeight, 

    // draw the clipped portion to the canvas 
    canvasX, canvasY, scaledWidth, scaledHeight 

); 

這裏的示例代碼和演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var mapArray = [ 
 
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] 
 
]; 
 

 
var tw=20; 
 
var th=20; 
 
var spritesheet=new Image(); 
 
spritesheet.onload=function(){ 
 
    canvas.width=tw*mapArray[0].length; 
 
    canvas.height=th*mapArray.length; 
 
    popMap(); 
 
} 
 
spritesheet.src='https://dl.dropboxusercontent.com/u/139992952/multple/gametiles.png'; 
 

 
function popMap() { 
 
    for (i=0;i<mapArray.length;i++) { 
 
    for (j=0;j<mapArray[i].length;j++){ 
 
     var tile=mapArray[i][j]; 
 
     ctx.drawImage(spritesheet, 
 
        tile*20,0,tw,th, 
 
        j*20,i*20,tw,th 
 

 
        ); 
 
    } 
 
    } 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=500 height=500></canvas>

Answer 2

一個解決方案是創建一組函數來繪製圖塊，每個圖塊類型都有一個函數。然後創建一個查找對象來保存所有這些功能。在循環中填充地圖，從查找對象中找到所需的函數，並使用找到的函數繪製瓦片。

例如，下列代碼繪製瓦片類型0，爲淺紅色平方和爲淡綠色正方形瓷磚類型1 ...

var mapArray = [ 
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] 
]; 

function fillTile0(ctx, x, y, width, height) { 
    ctx.fillStyle = "#FF7777" 
    ctx.fillRect(x, y, width, height); 
} 

function fillTile1(ctx, x, y, width, height) { 
    ctx.fillStyle = "#77FF77" 
    ctx.fillRect(x, y, width, height); 
} 

var fillTileFunctions = { 
    "0": fillTile0, 
    "1": fillTile1 
}; 

function popMap() { 
    var canvas = document.getElementById('playground'); 
    var ctx = canvas.getContext('2d'); 
    for (i=0;i<mapArray.length;i++) { 
     for (j=0;j<mapArray[i].length;j++) { 
      var fillTile = fillTileFunctions[mapArray[i][j]]; 
      if (fillTile) { 
       fillTile(ctx, i*20, j*20, 20, 20); 
      } 
     } 
    } 
} 

popMap(); 

另一解決方案是創建一個單獨的圖像（例如PNG ，svg等）爲每個瓷磚類型。然後創建一個查找對象來保存這些圖像。在您的循環中填充地圖，從查找對象中查找所需圖像，然後使用ctx-> drawImage（）函數繪製圖塊。