Bài 12: Trò chơi "rượt bắt"

Bài 12: Trò chơi "rượt bắt"

Trước hết, bạn mở cửa sổ Flash, bắt đầu với tập tin mới trống trơn. Bạn cần vẽ một hình tròn tượng trưng cho con cá (tưởng tượng đó là... cá nóc). Khi chương trình đã chạy tốt, ta sẽ vẽ con cá một cách tỉ mỉ. Để vẽ hình tròn, bạn đã biết rằng cần dùng công cụ Oval Tool  và giữ phím Shift khi vẽ trên sân khấu. Xong, bạn bấm vào công cụ chọn Selection Tool , căng khung chọn bao quanh hình tròn vừa vẽ, chuẩn bị chọn màu tô (fill color) và màu nét (stroke color). Ở hộp công cụ phía trái cửa sổ Flash, bạn chú ý phần Colors có hai ô màu. Bạn bấm vào ô màu trên, chọn màu nét trong bảng màu vừa hiện ra. Tương tự, bạn bấm vào ô màu dưới, chọn màu tô. Bạn nên chọn màu nét đen và màu tô sáng (màu cam chẳng hạn) cho dễ thấy "con cá" của mình. Để hình tròn trở thành nhân vật, bạn gõ phím F8. Khi thấy hộp thoại Convert to Symbol, bạn gõ Fish để đặt tên cho nhân vật và gõ Enter. Từ đây, hình tròn đang hiện diện trên sân khấu là một thể hiện của nhân vật Fish. Để lập trình cho con cá, bạn gõ phím F9 để mở cửa sổ Actions - Movie Clip (hình 1). Vì thể hiện của nhân vật Fish đang ở tình trạng "được chọn", những gì bạn sắp ghi vào cửa sổ Actions - Movie Clip sẽ quy định hành vi của thể hiện. Bạn đã biết rằng khi muốn diễn đạt hành vi của thể hiện, ta phải viết các hàm xử lý tình huống. Bạn viết hai hàm xử lý tình huống như sau để làm cho con cá biết đuổi theo con trỏ chuột:

onClipEvent(load) {

  step = 5;

}

 

onClipEvent(enterFrame) {

    _x += step;

  else if(_x - step > _root._xmouse)

    _x -= step;

}

Trong hàm onClipEvent(load), ta tạo ra biến step và gán trị cụ thể cho nó. Biến step xác định bước dịch chuyển của cá. Trị của biến step càng lớn, cá dịch chuyển càng nhanh. Hàm onClipEvent(enterFrame) được gọi mỗi khi Flash hiển thị một khung. Hiện thời, bạn chỉ có một khung nhưng vì Flash hiển thị khung đó lặp đi lặp lại vào lúc chạy, hàm onClipEvent(enterFrame) vẫn sẽ được gọi liên tục. Trong hàm onClipEvent(enterFrame), để biết cá có nên đi tới hay không (có nên gia tăng hoành độ _x của cá hay không), ta lấy hoành độ _x của cá cộng với step và so sánh kết quả với hoành độ của con trỏ chuột (tức _root._xmouse). Nếu kết quả của phép cộng ấy vẫn còn nhỏ hơn hoành độ của con trỏ chuột (điều kiện _x + step < _root._xmouse được thỏa), ta cho hoành độ _x của cá tăng thêm một bước: x += step; . Nếu kết quả lớn hơn hoành độ của con trỏ chuột, rõ ràng không nên đi tới và cần tiếp tục xét xem có nên đi lui hay không. Để biết có nên cho cá đi lui hay không, ta lấy hoành độ _x trừ đi step và so sánh kết quả của phép trừ đó với hoành độ của con trỏ chuột. Nếu kết quả vẫn còn lớn hơn hoành độ của con trỏ chuột, nên cho cá đi lui bằng cách giảm hoành độ _x một bước: x -= step;. Ngoài các trường hợp đã xét, hoành độ _x sẽ được giữ nguyên, tức là cá đứng yên. Có lẽ bạn hơi ngờ ngợ về cách viết hàm onClipEvent(enterFrame). Dường như phải dùng các cặp dấu gộp {} như sau mới đúng cú pháp của câu lệnh điều kiện:

onClipEvent(enterFrame) {

  if(_x + step < _root._xmouse) {

    _x += step;

  }

    _x -= step;

  }

}

