La déclaration Var écrase la variable actuelle

Question

J'ai besoin d'aide pour comprendre ce que je fais de mal avec mon code js. Fondamentalement, j'ai une toile et une particule qui rebondit autour de la toile. Ce que je veux, c'est que les utilisateurs saisissent des données dans un formulaire et les soumettent, alors la particule commencera avec leurs valeurs spécifiées.

Le corps HTML:

<canvas id="myCanvas" width="400" height="400"></canvas> 

<form id="myForm" > 


      X Initial: 
      <input type="text" id="xInit" name="xInit" /> 
      <br/> 

      Y initial: 
      <input type="text" id="yInit" name="yInit" /> 
      <br/> 

      X Velocity: 
      <input type="text" id="xDir" name="xDir" /> 
      <br/> 

      Y Velocity: 
      <input type="text" id="xDir" name="yDir" /> 
      <br/> 


      Change: 
      <input type="submit" value="Submit"> 


</form> 

La particule est sa propre classe:

function particle(x, y, dX, dY) { 
    this.x = x; 
    this.y = y; 
    this.dX = dX; 
    this.dY = dY; 
    this.check = checkCollision; 
} 

J'initialise la page et soumettre le formulaire en utilisant jquery:

$(document).ready(function(){ 
     var canvas = document.getElementById('myCanvas'); 
     var ctx = canvas.getContext("2d"); 
     var HEIGHT = 400; 
     var WIDTH = 400; 
     var p1, xl, yl, xd, yd; 
        ...More code... 
      $("form").submit(function(){ 
       xl = +$("#xInit").val(); 
       yl = +$("#yInit").val(); 
       xd = +$("#xDir").val(); 
       yd = +$("#xDir").val(); 
       p1 = new particle(xl,yl,xd,yd); 
       init(); 
     }); 
    }); 

Puis enfin, ma fonction init() appelle une fonction draw() pour redessiner la particule sur un ensemble Intervalle:Donc, quand je clique sur soumettre, tout fonctionne d'abord, il dessine la particule 1 fois, puis disparaît pour toujours. Je crois que c'est parce que le var p1, xl, yl, xd, yd; ne cesse de se déclarer. Y a-t-il un moyen de contourner ceci? Ou une meilleure façon de mettre en place en général? Merci beaucoup.

---

Mise à jour

return false; partie travaillée très appréciée

Answer 1

Ce qui se passe, c'est que votre formulaire est soumis lorsque vous cliquez sur «Soumettre». Cela actualise la page et vos variables sont réinitialisées.

Vous devez retourner false dans le gestionnaire submit pour éviter que:

 $("form").submit(function(){ 
      xl = +$("#xInit").val(); 
      yl = +$("#yInit").val(); 
      xd = +$("#xDir").val(); 
      yd = +$("#xDir").val(); 
      p1 = new particle(xl,yl,xd,yd); 
      init(); 
      return false; // <====== 
     });