HTML5中的拋體運動模擬JavaScript canvas

我正在尋找模擬拋體運動（離地一定速度，直到球落在地面上），忽略空氣阻力。我正在使用HTML5和JavaScript的畫布功能來完成它。我是JavaScript的新手，所以任何幫助表示讚賞。HTML5中的拋體運動模擬JavaScript canvas

這是我的代碼到目前爲止。我一次又一次地遇到同樣的錯誤：意外的輸入結束。我還試圖包括開始，停止和重置按鈕，以及用戶輸入自己的角度的選項，以便他們可以看到最終的水平距離變化。

我試過很多不同的方法來擺脫這個錯誤;我錯過了什麼？

<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>

來源

2017-06-03 esch44

的JavaScript不是Java。 – Patrick

請參閱https://stackoverflow.com/help/mcve – guest271314

您錯過了最後一個功能圈的閉幕}。 – Blindman67

有一些問題，主要是某種雙遞增，其中「時間」每個循環變得越來越大，並且x/y值也增加了。此外，對於「速度」，你應該在開始時使用負值（子彈越來越高），然後根據重力添加一些東西。這裏黃色不是很可讀。

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; 
 
    } 
 
}

<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>

來源

2017-06-03 22:31:11

HTML5中的拋體運動模擬JavaScript canvas

回答

相關問題