Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<title>Projectile Motion Simulation</title>
</head>
<body style="text-align:center; font-family:Arial;">
<h2>Projectile Motion Simulation</h2>
Angle: <input type="range" id="angle" min="10" max="80" value="45">
<span id="angleVal">45</span>Β°<br><br>
Speed: <input type="range" id="speed" min="10" max="100" value="50">
<span id="speedVal">50</span> m/s<br><br>
<button onclick="simulate()">Launch π</button>
<canvas id="canvas" width="500" height="300" style="border:1px solid black;"></canvas>
<script>
let angle = document.getElementById("angle");
let speed = document.getElementById("speed");
angle.oninput = () => document.getElementById("angleVal").innerText = angle.value;
speed.oninput = () => document.getElementById("speedVal").innerText = speed.value;
function simulate() {
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
let g = 9.8;
let v = speed.value;
let a = angle.value * Math.PI / 180;
let t = 0;
let x, y;
function draw() {
x = v * Math.cos(a) * t;
y = v * Math.sin(a) * t - 0.5 * g * t * t;
if (y < 0) return;
ctx.fillRect(x, 300 - y, 3, 3);
t += 0.1;
requestAnimationFrame(draw);
}
draw();
}
</script>
</body>
</html>1
1
2KB
2KB
141.0ms
204.0ms
142.0ms