2. Logic Cốt lõi của Game
Quản lý Trạng thái (State Management): Trò chơi ghi nhớ 4 biến chính: hasFlippedCard (đã lật thẻ đầu tiên chưa), lockBoard (khóa bàn cờ), firstCard, và secondCard.
Khóa bàn cờ (Lock Board): Khi bạn lật đủ 2 thẻ, hệ thống lập tức kích hoạt lockBoard = true. Điều này ngăn chặn lỗi logic do người chơi cố tình click liên tục (spam) vào các thẻ thứ 3, thứ 4 khi animation lật 2 thẻ đầu còn chưa kết thúc.
Kiểm tra Trùng khớp (Match Check): Nếu 2 thẻ có cùng data-id, chúng sẽ bị vô hiệu hóa sự kiện click. Nếu sai, hệ thống sẽ đợi 1 giây (để bạn kịp ghi nhớ vị trí) rồi tự động úp cả 2 thẻ lại.
Điều kiện Thắng: Trò chơi đếm số cặp đã lật đúng. Khi số cặp đúng bằng một nửa tổng số thẻ, hàm báo thắng (SweetAlert2) sẽ được gọi.
3. Tính năng Tải ảnh tùy chỉnh (FileReader API)
Hệ thống cho phép bạn chọn nhiều ảnh cùng lúc từ máy tính thông qua thẻ <input type="file" multiple>.
Sử dụng FileReader tích hợp sẵn của trình duyệt để đọc các tệp ảnh này và chuyển đổi chúng thành chuỗi Base64 (Data URL) để hiển thị trực tiếp mà không cần tải lên bất kỳ máy chủ nào. Đảm bảo an toàn và cực kỳ nhanh chóng.
Nếu bạn chọn ảnh, hệ thống sẽ tự động nhân đôi các ảnh đó để tạo thành các cặp. Nếu bạn không chọn, hệ thống sẽ sử dụng bộ Emoji Trái cây mặc định (🍎, 🍌, 🍉, 🍇, 🍓, 🥑, 🍍, 🥝).
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn