JavaScriptでネストされた配列を作成する

-2

私は、SublimeでHTMLとJavascriptを使用してゲームを作成したいと思います。しかし、Javascriptでネストされた配列を作成しようとしていますが、ブラウザ上で動作しないコードを実行します。配列 "円"には "ボール"が含まれている必要があります（この行を削除すると、ゲームには1つのボールだけが含まれ、動作します）。JavaScriptでネストされた配列を作成する

これは、ゲームのコードです：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Canvas Tutorial</title> 
    <script type="text/javascript"> 
     window.onload = draw; 

     x = 200; 
     y = 150; 
     r = 40; 
     direction = 1; 
     speedX = 1; 
     speedY = 2; 

     var circles = [{x:200,y:150,r:40,d:1,speedX=1,speedY=2},{x:200,y:150,r:40,d:1,speedX=1,speedY=2}]; 



     function bottomRight() { 
      x += speedX; 
      y += speedY; 
     } 

     function upLeft() { 
      x -= speedX; 
      y -= speedY; 
     } 

     function upRight() { 
      x += speedX; 
      y -= speedY; 

     } 

     function bottomLeft() { 
      x -= speedX; 
      y += speedY; 
     } 

     function draw() { 
      var canvas = document.getElementById("canvas"); 
      var ctx = canvas.getContext("2d"); 



      ctx.fillStyle = "black"; 
      ctx.fillRect(0,0,400,300); 
      ctx.fillStyle = "yellow"; 
      ctx.beginPath(); 
      ctx.arc(x,y,r,0,Math.PI*2,false); 
      ctx.fill(); 

      if((y > 300 - r) && direction ===1){ 
       direction = 2; 
      } else if((x > 400 - r) && (direction===2)) { 
       direction = 3; 
      } else if ((y > 300 - r) && (direction===4)) { 
       direction = 3; 
      } else if ((y <= r) && direction === 3) { 
       direction = 4; 
      } else if ((x < r) && direction === 4){ 
       direction = 1; 
      } else if ((y < r) && direction === 2) { 
       direction = 1; 
      } 

      if (direction === 1) { 
       bottomRight(); 
      } else if (direction === 2) { 
       upRight(); 
      } else if (direction === 3) { 
       upLeft(); 
      } else { 
       bottomLeft(); 
      } 

     } 

     setInterval(draw, 10); 

    </script> 
</head> 
<body> 
    <canvas id="canvas" width="400" height="300"></canvas> 

</body> 
</html>

は、どのように私は、コードを修正することができますか？

出典

2016-10-25 Michele della Mea

リスナーは少し生産的ではありません。 'window.addEventListener（" load "、function（）; draw（）; setInterval（draw、10）;}）;または' setTimeout（draw、10）;を 'draw'の中に置き、間隔を削除します。 – Xufox

あなたのコードで 'circle 'をどのように使うのか分かりません。明確にすることはできますか？ –

あなたはサークル宣言でエラーが発生している - equalscolonsと交換してください：

var circles = [{x:200,y:150,r:40,d:1,speedX:1,speedY:2},{x:200,y:150,r:40,d:1,speedX:1,speedY:2}];

出典

2016-10-25 19:20:56

#maximusありがとうとてもスマートです！ –

@MicheledellaMea、問題はないupvoteまたは助けを受け入れる:) –

あなたのコードで円を使用しないでください。多分あなたは

function Ball(ball) { 
    this.x = ball.x; 
    this.y = ball.y; 
    ... 
    this.speedY = ball.speedY; 
}  
Ball.prototype.bottomRight = function() { 
     this.x += speedX; 
     this.y += speedY; 
} 
... 
Ball.prototype.draw = function(ctx) { 
    ctx.fillStyle = "yellow"; 
    ctx.beginPath(); 
    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false); 
    ... 
}

を作成し、描画機能でそれを使用する必要があります：あなたが言ったの外側に間隔を作成し、window.onload` `のイベントリスナーとして` draw`を呼び出す場合

var circles = [ 
    new Ball({x:200, y:150, r:40, d:1, speedX:1, speedY:2}), 
    new Ball({x:200, y:150, r:40, d:1, speedX:1, speedY:2}) 
]; 

function draw() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.fillStyle = "black"; 
    ctx.fillRect(0,0,400,300); 
    cirlces.forEach(function(ball) { ball.draw(ctx); }); 
}  

setInterval(draw, 10);

出典

2016-10-25 19:54:28

JavaScriptでネストされた配列を作成する

答えて

関連する問題