File size: 3,871 Bytes
7a20ab4 961c0dd aa87502 7a20ab4 e4cc7ca 36db671 7a20ab4 961c0dd e4cc7ca 7a20ab4 e4cc7ca c0c3f27 e4cc7ca c0c3f27 e4cc7ca c528bbf e4cc7ca aa87502 e4cc7ca f9393f0 aa87502 e4cc7ca aa87502 c528bbf aa87502 e4cc7ca aa87502 e4cc7ca c528bbf e4cc7ca c0c3f27 e4cc7ca 2fa5fbb aa87502 e4cc7ca aa87502 e4cc7ca aa87502 e4cc7ca aa87502 e4cc7ca c0c3f27 e4cc7ca 36db671 e4cc7ca 961c0dd c0c3f27 2fa5fbb ee44b0e 961c0dd ee44b0e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D Rocket Launch with Expanding Orbit</title>
<style>
body { margin: 0; background-color: black; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// Get canvas and context
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Define Earth
const earth = {
x: canvas.width / 2,
y: canvas.height - 100,
radius: 50
};
// Define Rocket
let rocket = {
x: earth.x,
y: earth.y - earth.radius - 10, // Start above Earth
radius: 5,
velocityY: 0,
isLaunching: false,
inOrbit: false,
orbitAngle: 0,
orbitRadius: 80 // Initial small orbit
};
// Launch & Orbit Parameters
const launchSpeed = -3.0; // Initial launch speed
const gravity = 0.05; // Simulated gravity pulling rocket down
const orbitSpeed = 0.02; // Speed in orbit
const orbitExpansionRate = 0.05; // Gradual orbit increase
let boosting = false; // Boost flag
// Listen for spacebar to launch
document.addEventListener("keydown", (event) => {
if (event.code === "Space" && !rocket.isLaunching && !rocket.inOrbit) {
rocket.isLaunching = true;
rocket.velocityY = launchSpeed;
}
// Press "B" to boost the orbit distance
if (event.code === "KeyB" && rocket.inOrbit) {
boosting = true;
}
});
document.addEventListener("keyup", (event) => {
if (event.code === "KeyB") {
boosting = false;
}
});
// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw Earth
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(earth.x, earth.y, earth.radius, 0, Math.PI * 2);
ctx.fill();
// 🚀 Launch Phase
if (rocket.isLaunching && !rocket.inOrbit) {
rocket.y += rocket.velocityY;
rocket.velocityY += gravity; // Apply gravity
// Check if rocket reaches orbit height
if (rocket.y < earth.y - 150) {
rocket.isLaunching = false;
rocket.inOrbit = true;
rocket.orbitAngle = 0; // Reset angle for orbit
}
}
// 🛰️ Orbit Phase
else if (rocket.inOrbit) {
rocket.orbitAngle += orbitSpeed;
// Gradually increase orbit radius over time
rocket.orbitRadius += orbitExpansionRate;
// Apply boost for faster orbit increase
if (boosting) {
rocket.orbitRadius += 0.5;
}
// Calculate new position based on updated orbit
rocket.x = earth.x + rocket.orbitRadius * Math.cos(rocket.orbitAngle);
rocket.y = earth.y - rocket.orbitRadius * Math.sin(rocket.orbitAngle);
}
// Draw Rocket
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(rocket.x, rocket.y, rocket.radius, 0, Math.PI * 2);
ctx.fill();
requestAnimationFrame(animate);
}
animate(); // Start animation
</script>
</body>
</html>
|