Javascript 基于HTML5画布平铺的地图未显示

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

我正在制作一个基于瓷砖的地图，它应该可以将2d阵列变成有墙和开放空间的地图，但每当我打开游戏时，它都不会出现。。。 我甚至没有出错

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

pastebin代码：

//声明全局变量
var canvas=document.createElement（“canvas”）；
c=canvas.getContext（“2d”），
make={}，
映射={}，
宽度=800，
高度=600；
//创建requestAnimationFrame变量
（功能（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
}) ();
//修改画布的属性
canvas.width=宽度，
canvas.height=高度；
//构成贴图的二维阵列
地图={
一:[
[“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“w”、“w”、“w”、“w”、“o”、“w”]，
[“w”、“o”、“w”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“w”、“o”、“w”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“w”、“o”、“o”、“w”、“o”、“w”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”]
],
二:[
[“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”]
]
};
//地图绘图功能
制造={
映射：函数（map2d）{
var i，
J
瓦片
Tilex=8，
tilesY=8；
对于（i=0；i

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

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时，它都会填充或笔划你已经绘制的所有东西，这会随着时间的推移变得非常缓慢

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

//声明全局变量
var canvas=document.createElement（“canvas”）；
c=canvas.getContext（“2d”），
make={}，
映射={}，
宽度=800，
高度=600；
//创建requestAnimationFrame变量
（功能（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
}) ();
//修改画布的属性
canvas.width=宽度，
canvas.height=高度；
//构成贴图的二维阵列
地图={
一:[
[“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“w”、“w”、“w”、“w”、“o”、“w”]，
[“w”、“o”、“w”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“w”、“o”、“w”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“w”、“o”、“o”、“w”、“o”、“w”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”]
],
二:[
[“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“o”、“w”]，
[“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”、“w”]
]
};
//地图绘图功能
制造={
映射：函数（map2d）{
var i，
J
瓦片
Tilex=8，
tilesY=8；
对于（i=0；i// 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();
});