HTML5 Canvas基於瓷磚的地圖不顯示

Question

我是新來的HTML5帆布遊戲開發，我有一個可能的新手問題。

我正在製作一張基於地圖的地圖，該地圖應該可以將二維數組轉換成具有牆壁和開放空間的地圖，但每當我打開遊戲時它都不會顯示出來...... 我甚至沒有得到錯誤！？

請幫我（我使用鉻BTW）

引擎收錄代碼：http://pastebin.com/5GcQwCVa#

// Declares global variables 
var canvas = document.createElement("canvas"); 
    c = canvas.getContext("2d"), 
    make = {}, 
    maps = {}, 
    width = 800, 
    height = 600; 

// Creates the requestAnimationFrame variable 
(function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
    window.requestAnimationFrame = requestAnimationFrame; 
})(); 

// Modifies the canvas' properties 
canvas.width = width, 
canvas.height = height; 

// 2D arrays that make up maps 
maps = { 
    one: [ 
    ["w","w","w","w","w","w","w","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","w","w","w","w","o","w"], 
    ["w","o","w","o","o","o","o","w"], 
    ["w","o","w","o","w","o","o","w"], 
    ["w","o","w","o","o","w","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","w","w","w","w","w","w","w"] 
    ], 

    two: [ 
    ["w","w","w","w","w","w","w","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","w","w","w","w","w","w","w"] 
    ] 
}; 

// Maps drawing functions 
make = { 
    map: function (map2d) { 
      var i, 
        j, 
        tile, 
        tilesX = 8, 
        tilesY = 8; 

      for (i = 0; i < tilesX; i++) { 
        for(j = 0; j < tilesY; j++) { 
          if (map2d[i][j] === "w") { 
            this.tile(i * 64, j * 64); 
          } 
        } 
      } 
    }, 

    tile: function (x, y, TD) { 
      switch (TD) { 
        case "w": 
          c.rect(x, y, 64, 64); 
          c.fillStyle = wallColor; 
          c.fill(); 
          c.lineWidth = 8; 
          c.strokeStyle = "black"; 
          c.stroke(); 
          break; 

        case "o": 
          c.rect(x, y, 64, 64); 
          c.fillStyle = "white"; 
          c.fill(); 
          c.lineWidth = 8; 
          c.strokeStyle = "white"; 
          c.stroke(); 
          break; 
      } 
    } 
} 

// Updates constantly 
function update() { 
    c.clearRect(0, 0, width, height); 
    make.map(maps.two); 
    requestAnimationFrame(update); 
} 

// Begins updating when window is ready 
window.addEventListener("load", function() { 
    update(); 
}); 

Answer 1

因此，有幾件事情。首先，您需要實際將畫布添加到文檔中，您可以這樣做。

document.body.appendChild(canvas); 

我將此添加到您的Windows加載事件偵聽器。

接下來的事情你是不是合格「○」或「W」到你的函數switch語句來調用。所以，我只是硬編碼的w表示，因爲現在你有這樣的位

  if (map2d[i][j] === "w") { 
       this.tile(i * 64, j * 64, "w"); 
      } 

所以，你只叫得出如果在牆上呢。

之後，你還是什麼也看不到，因爲你有一個名爲wallcolor這實際上並不存在的變量，所以我改變了個夠只使用黑色的現在。

  c.beginPath(); 
      c.rect(x, y, 64, 64); 
      c.fillStyle = "black"; 
      c.fill(); 

      c.lineWidth = 8; 
      c.strokeStyle = "black"; 
      c.stroke(); 
      c.closePath(); 

另一件事你會發現是增加了beginPath和closePath如果你正在創建你需要以其它方式使用這些路徑所有的形狀將保持被添加到相同的路徑和每次調用填充或中風它的時候會填滿或中風所有的東西你已經畫出了它隨着時間的推移真的很慢。 The following is a good explanation of what paths are

Live Demo

// Declares global variables 
var canvas = document.createElement("canvas"); 
    c = canvas.getContext("2d"), 
    make = {}, 
    maps = {}, 
    width = 800, 
    height = 600; 

// Creates the requestAnimationFrame variable 
(function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
    window.requestAnimationFrame = requestAnimationFrame; 
})(); 

// Modifies the canvas' properties 
canvas.width = width, 
canvas.height = height; 



// 2D arrays that make up maps 
maps = { 
    one: [ 
    ["w","w","w","w","w","w","w","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","w","w","w","w","o","w"], 
    ["w","o","w","o","o","o","o","w"], 
    ["w","o","w","o","w","o","o","w"], 
    ["w","o","w","o","o","w","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","w","w","w","w","w","w","w"] 
    ], 

    two: [ 
    ["w","w","w","w","w","w","w","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","o","o","o","o","o","o","w"], 
    ["w","w","w","w","w","w","w","w"] 
    ] 
}; 

// Maps drawing functions 
make = { 
    map: function (map2d) { 
     var i, 
      j, 
      tile, 
      tilesX = 8, 
      tilesY = 8; 

     for (i = 0; i < tilesX; i++) { 
      for(j = 0; j < tilesY; j++) { 
       if (map2d[i][j] === "w") { 
        this.tile(i * 64, j * 64, "w"); 
       } 
      } 
     } 
    }, 

    tile: function (x, y, TD) { 
     switch (TD) { 
      case "w": 
       c.beginPath(); 
       c.rect(x, y, 64, 64); 
       c.fillStyle = '#000'; 
       c.fill(); 

       c.lineWidth = 8; 
       c.strokeStyle = "black"; 
       c.stroke(); 
       c.closePath(); 
       break; 

      case "o": 
       c.rect(x, y, 64, 64); 
       c.fillStyle = "white"; 
       c.fill(); 
       c.lineWidth = 8; 
       c.strokeStyle = "white"; 
       c.stroke(); 
       break; 
     } 
    } 
} 

// Updates constantly 
function update() { 
    c.clearRect(0, 0, width, height); 
    make.map(maps.two); 
    requestAnimationFrame(update); 
} 

// Begins updating when window is ready 
window.addEventListener("load", function() { 
    // Add the canvas 
    document.body.appendChild(canvas); 
    update(); 
});