test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Physics Simulation</title>
<style>
body { margin: 0; overflow: hidden; background: #f0f4f8; font-family: sans-serif; }
canvas { display: block; }
#controls {
position: absolute; top: 20px; left: 20px;
background: rgba(255, 255, 255, 0.9); padding: 15px;
border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="controls">
<h3>Gravity Lab</h3>
<p>Click screen to jump.</p>
<label>Gravity: <input type="range" id="gravitySlider" min="0.1" max="2" step="0.1" value="0.8"></label>
</div>
<canvas id="simCanvas"></canvas>
<script>
const canvas = document.getElementById('simCanvas');
const ctx = canvas.getContext('2d');
// 1. Setup Canvas Responsiveness
let width, height;
function resize() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
}
window.addEventListener('resize', resize);
resize(); // Initial call
// 2. Physics Variables
let gravity = 0.8;
const friction = 0.9; // Energy loss on bounce
// 3. The Object (Ball)
const ball = {
x: width / 2,
y: height / 5,
radius: 30,
vx: 4, // Velocity X
vy: 0, // Velocity Y
color: '#FF6B6B'
};
// 4. Update Physics Logic
function update() {
// Update slider value
gravity = parseFloat(document.getElementById('gravitySlider').value);
// Apply forces
ball.vy += gravity; // Gravity accelerates Y velocity
// Move object
ball.x += ball.vx;
ball.y += ball.vy;
// Floor Collision (Bounce)
if (ball.y + ball.radius > height) {
ball.y = height - ball.radius; // Reset position to floor
ball.vy *= -friction; // Reverse velocity and lose energy
}
// Wall Collision
if (ball.x + ball.radius > width || ball.x - ball.radius < 0) {
ball.vx *= -1;
}
}
// 5. Draw Function
function draw() {
// Clear screen
ctx.clearRect(0, 0, width, height);
// Draw Ball
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath();
// Optional: Draw Velocity Vector (Visual Aid)
ctx.beginPath();
ctx.moveTo(ball.x, ball.y);
ctx.lineTo(ball.x + ball.vx * 5, ball.y + ball.vy * 5);
ctx.strokeStyle = '#333';
ctx.stroke();
}
// 6. The Loop
function animate() {
update();
draw();
requestAnimationFrame(animate);
}
// Interaction
window.addEventListener('mousedown', () => {
ball.vy = -20; // Jump force
ball.vx = (Math.random() - 0.5) * 10; // Random x push
});
// Start
animate();
</script>
</body>
</html>
Comments
Post a Comment