HTML5基于Canvas的地图未显示

Question

我是html5 canvas游戏开发人员的新手，可能遇到了新手问题。

我正在制作一个基于图块的地图，该地图应该将2d数组转换为带有墙壁和开放空间的地图，但是每当我打开游戏时，它都不会显示出来……我什至没有出错！

请帮助我（我正在使用Chrome BTW）

pastebin代码： http ： //pastebin.com/5GcQwCVa#

// Declares global variables
var canvas = document.createElement("canvas");
    c = canvas.getContext("2d"),
    make = {},
    maps = {},
    width = 800,
    height = 600;

// Creates the requestAnimationFrame variable
(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
}) ();

// Modifies the canvas' properties
canvas.width = width,
canvas.height = height;

// 2D arrays that make up maps
maps = {
    one: [
    ["w","w","w","w","w","w","w","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","w","w","w","w","o","w"],
    ["w","o","w","o","o","o","o","w"],
    ["w","o","w","o","w","o","o","w"],
    ["w","o","w","o","o","w","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","w","w","w","w","w","w","w"]
    ],

    two: [
    ["w","w","w","w","w","w","w","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","w","w","w","w","w","w","w"]
    ]
};

// Maps drawing functions
make = {
    map: function ( map2d ) {
            var i,
                    j,
                    tile,
                    tilesX = 8,
                    tilesY = 8;

            for (i = 0; i < tilesX; i++) {
                    for(j = 0; j < tilesY; j++) {
                            if (map2d[i][j] === "w") {
                                    this.tile(i * 64, j * 64);
                            }
                    }
            }
    },

    tile: function (x, y, TD) {
            switch (TD) {
                    case "w":
                            c.rect(x, y, 64, 64);
                            c.fillStyle = wallColor;
                            c.fill();
                            c.lineWidth = 8;
                            c.strokeStyle = "black";
                            c.stroke();
                            break;

                    case "o":
                            c.rect(x, y, 64, 64);
                            c.fillStyle = "white";
                            c.fill();
                            c.lineWidth = 8;
                            c.strokeStyle = "white";
                            c.stroke();
                            break;
            }
    }
}

// Updates constantly
function update () {
    c.clearRect(0, 0, width, height);
    make.map(maps.two);
    requestAnimationFrame(update);
}

// Begins updating when window is ready
window.addEventListener("load", function () {
    update();
});

Answer 1

所以有几件事。 首先是您需要将画布实际添加到文档中，您可以这样做。

document.body.appendChild(canvas);

我将此添加到您的Windows加载事件监听器中。

接下来的事情是您没有将“ o”或“ w”传递给要调用switch语句的函数。 所以我现在只对w进行硬编码，因为你有这点

            if (map2d[i][j] === "w") {
                this.tile(i * 64, j * 64, "w");
            }

因此，无论如何，您只能调用draw（如果它是一堵墙）。

之后，您仍然看不到任何东西，因为您有一个实际上不存在的名为wallcolor的变量，因此我现在将填充更改为仅使用黑色。

            c.beginPath();
            c.rect(x, y, 64, 64);
            c.fillStyle = "black";
            c.fill();

            c.lineWidth = 8;
            c.strokeStyle = "black";
            c.stroke();
            c.closePath();

您会注意到的另一件事是，如果您创建需要使用这些路径的路径，那么将添加beginPath和closePath ，否则所有形状将始终添加到同一路径，并且每次调用fill或stroke时，它将填充或beginPath您所需要的一切 ve已经使它随着时间的流逝变得非常慢。 以下是关于什么路径的很好的解释

现场演示

// Declares global variables
var canvas = document.createElement("canvas");
    c = canvas.getContext("2d"),
    make = {},
    maps = {},
    width = 800,
    height = 600;

// Creates the requestAnimationFrame variable
(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
}) ();

// Modifies the canvas' properties
canvas.width = width,
canvas.height = height;



// 2D arrays that make up maps
maps = {
    one: [
    ["w","w","w","w","w","w","w","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","w","w","w","w","o","w"],
    ["w","o","w","o","o","o","o","w"],
    ["w","o","w","o","w","o","o","w"],
    ["w","o","w","o","o","w","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","w","w","w","w","w","w","w"]
    ],

    two: [
    ["w","w","w","w","w","w","w","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","w","w","w","w","w","w","w"]
    ]
};

// Maps drawing functions
make = {
    map: function ( map2d ) {
        var i,
            j,
            tile,
            tilesX = 8,
            tilesY = 8;

        for (i = 0; i < tilesX; i++) {
            for(j = 0; j < tilesY; j++) {
                if (map2d[i][j] === "w") {
                    this.tile(i * 64, j * 64, "w");
                }
            }
        }
    },

    tile: function (x, y, TD) {
        switch (TD) {
            case "w":
                c.beginPath();
                c.rect(x, y, 64, 64);
                c.fillStyle = '#000';
                c.fill();

                c.lineWidth = 8;
                c.strokeStyle = "black";
                c.stroke();
                c.closePath();
                break;

            case "o":
                c.rect(x, y, 64, 64);
                c.fillStyle = "white";
                c.fill();
                c.lineWidth = 8;
                c.strokeStyle = "white";
                c.stroke();
                break;
        }
    }
}

// Updates constantly
function update () {
    c.clearRect(0, 0, width, height);
    make.map(maps.two);
    requestAnimationFrame(update);
}

// Begins updating when window is ready
window.addEventListener("load", function () {
    // Add the canvas
    document.body.appendChild(canvas);
    update();
});