Question

我是html5画布游戏开发的新手，我可能有新手问题。

我正在制作一个基于图块的地图，它应该将二维数组变成一个带有墙壁和开放空间的地图，但每当我打开游戏时它就不会出现...... 我甚至不会得到错误！？

请帮帮我（我正在使用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");
            }

所以，无论如何，你只是把它称为画画。

之后你仍然看不到任何东西，因为你有一个名为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();
});

基于HTML5 Canvas tile的地图未显示

1 个答案: