使用and array和fillRect在html5画布上渲染tile图

时间:2015-06-11 13:13:27

标签: javascript arrays html5 canvas

我非常喜欢尝试用html画布制作基本的2D游戏地图的业余爱好者。之前我已经使用数组创建div / img标签并定位它们。我现在正尝试使用画布,而不是使用图像,而只是使用fillRect()绘制正方形。

var canvas = document.getElementById("canvas");     
    var ctx = canvas.getContext("2d");

    var map = 
    [0, 0, 0, 0, 0, 0, 0, 0]
    [0, 0, 0, 0, 0, 0, 0, 0]
    [0, 1, 1, 1, 0, 0, 0, 0]
    [0, 0, 0, 0, 0, 0, 0, 0]
    [0, 0, 0, 0, 0, 0, 0, 0]
    [0, 0, 0, 0, 1, 1, 0, 0]
    [1, 1, 1, 0, 0, 0, 0, 0]
    [0, 0, 0, 0, 0, 0, 0, 0];

    window.addEventListener("load", function()
    {
        update();
    }, false);

    function update()
    {
        window.requestAnimationFrame(update, canvas);
        render();
    }

    function render()
    {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for(var row = 0; row < map.length; row++)
        {
            for(var column = 0; column < map[0].length; column++)
            {
                switch(map[row][column])
                {
                    case 0: 
                        ctx.fillStyle = #ffffff;
                        ctx.fillRect
                        (
                            row * 64, column * 64, 64, 64
                        );
                        break;

                    case 1: 
                        ctx.fillStyle = #009900;
                        ctx.fillRect
                        (
                            row * 64, column * 64, 64, 64
                        );
                        break;
                }
            }
        }
    }

我收到错误:第46行的'Uncaught SyntaxError:Unexpected token ILLEGAL','ctx.fillStyle = #ffffff;'。

我有点担心它为什么会出现这个错误,我想知道你是否不能以这种方式使用数组的上下文方法,但我无法理解为什么。

如果有人有任何建议,我将非常感激。

0 个答案:

没有答案