omaigot
Gà con
Ảnh demo
Link trải nghiệm
code:
Link trải nghiệm
code:
<!DOCTYPE html><html lang="vi"><head> <meta charset="UTF-8"> <title>🍎 Game Hứng Táo Pro</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { text-align: center; background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Arial', sans-serif; overflow: hidden; } h1 { color: #fff; font-size: 2.5em; margin-bottom: 10px; text-shadow: 0 0 20px rgba(255,180,0,0.8); letter-spacing: 2px; } p { color: #-censor-; margin-bottom: 15px; } canvas { background: #0a1628; display: block; margin: 0 auto; border-radius: 12px; box-shadow: 0 0 50px rgba(0,150,255,0.2); border: 3px solid rgba(255,255,255,0.1); } #ui-layer { position: relative; } #restartBtn { display: none; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); padding: 15px 40px; font-size: 20px; background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 20px rgba(231,76,60,0.5); transition: 0.2s; } #restartBtn:hover { transform: translate(-50%, -50%) scale(1.1); } </style></head><body> <h1>🍎 HỨNG TÁO PRO</h1> <p>Sử dụng <b>Phím Mũi Tên</b> hoặc <b>Chuột/Cảm ứng</b> để chơi</p> <div id="ui-layer"> <canvas id="gameCanvas" width="400" height="550"></canvas> <button id="restartBtn" onclick="restartGame()">🔄 CHƠI LẠI</button> </div> <script> const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); let score = 0; let gameOver = false; let particles = []; let shakeAmount = 0; const basket = { width: 100, height: 20, x: 150, y: 510, speed: 9, dx: 0, color: "#d35400" }; const apple = { x: Math.random() * 360 + 20, y: -20, radius: 15, speed: 4, rotation: 0 }; // Hiệu ứng pháo hoa khi hứng được táo function createParticles(x, y) { for (let i = 0; i < 10; i++) { particles.push({ x: x, y: y, vx: (Math.random() - 0.5) * 6, vy: (Math.random() - 0.5) * 6, life: 1, color: `hsl(${Math.random() * 60 + 0}, 100%, 50%)` }); } } // Điều khiển chuột/cảm ứng canvas.addEventListener("mousemove", (e) => { const rect = canvas.getBoundingClientRect(); basket.x = e.clientX - rect.left - basket.width / 2; }); // Điều khiển bàn phím document.addEventListener("keydown", (e) => { if (e.key === "ArrowLeft") basket.dx = -basket.speed; if (e.key === "ArrowRight") basket.dx = basket.speed; }); document.addEventListener("keyup", () => basket.dx = 0); function update() { if (gameOver) return; // Rung màn hình if (shakeAmount > 0) shakeAmount -= 0.5; // Cập nhật giỏ basket.x += basket.dx; if (basket.x < 0) basket.x = 0; if (basket.x + basket.width > canvas.width) basket.x = canvas.width - basket.width; // Cập nhật táo apple.y += apple.speed; apple.rotation += 0.05; // Kiểm tra va chạm if (apple.y + apple.radius > basket.y && apple.x > basket.x && apple.x < basket.x + basket.width) { score++; createParticles(apple.x, apple.y); shakeAmount = 3; resetApple(); apple.speed += 0.25; // Tăng dần tốc độ } // Game over if (apple.y > canvas.height) { gameOver = true; shakeAmount = 10; document.getElementById("restartBtn").style.display = "block"; } // Cập nhật hạt hiệu ứng particles.forEach((p, i) => { p.x += p.vx; p.y += p.vy; p.life -= 0.02; if (p.life <= 0) particles.splice(i, 1); }); } function resetApple() { apple.y = -20; apple.x = Math.random() * (canvas.width - 40) + 20; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); // Áp dụng hiệu ứng rung if (shakeAmount > 0) { ctx.translate((Math.random() - 0.5) * shakeAmount, (Math.random() - 0.5) * shakeAmount); } // Vẽ cỏ/nền phía dưới ctx.fillStyle = "#27ae60"; ctx.fillRect(0, 530, canvas.width, 20); // Vẽ hạt hiệu ứng particles.forEach(p => { ctx.globalAlpha = p.life; ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, 3, 0, Math.PI * 2); ctx.fill(); }); // Vẽ giỏ (có đổ bóng) ctx.fillStyle = basket.color; ctx.shadowBlur = 15; ctx.shadowColor = "rgba(0,0,0,0.5)"; ctx.beginPath(); ctx.roundRect(basket.x, basket.y, basket.width, basket.height, 5); ctx.fill(); ctx.shadowBlur = 0; // Vẽ táo ctx.save(); ctx.translate(apple.x, apple.y); ctx.rotate(apple.rotation); ctx.fillStyle = "#e74c3c"; ctx.beginPath(); ctx.arc(0, 0, apple.radius, 0, Math.PI * 2); ctx.fill(); // Cuống táo ctx.fillStyle = "#2ecc71"; ctx.fillRect(-2, -apple.radius - 5, 4, 7); ctx.restore(); // Vẽ điểm số ctx.fillStyle = "white"; ctx.font = "bold 24px Arial"; ctx.fillText("🍎 Điểm: " + score, 20, 40); if (gameOver) { ctx.fillStyle = "rgba(0,0,0,0.7)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#ff4757"; ctx.font = "bold 45px Arial"; ctx.textAlign = "center"; ctx.fillText("THUA RỒI!", canvas.width / 2, canvas.height / 2); ctx.font = "20px Arial"; ctx.fillStyle = "white"; ctx.fillText("Số điểm của bạn: " + score, canvas.width / 2, canvas.height / 2 + 40); } ctx.restore(); } function restartGame() { score = 0; apple.speed = 4; gameOver = false; particles = []; resetApple(); document.getElementById("restartBtn").style.display = "none"; } function loop() { update(); draw(); requestAnimationFrame(loop); } loop(); </script></body></html>
Sửa lần cuối: