Javascript Var声明覆盖当前变量

我需要一些帮助来理解我的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>

我初始化页面并使用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();
        });
    });

最后，my init（）函数调用函数draw（），以在设定的时间间隔内重新绘制粒子：

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

因此，当我单击“提交所有内容”时，它会一次绘制粒子，然后它将永远消失。我相信这是因为变量p1，xl，yl，xd，yd不断地重新声明自己。有办法解决这个问题吗？还是一个更好的方法来建立这个？ 非常感谢

---

更新

---

返回错误；非常感谢您所做的部分工作

当您单击“提交”时，您的表单将被提交。这将刷新页面，并重置变量

您必须在

submit

处理程序中返回

false

，以防止：

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

$（“表单”）.submit（函数（）{
xl=+$（“#xInit”）.val（）；
yl=+$（“#yInit”）.val（）；
xd=+$（“#xDir”）.val（）；
yd=+$（“#xDir”）.val（）；
p1=新粒子（xl，yl，xd，yd）；
init（）；
return false；//与jQuery文档就绪处理程序相关的
init（）
函数在哪里？在这个函数内部？或者并排/在它外部？我们可能需要查看“draw”函数（除非我发疯了，否则这里不会显示这个函数）.这是我打赌罪犯藏身的地方。更新粒子位置的代码在哪里？
        $("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; // <======
        });