Question

我似乎无法弄清楚为什么我的代码无效。我实际上要做的是使用数组生成基于10x10 tile的地图。

我们的想法是创建一个名为Box的对象，其中包含＆＃39; x＆＃39;并且＆＃39; y＆＃39; axis属性以及框内的图像对象。然后，使用box对象填充2d数组中的每个位置。

然后我想在画布上绘制所有这些数组。每个图块（或数组元素）都是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次。加载一次，这将节省大量的内存和时间。

您创建一个单独的数组映射

map = [];

然后尝试访问两个昏暗的地图。 map[i][o]无效。您需要为每一行创建一个新数组。

您创建了填充地图setMap()的功能，但您从不调用该功能。

您创建的框的yaxis值设置为0.当您调用渲染并将其乘以列索引时，结果将为零，因此您只能看到一列图像。您需要将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

我可以不在对象中使用drawImage（）的对象吗？

2 个答案: