2017-12-22 20 views
-1

私は学校でJSのコードをHTMLのキャンバスの端にぶつけるように頼んだのですが、そのキャンバスに4つのボールを入れて追加したい彼らが遭遇したときにボールが跳ね返るようにするために、JSのいくつかの「物理学」。Javascript:コードが正常に動作しない

必要に応じて詳細をお知らせします。 PS:

window.onload = function() 
{ 
    { 
     var canvas = document.getElementById('mon_canvas'); 
     var context = canvas.getContext('2d'); 
    } 

    var rafraichissement = setInterval(animation, 1000/60); 

    var rBalle = parseFloat(prompt('Entrez le rayon des balles')); 

    var vitesseX = 1.1; 
    var vitesseY = 1.2; 

    var vitesseX2 = -1.5; 
    var vitesseY2 = -0.9; 

    var vitesseX3 = -1.2; 
    var vitesseY3 = 1.33; 

    var vitesseX4 = 2; 
    var vitesseY4 = -0.7; 

    var xBalle = rBalle+1; 
    var yBalle = rBalle+1; 

    var xBalle2 = canvas.width - rBalle -1; 
    var yBalle2 = canvas.height - rBalle -1; 

    var xBalle3 = canvas.width - rBalle -1; 
    var yBalle3 = rBalle +1; 

    var xBalle4 = rBalle +1; 
    var yBalle4 = canvas.height - rBalle -1; 
    //canvas.width pour la largeur du canvas 
    //canvas.height pour sa hauteur 

    function animation() { 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     context.beginPath(); 
      context.arc(xBalle, yBalle, rBalle, 0, Math.PI*2); 
      context.fill(); 
     context.closePath(); 

     context.beginPath(); 
      context.arc(xBalle2, yBalle2, rBalle, 0, Math.PI*2); 
      context.fill(); 
     context.closePath(); 

     context.beginPath(); 
      context.arc(xBalle3, yBalle3, rBalle, 0, Math.PI*2); 
      context.fill(); 
     context.closePath() 

     context.beginPath(); 
      context.arc(xBalle4, yBalle4, rBalle, 0, Math.PI*2); 
      context.fill(); 
     context.closePath() 

     //collision balles/bord du canvas 

     if(xBalle >= canvas.width - rBalle || xBalle <= rBalle){vitesseX *= -1;}   //Balle 1 (haut gauche) 
     if(yBalle >= canvas.height - rBalle || yBalle <= rBalle){vitesseY *= -1;} 

     if(xBalle2 >= canvas.width - rBalle || xBalle2 <= rBalle){vitesseX2 *= -1;}   //Balle 2 (bas droite) 
     if(yBalle2 >= canvas.height - rBalle || yBalle2 <= rBalle){vitesseY2 *= -1;} 

     if(xBalle3 >= canvas.width - rBalle || xBalle3 <= rBalle){vitesseX3 *= -1;}   //Balle 3 (haut droite) 
     if(yBalle3 >= canvas.height - rBalle || yBalle3 <= rBalle){vitesseY3 *= -1;} 

     if(xBalle4 >= canvas.width - rBalle || xBalle4 <= rBalle){vitesseX4 *= -1;}   //Balle 4 (bas gauche) 
     if(yBalle4 >= canvas.height - rBalle || yBalle4 <= rBalle){vitesseY4 *= -1;} 


     //collision balles/balles 
     //var distance entre les balles 

     var dist12 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle2)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle2)), 2))); 
     var dist13 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle3)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle3)), 2))); 
     var dist14 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle4)), 2))); 

     var dist23 = Math.sqrt(Math.pow((parseFloat(xBalle2) + parseFloat(xBalle3)), 2) + Math.pow(Math.pow((parseFloat(yBalle2) + parseFloat(yBalle3)), 2))); 
     var dist24 = Math.sqrt(Math.pow((parseFloat(xBalle2) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle2) + parseFloat(yBalle4)), 2))); 

     var dist34 = Math.sqrt(Math.pow((parseFloat(xBalle3) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle3) + parseFloat(yBalle4)), 2))); 

     //boucles if vérifiant la valeur de la distance, ainsi que les directions des balles 

     if(dist12 <= parseFloat(rBalle)*2){ //balles 1 et 2 
      if(vitesseX*vitesseX2 < 0) 
      { 
       vitesseX *= -1; vitesseX2 *= -1; 
      } 
      else{ 
       vitesseX *= 1; vitesseX2 *= 1; 
      } 

      if(vitesseY*vitesseY2 < 0){ 
       vitesseY *= -1; vitesseY2 *= -1; 
      } 
      else{ 
       vitesseY *= 1; vitesseY2 *= 1; 
      } 
     } 

     if(dist13 <= parseFloat(rBalle)*2){ //balles 1 et 3 
      if(vitesseX*vitesseX3 < 0) 
      { 
       vitesseX *= -1; vitesseX3 *= -1; 
      } 
      else{ 
       vitesseX *= 1; vitesseX3 *= 1; 
      } 

      if(vitesseY*vitesseY3 < 0){ 
       vitesseY *= -1; vitesseY3 *= -1; 
      } 
      else{ 
       vitesseY *= 1; vitesseY3 *= 1; 
      } 
     } 

     if(dist14 <= parseFloat(rBalle)*2){ //balles 1 et 4 

      if(vitesseX*vitesseX4 < 0) 
      { 
       vitesseX *= -1; vitesseX4 *= -1; 
      } 
      else{ 
       vitesseX *= 1; vitesseX4 *= 1; 
      } 

      if(vitesseY*vitesseY4 < 0){ 
       vitesseY *= -1; vitesseY4 *= -1; 
      } 
      else{ 
       vitesseY *= 1; vitesseY4 *= 1; 
      } 
     } 

     if(dist23 <= parseFloat(rBalle)*2){ //balles 2 et 3 
      if(vitesseX2*vitesseX3 < 0) 
      { 
       vitesseX2 *= -1; vitesseX3 *= -1; 
      } 
      else{ 
       vitesseX2 *= 1; vitesseX2 *= 1; 
      } 

      if(vitesseY2*vitesseY3 < 0){ 
       vitesseY2 *= -1; vitesseY3 *= -1; 
      } 
      else{ 
       vitesseY2 *= 1; vitesseY3 *= 1; 
      } 
     } 

     if(dist24 <= parseFloat(rBalle)*2){ //balles 2 et 4 

      if(vitesseX2*vitesseX4 < 0) 
      { 
       vitesseX2 *= -1; vitesseX4 *= -1; 
      } 
      else{ 
       vitesseX2 *= 1; vitesseX4 *= 1; 
      } 

      if(vitesseY2*vitesseY4 < 0){ 
       vitesseY2 *= -1; vitesseY4 *= -1; 
      } 
      else{ 
       vitesseY2 *= 1; vitesseY4 *= 1; 
      } 
     } 

     if(dist34 <= parseFloat(rBalle)*2){ //balles 3 et 4 
      if(vitesseX3*vitesseX4 < 0) 
      { 
       vitesseX3 *= -1; vitesseX4 *= -1; 
      } 
      else{ 
       vitesseX3 *= 1; vitesseX4 *= 1; 
      } 

      if(vitesseY3*vitesseY4 < 0){ 
       vitesseY3 *= -1; vitesseY4 *= -1; 
      } 
      else{ 
       vitesseY3 *= 1; vitesseY4 *= 1; 
      } 
     } 

     //Pour déplacer les balles dans le plan 

     xBalle += vitesseX; 
     yBalle += vitesseY; 

     xBalle2 += vitesseX2; 
     yBalle2 += vitesseY2; 

     xBalle3 += vitesseX3; 
     yBalle3 += vitesseY3; 

     xBalle4 += vitesseX4; 
     yBalle4 += vitesseY4; 
    } 
} 

一部ません:(VAR名は教師のためのフランスにあるので)、それは、コードの理解に影響を与える可能性があるので、私は、フランス人だ。ここ

は、全体のコードですそれはこの1つである必要があるとして仕事:あなたは何もより多くを必要とする場合

//collision balles/balles 
     //var distance entre les balles 

     var dist12 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle2)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle2)), 2))); 
     var dist13 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle3)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle3)), 2))); 
     var dist14 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle4)), 2))); 

     var dist23 = Math.sqrt(Math.pow((parseFloat(xBalle2) + parseFloat(xBalle3)), 2) + Math.pow(Math.pow((parseFloat(yBalle2) + parseFloat(yBalle3)), 2))); 
     var dist24 = Math.sqrt(Math.pow((parseFloat(xBalle2) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle2) + parseFloat(yBalle4)), 2))); 

     var dist34 = Math.sqrt(Math.pow((parseFloat(xBalle3) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle3) + parseFloat(yBalle4)), 2))); 

     //boucles if vérifiant la valeur de la distance, ainsi que les directions des balles 

     if(dist12 <= parseFloat(rBalle)*2){ //balles 1 et 2 
      if(vitesseX*vitesseX2 < 0) 
      { 
       vitesseX *= -1; vitesseX2 *= -1; 
      } 
      else{ 
       vitesseX *= 1; vitesseX2 *= 1; 
      } 

      if(vitesseY*vitesseY2 < 0){ 
       vitesseY *= -1; vitesseY2 *= -1; 
      } 
      else{ 
       vitesseY *= 1; vitesseY2 *= 1; 
      } 
     } 

     if(dist13 <= parseFloat(rBalle)*2){ //balles 1 et 3 
      if(vitesseX*vitesseX3 < 0) 
      { 
       vitesseX *= -1; vitesseX3 *= -1; 
      } 
      else{ 
       vitesseX *= 1; vitesseX3 *= 1; 
      } 

      if(vitesseY*vitesseY3 < 0){ 
       vitesseY *= -1; vitesseY3 *= -1; 
      } 
      else{ 
       vitesseY *= 1; vitesseY3 *= 1; 
      } 
     } 

     if(dist14 <= parseFloat(rBalle)*2){ //balles 1 et 4 

      if(vitesseX*vitesseX4 < 0) 
      { 
       vitesseX *= -1; vitesseX4 *= -1; 
      } 
      else{ 
       vitesseX *= 1; vitesseX4 *= 1; 
      } 

      if(vitesseY*vitesseY4 < 0){ 
       vitesseY *= -1; vitesseY4 *= -1; 
      } 
      else{ 
       vitesseY *= 1; vitesseY4 *= 1; 
      } 
     } 

     if(dist23 <= parseFloat(rBalle)*2){ //balles 2 et 3 
      if(vitesseX2*vitesseX3 < 0) 
      { 
       vitesseX2 *= -1; vitesseX3 *= -1; 
      } 
      else{ 
       vitesseX2 *= 1; vitesseX2 *= 1; 
      } 

      if(vitesseY2*vitesseY3 < 0){ 
       vitesseY2 *= -1; vitesseY3 *= -1; 
      } 
      else{ 
       vitesseY2 *= 1; vitesseY3 *= 1; 
      } 
     } 

     if(dist24 <= parseFloat(rBalle)*2){ //balles 2 et 4 

      if(vitesseX2*vitesseX4 < 0) 
      { 
       vitesseX2 *= -1; vitesseX4 *= -1; 
      } 
      else{ 
       vitesseX2 *= 1; vitesseX4 *= 1; 
      } 

      if(vitesseY2*vitesseY4 < 0){ 
       vitesseY2 *= -1; vitesseY4 *= -1; 
      } 
      else{ 
       vitesseY2 *= 1; vitesseY4 *= 1; 
      } 
     } 

     if(dist34 <= parseFloat(rBalle)*2){ //balles 3 et 4 
      if(vitesseX3*vitesseX4 < 0) 
      { 
       vitesseX3 *= -1; vitesseX4 *= -1; 
      } 
      else{ 
       vitesseX3 *= 1; vitesseX4 *= 1; 
      } 

      if(vitesseY3*vitesseY4 < 0){ 
       vitesseY3 *= -1; vitesseY4 *= -1; 
      } 
      else{ 
       vitesseY3 *= 1; vitesseY4 *= 1; 
      } 
     } 

