1. Hệ thống Đồ họa và Giao diện (UI/UX)
-
Sử dụng Emoji: Thay vì yêu cầu bạn phải tải xuống và quản lý các file hình ảnh (PNG, JPG) phức tạp, trò chơi sử dụng trực tiếp các ký tự Emoji (🍉, 🍊, 🥝, 🫐, 💣) được vẽ trực tiếp lên Canvas thông qua hàm fillText(). Điều này giúp code cực kỳ gọn nhẹ nhưng vẫn mang lại hình ảnh sắc nét, rực rỡ ở mọi độ phân giải.
-
Vệt kiếm Neon (Blade Trail): Khi bạn giữ chuột hoặc chạm lướt trên màn hình, tọa độ sẽ được lưu vào một mảng blade. Hệ thống vẽ một đường thẳng nối các tọa độ này lại với nhau. Cấu trúc phát sáng đạt được thông qua việc kết hợp shadowBlur, shadowColor và chồng 2 lớp viền lên nhau (lineWidth lớn làm hiệu ứng sáng nhòa, lineWidth nhỏ vẽ lõi kiếm màu trắng/cyan).
2. Hệ thống Vật lý (Physics System)
-
Trọng lực (Gravity): Mỗi khi một trái cây xuất hiện (Spawn), nó được cấp một vận tốc đẩy lên mạnh (vy = số âm) và một lực đẩy ngang (vx). Trong mỗi khung hình, vận tốc vy sẽ liên tục bị cộng thêm một lượng nhỏ (vy += 0.3). Ban đầu trái cây sẽ bay vút lên, sau đó chậm dần rồi rơi xuống giống hệt định luật ném xiên trong đời thực.
-
Hạt hiệu ứng (Particles): Khi chém trúng hoa quả, trò chơi không chỉ cộng điểm mà còn sinh ra hàng chục hạt tròn (Particle) mang màu sắc tương ứng với loại quả đó (ví dụ: đỏ cho dưa hấu, cam cho cam). Các hạt này cũng chịu ảnh hưởng của trọng lực và từ từ biến mất (alpha giảm dần) tạo thành hiệu ứng nước ép văng tung tóe.
3. Xử lý va chạm và Logic cắt (Slicing)
-
Trong quá trình vuốt kiếm, hàm checkCuts() sẽ đo khoảng cách từ điểm hiện tại của vệt kiếm đến tâm của tất cả trái cây đang bay trên màn hình (sử dụng định lý Pytago thông qua hàm Math.hypot). Nếu khoảng cách này nhỏ hơn bán kính của trái cây, hệ thống ghi nhận là đã chém trúng.
-
Trái cây khi bị chém sẽ chuyển sang trạng thái sliced = true. Lúc này, hình ảnh Emoji gốc sẽ được tách làm hai mảnh nhờ hàm ctx.clip(): Một mảnh hiển thị nửa trái, mảnh kia hiển thị nửa phải. Hai mảnh này sẽ từ từ trượt ra xa nhau và rơi xuống màn hình.
4. Quy luật trò chơi
-
Bạn có 3 mạng. Mỗi quả rơi xuống khỏi màn hình mà chưa bị chém, bạn mất 1 mạng.
-
Nếu chém trúng Bom (💣), bạn mất cả 3 mạng ngay lập tức và trò chơi kết thúc.
-
Độ khó (tỉ lệ xuất hiện của trái cây mới) sẽ tăng dần dựa trên số điểm bạn đạt được. Tốc độ sinh hoa quả tính theo công thức 0.03 + (score * 0.0001). Điểm càng cao, trái cây bay lên càng nhiều và dày đặc.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn