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

Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử dụng HTML & CSS & javascript ( có dùng thêm thư viện jquery và bootstrap ).
[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]
Các chức năng cơ bản của phần 1 mình đã hoàn tất và dự định của phần 2 mình đã viết ở Bài trước gồm:

Tuấn này mình sẽ hoàn tất những thứ còn bỏ ngỏ ở phần 1.

Demo Online: http://code.chuoi.info/millionaire
Demo ảnh:

Tạo câu hỏi, bao nhiêu câu cũng được nhưng max là 15 câu, 3 mốc cực kỳ quan trọng là 5, 10 và 15, nếu chỉ tạo đến câu 11 thì có mỗi 2 mốc quan trọng là 5 và 10, cứ thế.

Đây là giao diện khi mình tạo đủ 15 câu và Create Game, ở thanh ngang dưới sẽ show vị trí câu hỏi của mình ( màu cam ), các ô đã trả lời đúng ( màu xanh lá ). VD câu này mình chọn đáp án D, nhấn nút Confirm thì câu trả lời mới được ghi nhận.

Sau khi trả lời đúng thì ô đáp án đúng sẽ nháy liên tục như trên TV, mặc dù 4 đáp án đều là tên của mình nhưng chọn D cho nó thuần Việt.

Demo sử dụng 50:50 ở câu số 5 ( câu này mình cho chữ câu hỏi màu vàng cho nó quan trọng )

Đây là demo hỏi ý kiến khán giả, khán giả bóp dái quá, tiện thể trả lời sai phát.

Khi mình trả lời sai ở câu 6 thì sẽ nhận thưởng câu 5 vì là mốc quan trọng.

Đây là sau khi mình dùng 50:50 mới dúng hỏi ký kiến khán giả, lần này đỡ bóp dái hơn rồi, LOL

Bỏ cuộc câu nào thì sẽ nhận thưởng ở ô trước đó.

• Trợ giúp 50:50

  • Như đã nói ở bài 1, mình có một mảng riêng lưu đáp án của tất cả các câu hỏi, qua đó mình ghi nhớ xong đáp án của câu hỏi đang hiện lên màn hình. Việc tiếp theo là mình cần sử dụng biện pháp random để loại đi 2 đáp án trong số 3 đáp án sai còn lại ( Loại đáp án nào thì mình chuyển màu chữ thành trùng màu nền và chặn thao tác click vào đáp án đó bằng hàm jquery sửa css $(boxName).css('pointer-events', 'none');, trong đó BoxName là ID của ô chữ mình cần thao tác, cũng như các css khác để reset màu ô nếu người dùng vô tình nhấn chọn trước khi nhấn 50:50.
    Đây là hàm random từ min đến max ( có bao gồm min và max ) , mình sẽ chạy từ 1 đến 4.

    Millionaire.prototype.random = function (min, max) {
    
        return Math.floor(Math.random() * (max - min + 1)) + min;
    
    };
    

  • Với 2 lần random thì mình sẽ có 2 con số, viết thêm 1 hàm nữa để nếu 2 số bằng nhau thì tăng 1 trong 2 số đó lên 1 đơn vị để nó thành khác nhau, tất nhiên là mình sẽ không lấy 2 số này để loại 2 đáp án rồi, vì nó có thể trùng với ô đáp án đúng.

  • Bây giờ để tránh việc nó trùng đáp án đúng thì mình giả sử ô đáp án đúng là ô thứ n chẳng hạn, mình sẽ loại bỏ ô ( n + x ) % 4, nghĩa là số dư của tổng giữa n và x là số mình lấy được từ việc random. Nghĩa là nếu random ra các số 1 và 3 còn đáp án đúng là ô số 3 thì mình sẽ loại các ô số 4 ( 3+1 chia 4 dư 4 ) và ô số 2 ( 3+3 chia 4 dư 2 ). Nó luôn không bị trùng với đáp án đúng và luôn đảm bảo các ô sai được chọn để xóa bình đẳng với nhau. Tất nhiên vì 4 chia 4 dư 0 nên mình sẽ cần có thêm phần chuyển 0 thành 4 cho trường hợp đặc biệt này.

    var number1 = (boxID + random1) % 4;
        if (number1 == 0)(number1 = 4);
        var number2 = (boxID + random2) % 4;
        if (number2 == 0)(number2 = 4);
    

• Trợ giúp hỏi ý kiến khản giả

  • Chúng ta cần chia ra 2 trường hợp : sử dụng trước khi dùng 50:50 và sau khi dùng 50:50.

  • Ý tưởng: Khán giả không phải lúc nào cũng trả lời đúng ( trên truyền hình từng có trường hợp 100% khán giả trả lời sai ), tuy nhiên những sự trợ giúp của khán giả cho đáp án đúng sẽ luôn được ưu tiên hơn so với các đáp án còn lại, ưu tiên rồi mà vẫn sai thì là do đen, LOL

    • Trước khi sử dụng 50:50 (nghĩa là vote cả 4 đáp án)
      • Mình sẽ ưu tiên cho đáp án đúng có 24% bonus, vì nếu 25% thì chiếm 1/4 rồi, mình không thích.
      • Tất cả 4 đáp án chia nhau 76% còn lại, sau khi chia xong thì cộng bonus cho ông đáp án đúng.

     var sum = 76;
        var value1 = this.random(0, sum);
        var value2 = this.random(0, sum - value1);
        var value3 = this.random(0, sum - value1 - value2);
        var value4 = sum - value1 - value2 - value3;
    

    • Sau khi sử dụng 50:50 ( chỉ vote cho 2 đáp án còn sót lại )
      • Quả này có nhiều ý tưởng để thực hiện, hoặc cũng dùng cách trên kia, đánh dấu 2 ô bị loại cho về 0% hết, 2 ông còn sót lại chia nhau 100% trong đó ông đáp án đúng sẽ luôn được cộng điểm bonus nhất định sao cho tổng 2 ông luôn là 100%. Mình chọn cách là giữ nguyên kết quả đã thực hiện ở trên kia, nhưng nếu kiểm tra thấy đã được sử dụng 50:50 trước đó rồi thì sẽ trừ hết giá trị của 2 ô bị loại cộng hết cho ông đáp án đúng, nghĩa là bây giờ ông đáp án đúng ngoài bonus còn ăn hết phiếu của 2 đáp án bị loại, cho áp đảo luôn, nhưng thực chất cũng không áp đảo lắm nếu đen, code đoạn này mình làm khá dài vì lúng túng, mong các bạn tư vấn giúp mình để nó ngắn gọn hơn

    //this._number5050 là trang đã sử dụng 50:50 có đúng trang hiện tại không
     if (this._number5050 == this._boardPage + 1) {
    
            var sumRemove = 0; //lợn đất chứa phiếu của các ông bị loại
    
            //nếu không phải đáp án được giữ lại, cũng không phải đáp án đúng
            if (_this._keep !== 1 || answerBox !== "boxA") { 
    
                sumRemove += valueA; //hút hết phiếu vào lợn đất
                valueA = 0; // cho về 0
            }
            if (_this._keep !== 2 && answerBox !== "boxB") {
                sumRemove += valueB;
                valueB = 0;
    
            }
            if (_this._keep !== 3 && answerBox !== "boxC") {
                sumRemove += valueC;
                valueC = 0;
    
            }
            if (_this._keep !== 4 && answerBox !== "boxD") {
                sumRemove += valueD;
                valueD = 0;
    
            }
    
            //ông nào đáp án đúng ăn hết tiền trong lợn đất
            if (answerBox === "boxA") {
                valueA = valueA + sumRemove;
    
            } else if (answerBox === "boxB") {
                valueB = valueB + sumRemove;
    
            } else if (answerBox === "boxC") {
                valueC = valueC + sumRemove;
            } else {
                valueD = valueD + sumRemove;
            }
    
        }
    
        //vẽ biểu đổ với các số phiếu đã định
        this.drawChart(valueA, valueB, valueC, valueD);
    
    

    Full Source Code mình đã thực hiện

Đây là link jsfiddle mình thực hiện:
jsfiddle.net/AndyCrush/0wL06ym3
Rất mong nhận được góp ý và đóng góp ý tưởng của tất cả các bạn, không biết tuần sau nên clone chương trình gì nữa đây :D
Đây là chương trình "Chiếc nón kỳ diệu" mình tranh thủ giới thiệu luôn:
[hack-time] Viết ứng dụng chơi "Chiếc nón kỳ diệu" bằng jquery

Cảm ơn các bạn đã đọc bài viết này.