オブジェクト内のオブジェクトをdrawImage（）に使用できませんか？

Question

私のコードがなぜ機能しないのか分かりません。私が本質的にしようとしているのは、配列を使って10x10のタイルベースのマップを生成することです。

「x」と「y」軸プロパティとボックス内にイメージオブジェクトを持つBoxというオブジェクトを作成することです。次に、2次元配列の各位置にボックスオブジェクトが設定されます。

これらの配列をすべてキャンバスに描画します。各タイル（または配列要素）は64x64ボックスです。

const ROW = 10; 
const COLS = 11; 
const SIZE = 64; 

var canvas = document.getElementById("canvas"); 
var surface = canvas.getContext("2d"); 

//creating tile 
function box() { 
    this.xaxis = 56; 
    this.yaxis = 0; 
    this.img = new Image(); 
    this.img.src = "box_image.png"; 
} 

//creating map 
var map =[]; 

function setMap() { 
    for (var i = 0; i < ROW; i++) { 
     for (var o = 0; o < COLS; o++) { 
      map[i][o] = new box(); 
     } 
    } 
} 

//rendering map 
function render() { 
    for (var i = 0; i < map.length; i++) { 
     for (var x = 0; x < map.length; x++) { 
      var tile = map[i][x]; 
      tile.xaxis *= i; 
      tile.yaxis *= x; 

      surface.drawImage(tile.img, tile.xaxis, tile.yaxis, 64, 64); 

     } 
    } 
} 


setTimeout(render, 10); 

Answer 1

あなたが忘れた要素をいくつか追加して、ここでやります。

Fiddle

HTML

<canvas id="canvas" width="1000" height="1000"></canvas> 
    <!-- set canvas size --> 

JS

const ROW = 10; 
    const COLS = 11; 
    const SIZE = 64; 

    var canvas = document.getElementById("canvas"); 
    var surface = canvas.getContext("2d"); 

    //creating tile 
    function box() { 
     this.xaxis = 56; 
     this.yaxis = 0; 
     this.src = "https://cdn4.iconfinder.com/data/icons/video-game-adicts/1024/videogame_icons-01-128.png"; //save path to image 
    } 

    //creating map 
    var map =[]; 

    function setMap() { 
     for (var i = 0; i < ROW; i++) { 
      var arr = []; //make new row 
      map.push(arr); //push new row 
      for (var o = 0; o < COLS; o++) { 
       map[i].push(new box()); //make and push new column element in current row 

      } 
     } 
    } 

    //rendering map 
    function render() { 
     for (var i = 0; i < ROW; i++) {   //For each row 

      for (var x = 0; x < COLS; x++) {  //And each column in it 
       var tile = map[i][x]; 
        tile.xaxis *= i; 
        tile.yaxis += (x*SIZE); //increment y value 

       var img = new Image(); 
       img.onload = (function(x,y) { //draw when image is loaded 
        return function() { 
         surface.drawImage(this, x, y, 64, 64); 
         } 

       })(tile.xaxis, tile.yaxis); 

       img.src = tile.src; 
      } 
     } 
    } 

    setMap(); //create the grid 
    render(); //render the grid 

Answer 2

あなたのコード内のエラーの数があります。

最初に同じ画像を110回ロードしています。一度ロードすると、多くのメモリと時間が節約されます。

あなたは次に、2つの薄暗いマップとアクセスしようとする単一のアレイdimetionedマップ

map = []; 

を作成します。 map[i][o]は動作しません。各行に新しい配列を作成する必要があります。

setMap()マップを作成する関数を作成しますが、その関数を呼び出すことはありません。

作成するボックスには、yaxisの値が0に設定されています。レンダリングを呼び出して列のインデックスを掛けると、結果はゼロになります。したがって、画像の列は1つしか表示されません。 yaxisの値を何らかの値（64）に設定する必要があります。

以下はコメントで修正されたコードです。私はゼロyaxisの値を多分あなたが望むものとして残しました。イメージは一度だけ作成され、onloadイベントはrenderを呼び出すために使用されますsetMapが呼び出されると、各行に新しい配列を追加します。私は一番下にsetMapを呼び出していますが、宣言しvar map = [];

const ROW = 10; 
const COLS = 11; 
const SIZE = 64; 

const canvas = document.getElementById("canvas"); 
const surface = canvas.getContext("2d"); 
const image = new Image(); 
image.src = "box_image.png"; 
// onload will not fire until all the immediate code has finished running 
image.onload = function(){render()}; // call render when the image has loaded 

//creating tile 
function Box() { // any function you call with new should start with a capital 
    this.xaxis = 56; 
    this.yaxis = 0; // should this not be something other than zero 
    this.img = image; 
} 

//creating map 
const map =[]; 
function setMap() { 
    for (var i = 0; i < ROW; i++) { 
     var row = []; // new array for this row 
     map[i] = row; 
     for (var o = 0; o < COLS; o++) {    
      row[o] = new box(); 
     } 
    } 
} 

//rendering map 
function render() { 
    for (var i = 0; i < map.length; i++) { 
     for (var x = 0; x < map[i].length; x++) { // you had map.length you needed the array for row i which is map[i] 
      var tile = map[i][x]; 
      tile.xaxis *= i; 
      tile.yaxis *= x; // Note you have zero for yaxis?? 0 times anything is zero 

      surface.drawImage(tile.img, tile.xaxis, tile.yaxis, 64, 64); 

     } 
    } 
} 

setMap(); // create the map