[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]

Lời nói đầu

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

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ântư 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

Ý nghĩa thực tiễn

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 sản phẩm

  • Demo ảnh:

1.png

1.png

1.png

1.png

Sơ qua về thuật toán mà mình sử dụng

  • 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
0 1 2 3 4 5 6 7 8 9 10 ...
câu hỏi 1 A câu 1 B câu 1 C câu 1 D câu 1 Đáp án 1 Câu hỏi 2 A câu 2 B câu 2 C câu 2 D câu 2 Đáp án 2

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à answerArrayselectArray, 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.

Source code

Đâ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.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Andy Crush

4 bài viết.
37 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
16 5
Lời nói đầu Như bài viết trước (Link), thì mỗi tuần mình sẽ nghĩ một ý tưởng nào đấy, chỉ sử dụng HTML&CSS & jquery để thực hiện nó, theo ý tưởng H...
Andy Crush viết hơn 2 năm trước
16 5
White
16 9
Lời nói đầu 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ử...
Andy Crush viết hơn 2 năm trước
16 9
White
7 2
Mở đầu Chào cả nhà, mình mới biết đến kipalog một thời gian không dài, tuy nhiên thực sự kiến thức mà mình nhận được từ các bài viết trên kipalog ...
Andy Crush viết hơn 2 năm trước
7 2
Bài viết liên quan
White
16 9
Lời nói đầu 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ử...
Andy Crush viết hơn 2 năm trước
16 9
White
6 3
Sau đây là cách để tạo một square div và canh giữa theo chiều dọc bằng css. Đây là cách làm rất hay, hỗ trợ được những browser đời cũ như IE8 mà ko...
Toan Nguyen viết hơn 2 năm trước
6 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
37 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!