<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Giant Slalom Game</title> <style> canvas { background-color: #eef; display: block; margin: 20px auto; border: 2px solid #555; } </style> </head> <body> <h2 style="text-align:center;">Giant Slalom Winter Race</h2> <p style="text-align:center;">Move left and right to ski between the red and blue gates.</p> <canvas id="gameCanvas" width="600" height="400"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const skierWidth = 30; const skierHeight = 50; let skierX = canvas.width/2 - skierWidth/2; const skierY = canvas.height - skierHeight - 10; const skierSpeed = 5; let leftPressed = false; let rightPressed = false; const gates = []; const gateSpeed = 2; // gates move upward const gateInterval = 1500; // milliseconds // Gate types: red and blue function createGate() { const side = Math.random() < 0.5 ? 'left' : 'right'; const color = side === 'left' ? 'red' : 'blue'; const x = side === 'left' ? 100 : canvas.width - 100 - 60; const y = -50; return {x, y, width: 60, height: 10, color}; } function drawSkier() { ctx.fillStyle = 'green'; ctx.fillRect(skierX, skierY, skierWidth, skierHeight); } function drawGates() { gates.forEach(g => { ctx.fillStyle = g.color; ctx.fillRect(g.x, g.y, g.width, g.height); }); } function moveGates() { gates.forEach(g => { g.y += gateSpeed; }); // Remove gates if they go off-screen while (gates.length && gates[0].y > canvas.height) { gates.shift(); } } function spawnGates() { setInterval(() => { gates.push(createGate()); }, gateInterval); } function handleCollision() { for (let g of gates) { if ( g.y + g.height >= skierY && g.y <= skierY + skierHeight && g.x < skierX + skierWidth && g.x + g.width > skierX ) { if ((g.color === 'red' && skierX + skierWidth > canvas.width/2) || (g.color === 'blue' && skierX < canvas.width/2)) { alert("Wrong side! Try again."); resetGame(); break; } } } } function resetGame() { skierX = canvas.width/2 - skierWidth/2; gates.length = 0; } document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') leftPressed = true; if (e.key === 'ArrowRight') rightPressed = true; }); document.addEventListener('keyup', (e) => { if (e.key === 'ArrowLeft') leftPressed = false; if (e.key === 'ArrowRight') rightPressed = false; }); function update() { if (leftPressed && skierX > 0) { skierX -= skierSpeed; } if (rightPressed && skierX + skierWidth < canvas.width) { skierX += skierSpeed; } moveGates(); handleCollision(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawSkier(); drawGates(); // Draw center line ctx.fillStyle='gray'; ctx.fillRect(canvas.width/2 - 2, 0, 4, canvas.height); } function gameLoop() { update(); draw(); requestAnimationFrame(gameLoop); } spawnGates(); gameLoop(); </script> </body> </html>