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, 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 series Hack-time của bạn Long Nguyễn 😀

Ý 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://nxtai.com/blog/amazing-hat/
  • Demo bản nhẹ trên mobile: http://code.chuoi.info/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ớiz-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 http://jsfiddle.net/ để 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 😀
http://jsfiddle.net/AndyCrush/56sLnfL0/

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

Bình luận Facebook

Bài viết liên quan
Filter by
Post Page
Lập trình Web Javascript HTML / CSS Thư viện bootstrap jquery library Tin Học Project After Effect
Sort by

Viết ứng dụng tạo trò chơi “Ai là triệu phú” bằng jquery [Phần 2 – hoàn tất]

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
2015-11-20 16:07:43
chuoi

18

Viết ứng dụng tạo trò chơi “Ai là triệu phú” bằng jquery [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
2015-11-13 17:03:27
chuoi

18

[Hack Time] Tạo ứng dụng Yes/No Selector bằng JavaScript thuần và jquery

 Câu chuyện về Hack time Cái tên Hack Time này mình giữ nguyên của
2015-10-30 16:44:18
chuoi

18