HTML5JavaScript画布中的弹丸运动仿真_Javascript_Html_Canvas

HTML5JavaScript画布中的弹丸运动仿真

javascript html canvas

HTML5JavaScript画布中的弹丸运动仿真,javascript,html,canvas,Javascript,Html,Canvas,我希望模拟抛射体的运动（以一定的速度离开地面，一直持续到球再次落地），忽略空气阻力。我正在使用HTML5和JavaScript的画布功能来实现这一点。我是JavaScript的新手，因此非常感谢您的帮助这是到目前为止我的代码。我一次又一次地遇到同样的错误：输入意外结束。我还尝试包括开始、停止和重置按钮，以及用户输入自己角度的选项，以便他们可以看到最终水平距离的变化我尝试了许多不同的方法来消除这个错误；我错过了什么 <html> <head> <titl

我希望模拟抛射体的运动（以一定的速度离开地面，一直持续到球再次落地），忽略空气阻力。我正在使用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>


弹丸运动
开始

重置

停止

角度=
函数rectang（）{
co.beginPath（）；
co.rect(0,0600600);；
co.stroke（）；
}
变重力
变差角
var速度
var velocityx
var velocityy
var距离
var公司
var公司
变量时间
变量x
变量y
变异半径
//列出变量
函数init（）{
var-can；
can=document.getElementById（“mycanvas”）；
co=can.getContext（“2d”）；
重置（）；
}
函数重置（）{
重力=5；
角度=（45*（数学PI）/180）；
速度=10；
velocityx=速度*数学cos（角度）；
velocityy=速度*数学sin（角度）；
时间=0；
距离=速度x*时间；
inc=0.5；
x=0；
y=600；
半径=10；
}
函数绘图（）{
co.clearRect（0,0600600）；
圆（co，x，y，半径，“黄色”，假）
时间=时间+公司；
x=x+velocityx*时间；
y=y+velocityy*时间；
velocityx=velocityx；
velocityy=velocityy+velocityy*时间；
}
函数settimer（）{
如果（计时器==null）计时器=setInterval（绘图，时间）；
角度=document.getElementById（“角度”）.value；
}
函数cleartimer（）{
清除间隔（计时器）；
定时器=空；
}
init（）；
函数圆（上下文、x、y、r、颜色、填充）{
if（fill==true）{
//如果fill为true，则填充圆
var temp=context.fillStyle；
context.fillStyle=颜色；
context.beginPath（）；
弧（x，y，r，0,2*Math.PI）；
context.fill（）；
context.fillStyle=temp；
}
否则{
//如果fill为false，则不要填充圆
var temp=context.strokeStyle；
context.strokeStyle=颜色；
context.beginPath（）；
弧（x，y，r，0,2*Math.PI）；
stroke（）；
context.strokeStyle=temp；
}

存在一些问题，主要是一些双增量，其中“时间”在每个循环中都越来越大，x/y值也在增加。此外，对于“速度y”，您应该在开始时使用负值（子弹越来越高），然后根据重力添加一些内容。黄色在这里不太可读

函数rectang（）{
co.beginPath（）；
co.rect(0,0600600);；
co.stroke（）；
}
变重力
变差角
var速度
var velocityx
var velocityy
var距离
var公司
var公司
变量时间
变量x
变量y
变异半径
//列出变量
函数init（）{
var-can；
can=document.getElementById（“mycanvas”）；
co=can.getContext（“2d”）；
重置（）；
}
函数重置（）{
重力=5；
角度=（45*（数学PI）/180）；
速度=10；
velocityx=速度*数学cos（角度）；
速度y=速度*数学正弦（角度）*-1；
时间=0；
距离=速度x*时间；
inc=0.5；
x=0；
y=300；
半径=10；
}
函数绘图（）{
//console.log（x，y）
co.clearRect（0,0600300）；
圆（co，x，y，半径，“黄色”，假）
时间=时间+公司；
x=x+velocityx*inc；
y=y+velocityy*inc；
velocityx=velocityx；
velocityy=velocityy+重力*inc*0.1；
}
var定时器=null；
函数settimer（）{
如果（计时器==null）计时器=setInterval（绘图，时间）；
角度=document.getElementById（“角度”）.value；
}
函数cleartimer（）{
清除间隔（计时器）；
定时器=空；
}
init（）；
函数圆（上下文、x、y、r、颜色、填充）{
x=数学圆（x）
y=数学圆（y）
//控制台日志（x、y、r、颜色、填充）
if（fill==true）{
//如果fill为true，则填充圆
var temp=context.fillStyle；
context.fillStyle=颜色；
context.beginPath（）；
弧（x，y，r，0,2*Math.PI）；
context.fill（）；
context.fillStyle=temp；
}
否则{
//如果fill为false，则不要填充圆
var temp=context.strokeStyle；
context.beginPath（）；
弧（x，y，r，0,2*Math.PI）；
context.strokeStyle=颜色；
context.lineWidth=4；
stroke（）；
context.strokeStyle=temp；
}
}

开始

重置

停止

角度=

JavaScript不是Java。最后一个函数循环缺少一个结尾}。