Neden çinilerim bir HTML tuvalinde oluşturulmuyor?

JavaScript'i öğrenme sürecindeyim ve bir sonraki projemde bir çini oyun tahtası ve bazı basit mekanikleri kullanarak basit bir RPG oluşturmak istedim ve arka uç işlevlerinin çoğunu doğru şekilde çalıştırabiliyorum. Benim fayansımı düzgün bir şekilde oluşturması gerekiyor.Neden çinilerim bir HTML tuvalinde oluşturulmuyor?

Şu anda yalnızca döşemedeki her döşemede aynı görüntüyü oluşturmak için mantığı azaltmaya çalışıyorum, ancak döşemeyi oluşturmaya çalışırken hiçbir şey olmuyor. konsolu kontrol etmek, herhangi bir hata veya problem göstermez ve birkaç öğretici aradıktan sonra, her bir döşemede yalnızca 1 adet 40px x 40px gri kare oluşturmaya çalıştığım için, oluşturmamın nerede bozulacağını ve çalışmamı görmediğimi görmüyorum. https://gist.github.com/Randy-M/92c234a7a3cf8015bba6

ve ondan ham macun:

//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>

kaynak

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>

İşte

söz konusu benim kod esasından bir bağlantı var

Her nokta artık başarılı bir şekilde yerleştirilmiş bir döşemeyi temsil ettiğinden, Japon bayrağıyla sağlanan görüntüyü değiştirdim.

kaynak

2016-03-22 02:08:10 StardustGogeta

Bunu takdir ediyorum, ancak her bir döşemeyi doldurmak için gerçekten bir resim elde etmek istiyorum. Sadece bir ızgara almakla ilgili değil, daha sonra tuvali bir görüntü çizebilmek için mantığı çalıştırabilmem gerekiyor, böylece daha sonra genişletip tam/gerçek bir döşemeye geçebiliyorum. – Randy

@Randy Görüntü şimdi çalışıyor. Düğme konumunu değiştirdim, boyutları değiştirdim ve 'canvas.drawImage' öğesinden ek parametreleri kaldırdım. Bu tatmin edici mi? – StardustGogeta

evet, aradığım şey teşekkür ederim. DrawImage'deki ekstra parametreler dışında, tuvaldeki boyutlar ve düğme yerleşimi sorunlara neden oldu mu? Sadece cehennemi karıştırdı çünkü konsoldan veya hata ayıklayıcıdan herhangi bir hata görmedim. Tekrar teşekkürler! – Randy

Neden çinilerim bir HTML tuvalinde oluşturulmuyor?

cevap

İlgili konular