# Tài liệu Kỹ thuật (Game Specs) - Novastars Game Library Tài liệu này cung cấp mô hình **IPO (Input - Process - Output)** chi tiết cho các trò chơi tương tác, phục vụ đội ngũ Developer trong quá trình lập trình hệ thống game hoàn chỉnh. --- ## 1. Vòng quay may mắn (Lucky Wheel) ### Input (Đầu vào) * **Danh sách giải thưởng:** Mảng đối tượng `[{id, text, color, probability}]`. ### Process (Xử lý Logic) * Tính góc `360 / n`. Dùng CSS Conic-gradient vẽ vòng quay. Random đích đến và dùng Cubic-Bezier `ease-out` để xoay canvas. ### Output (Đầu ra) * Popup kết quả đồng bộ màu với ô trúng thưởng, bắn event `onSpinEnd(result)`. --- ## 2. Hộp quà bí ẩn (Mystery Box) ### Input (Đầu vào) * **Mảng phần thưởng:** N phần thưởng ẩn sau N hộp quà. ### Process (Xử lý Logic) * Dùng Fisher-Yates xáo trộn. Dùng CSS `rotateY(180deg)` lật hộp khi người dùng click. ### Output (Đầu ra) * Hiệu ứng Particle (Confetti) khi mở trúng đồ tốt. Đổi state thành `opened`. --- ## 3. Đập chuột (Whack-a-Mole) ### Input (Đầu vào) * Cấu hình Timer (15s/30s), số lỗ (3x3), Mảng `goodItems`, `badItems`. ### Process (Xử lý Logic) * Game loop `setInterval`. Random lỗ xuất hiện chuột. Bắt event `mousedown`/`touchstart`. Kiểm tra `isTrusted` chống cheat. ### Output (Đầu ra) * Cập nhật điểm số. Đổi icon sang hiệu ứng đập 💥. --- ## 4. Hứng đồ vật (Catching Game) ### Input (Đầu vào) * Tọa độ Touch X/Mouse X. Mảng `goodItems`, `badItems`. ### Process (Xử lý Logic) * `requestAnimationFrame` để render 60FPS. Spawner tạo object rơi từ trên xuống (`y += dy`). Xử lý va chạm AABB giữa giỏ và object. ### Output (Đầu ra) * Cộng/trừ điểm. Xóa object khỏi bộ nhớ khi chạm giỏ hoặc rớt quá màn hình. --- ## 5. Kéo thả tình huống (Drag & Drop Scene) ### Input (Đầu vào) * Mảng Draggable (`dataset.type`) và Dropzone (`dataset.target`). ### Process (Xử lý Logic) * Dùng HTML5 Drag & Drop API (`dragstart`, `dragover`, `drop`). Ánh xạ Touch events cho mobile. So sánh `type === target`. ### Output (Đầu ra) * Gắn object vào Dropzone. Hiệu ứng viền xanh/đỏ báo đúng/sai. --- ## 6. Đường đua siêu tốc (Racing Game) ### Input (Đầu vào) * Số lượng đội, mục tiêu số bước (VD: 5). Các event click "Tiến lên". ### Process (Xử lý Logic) * State `positions = { 1: 0, 2: 0, 3: 0 }`. Tính khoảng cách mỗi bước dựa trên `Track Width`. Thay đổi thuộc tính `left`. ### Output (Đầu ra) * Animation CSS tịnh tiến xe đua. Hiển thị thông báo khi có đội đạt đủ số bước. --- ## 7. Rung chuông vàng (Survival Quiz) ### Input (Đầu vào) * Thời gian Timer (15s). Danh sách `players` tham gia. ### Process (Xử lý Logic) * Timer đếm ngược. Event click vào avatar học sinh để chuyển class sang `eliminated`. ### Output (Đầu ra) * Đồng hồ nhấp nháy đỏ (`pulse`) ở 5s cuối. Avatar xám mờ nếu bị loại. --- ## 8. Truyện tranh tương tác (Interactive Story) ### Input (Đầu vào) * Story Tree (JSON): `[{id, text, image, choices: [{text, target}]}]`. ### Process (Xử lý Logic) * Node Traversal. Lấy data Node dựa trên `target` ID từ click của người dùng để render Node tiếp theo. ### Output (Đầu ra) * Thay đổi Background và Đoạn văn bản mô tả. Nếu tới Node cuối cùng (có flag `ending`), hiển thị nút Chơi lại. --- ## 9. Trắc nghiệm (Quiz) ### Input (Đầu vào) * Mảng câu hỏi: `[{ question, options: [{text, isCorrect}], explanation }]`. ### Process (Xử lý Logic) * Hiển thị tuần tự câu hỏi. So sánh `isCorrect` khi click. Chấm điểm tổng. ### Output (Đầu ra) * Tô xanh/đỏ đáp án. Hiển thị Text giải thích (Explanation). Màn hình kết quả tổng % đúng. --- ## 10. Điền vào chỗ trống (Fill-in-the-Blank) ### Input (Đầu vào) * Đoạn văn chứa biến: `Mặt trời mọc ở hướng [Đông] và lặn ở hướng [Tây]`. ### Process (Xử lý Logic) * Regex parse các từ trong `[]` thành input boxes hoặc draggable words. Xác thực chuỗi string (Bỏ qua hoa thường/khoảng trắng dư). ### Output (Đầu ra) * Border box hiện xanh nếu điền đúng, đỏ nếu sai. --- ## 11. Sắp xếp câu (Sentence Builder) ### Input (Đầu vào) * Câu hoàn chỉnh: `I love learning English`. ### Process (Xử lý Logic) * Cắt câu theo khoảng trắng (Split), xáo trộn mảng (Shuffle). Dùng Drag & Drop hoặc Click để sắp xếp lại vào khay (Tray). So sánh chuỗi array đã sắp xếp với mảng gốc. ### Output (Đầu ra) * Nút Submit để check kết quả. Nếu mảng match hoàn toàn, trả về True. --- ## 12. Phân loại nhóm (Sorting into Groups) ### Input (Đầu vào) * Các category (Ví dụ: Động vật, Thực vật). Danh sách các object với property `groupId`. ### Process (Xử lý Logic) * Sử dụng UI kéo thả (Drag & Drop) đa mục tiêu. Gom nhóm các item. Khi Submit, quét từng Category board và đối chiếu `groupId` của child items. ### Output (Đầu ra) * Giao diện nảy bật các item sai ra khỏi bảng, giữ lại các item đúng. --- ## 13. Sắp xếp đúng thứ tự (Sorting into Right Order) ### Input (Đầu vào) * Mảng Object có thuộc tính `order` (1,2,3,4...). ### Process (Xử lý Logic) * Sử dụng thư viện Sortable (như SortableJS) cho phép Drag list item lên xuống. Đối chiếu vị trí Index hiện tại với `order` gốc. ### Output (Đầu ra) * Đánh dấu vệt xanh bên lề trái cho các hàng đã đúng vị trí. --- ## 14. Nối cặp (Matching Pairs) ### Input (Đầu vào) * Hai cột dữ liệu A (Khái niệm) và B (Định nghĩa). Có chung ID tham chiếu. ### Process (Xử lý Logic) * Xáo trộn cột A và cột B độc lập. Cho phép vẽ đường line SVG nối giữa Node A và Node B, hoặc click lần lượt. Lưu state các cặp nối `[{aId, bId}]`. ### Output (Đầu ra) * Check validation: Các line nối sai chuyển sang màu đỏ và bị đứt gãy. Các line đúng giữ nguyên màu xanh. --- ## 15. Bingo ### Input (Đầu vào) * Danh sách 25+ từ vựng/hình ảnh. ### Process (Xử lý Logic) * Sinh ngẫu nhiên bảng Grid 5x5 cho từng học sinh (hoặc 1 bảng chung). Quản lý danh sách các từ đã được Gọi (Called words). ### Output (Đầu ra) * Học sinh click để đánh dấu (Mark) ô vuông. Phát hiện Win khi có 5 ô liên tiếp theo Hàng/Cột/Chéo. --- ## 16. Ô chữ (Crossword Puzzle) ### Input (Đầu vào) * Lưới Ma trận (Grid Matrix) và danh sách gợi ý Hàng ngang (Across), Hàng dọc (Down). ### Process (Xử lý Logic) * Render lưới HTML table (các ô không dùng bị blacked out). Quản lý focus ô input chữ cái, tự động nhảy sang ô tiếp theo khi nhập. ### Output (Đầu ra) * Validates toàn bộ ma trận khi bấm Check. Highlight các ô sai. --- ## 17. Tìm điểm khác biệt (Find the Differences) ### Input (Đầu vào) * 2 hình ảnh (Ảnh gốc, Ảnh chỉnh sửa) và danh sách tọa độ (Hotspots Box) của các điểm khác biệt. ### Process (Xử lý Logic) * Bắt sự kiện click theo tọa độ `(X,Y)` trên ảnh. Kiểm tra tọa độ click có lọt vào bounding box của hotspot không. ### Output (Đầu ra) * Vẽ khoanh tròn (Circle marker) vào chỗ click đúng. Đếm số điểm khác biệt đã tìm thấy. --- ## 18. Tìm từ trong bảng chữ (Word Search / Find Word in Square) ### Input (Đầu vào) * Ma trận chữ cái N x M. Danh sách từ khóa cần tìm (Words to find). ### Process (Xử lý Logic) * Lắng nghe Drag events qua các cell trong bảng (MouseDown -> MouseEnter -> MouseUp) để tạo thành 1 vệt chọn (Selection line). Kiểm tra chuỗi vừa tạo có thuộc danh sách từ khóa không (hỗ trợ đọc ngược và chéo). ### Output (Đầu ra) * Vẽ Line màu đè lên các chữ cái khi tìm đúng từ. Gạch ngang tên từ đó trong danh sách mục tiêu. --- ## 19. Người treo cổ (Hangman) ### Input (Đầu vào) * Từ khóa ẩn (Target word) và số lượt sai tối đa (Max mistakes, thường = 6). ### Process (Xử lý Logic) * Giao diện bàn phím ảo. Khi User nhập 1 ký tự: Kiểm tra nếu từ khóa chứa ký tự đó thì hiện lên (Reveal). Nếu không, tăng biến `mistakes`. ### Output (Đầu ra) * Vẽ từng nét của người treo cổ trên Canvas tương ứng với biến `mistakes`. Game Over khi `mistakes == max`. --- ## 20. Tìm vật ẩn (Hidden Objects) ### Input (Đầu vào) * Một bức ảnh lớn (Background) và danh sách các Item cần tìm với tọa độ Polygon/Box. ### Process (Xử lý Logic) * Tương tự như Find Differences nhưng chỉ click trên 1 ảnh duy nhất. Hỗ trợ Pan & Zoom (Kéo thả, phóng to ảnh) cho màn hình nhỏ. ### Output (Đầu ra) * Phát hiện va chạm tọa độ click và hiển thị hiệu ứng lấp lánh (Sparkle) khi nhặt được đồ vật. --- ## 21. Kẻ ngoại đạo (Odd One Out) ### Input (Đầu vào) * Mảng 4 item (3 item cùng nhóm, 1 item khác biệt). ### Process (Xử lý Logic) * Hiển thị ngẫu nhiên vị trí của 4 item. ### Output (Đầu ra) * Khi click item đúng (Khác biệt), rung (shake) item đó và tô màu xanh. Click sai tô màu đỏ. Cần có tooltip giải thích vì sao item đó lại khác biệt. --- ## 22. Trắc nghiệm nhập vai (Roleplay Quiz) ### Input (Đầu vào) * Nhân vật hội thoại (Avatar, Tên). Các đoạn hội thoại dạng Chatbox. ### Process (Xử lý Logic) * Render giao diện giống Messenger/Zalo. Mỗi tin nhắn có độ trễ (delay typing) để chân thực. Câu hỏi xuất hiện dưới dạng Response Choice (Người dùng chọn tin nhắn để gửi lại). ### Output (Đầu ra) * Phản hồi của bot thay đổi tùy theo phương án người dùng chọn. Lưu "thái độ" của Bot. --- ## 23. Thử thách thời gian (Time Challenge) ### Input (Đầu vào) * Bộ câu hỏi vô tận (Infinite questions) hoặc bộ thẻ toán học đơn giản. ### Process (Xử lý Logic) * Giới hạn ngặt nghèo thời gian tổng (60s). Mỗi câu trả lời đúng cộng thêm 2s, trả lời sai trừ 5s. ### Output (Đầu ra) * Hiển thị UI vạch máu/thời gian cạn dần (Progress bar). Nhịp độ cực nhanh. --- ## 24. Đảo từ (Word Scramble) ### Input (Đầu vào) * Chuỗi ký tự bị xáo trộn (Ví dụ: `PLEAP`) và Gợi ý (Hình ảnh trái táo). ### Process (Xử lý Logic) * Chia từ khóa thành từng block ký tự riêng rẽ. Sử dụng thuật toán Drag & Drop vị trí hoặc nhập phím để xếp lại thành chữ `APPLE`. ### Output (Đầu ra) * So sánh chuỗi real-time mỗi khi User thả phím. Đúng => Phát âm thanh Bingo và sáng xanh lên.