javascript - 我可以不使用对象中的对象来绘制图像()吗？

Question

我似乎无法弄清楚为什么我的代码不起作用。我本质上想做的是使用数组生成一个基于 10x10 图 block 的 map 。

这个想法是创建一个名为 Box 的对象，该对象具有“x”和“y”轴属性以及框中的图像对象。然后，二维数组中的每个位置都填充有一个盒子对象。

然后我想在 Canvas 上绘制所有这些数组。每个图 block (或数组元素)都是一个 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