Bài 41: Điều khiển dòng chữ
Trong trò chơi xếp hình, bạn đã tạo được nút bấm Solve. Nhân tiện, bạn nên tạo thêm nút bấm Reset để "chơi lại từ đầu". Nút bấm Reset hiện diện trong nhiều trò chơi. Với trò chơi xếp hình, nút bấm Reset càng cần thiết: giúp người chơi "xóa bàn chơi lại" khi tình trạng lộn xộn hiện hành trở nên tắc tị, hầu như không giải quyết được. Để có nút bấm mới Reset, bạn chỉ cần sao chép nút bấm Solve trong thư viện. Hàm xử lý tình huống onPress của nút bấm Reset chỉ cần gọi hàm shulffleTiles có sẵn.
Cụ thể, bạn gõ phím F11 để mở bảng Library, bấm-phải vào nhân vật Button, chọn Duplicate. Trong hộp thoại Duplicate Symbol vừa hiện ra, bạn gõ Reset để đặt tên cho nút bấm mới và gõ Enter. Trong khung hiển thị của bảng Library, nút bấm mới vẫn có nhãn là Solve. Bạn bấm kép vào nút bấm Reset trong khung hiển thị để vào chế độ chỉnh sửa nhân vật. Nút bấm Reset xuất hiện bên dưới bảng Timeline. Bạn gõ T để chọn công cụ Text Tool, bấm vào dòng chữ Solve, xóa dòng chữ đó và gõ Reset (hình 1).
Với thao tác như vậy, bạn sửa nhãn Solve thành Reset ở khung 1. Bạn chọn khung 2 trong bảng Timeline, sửa nhãn Solve thành Reset. Chuyển qua khung 3, bạn cũng sửa nhãn Solve thành Reset. Xong, bạn chọn Scene1  để thoát khỏi chế độ chỉnh sửa nhân vật, trở về với sân khấu và thời tuyến chính. Bạn kéo nút bấm Reset từ bảng Library vào sân khấu, đặt bên cạnh nút bấm Solve. Để nút bấm Reset có kích thước bằng nút bấm Solve, bạn chọn công cụ Free Transform Tool  , co kéo các dấu vuông vừa xuất hiện quanh nút bấm Reset để nút bấm Reset có được kích thước thích hợp. Bạn ấn Ctrl+F3 để mở bảng Properties trình bày các thuộc tính của nút bấm Reset, bấm vào ô Instance Name, gõ reset. Nhờ vậy, nút bấm mới trên sân khấu (thể hiện của nhân vật Reset trong Library) có tên là reset. Bạn cần dùng tên này trong chương trình. Gõ phím F9 để mở bảng Actions - Frame, bạn viết hàm xử lý tình huống onPress cho nút bấm mới:
tiles = new Array();
n = 0;
blankx = 3;
blanky = 0;
for(i = 0; i < 4; i++) {
tiles[i] = new Array();
for(j = 0; j < 4; j++) {
...
}
}
shuffleTiles();
reset.onPress = function() {
shuffleTiles();
}
solve.onPress = function() {
...
Đoạn mã vừa thêm gán một định nghĩa hàm cho hàm reset.onPress (nghĩa là hàm onPress của một thể hiện mang tên reset). Như đã dự định, hàm xử lý tình huống onPress của nút bấm reset chỉ cần gọi hàm shuffleTiles. Bạn ấn Ctrl+Enter để chạy chương trình và thử bấm nút Reset vài lần để biết chắc nó hoạt động tốt. Trong trò chơi xếp hình của ta, "đẳng cấp" của người chơi thể hiện ở số bước cần thiết để đạt đến thành công. Số bước càng nhỏ, người chơi càng khéo. Do vậy, ta cần hiển thị số bước của người chơi, xem như một cách tính điểm. Trong chương trình, số bước của người chơi chẳng qua là số lần bấm chuột, ta không phải tính toán gì thêm. Điều quan trọng là tạo dòng chữ trên sân khấu và điều khiển nó để hiển thị số bước mỗi khi người chơi bấm chuột. Bạn lại gõ T để chọn công cụ Text Tool, trỏ vào gần nút bấm Reset, kéo chuột để "căng" khung chữ và gõ Moves: (chỉ "số bước"). Trong cửa sổ Properties (nếu đã đóng cửa sổ Properties, bạn ấn Ctrl+F3 để mở lại), bạn quy định cỡ chữ ở ô Font Size, bấm vào ô Text (fill) Color và chọn màu chữ (hình 2). Muốn đặt dòng chữ vào vị trí thích hợp ngang với hai nút bấm đã có, bạn kéo khung chữ ở đường biên của nó.
Dòng chữ Moves: bạn vừa tạo ra thuộc loại Static Text (dòng chữ tĩnh), không thể thay đổi linh hoạt vào lúc chạy chương trình. Bên phải dòng chữ Moves:, ta cần tạo thêm dòng chữ động để thực sự hiển thị số bước. Bạn bấm vào đâu đó trên sân khấu để thôi chọn khung chữ Moves:, căng ra một khung chữ khác, khá dài và đặt khung chữ đó bên phải dòng chữ Moves: (hình 3). Ta không cần ghi gì cả trong khung chữ mới vì nội dung của khung chữ sẽ được tạo ra bởi chương trình. Bạn chú ý tạo khung chữ khá dài, chiếm hết chỗ trống còn lại trong bề rộng sân khấu để dự trù việc hiển thị thông báo khi cần thiết. Để nội dung khung chữ mới có thể thay đổi linh hoạt vào lúc chạy chương trình, bạn bấm vào ô Text Type trong bảng Properties, chọn Dynamic Text (thay cho Static Text), bấm vào ô Instance Name ngay bên dưới, gõ moves (đặt tên cho dòng chữ động là moves). Tuy khung chữ đang xét chưa có nội dung, bạn vẫn nên quy định cỡ chữ và màu chữ. Bạn nhớ chọn màu chữ sáng để số bước được hiển thị nổi bật trên nền màu sẫm của sân khấu.
Bạn chọn công cụ Selection Tool  , bấm vào chỗ trống trên sân khấu để thôi chọn khung chữ vừa tạo ra. Mở bảng Actions - Frame, bạn tạo thêm biến mới mang tên steps trong chương trình để đếm số lần bấm chuột và dùng trị số của biến đó làm nội dung của dòng chữ moves:
tiles = new Array();
n = 0;
blankx = 3;
blanky = 0;
steps = 0;
moves.text = steps;
...
function doPress() {
if( (Math.abs(this.currentx - blankx) == 1 && this.currenty == blanky) ||
(this.currentx == blankx && Math.abs(this.currenty - blanky) == 1) ) {
steps++;
moveTile(this);
}
}
Việc đếm số lần bấm chuột chỉ đơn giản là tăng trị số của biến steps thêm 1 (câu lệnh steps++;) trong hàm xử xý tình huống doPress đã có. Việc điều khiển nội dung dòng chữ moves được thực hiện bằng câu lệnh đơn giản: moves.text = steps;. Câu lệnh như vậy lấy trị số của biến steps gán cho thuộc tính text của dòng chữ động mang tên moves. Nội dung của dòng chữ động được quy định thông qua thuộc tính text của nó. Thuộc tính text là thuộc tính có sẵn của dòng chữ động. Bạn ghi nhớ điều này nhé. Ấn Ctrl+Enter để chơi thử trò chơi của mình, bạn sẽ thấy số bước hiển thị ở bên phải dòng chữ Moves: tăng thêm 1 mỗi khi bạn bấm chuột vào một mẩu hình để đưa mẩu hình đó vào vị trí trống.
Chia sẻ với bạn bè của bạn: |
