基于 HTML5 Canvas 平铺的地图未显示

Question

我是 html5 画布游戏开发新手，我可能遇到了新手问题。

我正在制作一个基于图块的地图，该地图应该将二维数组转换为带有墙壁和开放空间的地图，但每当我打开游戏时它就不会显示... 我什至没有收到错误！？

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

粘贴码：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，如果您正在创建需要使用它们的路径，否则您的所有形状将继续添加到同一路径，并且每次调用填充或描边时将填充或描边您已经绘制的所有内容，使其随着时间的推移变得非常缓慢。 The following is a good explanation of what paths are

Live Demo

// 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();
});