tiện ích online

TIỆN ÍCH ONLINE

Tin tức cập nhật

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • thống kê truy cập

    free counters

    HỌP MẶT VIOLET OPEN HÈ 2017

    Gốc > Lập trình Flash >

    Bài 56: Điền từ theo khuôn

    Điền từ theo khuôn
    [Hoàng Ngọc Giao]

    Trong trò chơi điền từ, ta đưa từng ký tự do người dùng gõ vào chỗ trống trong câu hỏi. Ký tự đầu tiên được nhập bởi người dùng lập tức thay thế hoàn toàn những ký tự gạch dưới trong câu hỏi. Ta không nên làm như vậy trong trường hợp các ký tự gạch dưới trong câu hỏi được dùng như một cái "khuôn" cho từ cần điền. Khuôn cho từ cần điền (tạm gọi tắt là khuôn từ) thể hiện manh mối hữu ích, giúp người chơi tìm từ thích hợp có số ký tự cần thiết. Nếu người chơi nhập từ có số ký tự vượt quá khuôn từ, ta không nên cho hiển thị những ký tự dư thừa để nhắc nhở người chơi rằng từ được nhập dài hơn mong đợi. Nếu người chơi nhập từ ngắn hơn khuôn từ, ta nên cho hiển thị các ký tự gạch dưới chưa được thay thế, nhắc nhở người chơi rằng từ được nhập ngắn hơn mong đợi. Nhờ vậy, trò chơi trở nên vừa "dễ chịu", vừa hấp dẫn như trò chơi ô chữ.

    Để cải tiến trò chơi theo hướng vừa nêu, trong hàm doKeyDown, khi tiếp nhận ký tự mới do người dùng nhập vào, bạn phải xem xét kỹ hơn để quyết định có nên hiển thị hoặc không. Đồng thời, bạn cần có thêm một biến để theo dõi vị trí của ký tự gạch dưới đầu tiên chưa bị thay thế. Nhờ vậy, bạn mới có thể cho hiển thị ký tự gạch dưới đầu tiên chưa bị thay thế và những ký tự theo sau.
    Bạn sửa hàm doKeyDown như sau:

    ...

    var chars = "";

    var position = 0;

    function doKeyDown() {

      var code = Key.getCode();

     

      if(done) {

        if(code == Key.ENTER)

          reset();

        return;

      }

     

      if(code == Key.ENTER) {

        check();

      }

      else if(code == Key.BACKSPACE) {

        //chars = chars.substring(0, chars.length-1);

        //displayChars();

        if(position > 0) {

          position--;

          chars = chars.substring(0, chars.length-1);

          displayChars();

        }

      }

      else {

        var ch = String.fromCharCode(Key.getAscii());

        if(ch == "")

          return;

        var str = words[index][0];

        var ndx = str.indexOf("_");

        var ndx2 = str.lastIndexOf("_");

        var len = str.substring(ndx, ++ndx2).length;

        if(position == len)

          return;

        position++;

        chars += ch;

        displayChars();

      }

    }

    ...

    Biến position được thêm vào để chỉ vị trí của ký tự gạch dưới đầu tiên chưa được thay thế trong khuôn từ. Trị ban đầu của biến position là 0, ứng với ký tự gạch dưới đầu tiên trong khuôn từ.
    Khi tiếp nhận ký tự mới, thay vì thực hiện ngay việc cộng thêm ký tự đó vào chuỗi chars và gọi hàm displayChars, ta cần biết chiều dài của khuôn từ trong câu hỏi đang xét (có bao nhiêu ký tự gạch dưới). Muốn vậy, bạn tạo ra chuỗi con trích từ câu hỏi, kéo dài từ ký tự gạch dưới đầu tiên đến ký tự gạch dưới sau cùng và đọc biến length của chuỗi đó:
    var len = str.substring(ndx, ++ndx2).length;
    Biến len như vậy cho biết số ký tự gạch dưới trong khuôn từ. Nếu trị số biến position bằng trị số biến len thì không làm gì nữa. Chỉ khi trị số biến position nhỏ hơn trị số biến len, ký tự nhận được mới cộng thêm vào chuỗi chars, hàm displayChars mới được gọi và biến position mới tăng thêm 1 (cho biết ký tự gạch dưới đầu tiên dịch một bước qua phải).
    Trong trường hợp người chơi gõ phím xóa trái (Back Space), ta cũng không vội cắt bỏ ngay ký tự cuối cùng của chuỗi chars như trước, mà chỉ thực hiện điều đó khi biến position lớn hơn 0 (đã có ký tự nào đó được nhập vào khuôn từ). Khi cắt bỏ ký tự cuối cùng của chuỗi chars, biến position phải giảm đi 1 (cho biết ký tự gạch dưới đầu tiên dịch một bước qua trái).
    Hàm displayChars dĩ nhiên không thể không tính đến biến position. Bạn viết lại hàm displayChars như sau:

    /*

    function displayChars() {

      var str = words[index][0];

      var ndx = str.indexOf("_");

      var ndx2 = str.lastIndexOf("_");

      str = str.substring(0, ndx) + chars + str.substring(++ndx2);

      sentence.text = str;

    }

    */

    function displayChars() {

      var str = words[index][0];

      var ndx = str.indexOf("_");

      var ndx2 = ndx + position;

      str = str.substring(0, ndx) + chars + str.substring(ndx2);

      sentence.text = str;

    }

    Trong hàm displayChars, ta tạo ra nội dung mới cho khung chữ sentence trên sân khấu bằng cách trích ra hai chuỗi từ câu hỏi: chuỗi từ đầu câu đến trước ký tự gạch dưới đầu tiên và chuỗi từ ký tự gạch dưới đầu tiên chưa bị thay thế đến cuối câu. Chuỗi trong biến chars được đặt vào giữa hai chuỗi vừa nêu.
    Thử chạy chương trình (mở bằng trình duyệt), bạn thấy trò chơi hoạt động đúng như dự định. Tuy nhiên người chơi chưa thể chơi lại vì hàm reset chưa làm gì cả. Hàm reset cần làm cho các biến toàn cục trong chương trình trở lại trị ban đầu và gọi hàm displayQuestion. Bạn viết thêm như sau:

    ...

    function reset() {

      done = false;

      index = 0;

      position = 0;

      score = 0;

      displayQuestion();

    }

    Khi chơi thử trò chơi của mình, có thể bạn thấy rằng phần chuỗi phía sau ký tự vừa được hiển thị luôn xê dịch. Đó là do các ký tự trong phông chữ mà bạn đang dùng có chiều rộng không giống nhau, có thể ký tự này chiếm chỗ nhiều hơn ký tự khác. Nếu muốn câu hỏi trên sân khấu bất động, dễ tập trung theo dõi sự thay đổi ở khung từ, bạn nên dùng phông chữ mà mọi ký tự có chiều rộng giống nhau, như phông chữ New Courier.
    Muốn vậy, trong Flash, bạn bấm kép vào khung chữ sentence, chọn phông chữ New Courier trong ô Font (hình 1).
     
    Nhân tiện, bạn tạo thêm khung chữ tĩnh SCORE và khung chữ động bên cạnh để hiển thị nội dung của biến score, giúp người chơi theo dõi điểm số đạt được qua từng câu hỏi. Đây là việc mà bạn đã quen thuộc.
    Trong trình duyệt, diện mạo trò chơi của bạn sẽ giống như hình 2.
     

    Nhắn tin cho tác giả
    Đỗ Thanh Dương @ 08:01 06/04/2012
    Số lượt xem: 1000
    Số lượt thích: 0 người
     
    Gửi ý kiến

    HỖ TRỢ QUẢN TRỊ WEBSITE

    Thay tên website / Chọn thư mục / Mở ra
    Giao diện Module Thư mục Thành viên Tài nguyên Xóa Code
    http://