HTML5/Javascript Spiel

Question

Ich arbeite gerade an einem Spiel, wo ich eine Reihe von zufälligen Blasen zu fallen braucht, und ein Rechteck darunter, die sich bewegen können, um diese Blasen "platzen". Ich habe momentan einen Code, der diese Blasen nicht fallen lässt. Kann mir jemand sagen, wo ich falsch liege? Hier ist mein Code:

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; 
} 

Answer 1

Ihr Problem ist, dass Sie counter als 1 initialisieren, so, wenn Sie Elemente hinzufügen zu begegnen, Sie beginnen mit dem Index von 1, die eigentlich die 2 ^nd Artikel. Wenn Sie versuchen, auf bubbles[0] zuzugreifen, gibt es daher undefined zurück. Initialisieren Sie statt dessen counter als 0.

Answer 2

Eine Halterung wurde an der falschen Stelle platziert, und dies löste das Problem.