<script> let canvas = document.getElementById("game"); let ctx = canvas.getContext("2d"); let basket = { x: 150, y: 550, width: 100, height: 20 }; let fruits = []; let score = 0; document.addEventListener("mousemove", (e) => { basket.x = e.clientX - 50; }); function spawnFruit() { let x = Math.random() * 350; fruits.push({ x: x, y: 0, size: 20, speed: 3 }); } function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Basket draw ctx.fillStyle = "yellow"; ctx.fillRect(basket.x, basket.y, basket.width, basket.height); // Fruits ctx.fillStyle = "red"; fruits.forEach((f, index) => { f.y += f.speed; ctx.beginPath(); ctx.arc(f.x, f.y, f.size, 0, Math.PI * 2); ctx.fill(); // Collision if ( f.y > basket.y && f.x > basket.x && f.x < basket.x + basket.width ) { fruits.splice(index, 1); score++; } // Miss if (f.y > canvas.height) { fruits.splice(index, 1); } }); // Score ctx.fillStyle = "white"; ctx.fillText("Score: " + score, 10, 20); requestAnimationFrame(update); } setInterval(spawnFruit, 1000); update(); </script> </body> </html>Different fruits images ❤️ Lives system 🔊 Sound effects 🎯 Levels (speed increase) 🏆 High score system
Free to start · Generate videos and images with AI in seconds