Bài 33: Úp hình và lật hình
Bạn đã viết được hàm xáo hình ngẫu nhiên cho trò chơi "lật hình", trong đó bạn hoán đổi nhiều lần vị trí của hai hình được chọn ngẫu nhiên: tiles[r1][c1] và tiles[r2][c2]. Điều này nghĩa là hình ở hàng r1, cột c1 lấy vị trí của hình ở hàng r2, cột c2 và ngược lại. Nói khác đi, sau một lần hoán đổi, phần tử dãy tiles[r1][c1] trỏ đến hình ở hàng r2, cột c2, trong khi phần tử dãy tiles[r2][c2] trỏ đến hình ở hàng r1, cột c1. Như vậy, sau nhiều lần hoán đổi, rốt cuộc phần tử tiles[r][c] nào đó không còn trỏ đến hình ở hàng r, cột c. Ta sẽ không biết được một phần tử tiles[r][c] nào đó nằm ở hàng nào, cột nào và sẽ không điều khiển trò chơi được nữa!
Để ngăn chặn tình trạng hoàn toàn hỗn loạn như vậy, ngay khi hoán đổi vị trí của hình tiles[r1][c1] và tiles[r2][c2], bạn cần gán hình vào phần tử dãy phù hợp, làm cho tiles[r1][c1] trỏ đến hình mới ở hàng r1, cột c1 và tiles[r2][c2] trỏ đến hình mới ở hàng r2, cột c2. Cụ thể, bạn cần viết thêm vào hàm shuffleTiles() trong chương trình của ta như sau:
...
function shuffleTiles() {
for(i = 0; i < 200; i++) {
r1 = getRandom(0, 3);
c1 = getRandom(0, 3);
r2 = getRandom(0, 3);
c2 = getRandom(0, 3);
tx = tiles[r1][c1]._x;
ty = tiles[r1][c1]._y;
tiles[r1][c1]._x = tiles[r2][c2]._x;
tiles[r1][c1]._y = tiles[r2][c2]._y;
tiles[r2][c2]._x = tx;
tiles[r2][c2]._y = ty;
t = tiles[r1][c1];
tiles[r1][c1] = tiles[r2][c2];
tiles[r2][c2] = t;
}
}
Đoạn mã vừa bổ sung thực hiện việc hoán đổi hai phần tử dãy tiles[r1][c1] và tiles[r2][c2]. Để hoán đổi, ta thực hiện giải thuật quen thuộc: đặt ra biến t để lưu tạm tiles[r1][c1], gán trị của tiles[r2][c2] cho tiles[r1][c1], rồi cho tiles[r2][c2] lấy trị của biến t. Sau việc hoán đổi như vậy, tiles[r1][c1] vẫn trỏ đến hình ở hàng r1, cột c1 (hình mới, trước đó nằm ở hàng r2, cột c2) và tiles[r2][c2] vẫn trỏ đến hình ở hàng r2, cột c2 (hình mới, trước đó nằm ở hàng r1, cột c1). Bạn có thể hoàn toàn yên tâm rằng phần tử dãy tiles[r][c] nào đó luôn trỏ đến hình ở hàng r, cột c.
Giải quyết ổn thỏa việc xáo hình, ta bắt đầu xét vấn đề mới: cần làm cho các hình lúc đầu được "úp xuống" và cần làm cho hình nào đó "lật lên" khi người chơi bấm trúng vào hình đó. Dĩ nhiên, các hình trên máy của ta không có "mặt sau" nào cả để bạn "úp xuống". Ta có thể làm cho các hình giống như được "úp xuống" bằng cách che chúng lại với một hình khác, đóng vai "mặt sau". Khi người chơi bấm vào hình nào, ta cho hình "mặt sau" biến đi, để lộ ra hình "mặt trước".
Trước hết, cần tạo ra hình "mặt sau". Bạn gõ phím F11 để mở bảng Library, bấm-phải vào một nhân vật hiện có trong danh sách nhân vật, Tile0 chẳng hạn, rồi chọn Duplicate trong trình đơn vừa hiện ra. Thao tác này nhằm sao chép nhân vật Tile0. Khi thấy hộp thoại Duplicate Symbol (hình 1), bạn gõ tên Back (mặt sau) và chọn Export for ActionScript. Nếu quên chọn Export for ActionScript, bạn sẽ không thể tạo ra thể hiện của nhân vật Back vào lúc chạy chương trình. Xong, bạn bấm nút OK. Trong danh sách nhân vật ở bảng Library có thêm nhân vật mới mang tên Back, có "mặt mũi" giống hệt nhân vật Tile0.
Bạn bấm kép vào "mặt mũi" nhân vật Back để chuyển qua chế độ chỉnh sửa nhân vật. Bạn xóa biểu tượng "mặt cười"  (bấm trúng biểu tượng, gõ phím Delete). Bạn nên chọn màu tô khác cho "mặt sau", tức là tô màu khác cho hình vuông nằm trên lớp Layer 1. Nếu lớp Layer 1 đang bị khóa, bạn cần bấm vào ổ khóa  của lớp Layer 1 để "mở khóa" (ổ khóa biến mất). Bạn chọn màu tô  , chọn công cụ tô  và bấm vào hình vuông để tô. Bạn bấm vào Scene 1  để trở về với sân khấu, viết thêm vào chương trình như sau:
tiles = new Array();
backs = new Array();
n = 0;
for(i = 0; i < 4; i++) {
tiles[i] = new Array();
backs[i] = new Array();
for(j = 0; j < 4; j++) {
attachMovie("Tile" + n%8, "tile" + i + j, n);
attachMovie("Back", "back" + i + j, n + 100);
n++;
tiles[i][j] = this["tile" + i + j];
tiles[i][j]._x = 20 + 120 * j;
tiles[i][j]._y = 20 + 120 * i;
backs[i][j] = this["back" + i + j];
backs[i][j]._x = 20 + 120 * j;
backs[i][j]._y = 20 + 120 * i;
}
}
...
Ta tạo ra 16 thể hiện của nhân vật Back để che đậy cho 16 hình "mặt trước". Câu lệnh backs = new Array(); tạo ra dãy mang tên backs để quản lý các hình "mặt sau". Cũng như dãy tiles đã có, mỗi phần tử của dãy backs lại là một dãy, thể hiện bởi câu lệnh backs[i] = new Array(); trong vòng lặp. Dãy con backs[i] dùng để chứa các hình "mặt sau" của hàng i. Câu lệnh attachMovie("Back", "back" + i + j, n + 100); tạo một thể hiện của nhân vật Back, dùng cho hàng i, cột j. Thể hiện đó được gán cho phần tử dãy backs[i][j] bởi câu lệnh backs[i][j] = this["back" + i + j]; giống như ta đã làm với dãy tiles. Trong câu lệnh tạo thể hiện của nhân vật Back, ta quy định độ cao (cũng còn được gọi là "độ sâu") là n + 100. Điều này bảo đảm cho mọi hình "mặt sau" đều nằm cao hơn hình "mặt trước". Nhờ vậy, hình "mặt sau" mới có thể che khuất hình "mặt trước". Với hai câu lệnh:
backs[i][j]._x = 20 + 120 * j;
backs[i][j]._y = 20 + 120 * i;
bạn thấy rõ các hình "mặt sau" được xếp tại các vị trí trùng với các hình "mặt trước". Thử chạy chương trình, bạn có kết quả đúng như dự định (hình 2). Mọi hình "mặt sau" đều che khuất hình "mặt trước".
Để hình "mặt sau" biến đi khi người chơi bấm chuột trúng nó, bạn viết thêm hàm xử lý tình huống bấm chuột ở cuối chương trình như sau:
function getRandom(min, max) {
...
}
function shuffleTiles() {
...
}
this.onMouseUp = function() {
for(i = 0; i < 4; i++) {
for(j = 0; j < 4; j++) {
if(tiles[i][j].hitTest(_root._xmouse, _root._ymouse)) {
backs[i][j]._visible = false;
}
}
}
}
Đoạn mã vừa thêm định nghĩa hàm xử lý tình huống bấm chuột onMouseUp cho thời tuyến chính (tức là cho sân khấu). Trong hàm đó, bạn dùng hai vòng lặp for để rà soát theo hàng và theo cột đối với dãy tiles. Nếu thấy vị trí con trỏ chuột (_root._xmouse, _root._ymouse) trúng vào phần tử nào của dãy tiles, ta gán trị false cho thuộc tính _visible của hình "mặt sau" tại vị trí tương ứng, làm cho hình "mặt sau" tại đó biến mất, xem như hình "mặt trước" tại đó được "lật lên". Bạn chạy thử chương trình và "lật" vài hình xem sao (hình 3).
Chia sẻ với bạn bè của bạn: |
