HTML5/Javascript游戏

我现在正在做一个游戏，我需要一堆随机的泡泡落下，下面有一个长方形可以移动来“爆破”这些泡泡。我目前有一个代码，它没有删除这些气泡。有人能告诉我哪里出了问题吗？这是我的密码：

var canvasColor;
var x,y,radius,color;
var x=50, y=30;
var bubbles= [];
var counter;
var lastBubble=0;
var steps=0, burst=0, escaped=0;
var xx=200; 
var moveRectangleRight=false;
var moveRectangleLeft=false;


function startGame()
{
    var r, g, b;
    canvasColor= '#f1f1f1';
    x=10;
    y=10;
    radius=10;
    clearScreen();
    counter=0;

    while (counter<100)
    {
        x= Math.floor(450*Math.random()+1);

        r = Math.floor(Math.random()*256);
        g = Math.floor(Math.random()*256);
        b = Math.floor(Math.random()*256);

        color='rgb('+r+','+g+','+b+')';

        bubbles[counter]=new Bubble(x,y,radius,color);
        counter+=1;
    }
    setInterval('drawEverything()',50); 
}

function Bubble(x,y,radius,color)
{   
        this.x=x;
        this.y=y;
        this.radius=radius;
        this.color=color;
        this.active=false;
}

function drawEverything()
{   
    var canvas=document.getElementById('myCanvas');
    var context= canvas.getContext('2d');

    steps+=1;
    clearScreen();

    if (steps%20==0 && lastBubble <100) {
        bubbles[lastBubble].active=true;
        lastBubble+=1;
    }

    drawRectangle();
    counter=0;

    while(counter<100)
        {
        if (bubbles[counter].active==true) {
            context.fillStyle= bubbles[counter].color;
            context.beginPath();
            context.arc(bubbles[counter].x, bubbles[counter].y,
                        bubbles[counter.radius], 0, 2*Math.PI);
            context.fill();
            bubbles[counter].y+=2;
        }

        y=bubbles[counter].y;
        x=bubbles[counter].x;

        if (y>=240 && y<=270 && x>=xx-10 && x<=xx+60)
        {
            bubbles[counter]=false;
        }


        else if (y>=450)
        {
            bubbles[counter]=false;
        }
        counter+=1;
    }
}

function clearScreen ()
{
    var canvas=document.getElementById('myCanvas');
    var context= canvas.getContext('2d');
    context.fillStyle= canvasColor;
    context.fillRect(0,0,450,300);
}


function drawRectangle()
{   var canvas, context;

    if (moveRectangleRight==true && xx<400){
        xx+=20;
    }

    if (moveRectangleLeft==true && xx>0){
        xx-=20;
    }

    canvas=document.getElementById('myCanvas');
    context= canvas.getContext('2d');
    context.fillStyle = 'blue';
    context.fillRect(xx,250,50,10);

}

function moveLeft () {
    moveRectangleLeft=true;
}

function moveRight() {
    moveRectangleRight=true;
}

function stopMove () {
    moveRectangleRight=false;
    moveRectangleLeft=false;
}

var canvasColor；
变量x，y，半径，颜色；
变量x=50，y=30；
风险值=[]；
var计数器；
var=0；
变量步长=0，突发=0，转义=0；
var xx=200；
var moveRectangleRight=false；
var moveRectangleLeft=false；
函数startName（）
{
var r，g，b；
画布颜色='#f1f1'；
x=10；
y=10；
半径=10；
清除屏幕（）；
计数器=0；
而（counter您的问题是您将
计数器
初始化为
1
，因此当您向计数器添加项目时，您从
1
的索引开始，这实际上是第二个项目。因此，当您尝试访问
气泡[0]
，它返回未定义。相反，初始化
计数器，因为
0
一个括号位于错误的位置，这就解决了问题。
这可以清除我的错误消息，但是现在没有气泡落下。你能帮我吗？