Question

我正在寻找模拟弹丸运动（以一定速度离开地面，持续直到球再次降落在地面上）忽略空气阻力。我正在使用HTML5和JavaScript的画布功能来完成它。我是JavaScript的新手，所以感谢任何帮助。

到目前为止，这是我的代码。我一次又一次地遇到同样的错误：意外结束输入。我还试图包括启动，停止和重置按钮，以及用户输入自己角度的选项，这样他们就可以看到最终的水平距离变化。

我尝试了很多不同的方法来摆脱这个错误;我错过了什么？

<html>

<head>
    <title>
    Projectile Motion
    </title>
</head>

<body>

<button onclick=settimer()>Start</button><br>
<button onclick=reset()>Reset</button><br>
<button onclick=cleartimer()>Stop</button><br>
Angle=<input type="text" id="Angle in Degrees" value=45></input>
<canvas id="mycanvas" height="600" width="600"></canvas>

<script>

function rectang() {
co.beginPath();
co.rect(0,0,600,600);
co.stroke();
}

var gravity
var Angle
var velocity
var velocityx
var velocityy
var distance
var co
var inc
var time
var x
var y
var radius



//list variables

function init() {
    var can;
    can = document.getElementById("mycanvas");
    co = can.getContext("2d");
    reset();
}

function reset() {
    gravity = 5;
    Angle = (45*(Math.PI)/180);
    velocity = 10;
    velocityx = velocity*Math.cos(Angle);
    velocityy = velocity*Math.sin(Angle);
    time = 0;
    distance = velocityx*time;
    inc = 0.5;
    x = 0;
    y = 600;
    radius = 10;
}

function draw() {
    co.clearRect(0,0,600,600);
    circle(co,x,y,radius,"yellow",false)

    time = time + inc;
    x = x + velocityx*time;
    y = y + velocityy*time;
    velocityx = velocityx;
    velocityy = velocityy + velocityy*time;
}


function settimer() {
    if (timer == null) timer = setInterval(draw,time);
    Angle = document.getElementById("Angle").value;
}
function cleartimer(){
    clearInterval(timer);
    timer = null;
}

init();


function circle(context,x,y,r,color,fill) {
    if (fill == true) {
        //if fill is true, fill the circle
        var temp = context.fillStyle;
        context.fillStyle = color;
        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.fill();
        context.fillStyle = temp;
    }
    else {
        //if fill is false, don't fill the circle
        var temp = context.strokeStyle;
        context.strokeStyle = color;
        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.stroke();
        context.strokeStyle = temp;
    }


</script>

</body>

</html>

Answer 1

有一些问题，主要是某种双倍增加，其中＆＃34;时间＆＃34;每个循环越来越大，x / y值也在增加。此外，对于＆＃34;速度＆＃34;你应该在开始时使用负值（子弹越来越高），然后根据重力添加一些东西。黄色在这里不太可读。

＆＃13;

function rectang() {
co.beginPath();
co.rect(0,0,600,600);
co.stroke();
}

var gravity
var Angle
var velocity
var velocityx
var velocityy
var distance
var co
var inc
var time
var x
var y
var radius



//list variables

function init() {
    var can;
    can = document.getElementById("mycanvas");
    co = can.getContext("2d");
    reset();
}

function reset() {
    gravity = 5;
    Angle = (45*(Math.PI)/180);
    velocity = 10;
    velocityx = velocity*Math.cos(Angle);
    velocityy = velocity*Math.sin(Angle)*-1;
    time = 0;
    distance = velocityx*time;
    inc = 0.5;
    x = 0;
    y = 300;
    radius = 10;
}

function draw() {
//console.log(x,y)
    co.clearRect(0,0,600,300);
    circle(co,x,y,radius,"yellow",false)

    time = time + inc;
    x = x + velocityx*inc;
    y = y + velocityy*inc;
    velocityx = velocityx;
    velocityy = velocityy + gravity*inc*0.1;
}

var timer = null;
function settimer() {
    if (timer == null) timer = setInterval(draw,time);
    Angle = document.getElementById("Angle").value;
}
function cleartimer(){
    clearInterval(timer);
    timer = null;
}

init();


function circle(context,x,y,r,color,fill) {
x = Math.round(x)
y = Math.round(y)
//console.log(x,y,r,color,fill) 
    if (fill == true) {
        //if fill is true, fill the circle
        var temp = context.fillStyle;
        context.fillStyle = color;
        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.fill();
        context.fillStyle = temp;
    }
    else {
        //if fill is false, don't fill the circle
        var temp = context.strokeStyle;
       
        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.strokeStyle = color;
        context.lineWidth = 4;
        context.stroke();
        context.strokeStyle = temp;
    }
}

＆＃13;

<button onclick=settimer()>Start</button><br>
<button onclick=reset()>Reset</button><br>
<button onclick=cleartimer()>Stop</button><br>
Angle=<input type="text" id="Angle" value=45></input>
<canvas id="mycanvas" height="300" width="600"></canvas>

＆＃13;

HTML5 JavaScript画布中的Projectile Motion Simulation

1 个答案: