plants vs zombies

Mô tả

📌 TỔNG QUAN
Plants vs Zombies Clone là một game chiến thuật thời gian thực (tower defense) chạy trên nền web thuần (HTML5 Canvas + JavaScript), không cần cài đặt, không cần server. Lấy cảm hứng từ tựa game huyền thoại Plants vs Zombies của PopCap, sản phẩm tái hiện lối chơi phòng thủ vườn nhà với đồ họa vẽ tay bằng code Canvas, âm thanh tổng hợp qua Web Audio API, và lối chơi mượt mà trên cả desktop lẫn mobile.

🎯 TÍNH NĂNG NỔI BẬT
Tính năng Chi tiết
6 loại cây Peashooter, Sunflower, Wall-nut, Snow Pea, Cherry Bomb, Repeater
4 loại zombie Thường, Cầm Cờ, Đội Nón, Đội Xô (tăng dần HP)
10 màn chơi Từ dễ đến cực khó, mỗi màn nhiều đợt sóng zombie
Cơ chế blocking Zombie dừng hẳn khi gặp cây, đứng cắn cho đến khi cây chết mới đi tiếp
Hiệu ứng làm chậm Snow Pea bắn đạn băng làm zombie chậm 60%, mắt chuyển xanh
Máy cắt cỏ Tự động kích hoạt khi zombie đến gần nhà, nghiền nát cả hàng
Hệ thống mặt trời Rơi tự nhiên từ trời + cây Sunflower sản xuất
Cooldown Mỗi cây có thời gian hồi riêng, hiển thị thanh đen che phủ
Mở khóa màn Lưu tiến độ qua localStorage, hoàn thành mới mở màn tiếp
Đồ họa vector Toàn bộ cây, zombie vẽ bằng Canvas 2D – gradient, bóng đổ, chuyển động
Âm thanh tổng hợp 12+ hiệu ứng âm thanh tạo bằng Web Audio API oscillator
Responsive CSS clamp() + aspect-ratio, touch events, phím tắt bàn phím
🕹️ CÁCH CHƠI
Chọn màn – 10 màn với độ khó tăng dần, click để bắt đầu
Trồng cây – Chọn cây từ thanh công cụ (hoặc phím 1-6), click/bấm vào ô cỏ
Thu thập mặt trời – Click vào mặt trời rơi để tích năng lượng
Phòng thủ – Cây tự động bắn zombie cùng hàng; đặt Hạt Dẻ làm lá chắn
Sinh tồn – Sống sót qua tất cả các đợt sóng để chiến thắng
Điều khiển:
Thao tác Mô tả
🖱️ Click cây → Click ô cỏ Trồng cây
1-6 Chọn cây nhanh
X Xẻng xóa cây
Esc / Chuột phải Bỏ chọn
R Chơi lại
Click mặt trời Thu thập
🪴 DANH SÁCH CÂY
# Cây Giá (☀️) HP Sát thương Đặc biệt
1 🌱 Đậu Bắn 100 100 30/đạn Bắn đậu xanh mỗi 1.4s
2 🌻 Hoa Hướng Dương 50 80 – Sản xuất 25☀️ mỗi 8.5s
3 🥜 Hạt Dẻ 50 600 – Lá chắn khổng lồ, nứt khi yếu
4 ❄️ Đậu Tuyết 175 100 30/đạn Làm chậm zombie 60%
5 💣 Bom Anh Đào 150 1 1800 Nổ diện rộng (bán kính 160px), dùng 1 lần
6 🔫 Đậu Đôi 200 100 30×2/đợt Bắn 2 đậu mỗi 1.1s
🧟 DANH SÁCH ZOMBIE
Loại HP Tốc độ Sát thương cắn ☀️ thưởng
Thường 110 0.38 25 10
Cầm Cờ 130 0.58 25 15
Đội Nón 300 0.40 30 20
Đội Xô 700 0.30 35 25
📋 10 MÀN CHƠI
# Tên Sóng Zombie xuất hiện ☀️ ban đầu
1 🏡 Vườn Nhà 3 Thường 200
2 🌳 Sân Sau 4 Thường + Cờ 175
3 🌲 Công Viên 5 Thường + Cờ + Nón 150
4 🪦 Nghĩa Trang 5 Thường + Cờ + Nón 150
5 🏙️ Đường Phố 6 Đủ 4 loại 150
6 🏗️ Sân Thượng 6 Đủ 4 loại 150
7 🏖️ Bãi Biển 7 Đủ 4 loại 150
8 🌴 Rừng Sâu 7 Nón + Xô nhiều 150
9 🏰 Pháo Đài 8 Xô chiếm 35% 175
10 🔥 Địa Ngục 10 Xô chiếm 45% 200
🛠️ CÔNG NGHỆ SỬ DỤNG
Công nghệ Mục đích
HTML5 Canvas Render toàn bộ đồ họa game (cây, zombie, đạn, mặt trời, hiệu ứng)
Web Audio API Tổng hợp âm thanh real-time bằng oscillator (không cần file mp3)
CSS3 Giao diện responsive, animation, overlay
Vanilla JavaScript Game loop, AI zombie, hệ thống sóng, quản lý trạng thái
localStorage Lưu tiến độ mở khóa màn chơi
Không phụ thuộc:
❌ Không framework (React/Vue/Angular)
❌ Không thư viện game (Phaser/Pixi)
❌ Không file âm thanh bên ngoài
❌ Không server, không database
❌ Không cần npm install
🎨 CHI TIẾT ĐỒ HỌA
Cây: Mỗi loại có thiết kế riêng – Đậu Bắn có lòng trắng mắt + con ngươi, Hoa Hướng Dương có 12 cánh xoay tròn, Hạt Dẻ có vân gỗ + vết nứt khi HP thấp, Đậu Tuyết có tinh thể băng lấp lánh, Bom Anh Đào 2 quả đỏ nối cuống + ngòi nổ nhấp nháy, Đậu Đôi có 2 nòng súng + lông mày giận dữ
Zombie: Chân bước với phase lệch nhau, tay vươn tới, thân áo rách, cà vạt, tóc bù xù, mắt đỏ phát sáng → xanh khi bị làm chậm
Mũ bảo hiểm: Nón cam có sọc vàng, Xô xám có quai
Hiệu ứng: Bóng đổ dưới mọi vật thể, mây trôi ngang bầu trời, cỏ gradient, đạn có highlight bóng, hiệu ứng nổ hạt
HP bar: Cây phòng thủ (≥100 HP) và zombie đều có thanh máu màu chuyển xanh→vàng→đỏ
🔊 CHI TIẾT ÂM THANH
Tất cả âm thanh được tổng hợp qua OscillatorNode với các dạng sóng:

square – bắn, va chạm, zombie chết
sine – trồng cây, nhặt mặt trời, đóng băng
sawtooth – nổ, máy cắt cỏ, game over, cắn
triangle – bắt đầu sóng, chiến thắng
Master volume: 0.35 (to hơn đáng kể so với bản trước)

📱 HỖ TRỢ NỀN TẢNG
✅ Desktop: Chrome, Edge, Firefox, Safari (có chuột + bàn phím)
✅ Mobile: iOS Safari, Android Chrome (cảm ứng, touch events)
✅ Tablet: Giao diện responsive tự động co giãn
✅ Tỉ lệ màn hình: Giữ nguyên aspect ratio 1000×600, co giãn theo min(width, height)
📦 PHÂN PHỐI
Định dạng: 4 file tĩnh (HTML + CSS + 2 JS)
Dung lượng: ~60KB tổng cộng
Cài đặt: Copy 4 file vào 1 folder, mở index.html
Offline: Hoạt động hoàn toàn offline sau lần tải đầu
🔮 HƯỚNG PHÁT TRIỂN TƯƠNG LAI
Thêm cây: Chomper (ăn zombie), Potato Mine (mìn khoai), Tall-nut, Torchwood
Thêm zombie: Pole Vaulting, Newspaper, Screen Door, Football, Gargantuar
Chế độ ban đêm (nấm thay cây)
Mini-games (Bowling, Whack-a-Zombie)
Bảng xếp hạng điểm số
Lưu game giữa chừng (save/load)
Hiệu ứng âm thanh nâng cao (reverb, stereo panning)