为什么1秒后屏幕上的所有内容都会消失?

时间:2014-01-23 19:31:53

标签: javascript html5 html5-canvas

不知怎的,一秒钟之后一切都会在屏幕上消失。

我的浏览器只是说出以下错误:“未捕获的TypeError:无法读取未定义的属性'0'”

我现在知道问题是什么。 我只知道变量“row”存在问题。

也许我发布了大部分代码。对不起

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var FPS = 30;

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


var ts = 20
var tss = 0
var row = 0
var tr = 0

function drawtiley(){
    context.beginPath();
    context.rect(tss, tr, 20, 20);
    context.fillStyle = 'yellow';
    context.fill();
};
function drawtiler(){
    context.beginPath();
    context.rect(tss, tr, 20, 20);
    context.fillStyle = 'red';
    context.fill();
};

function drawlvl() {
    for(var o = 0; o < 5; o++ ){
        for(var i = 0 ; i < map.length; i++){
            if(map[row][i] === 0) {
                drawtiley()
            }
            else if (map[row][i] === 1) {
                drawtiler()
            }

            tss = tss + ts;
        };
        tss = 0;
        row = row + 1;
        tr = tr + 20;

    }
    row = 0;
    tr = 0;
}
function draw() {
    context.clearRect( 0, 0, canvas.width, canvas.height );
    drawlvl();

}

function update() {



}


function tick() {
    draw();

}

setInterval( tick, 1000 / FPS );

1 个答案:

答案 0 :(得分:1)

你的循环row在停止前经过值0,1,2,3,4。

但您的map数组仅上升到map[3]map[4]不存在,因此出错。

您的o变量似乎毫无意义。为什么不for(row=0; row<map.length; row++)