Bouncing Ball

// Simple bouncing ball with gravity const root = document.getElementById('root'); root.innerHTML = `

Bouncing Ball

Click "Drop Ball" to see gravity in action.

Click "Reset" to start over.

`; const canvas = document.getElementById('ball-canvas'); const ctx = canvas.getContext('2d'); const dropBtn = document.getElementById('drop-btn'); const resetBtn = document.getElementById('reset-btn'); // Ball properties const radius = 20; const startX = canvas.width / 2; const startY = radius + 10; let x = startX; let y = startY; let vy = 0; const gravity = 0.7; const bounce = 0.7; let isDropping = false; function drawBall() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = '#3498db'; ctx.fill(); ctx.closePath(); } function animate() { if (!isDropping) return; vy += gravity; y += vy; // Bounce if (y + radius > canvas.height) { y = canvas.height - radius; vy *= -bounce; // Stop if velocity is very low if (Math.abs(vy) < 1) { vy = 0; isDropping = false; } } drawBall(); if (isDropping) { requestAnimationFrame(animate); } } function resetBall() { x = startX; y = startY; vy = 0; isDropping = false; drawBall(); } dropBtn.onclick = () => { if (!isDropping) { isDropping = true; animate(); } }; resetBtn.onclick = () => { resetBall(); }; // Initial draw drawBall(); body { margin: 0; font-family: Arial, sans-serif; background: #f4f4f4; } .container { max-width: 420px; margin: 40px auto; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 24px 24px 36px 24px; text-align: center; } h1 { margin-top: 0; margin-bottom: 12px; font-size: 2rem; letter-spacing: 1px; } .instructions { margin-bottom: 10px; } .instructions p { margin: 2px 0 2px 0; font-size: 1rem; color: #444; line-height: 1.2; } .canvas-container { margin: 18px 0 0 0; display: flex; justify-content: center; } #ball-canvas { background: #e9ecef; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); display: block; } .button-row { margin-top: 32px; display: flex; justify-content: center; gap: 16px; } button { padding: 8px 22px; font-size: 1rem; border: none; border-radius: 5px; background: #3498db; color: #fff; cursor: pointer; transition: background 0.2s; } button:hover { background: #217dbb; }