Bài 14: Hàm tính trị ngẫu nhiên
Trong trò chơi đang thực hiện, ta dự định cho sao biển di chuyển ngẫu nhiên mỗi khi được bấm trúng (xem như người chơi nhặt được sao biển và một sao biển khác xuất hiện tại vị trí bất kỳ). Muốn vậy, trong hàm onClipEvent(mouseDown) của sao biển, bạn gán trị ngẫu nhiên cho hoành độ _x và tung độ _y của sao biển. Nhưng trước tiên bạn cần làm quen với hàm tính trị ngẫu nhiên random() trong lớp Math.
Bạn bấm chọn sao biển, mở bảng Actions - MovieClip để xem lại chương trình của sao biển và ghi thêm câu lệnh hiển thị trị ngẫu nhiên do hàm Math.random() cung cấp:
onClipEvent(mouseDown) {
if(hitTest(_root._xmouse, _root._ymouse, true)) {
trace("Trị ngẫu nhiên: " + Math.random());
score++;
trace("Điểm: " + score);
}
}
Thử chạy chương trình, bạn thấy mỗi khi bấm trúng sao biển, sao biển thông báo một trị ngẫu nhiên ở bảng Output. Bấm sao biển nhiều lần, bạn sẽ nhận ra trị ngẫu nhiên trả về bởi hàm Math.random() luôn nhỏ hơn 1. Nói chính xác, hàm Math.random() cho ta trị ngẫu nhiên lớn hơn hoặc bằng 0 và nhỏ hơn 1. Muốn thu được trị ngẫu nhiên trong khoảng tùy ý, ta phải "phóng lớn" trị trả về của hàm Math.random(). Để cho rõ ràng, ta viết một hàm mới để tính trị ngẫu nhiên trong khoảng tùy ý và dùng hàm đó trong hàm onClipEvent(mouseDown) của sao biển. Chương trình của sao biển chỉ chấp nhận các hàm xử lý tình huống nên bạn phải viết hàm cần thiết ở chỗ khác. Bấm vào chỗ trống trên sân khấu, bạn thấy chương trình của sao biển biến mất. Bảng Actions - Frame trước mắt bạn dùng để lập trình cho khung đầu tiên (hình 1). Bạn viết hàm tính trị ngẫu nhiên "ngon lành" hơn, gọi là getRandom(min, max), như sau:
function getRandom(min, max) {
var num = Math.random();
num = num * (max - min);
num = num + min;
return num;
}
Hàm getRandom(min, max) cho trị ngẫu nhiên trong khoảng từ min đến max bằng cách nhân trị trả về của hàm Math.random() với khoảng cách giữa max và min, tức max - min, rồi cộng kết quả đó với min. Câu lệnh return num; làm cho hàm getRandom(min, max) trả về kết quả tính toán khi được gọi. Đây là lần đầu tiên bạn viết một hàm có trả về một trị số. Ngoài ra, chắc bạn chú ý đến từ var trong câu lệnh var num = Math.random();. Câu lệnh này tạo ra biến (variable) mang tên num để chứa trị trả về bởi hàm Math.random(). Viết từ var khi tạo ra biến num, ta ngụ ý rằng biến num là biến được tạo ra tạm thời trong hàm getRandom(). Biến như vây gọi là biến cục bộ, được xóa khỏi bộ nhớ máy khi hàm getRandom() kết thúc công việc. Bạn bấm vào sao biển để trở về với chương trình của sao biển trong bảng Actions -Movie Clip . Trong hàm onClipEvent(mouseDown), bạn gọi hàm getRandom() vừa viết để thử tính trị ngẫu nhiên từ 0 đến 400:
onClipEvent(mouseDown) {
if(hitTest(_root._xmouse, _root._ymouse, true)) {
trace("Trị ngẫu nhiên: " + _root.getRandom(0, 400));
score++;
trace("Điểm: " + score);
}
}
Có lẽ bạn thắc mắc: "Vì sao phải viết _root.getRandom(0, 400), thay vì viết đơn giản getRandom(0, 400)?". Nếu bạn không dùng tham chiếu _root, khi xem xét chương trình của sao biển, Flash không biết rằng phải đọc hàm getRandom() ở khung 1 của thời tuyến chính, khác với thời tuyến được dùng bên trong thể hiện của nhân vật sao biển. Thử chạy chương trình và bấm nhiều lần vào sao biển, bạn thấy rõ hàm getRandom() của ta cho trị ngẫu nhiên nhỏ hơn 400. Để sao biển di chuyển khắp sân khấu, hoành độ _x của sao biển phải có trị bất kỳ nhỏ hơn chiều rộng sân khấu và tung độ _y phải có trị bất kỳ nhỏ hơn chiều cao sân khấu. Bấm vào chỗ trống trên sân khấu để thôi chọn sao biển, bạn thấy lại chương trình ở thời tuyến chính. Bạn chỉnh sửa và bổ sung để có nội dung như sau:
function getRandomX() {
return getRandom(0, 550);
}
function getRandomY() {
return getRandom(0, 400);
}
function getRandom(min, max) {
return Math.random()*(max - min) + min;
}
Như bạn thấy, ta định nghĩa thêm hai hàm mới: getRandomX() và getRandomY(). Hàm getRandomX() dùng để tạo ra trị ngẫu nhiên lớn hơn hoặc bằng 0 và nhỏ hơn 550. Trong đó, 550 là chiều rộng mặc định của sân khấu. Hàm getRandomX() thích hợp cho việc tạo ra hoành độ ngẫu nhiên bao quát chiều rộng sân khấu. Hàm getRandomX() không làm gì nhiều, chỉ dựa hoàn toàn vào tính toán của hàm getRandom(min, max). Chiều cao mặc định của sân khấu là 400, do vậy bạn hiểu ngay hàm getRandomY() được viết ra để dùng vào việc gì. Ngoài ra, vì bạn đã hiểu cách tính toán của hàm getRandom(min, max), ta viết lại nội dung của hàm đó ở dạng gọn hơn, có ý nghĩa tương đương. Chuyển qua chương trình của sao biển (bấm vào sao biển), bạn chỉnh sửa như sau:
onClipEvent(mouseDown) {
if(hitTest(_root._xmouse, _root._ymouse, true)) {
_x = _root.getRandomX();
_y = _root.getRandomY();
score++;
trace("Điểm: " + score);
}
}
Thử chạy chương trình, bạn thấy lần này sao biển thực sự di chuyển ngẫu nhiên mỗi khi được bấm trúng.
Bài 15: Liên lạc giữa các thể hiện
Bạn đã làm cho sao biển xê dịch ngẫu nhiên và tăng thêm 1 điểm cho người chơi mỗi khi sao biển được bấm trúng. Khi đó, theo dự định, ta còn phải làm cho cá chuyển động nhanh hơn. Điểm của người chơi càng cao, cá bơi càng nhanh. Có như vậy, trò chơi mới hào hứng! Chắc chắn cá sẽ bắt được con trỏ chuột vào lúc nào đó. Khi cá bắt được con trỏ chuột, trò chơi cần trở lại từ đầu: điểm của người chơi được gán lại trị số 0. Điểm cao nhất đạt được sẽ thể hiện "đẳng cấp" của mỗi người chơi.
Với mục tiêu như vậy, sao biển cần liên lạc với cá để yêu cầu tăng tốc. Ngược lại, cá phải yêu cầu sao biển cho người chơi điểm 0 khi cá bắt được con trỏ chuột. Để cá và sao biển có thể "nói chuyện" với nhau, trước hết bạn phải đặt tên cho chúng. Cá là thể hiện của nhân vật Fish, còn sao biển là thể hiện của nhân vật Star, cả hai thể hiện này đều chưa có tên riêng. Bạn hãy bấm vào cá và ấn Ctrl+F3 để mở bảng Properties. Bạn bấm vào ô có dòng chữ , gõ fish và gõ Enter (đặt tên cho cá là fish). Bạn bấm chọn sao biển. Bảng Properties thay đổi, tương ứng với sao biển. Bạn bấm vào ô có dòng chữ , gõ star và gõ Enter (đặt tên ngắn gọn cho sao biển là star). Xong, bạn bấm vào thanh tiêu đề của bảng Properties để tạm dẹp nó đi.
Bạn mở bảng Actions (trình bày chương trình của sao biển), viết thêm một câu lệnh trong hàm onClipEvent(mouseDown) như sau:
onClipEvent(mouseDown) {
if(hitTest(_root._xmouse, _root._ymouse, true)) {
_x = _root.getRandomX();
_y = _root.getRandomY();
score++;
trace("Điểm: " + score);
_root.fish.step++;
}
}
Câu lệnh mà bạn vừa viết tăng thêm 1 cho trị số của biến step bên trong cá. Để diễn đạt biến step của cá trong chương trình của sao biển, bạn phải ghi _root.fish.step, chứ không thể ghi đơn giản fish.step. Tham chiếu _root trỏ đến sân khấu, nơi lưu giữ "tên tuổi" của các "diễn viên". Bạn cần điều chỉnh thêm chút xíu trước khi chạy thử chương trình: bấm-phải vào cá, trỏ vào mục Arrange trên trình đơn vừa hiện ra, chọn mục Bring to Front. Nhờ vậy, cá được đặt phía trước sao biển, gây "khó dễ" cho bạn nhiều hơn. Thử chạy chương trình, bạn thấy câu lệnh mới có hiệu lực rõ ràng: khi điểm của bạn càng tăng (bắt được càng nhiều sao biển), cá càng hoảng hốt, ra sức bảo vệ sao biển. Khi cá bắt được con trỏ chuột, người chơi không hề hấn gì. Điều này không công bằng. Bạn hãy đóng cửa sổ chương trình và nhìn vào bảng Actions (lúc này đang trình bày chương trình của cá). Bạn chú ý trường hợp "bắt được con trỏ chuột" diễn đạt ở phần cuối của hàm onClipEvent(enterFrame). Bạn chỉnh sửa như sau:
onClipEvent(enterFrame) {
...
else if(caught == true) {
trace("Bắt được rồi nhé!");
_root.star.score = 0;
step = 5;
}
}
Câu lệnh _root.star.score = 0; gán trị số 0 cho biến score bên trong sao biển, buộc người chơi trở lại mức xuất phát. Để diễn đạt biến score của sao biển trong chương trình của cá, bạn phải viết _root.star.score, chứ không thể viết đơn giản star.score. Câu lệnh step = 5; làm cho cá "bình tĩnh" trở lại, bơi chậm như lúc đầu sau khi bắt được con trỏ chuột. Chạy lại chương trình, vừa chơi vừa liếc nhìn bảng Output, bạn sẽ thấy sự công bằng của trò chơi được thiết lập: khi cá bắt kịp con trỏ chuột, "điểm tích lũy" của bạn mất sạch! Khi trò chơi của bạn chạy trong trang web, người chơi không thấy bảng Output. Do vậy, bạn cần hiển thị điểm ngay trên sân khấu. Bạn bấm vào công cụ Text Tool  (hoặc gõ phím T), căng một khung nhỏ ở góc dưới, bên trái sân khấu và gõ SCORE:. Bạn mở lại bảng Properties bằng cách bấm vào thanh tiêu đề của bảng đó. Bấm vào ô Text Type  trong bảng Properties, bạn chọn Static Text (thay cho Dynamic Text), quy định rằng khung chữ của bạn có nội dung cố định, không thay đổi. Người ta gọi đó là khung chữ tĩnh. Nếu cần thay đổi phông chữ và cỡ chữ, bạn chọn dòng chữ SCORE: (kéo chuột ngang qua dòng chữ), chọn phông chữ trong ô Font, bấm kép vào ô Font Size và gõ trị số tùy ý (20 chẳng hạn). Bạn căng một khung khác bên phải dòng chữ SCORE: để tạo khung chữ mới (hình 1). Trong bảng Properties (lúc này tương ứng với khung chữ mới), bạn chọn phông chữ và cỡ chữ giống như dòng chữ SCORE. Bấm vào ô Var, bạn gõ _root.star.score và gõ Enter. Thao tác như vậy tạo ra khung chữ động trình bày trị số của biến _root.star.score (nội dung của khung chữ thay đổi theo trị số của biến _root.star.score). Chạy thử chương trình, bạn thấy khung chữ động thể hiện đúng điểm số của mình (so với thông báo ở bảng Output).
Chia sẻ với bạn bè của bạn: |
