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

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

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:
  
  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ự * và +, 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;
        }
    });

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

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.