Объявление Var перезаписывает текущую переменную

Question

Мне нужна помощь, чтобы понять, что я делаю неправильно с моим кодом js. В основном у меня есть холст и частица, которые отскакивают внутри холста. Я хочу, чтобы пользователи вводили данные в форму и отправляли их, а затем частица начинала с их заданных значений.

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> 

Частица это собственный класс:

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

инициализирую страницу и отправить форму с помощью 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(); 
     }); 
    }); 

Тогда, наконец, моя функция init() вызывает функцию draw() для перерисовки частицы над набором. Интервал:

function init() { 
    draw(); 
    alert(p1.x); 
    return setInterval(draw, 10); 
} 

Итак, когда я нажимаю кнопку «Отправить», все работает на начальном этапе, оно рисует частицу 1 раз, а затем исчезает навсегда. Я считаю, что это потому, что var p1, xl, yl, xd, yd; продолжает повторное объявление себя. Есть ли способ обойти это? Или лучший способ установить это в целом? Большое спасибо.

---

Update

Возвращение ложным; часть работала высоко оценили

Answer 1

Что происходит, когда ваша форма отправляется, когда вы нажимаете «Отправить». Это обновляет страницу, и ваши переменные сбрасываются.

Вы должны вернуть false в submit обработчика, чтобы предотвратить, что:

 $("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; // <====== 
     });