なぜ私のタイルセットはHTMLキャンバスにレンダリングされませんか？

私はJavaScriptを学んでいるところですが、私の次のプロジェクトでは、タイルセットのゲームボードと単純なメカニックを使って簡単なRPGを作りたいと思っていました。私のタイルセットが適切にレンダリングされるようです。なぜ私のタイルセットはHTMLキャンバスにレンダリングされませんか？

私は現在、タイルセット内のすべてのタイルで同じイメージをレンダリングするために論理を下ろそうとしていますが、タイルセットをレンダリングしようとしても何も起こりません。コンソールを確認してもエラーや問題は表示されません。いくつかのチュートリアルを検索した後、各タイルに40px x 40pxの灰色の四角形を1つだけレンダリングしようとしているので、レンダリングがどこで失敗するのか分かりません。

ここで問題になっている私のコードの要旨へのリンクです：https://gist.github.com/Randy-M/92c234a7a3cf8015bba6

、それの生のペースト：

//Creating the game tileset map 
 

 
var c = document.getElementById('canvas'); 
 
var canvas = c.getContext('2d'); 
 

 
var tileImg = new Image(); 
 
tileImg.src = 'sampleTile.png'; 
 

 

 
var map = { 
 
    tiles: [ 
 
     [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
 
     [11, 12, 13, 14, 15, 16, 17, 18, 19, 20], 
 
     [21, 22, 23, 24, 25, 26, 27, 28, 29, 30], 
 
     [31, 32, 33, 34, 35, 36, 37, 38, 39, 40], 
 
     [41, 42, 43, 44, 45, 46, 47, 48, 49, 50] 
 
    ], 
 

 
    tSize: 100, 
 
    rows: 5, 
 
    cols: 10, 
 
    
 
    getTile: function(row, col) { 
 
     return this.tiles[row][col]; 
 
    } 
 
}; 
 

 
//testGrid used to verify the map.getTile function successfully loops through all array values 
 
var testGrid = function() { 
 
    for (r = 0; r < map.rows; r++) { 
 
     for (c = 0; c < map.cols; c++) { 
 
      var tile = map.getTile(r, c); 
 
      console.log(tile); 
 
     } 
 
    } 
 
}; 
 

 

 
var renderMap = function() { 
 
    var x = map.cols * map.tSize; 
 
    var y = map.rows * map.tSize; 
 
    
 
    for (r = 0; r < map.rows; r++) { 
 
     for (c = 0; c < map.cols; c++) { 
 
      var tile = map.getTile(r, c); 
 
      if (tile != 0) { 
 
       canvas.drawImage(tileImg, x, y, map.tSize, map.tSize, c * map.tSize, r * map.tSize, map.tSize, map.tSize); 
 
      } 
 
     } 
 
    } 
 
};

HTML section is here: 
 

 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
</head> 
 
<body> 
 

 
<div id="mapContainer"> 
 
    <canvas id="canvas" style="height: 720px; width: 1280px;"></canvas> 
 
</div> 
 

 

 
<button id="doStuff" onclick="renderMap()">draw canvas</button> 
 

 

 
<script type="text/javascript" src="gameMap.js"></script> 
 
</body> 
 
</html>

出典

2016-03-22 Randy

var c = document.getElementById('canvas'); 
 
var canvas = c.getContext('2d'); 
 
var tileImg = new Image(); 
 
tileImg.src = 'http://vignette3.wikia.nocookie.net/gtawiki/images/b/b6/Flag_of_Japan_(bordered).png/revision/latest?cb=20100321220053'; 
 

 
var map = { 
 
    tiles: [ 
 
     [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
 
     [11, 12, 13, 14, 15, 16, 17, 18, 19, 20], 
 
     [21, 22, 23, 24, 25, 26, 27, 28, 29, 30], 
 
     [31, 32, 33, 34, 35, 36, 37, 38, 39, 40], 
 
     [41, 42, 43, 44, 45, 46, 47, 48, 49, 50] 
 
    ], 
 

 
    rows: 5, 
 
    cols: 10, 
 
    
 
    getTile: function(row, col) { 
 
     return this.tiles[row[col]]; 
 
    } 
 
}; 
 

 
var renderMap = function() { 
 
    var size = 30;  
 
    var x = map.cols * size; 
 
    var y = map.rows * size; 
 
    for (r = 0; r < map.rows; r++) { 
 
     for (c = 0; c < map.cols; c++) { 
 
      var tile = map.getTile(r, c); 
 
      canvas.beginPath(); 
 
      canvas.drawImage(tileImg, c * size, r * size, size, size); 
 
      canvas.stroke(); 
 
     } 
 
    } 
 
};

<button id="doStuff" onclick="renderMap()">draw canvas</button> 
 

 
<div id="mapContainer"> 
 
    <canvas id="canvas" style="height: 300px; width: 600px;"></canvas> 
 
</div> 
 

 

 
<script type="text/javascript" src="gameMap.js"></script>

私は日本の旗で提供されたイメージを置き換えました。

出典

2016-03-22 02:08:10 StardustGogeta

私は、それぞれのタイルを埋めるためのイメージを実際に探しています。グリッドを取得するだけでなく、キャンバスにイメージを描画するロジックを取得して、後で完全/真のタイルセットに展開して移行できるようにする必要があります。 – Randy

@Randyイメージが機能するようになりました。ボタンの場所を変更し、寸法を変更し、 'canvas.drawImage'から余分なパラメータを削除しました。これは満足ですか？ – StardustGogeta

はい、それは私があなたに感謝のために探していたものです。 drawImageの余分なパラメータ以外に、キャンバス上の寸法とボタン配置が問題を引き起こしていましたか？私はコンソールやデバッガから何のエラーも見られなかったので、ちょうど私を混乱させました。再度、感謝します！ – Randy

なぜ私のタイルセットはHTMLキャンバスにレンダリングされませんか？

答えて

関連する問題