Thực ra, nếu phần diễn đạt việc cần làm khi điều kiện được thỏa chỉ có một câu lệnh, ngôn ngữ ActionScript cho phép ta viết câu lệnh ấy theo sau điều kiện, không cần đặt trong cặp dấu gộp. Thử chạy chương trình, bạn sẽ thấy không có lỗi biên dịch. Bạn đưa con trỏ chuột qua trái (hoặc phải), cá cũng bơi qua trái (hoặc phải). Cá chưa biết bơi lên, bơi xuống để "bắt dính" con trỏ chuột vì ta chưa "huấn luyện" cho cá làm điều đó. Để cá biết rằng nên bơi lên hoặc xuống khi nào, trong hàm onClipEvent(enterFrame), bạn cần xét đến tung độ _y của cá và tung độ của con trỏ chuột _root._ymouse theo cách thức tương tự như đã làm đối với hoành độ. Trở lại với chương trình, bạn viết thêm vào hàm onClipEvent(enterFrame) như sau:

  if(_x + step < _root._xmouse)

    _x += step;

  else if(_x - step > _root._xmouse)

    _x -= step;

  if(_y + step < _root._ymouse)

  else if(_y - step > _root._ymouse)

    _y -= step;

}

Thử chạy chương trình, bạn thấy rõ cá trở nên "khôn lanh" hơn hẳn.

Bài 13: Hàm kiểm tra va chạm

Thực ra ta chỉ cần bổ sung một chút nữa thôi. Trường hợp cá bắt kịp con trỏ chuột có thể xem là trường hợp cá đứng yên, không phải di chuyển theo phương ngang cũng như theo phương dọc. Bạn hãy bấm chọn con cá trên sân khấu, mở bảng Actions (gõ phím F9) và viết thêm vào hàm onClipEvent(enterFrame) để có nội dung như sau:

onClipEvent(enterFrame) {

  caught = false;

  if(_x + step < _root._xmouse)

    _x += step;

  else if(_x - step > _root._xmouse)

    _x -= step;

  else caught = true;

  if(_y + step < _root._ymouse)

  else if(_y - step > _root._ymouse)

    _y -= step;

  else if(caught == true)

    trace("Bắt được rồi nhé!");

}

Trong hàm onClipEvent(enterFrame), trước hết ta tạo biến caught có trị ban đầu là false. Khi biết chắc cá không cần di chuyển theo phương ngang, ta gán trị true cho biến caught để "làm hiệu". Tiếp theo, nếu biết chắc cá không cần di chuyển theo phương dọc, ta xét xem biến caught có trị là true hay không. Khi đó, nếu caught có trị là true, nghĩa là xảy ra tình trạng cá không cần di chuyển theo phương ngang cũng như theo phương dọc, câu lệnh trace("Bắt được rồi nhé!"); thông báo hả hê rằng con trỏ chuột đã bị bắt. Chạy thử chương trình và... giả vờ chậm chạp để cá bắt kịp con trỏ chuột, bạn thấy rõ những chi tiết bổ sung trong hàm onClipEvent(enterFrame) có hiệu lực ra sao. Nhưng một khi người chơi phải giả vờ thua, cuộc chơi quá dễ, mất ý nghĩa. Ta cần làm cho người chơi bận rộn hơn, căng thẳng hơn, bằng cách bày thêm luật chơi như sau: trong khi bị cá đuổi, người chơi phải tóm một con sao biển. Mỗi lần bấm trúng sao biển, người chơi được thêm một điểm, sao biển xuất hiện ngẫu nhiên ở vị trí khác và cá di chuyển nhanh hơn. Để có sao biển, bạn tạm vẽ hình ngôi sao đơn giản. Bạn trỏ vào công cụ vẽ hình khung Rectangle Tool , giữ phím trái của chuột chút xíu, chọn công cụ PolyStar Tool (công cụ vẽ đa giác hoặc hình sao). Ấn Ctrl+F3, bạn thấy bảng Properties mở ra, trình bày những quy định liên quan đến hoạt động của công cụ mà bạn đang "cầm trong tay". Bạn bấm nút Options để mở hộp thoại Tool Settings (hình 1). Trong đó, bạn chọn mục star ở ô Style và bấm OK. Trong bảng Properties, bạn có thể chọn trước màu nét  và màu tô  cho hình sao sắp vẽ.

Trỏ vào đâu đó trên sân khấu, bạn giữ phím trái của chuột, kéo chuột qua phải, xuống dưới, để căng ra một hình ngôi sao năm cánh. Gõ phím V để chuyển qua công cụ chọn Selection Tool, ban căng khung chọn bao quanh hình sao. Bạn gõ phím F8 để mở hộp thoại Convert to Symbol, gõ tên Star và gõ Enter. Thao tác như vậy tạo ra nhân vật "sao biển" mang tên Star. Hình sao trên sân khấu trở thành một thể hiện của nhân vật Star. Ta cần lập trình để sao biển nhận biết con trỏ chuột có chạm vào nó hay không mỗi khi người chơi bấm chuột. Mỗi khi bị bấm trúng, sao biển có nhiệm vụ cộng điểm cho người chơi. Gõ phím F9 để mở bảng Actions tương ứng với thể hiện được chọn (hình 2), bạn gõ đoạn mã như sau:

onClipEvent(load) {

  score = 0;

}

 

onClipEvent(mouseDown) {

    score++;

    trace("Điểm: " + score);

  }