を教えてください。

+0

だけ「のコードが動作していない」ではない、完全な、実行可能な例と、問題の具体的な説明を投稿してください。質問を編集してhtmlを含めることはできますか?壊れたjsを2回ポストする必要はありません。コード全体に、機能していないというコメントを追加するだけです。それが何をしているのか、何をすべきかを説明してください。ボンのチャンス! – JasonB

+0

オブジェクトの配列を使用する方が、balle1、balle2などよりも優れています。すべての関数と変数を英語で指定することも良い習慣です。これは、オープンソースプロジェクトや他の国の人々と一緒に働いている会社で働いている場合に役立ちます。 – Tuure

答えて

0

値(dist12dist13dist14dist23dist24dist34)は、値が数値ではなかったことを示す、NaNを返すた計算された各ボール間の距離について。

MDN web docsに記載されている方法を使用して、これらの計算を修正しました。残りの衝突検出コードは、正常に動作します。

\t window.onload = function() 
 
{ 
 
    { 
 
     var canvas = document.getElementById('mon_canvas'); 
 
     var context = canvas.getContext('2d'); 
 
    } 
 

 
    var rafraichissement = setInterval(animation, 1000/60); 
 

 
    var rBalle = parseFloat(prompt('Entrez le rayon des balles')); 
 

 
    var vitesseX = 1.1; 
 
    var vitesseY = 1.2; 
 

 
    var vitesseX2 = -1.5; 
 
    var vitesseY2 = -0.9; 
 

 
    var vitesseX3 = -1.2; 
 
    var vitesseY3 = 1.33; 
 

 
    var vitesseX4 = 2; 
 
    var vitesseY4 = -0.7; 
 

 
    var xBalle = rBalle+1; 
 
    var yBalle = rBalle+1; 
 

 
    var xBalle2 = canvas.width - rBalle -1; 
 
    var yBalle2 = canvas.height - rBalle -1; 
 

 
    var xBalle3 = canvas.width - rBalle -1; 
 
    var yBalle3 = rBalle +1; 
 

 
    var xBalle4 = rBalle +1; 
 
    var yBalle4 = canvas.height - rBalle -1; 
 
    //canvas.width pour la largeur du canvas 
 
    //canvas.height pour sa hauteur 
 

 
    function animation() { 
 
     context.clearRect(0, 0, canvas.width, canvas.height); 
 

 
     context.beginPath(); 
 
      context.arc(xBalle, yBalle, rBalle, 0, Math.PI*2); 
 
      context.fill(); 
 
     context.closePath(); 
 

 
     context.beginPath(); 
 
      context.arc(xBalle2, yBalle2, rBalle, 0, Math.PI*2); 
 
      context.fill(); 
 
     context.closePath(); 
 

 
     context.beginPath(); 
 
      context.arc(xBalle3, yBalle3, rBalle, 0, Math.PI*2); 
 
      context.fill(); 
 
     context.closePath() 
 

 
     context.beginPath(); 
 
      context.arc(xBalle4, yBalle4, rBalle, 0, Math.PI*2); 
 
      context.fill(); 
 
     context.closePath() 
 

 
     //collision balles/bord du canvas 
 

 
     if(xBalle >= canvas.width - rBalle || xBalle <= rBalle){vitesseX *= -1;}   //Balle 1 (haut gauche) 
 
     if(yBalle >= canvas.height - rBalle || yBalle <= rBalle){vitesseY *= -1;} 
 

 
     if(xBalle2 >= canvas.width - rBalle || xBalle2 <= rBalle){vitesseX2 *= -1;}   //Balle 2 (bas droite) 
 
     if(yBalle2 >= canvas.height - rBalle || yBalle2 <= rBalle){vitesseY2 *= -1;} 
 

 
     if(xBalle3 >= canvas.width - rBalle || xBalle3 <= rBalle){vitesseX3 *= -1;}   //Balle 3 (haut droite) 
 
     if(yBalle3 >= canvas.height - rBalle || yBalle3 <= rBalle){vitesseY3 *= -1;} 
 

 
     if(xBalle4 >= canvas.width - rBalle || xBalle4 <= rBalle){vitesseX4 *= -1;}   //Balle 4 (bas gauche) 
 
     if(yBalle4 >= canvas.height - rBalle || yBalle4 <= rBalle){vitesseY4 *= -1;} 
 

 
     //collision balles/balles 
 
     //var distance entre les balles 
 

 
     var dist12 = Math.sqrt((xBalle - xBalle2) * (xBalle - xBalle2) + (yBalle - yBalle2) * (yBalle - yBalle2)); 
 
     \t var dist13 = Math.sqrt((xBalle - xBalle3) * (xBalle - xBalle3) + (yBalle - yBalle3) * (yBalle - yBalle3)); 
 
     \t var dist14 = Math.sqrt((xBalle - xBalle4) * (xBalle - xBalle4) + (yBalle - yBalle4) * (yBalle - yBalle4)); 
 
\t \t var dist23 = Math.sqrt((xBalle2 - xBalle3) * (xBalle2 - xBalle3) + (yBalle2 - yBalle3) * (yBalle2 - yBalle3)); 
 
\t \t var dist24 = Math.sqrt((xBalle2 - xBalle4) * (xBalle2 - xBalle4) + (yBalle2 - yBalle4) * (yBalle2 - yBalle4)); 
 
     var dist34 = Math.sqrt((xBalle3 - xBalle4) * (xBalle3 - xBalle4) + (yBalle3 - yBalle4) * (yBalle3 - yBalle4)); 
 
     
 

 
     ////boucles if vérifiant la valeur de la distance, ainsi que les directions des balles 
 
     if(dist12 <= parseFloat(rBalle)*2){ //balles 1 et 2 
 
      if(vitesseX*vitesseX2 < 0) 
 
      { 
 
       vitesseX *= -1; vitesseX2 *= -1; 
 
      } 
 
      else{ 
 
       vitesseX *= 1; vitesseX2 *= 1; 
 
      } 
 

 
      if(vitesseY*vitesseY2 < 0){ 
 
       vitesseY *= -1; vitesseY2 *= -1; 
 
      } 
 
      else{ 
 
       vitesseY *= 1; vitesseY2 *= 1; 
 
      } 
 
     } 
 

 
     if(dist13 <= parseFloat(rBalle)*2){ //balles 1 et 3 
 
      if(vitesseX*vitesseX3 < 0) 
 
      { 
 
       vitesseX *= -1; vitesseX3 *= -1; 
 
      } 
 
      else{ 
 
       vitesseX *= 1; vitesseX3 *= 1; 
 
      } 
 

 
      if(vitesseY*vitesseY3 < 0){ 
 
       vitesseY *= -1; vitesseY3 *= -1; 
 
      } 
 
      else{ 
 
       vitesseY *= 1; vitesseY3 *= 1; 
 
      } 
 
     } 
 

 
     if(dist14 <= parseFloat(rBalle)*2){ //balles 1 et 4 
 

 
      if(vitesseX*vitesseX4 < 0) 
 
      { 
 
       vitesseX *= -1; vitesseX4 *= -1; 
 
      } 
 
      else{ 
 
       vitesseX *= 1; vitesseX4 *= 1; 
 
      } 
 

 
      if(vitesseY*vitesseY4 < 0){ 
 
       vitesseY *= -1; vitesseY4 *= -1; 
 
      } 
 
      else{ 
 
       vitesseY *= 1; vitesseY4 *= 1; 
 
      } 
 
     } 
 

 
     if(dist23 <= parseFloat(rBalle)*2){ //balles 2 et 3 
 
      if(vitesseX2*vitesseX3 < 0) 
 
      { 
 
       vitesseX2 *= -1; vitesseX3 *= -1; 
 
      } 
 
      else{ 
 
       vitesseX2 *= 1; vitesseX2 *= 1; 
 
      } 
 

 
      if(vitesseY2*vitesseY3 < 0){ 
 
       vitesseY2 *= -1; vitesseY3 *= -1; 
 
      } 
 
      else{ 
 
       vitesseY2 *= 1; vitesseY3 *= 1; 
 
      } 
 
     } 
 

 
     if(dist24 <= parseFloat(rBalle)*2){ //balles 2 et 4 
 

 
      if(vitesseX2*vitesseX4 < 0) 
 
      { 
 
       vitesseX2 *= -1; vitesseX4 *= -1; 
 
      } 
 
      else{ 
 
       vitesseX2 *= 1; vitesseX4 *= 1; 
 
      } 
 

 
      if(vitesseY2*vitesseY4 < 0){ 
 
       vitesseY2 *= -1; vitesseY4 *= -1; 
 
      } 
 
      else{ 
 
       vitesseY2 *= 1; vitesseY4 *= 1; 
 
      } 
 
     } 
 

 
     if(dist34 <= parseFloat(rBalle)*2){ //balles 3 et 4 
 
      if(vitesseX3*vitesseX4 < 0) 
 
      { 
 
       vitesseX3 *= -1; vitesseX4 *= -1; 
 
      } 
 
      else{ 
 
       vitesseX3 *= 1; vitesseX4 *= 1; 
 
      } 
 

 
      if(vitesseY3*vitesseY4 < 0){ 
 
       vitesseY3 *= -1; vitesseY4 *= -1; 
 
      } 
 
      else{ 
 
       vitesseY3 *= 1; vitesseY4 *= 1; 
 
      } 
 
     } 
 

 
     //Pour déplacer les balles dans le plan 
 

 
     xBalle += vitesseX; 
 
     yBalle += vitesseY; 
 

 
     xBalle2 += vitesseX2; 
 
     yBalle2 += vitesseY2; 
 

 
     xBalle3 += vitesseX3; 
 
     yBalle3 += vitesseY3; 
 

 
     xBalle4 += vitesseX4; 
 
     yBalle4 += vitesseY4; 
 
    } 
 
}
<canvas id="mon_canvas"></canvas>

関連する問題