[Hack Time] Viết ứng dụng tạo trò chơi "Ai là triệu phú" bằng HTML&CSS&JS [Phần 1]

Chào cả nhà, lại là mình đây, đây là tuần thứ 3 và 2 tuần trước, mỗi cuối tuần mình có post một bài về một ứng dụng mà mình tự làm chỉ hoàn toàn bằng HTML&CSS&JS, có sử dụng thư viện jquery

• [Hack Time] Tạo ứng dụng Yes/No Selector bằng JavaScript thuần và jquery ( tạm gọi là tung đồng xu )
• [hack-time] Viết ứng dụng chơi "Chiếc nón kỳ diệu" bằng jquery

Nó chỉ là những ứng dụng bé bé vui vui nhưng có ích, tuần này mình sẽ đến với 1 ứng dụng khác hơi phức tạp hơn 1 tí nên mình tạm chia ra 2 giai đoạn.

Giai đoạn 1

• Hoàn tất các bước nhận và lưu câu hỏi và các đáp án
• Các hiệu ứng nhấp nháy thông báo đáp án, ghi nhận click và xác nhận đáp án của người chơi.
• Bắt đầu tính toán phần thưởng dựa trên số câu hỏi mà người chơi vượt qua, VD qua câu 6 bị sai thì nhận thưởng mốc 5, qua câu 14 mà sai thì nhận thưởng mốc 10 như trên gameshow thực. Nếu "Dừng cuộc chơi" thì sẽ thông báo nhận được phần thưởng của câu trước đó đã vượt qua.
• Người tạo câu hỏi không cần tạo đủ 15 câu, tạo đến đâu chơi đến đó, và có thông báo khi chơi xong game, có nút reset game để chơi lại với câu hỏi cũ và nút edit game để sửa lại câu hỏi, đỡ tạo lại từ đầu.

Giai đoạn 2

• Thêm các sự trợ giúp
  • 50:50 ( loại bỏ 2 đáp án sai ngẫu nhiên trong 4 đáp án)
  • Hỏi ý kiến khán giả trong trường quay sẽ sinh ra các tỉ lệ ngẫu nhiên trong đó đáp án đúng sẽ được ưu tiên cộng 20% và các đáp án kia hưởng các phần còn lại , nghĩa là vẫn có khả năng sự trợ giúp bị sai nếu random quá thấp cộng 20% không bù được nhưng vẫn hữu ích cho người chơi.
  • Gọi điện thoại cho người thân và tư vấn tại chỗ thấy hơi vô lý nên chắc không thêm vào
• Thêm các mốc tiền thưởng cho các câu hỏi
• Thêm một bảng các mốc câu hỏi như trên TV, đến câu nào thì ô đó sáng lên nhìn cho chuyên nghiệp, LOL

Giống như 2 trò kia thì app này mình mong muốn giúp cho những người làm thuyết trình, làm sự kiện có thể tạo các trò chơi nhỏ cho các thành viên, họ tự thêm câu hỏi và các đáp án rồi cho người dùng chơi, với bootstrap thì hoàn toàn có thể chơi trên điện thoại.
Ngoài ra là luyện tập sử dụng jquery và JS, các trick của CSS, mình sẽ không sử dụng gì khác ngoài 1 file HTML, 1 file JS, 1 file CSS, tổng dung lượng chắc chỉ vài chục KB. ( chưa tính 2 thư viện Bootstrap và Jquery )

• Demo ảnh:

• Demo online: Ai là triệu phú

• Mình sẽ nhận ID của phần tử đã click và thao tác với nó, trong ap này thì mình sẽ nhận id của lựa chọn của người chơi, qua đó đổi css của id đó thành màu vàng, khi người chơi nhấn Confirm thì câu trả lời này sẽ được lưu vào 1 mảng tên là selectArray, đối chiếu với mảng lưu đáp án tên là answerArray ở cùng một index sẽ biết nó đúng hay sai, và dù đúng hay sai thì mình cũng cho ô đáp án nhấp nháy .

Millionaire.prototype.congrats = function () {
            this._interval = setInterval(function () {
                if (_this._hover) {
                    $('.answerBox').css('background-color', '#2ecc71');
                    $('.answerBox').css('pointer-events', 'none');
                    $('#sellector').css('pointer-events', 'none');
                    $('.box').css('pointer-events', 'none');
                } else {
                    $('.answerBox').css('background-color', _this._color);
                    $('.answerBox').css('pointer-events', 'none');
                    $('#sellector').css('pointer-events', 'none');
                    $('.box').css('pointer-events', 'none');
                }
                _this._hover = !_this._hover;

            }, 150);
        }

Ở đây _this._color là màu nền gốc của box chứa đáp án đúng, mặc định nó giống các box khác, ở hàm kiểm tra đáp án thì nếu đáp án đúng thì mình set luôn _this._color thành màu vàng, ngược lại thì giữ nguyên, nghĩa là trường hợp trả lời đúng thì ô đó sẽ nháy vàng xanh lá, còn nếu sai thì ô lựa chọn vẫn giữ màu vàng nhưng ô đáp án đúng sẽ nháy xanh lá và màu mặc định của box.
setInterval là hàm lặp khá hay của JS, nó sẽ lặp mãi mãi cho đến khi nào mình clearInterval thì thôi :D

• App này mình lưu toàn bộ dữ liệu vào duy nhất 1 mảng, nghĩa là cấu trúc nó như sau

Cứ tiếp tục thế, mảng này không có chiều dài cố định mà mỗi lần người dùng thêm mới câu hỏi nó lại tự thêm vào, 15 câu hỏi thì OK còn nếu nhiều câu hỏi quá thì chắc cũng có limit.

• Ngoài ra mình tạo 2 mảng nữa là answerArray và selectArray, trong đó answerArray để lưu các phần tử có thứ tự chia 5 dư 4 của mảng trên, tức là tập hợp các câu trả lời đúng. Mảng kia cũng tương tự nhưng là những lựa chọn của người chơi, dữ liệu được thêm vào mảng này sau mỗi lần người chơi confirm Answer, qua đó mình so sánh để check đúng sai.
• Mình chỉ dùng các thao tác ẩn và hiện cho trò này, xong câu 1 thì mình vẫn giữ nguyên form đó và đổ dữ liệu của 5 phần tử tiếp theo vào form sau mỗi sự kiện click next hoặc back, khi bắt đầu tạo game thì mình ẩn toàn bộ form đi và hiện bảng câu hỏi mà trước đó đã ẩn, cứ thế đến hết :D
• Trong code mình đặt tên hàm khá giống mục tiêu hoạt động nên chắc các bạn đọc sẽ hình dung được ý tưởng của mình.

Đây là toàn bộ source code mà mình đã thực hiện cho ai cần:

Rất mong nhận được những phản hồi góp ý của các bạn để mình tiếp tục hoàn thiện kỹ năng, bởi vì mình cũng chỉ mới bắt đầu làm quen với JS một thời gian không dài nên code khá xấu. Mình xin tạm dừng bài viết này ở đây và tuần sau mình tiếp tục hoàn thiện những chức năng dự kiến ở trên để chuyển sang ý tưởng mới :D, cảm ơn các bạn đã đọc bài viết này.