🔨 CHI TIẾT CÁC CƠ CHẾ VÀ HIỆU ỨNG TRONG GAME
1. Hệ thống Chuyển cảnh (Scene Transitions) Trò chơi được chia làm 3 màn hình (Screens) riêng biệt: Menu, Gameplay và Game Over. Tôi không dùng cách ẩn/hiện (display: none) thô kệch, mà sử dụng cơ chế opacity kết hợp pointer-events và transition của CSS. Nhờ vậy, khi bạn bấm "Bắt Đầu" hoặc khi hết giờ, màn hình sẽ mờ dần và cảnh mới sẽ hiện lên một cách mượt mà (Fade In/Out) giống hệt các game mobile chuyên nghiệp.
2. Giao diện và Custom Cursor (Búa tạ)
-
Con trỏ chuột tùy chỉnh: Tôi đã vô hiệu hóa con trỏ chuột mặc định của hệ điều hành (cursor: none) trên toàn bộ khu vực game. Thay vào đó, một chiếc búa (Custom Cursor) sẽ liên tục bám theo tọa độ (x, y) của chuột.
-
Hiệu ứng đập búa: Mỗi khi bạn click, chiếc búa sẽ xoay một góc -45 độ (transform: rotate) trong 0.1 giây để mô phỏng động tác gõ xuống, tạo cảm giác lực phản hồi (Game Feel) rất tốt.
-
Thiết kế Hố & Đất: Các hố được vẽ bằng CSS với hiệu ứng bóng đổ âm (box-shadow: inset) để tạo độ sâu. Nhân vật thú nằm trong hố với thuộc tính overflow: hidden, chúng trồi lên bằng cách thay đổi trục Y (transform: translateY).
3. Đa dạng Hóa Mục tiêu (Targets & Logic) Để game không nhàm chán, tôi thiết kế 3 loại mục tiêu xuất hiện ngẫu nhiên với xác suất khác nhau:
-
🐹 Chuột thường (Mole): Mục tiêu cơ bản. Đập trúng được +10 điểm.
-
🐰 Thỏ vàng (Golden Target): Hiếm hơn, xuất hiện và biến mất rất nhanh. Đập trúng được +30 điểm.
-
💣 Bom (Bomb): Chướng ngại vật. Nếu lỡ tay đập trúng, bạn sẽ bị trừ 20 điểm.
4. Kỹ xảo hình ảnh (Visual Effects - VFX)
-
Floating Text (Chữ nổi): Bất cứ khi nào bạn đập trúng mục tiêu, tại đúng tọa độ đó sẽ nảy lên một con số điểm (VD: +10, -20) bay lên trời và mờ dần.
-
Hit Particles (Hạt vụn): Khi đập trúng, vòng lặp JS sẽ sinh ra các mảnh vụn nhỏ bay tỏa ra xung quanh theo quỹ đạo ngẫu nhiên và rơi xuống theo trọng lực.
-
Screen Shake (Rung màn hình): Nếu bạn vô tình đập trúng Bom, toàn bộ màn hình game sẽ bị rung lắc dữ dội trong 0.3 giây kết hợp chớp viền đỏ để cảnh báo.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn