[hack-time] Viết ứng dụng chơi "Chiếc nón kỳ diệu" bằng jquery

Lời nói đầu

Như bài viết trước [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 ), 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 Hack-time của bạn Long Nguyễn :D

Ý tưởng

Tuần này ứng dụng mình thực hiện là app tạo game đoán ô chữ "Chiếc nón kỳ diệu", dành cho những bạn muốn làm game nhỏ khi thuyết trình trên lớp, hoặc chơi với bạn bè. Nội dung sẽ là nhập câu hỏi, và một đáp án cho câu hỏi đó viết dạng liền mạch, không dấu, không ký tự đặc biệt. Và có một chức năng trợ giúp là lật mở ô đang đóng ( giống quay vào ô May Mắn của CNKD ), và khi sử dụng trợ giúp thì sẽ bị trừ điểm, đoán đúng sẽ được cộng điểm. Lúc đầu 2 mốc này là mình set nhưng sau đó để game linh hoạt hơn mình quyết định viết thêm chức năng set điểm cộng ( bonus point ) cho ô đoán đúng, và điểm trừ ( Help fee ) cho mỗi lần mở ô May Mắn.

Hình dung sơ qua về chức năng của app

  • Input gồm:

    • Câu hỏi ( Cho phép tiếng Việt, độ dài thoải mái )
    • Câu trả lời ( Viết liền không dấu, không cho phép nhập ký tự đặc biệt)
    • Bonus point ( Dành cho mỗi chữ đoán đúng, VD: nếu set 100 điểm mà đoán chữ A có 2 chữ A lận thì sẽ cộng 200 điểm vào tổng )
    • Help fee: Nếu người chơi bí thì có thể click vào 1 ô đang chưa mở để mở ô đấy ra, sẽ bị trừ số điểm được set trong ô này, và sau đó đoán ô này cũng không được cộng điểm nữa.
    • Nút Create Game để bắt đầu vào chơi, khi vào rồi sẽ ẩn ô câu hỏi, đáp án và các tùy chọn và show câu hỏi cũng như ô chữ, show thêm ô đoán nữa. Nút Create Game sẽ chuyển thành nút Edit Game.
  • Demo ảnh:
    chuoi.png
    Demo online: http://chuoi.info/blog/amazing-hat/

Những function cần học

  • Hàm chặn nhập ký tự đặc biệt trong jquery ( Chuyển hết thành ký tự rỗng )
  • Hàm sinh ra html trong một cặp thẻ ( Để tạo ra các box )
  • Hàm sửa css của một id, class bằng jquery ( Để áp dụng khi đoán ô, mình sẽ cho các ô chữ ẩn với z-index = -1, mỗi lần mở ra thì sửa css thành z-index = 2 để hiện chữ nổi lên, nếu nhấn tiếp sẽ đóng lại và trở lại z-index = -1, ngoài ra cái này rất hữu ích dùng trong nhều chức năng khác nữa, VD: lúc thắng thì đổi margin-left của các ô chữ từ 10 về 1 để nó sát lại gần nhau, và set css ngăn chặn việc click mở đóng ô sau khi thắng.
  • Hàm tạo vòng lặp vô hạn setInterval, cái này dùng cho lúc mừng, cho ô chữ nháy qua nháy lại bằng việc đổi liên tục 2 màu nền.
  • Hàm lấy id của đối tượng mình click vào, cái này mình dùng để xác định người dùng ngắm vào box nào cần mở ( lúc Help ấy ), qua đó viết hàm mở box cho chính xác

Sơ qua về chương trình

  • Đầu tiên mình cho toàn bộ ô chữ mà người dùng nhập vào 1 mảng boxArray , đã chặn hết các ký tự đặc biệt và dấu cách, sau đó mình copy mảng đó sang 1 mảng khác tên là boxArray2, mỗi khi người dùng đoán đúng ô nào thì chuyển cái chữ đó ở cái mảng thứ 2 thành ký tự sao *, nếu người dùng chạy chức năng help thì chuyển chữ cái đó ở mảng thứ 2 thành ký tự + để đánh dấu, cộng điểm bẳng cách đếm số ký tự *+, số lần dùng việc help. Những ô đã được help rồi sẽ không cộng điểm ô đó nữa.
    • Như dưới đây thì this._countBoxHelp là số lượng ô được dùng chức năng help, còn this._help là số lần help , cái này khác nhau nhé
 BoxGenerator.prototype.countPoint = function () {
            var bonus = $('#bonus').val();
            var minus = $('#minus').val()
            this._point = bonus * (_this._count - this._countBoxHelp) - (minus * this._help);

        }
  • Đây là hàm jquery khá hay để chặn ký tự đặc biệt nhập trong ô đáp án, chỉ chấp nhận các chữ cái và chữ số, ngoài ra ở CSS mình còn auto cho hết chúng thành chữ viết hoa để nhìn cho đẹp nữa.
$('#input').bind('keypress', function (event) {
        var regex = new RegExp("^[a-zA-Z0-9]+$");
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    });

Toàn bộ code

Với series này mình sẽ code tất cả trên

để dễ nhìn và chỉnh sửa xem kết quả ngay lúc đấy luôn, link full code ở đây nhé các bạn :D

Cái này mình code khá phức tạp và thực sự không clean nên rất mong nhận được những góp ý để mình tự khắc phục trong những ứng dụng sắp tới, 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.
43 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
18 10
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 3 năm trước
18 10
White
10 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 3 năm trước
10 2
White
7 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ỉ ...
Andy Crush viết 3 năm trước
7 1
Bài viết liên quan
White
51 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết 3 năm trước
51 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
43 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á!