HTML5/Javascript Game

Question

私は現在、落ちるためにたくさんのランダムな泡が必要なゲームに取り組んでいます。その下にある矩形は、これらの泡を「爆発」させることができます。私は現在、これらの泡を落としていないコードを持っています。誰かが私がどこに間違っているか教えてくれますか？ここに私のコードは次のとおりです。

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

あなたの問題は、あなたが対抗するための項目を追加するときに、あなたは実際に2 ^回目アイテムです1の指標、で始まる、あなたが1としてcounterを初期化するということです。したがって、bubbles[0]にアクセスしようとすると、undefinedが返されます。代わりにcounterを0として初期化します。

Answer 2

ブラケットの位置が間違っていたため、この問題は解決しました。