🧩 Gameplay chính
Game dạng đập thú (whack-a-mole).
Có các lỗ (holes) nơi thú sẽ xuất hiện ngẫu nhiên.
Có 2 loại thú:
🐺 Sói → đập trúng sẽ +1 điểm
🐰 Thỏ → đập trúng sẽ -1 tim
❤️ Hệ thống mạng (HP)
Người chơi có tối đa 3 trái tim ❤️❤️❤️
Khi đập trúng thỏ → mất 1 tim
Hết tim → Game Over (hiện popup đẹp bằng SweetAlert2)
🏆 Hệ thống màn chơi
Màn 1:
Có 9 lỗ (3x3 grid)
Cần đập trúng 5 con sói để qua màn
Tốc độ xuất hiện: trung bình
Màn 2:
Có 12 lỗ (4x3 grid)
Cần đập trúng 5 con sói
Tốc độ nhanh hơn, khó hơn
👉 Qua màn 2 → hiển thị:
🎉 “Bạn đã phá đảo!” (popup đẹp + hiệu ứng)
🎯 Cơ chế xuất hiện
Thỏ và sói xuất hiện ngẫu nhiên tại các lỗ
Không cho 2 con xuất hiện cùng 1 lỗ cùng lúc
Thời gian tồn tại mỗi con: 0.8s – 1.5s
Có hiệu ứng:
Nhô lên (scale + translateY)
Biến mất mượt (fade/scale)
🖱️ Điều khiển
Click chuột vào thú để đập
Khi click:
Sói → hiệu ứng hit + tăng điểm
Thỏ → hiệu ứng sai + rung màn hình nhẹ
🎨 Giao diện & UI
Thiết kế đẹp, hiện đại:
Background vui nhộn (rừng/cỏ)
Lỗ dạng tròn có bóng đổ
Hiển thị:
⭐ Điểm
❤️ Tim
🎮 Màn hiện tại
Có hiệu ứng:
Hover nhẹ
Click animation
Transition mượt
🔊 Âm thanh (tuỳ chọn nhưng nên có)
Hit đúng: âm “pop”
Hit sai: âm “oops”
Game over: âm buồn
Win: âm chiến thắng
📦 Kỹ thuật yêu cầu
Viết bằng HTML + CSS + JS thuần (không framework)
Code rõ ràng, dễ hiểu, tách file nếu cần
Có thể dùng:
SweetAlert2 cho popup
CSS animation / keyframes
⚙️ Tính năng bổ sung (bonus nếu có)
Nút Restart
Đếm thời gian mỗi màn
Tăng tốc độ theo thời gian chơi
Responsive (chơi được trên mobile)
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
tải về và mở lên chơi luôn