Javascript HTML5プログラミング

Question

私はjavascriptプロジェクトに取り組んでおり、何か助けが必要です。私はポンゲームに似たバブルバスターゲームを作成しようとしていますが、多くのバブルがあります。私はランダムな色で私の画面（約100カウント）に落ちる泡を作成しようとしていると、画面上のランダムな点からドロップします。私は何を持っているのか、何が間違っているのですか？

var canvasColor; 
var x,y,radius,color; 
var x=50, y=30 
var bubbles=[]; 
var counter; 

function startGame() 
{ 
    var r,g,b; 
    var canvas, pen; 
    //Initialize 
    canvasColor = '#EAEDDC'; 
    x = 10; 
    y = 10; 
    radius = 10; 
    clearScreen(); 
    setInterval('drawForever()',50); 

    //make bubble appear randomly 
    x=Math.floor(Math.random()*450) 

    //Set up a random color 
    r = Math.floor(Math.random()*256); 
    g = Math.floor(Math.random()*256); 
    b = Math.floor(Math.random()*256); 
    pen.fillStyle='rgb('+r+','+g+','+b+')'; 
    pen.fill(); 

      while (counter <100) 
      { 
       bubbles[counter] = new Bubble(x,y,radius,color); 
       counter+=1; 
      } 
} 

function bubbles (x,y,radius,color) 
{ 
    this.x=x; 
    this.y=y; 
    this.radius=radius; 
    this.color=color; 
} 

function drawForever() 
{ 
    var canvas, pen; 

    clearScreen(); 

     while (counter <100) 
     { 
      pen.fillstyle(bubbles[counter].color); 
      pen.beginPath(); 
      pen.arc(bubbles[counter].x, 
          bubbles[counter].y, 
          bubbles[counter].radius, 
          0, 
          2*Math.PI); 
      pen.fill(); 

      bubbles[counter].y+=2; 
      counter +=1; 
     } 
} 


function drawCircle() 
{ 
    var canvas, pen; 

    canvas = document.getElementById('myCanvas'); 
    pen = canvas.getContext('2d'); 


    pen.fillStyle = '#b3ffff'; 
    pen.beginPath(); 
    pen.arc(x,y,radius,0,2*Math.PI); 
    pen.fill(); 

} 

function clearScreen() 
{ 
    var canvas, pen; 

    canvas = document.getElementById('myCanvas'); 
    pen = canvas.getContext('2d'); 
    pen.fillStyle = canvasColor; 
    pen.fillRect(0,0,450,300); 

} 
function drawShape() 
{ 
    var canvas, pen; 

    canvas = document.getElementById('myCanvas'); 
    pen = canvas.getContext('2d'); 


    //Draw circle 
    pen.fillStyle = '#b3ffff'; 
    pen.beginPath(); 
    pen.arc(50,50,25,0,2*Math.PI); //x,y,radius,startangle,endangle 
    pen.fill(); 

} 

Answer 1

ゲームの変数では、キャンバスとペンを定義していませんでした。 これは正しいコードである必要があります。

function startGame() 
{ 
    var r,g,b; 
    var canvas, pen; 

    canvas = document.getElementById('myCanvas'); 
    pen = canvas.getContext('2d'); 

    //Initialize 
    canvasColor = '#EAEDDC'; 
    x = 10; 
    y = 10; 
    radius = 10; 
    clearScreen(); 
    setInterval('drawForever()',50); 

    //make bubble appear randomly 
    x=Math.floor(Math.random()*450) 

    //Set up a random color 
    r = Math.floor(Math.random()*256); 
    g = Math.floor(Math.random()*256); 
    b = Math.floor(Math.random()*256); 
    pen.fillStyle='rgb('+r+','+g+','+b+')'; 
    pen.fill(); 

      while (counter <100) 
      { 
       bubbles[counter] = new Bubble(x,y,radius,color); 
       counter+=1; 
      } 
}