Bài 31: Trò chơi "lật hình"

Bài 31: Trò chơi "lật hình"

Ta hãy bắt đầu từ việc đơn giản: sắp xếp các hình thành hàng và cột. Bạn thử hình dung ta có 16 hình, xếp thành 4 hàng, 4 cột, trong đó có 8 cặp hình giống nhau. Trong bài trước, bạn đã tạo được 4 hình vuông khác nhau (có màu tô khác nhau). Ta cần có thêm 4 hình vuông khác nữa trong thư viện Library để có đủ 8 hình khác nhau. Trước mắt, ta tạo ra các hình vuông khác nhau bằng cách tô màu khác nhau. Sau này, khi chương trình chạy tốt, bạn vẽ thêm hình vui mắt gì đó vào mỗi hình vuông trong Library hoặc lấy hình từ mạng. Bạn hãy mở lại tập tin FLA đã tạo ra trong bài trước, gõ phím F11 để mở bảng Library. Trong bảng Library, bạn bấm-phải vào mục Tile0, chọn Duplicate. Hộp thoại Duplicate hiện ra, bạn gõ tên Tile4, rồi chọn Export for ActionScript và bấm OK. Thao tác này sao chép nhân vật Tile0, tạo ra nhân vật mới Tile4. Để nhân vật mới Tile4 có màu tô khác với Tile0, bạn lại bấm-phải vào mục Tile0  trong bảng Library, chọn Edit để chuyển qua chế độ chỉnh sửa nhân vật. Bạn chọn màu tô khác ở ô Fill Color , chọn công cụ tô  và bấm vào hình vuông Tile4 trong miền vẽ. Để có nhân vật mới Tile5 có màu tô khác, bạn lặp lại thao tác như trên để sao chép nhân vật Tile0 thành nhân vật Tile5 và chọn màu tô cho Tile5 khác với những màu tô đã dùng. Cứ thế, bạn tạo thêm nhân vật Tile6 và Tile7 để có được cả thảy 8 nhân vật hình vuông (từ Tile0 đến Tile7) với màu tô khác nhau. Gõ phím F9 để mở bảng Actions - Frame, bạn xóa đoạn mã đã viết từ bài trước, viết đoạn mã khác như sau:

tiles = new Array();

n = 0;

  tiles[i] = new Array();

  for(j = 0; j < 4; j++) {

    attachMovie("Tile" + n%8, "tile" + i + j, n);

    n++;

    tiles[i][j] = this["tile" + i + j];

    tiles[i][j]._x = 120 * j;

    tiles[i][j]._y = 120 * i;

  }

}

Trong đoạn mã vừa viết, ta dùng dãy hai chiều tiles để "quản lý" 16 thể hiện được tạo ra từ 8 nhân vật trong thư viện (hình 1). Dãy hai chiều phù hợp với cách sắp xếp thành hàng và cột của các thể hiện trên sân khấu. Việc đưa các thể hiện vào dãy được thực hiện bởi hai vòng lặp for.

Vòng lặp ngoài có chỉ số i chạy từ 0 đến 3. Trong mỗi lần lặp theo chỉ số i, ta tạo ra một phần tử của dãy tiles: tiles[i] = new Array();. Nhờ vậy, dãy tiles có 4 phần tử, mỗi phần tử lại là một dãy khác, tạm gọi là dãy con. Vòng lặp trong có chỉ số j chạy từ 0 đến 3, có nhiệm vụ đưa 4 phần tử vào dãy con vừa tạo ra (mỗi dãy con có 4 phần tử). Trong mỗi lần lặp theo chỉ số j, ta lại tạo ra một thể hiện từ nhân vật trong Library. Bạn chú ý cách đặt tên cho thể hiện. Khi biến i có trị số là 0, biến j có trị số là 0, thể hiện được tạo ra có tên là "tile" + i + j, tức là tile00. Tương tự, khi i là 0, j là 1, thể hiện có tên là tile01,... Do câu lệnh tiles[i][j] = this["tile" + i + j]; thể hiện tile00 được đưa vào dãy tiles, trở thành phần tử tiles[0][0]. Tương tự, thể hiện tiles01 trở thành phần tử tiles[0][1] trong dãy tiles,... Hai câu lệnh quy định vị trí cho các thể hiện:

tiles[i][j]._x = 120 * j;

tiles[i][j]._y = 120 * i;

tương đương với nhiều câu lệnh như sau:

tiles[0][0]._x = 0;

tiles[0][0]._y = 0;

tiles[0][1]._x = 120;

tiles[0][1]._y = 0;

tiles[0][2]._x = 240;

tiles[0][2]._y = 0;

...

tiles[1][0]._y = 120;

tiles[1][1]._x = 120;

tiles[1][1]._y = 120;

tiles[1][2]._x = 240;

tiles[1][2]._y = 120;

...

Với cách sắp xếp như vậy, bạn thấy rõ các phần tử trong dãy tiles có chỉ số i giống nhau được xếp trên cùng một hàng. Các phần tử có chỉ số j giống nhau thuộc cùng một cột. Vì vậy, ta gọi i là chỉ số hàng, j là chỉ số cột. Trong câu lệnh tạo thể hiện attachMovie("Tile" + n%8, "tile" + i + j, n); bạn chú ý biểu thức n % 8, trong đó n có trị số ban đầu là 0 và tăng một đơn vị trong mỗi lần lặp do câu lệnh n++; (sau câu lệnh tạo thể hiện). Ký hiệu % chỉ tác tử modulo. Biểu thức n % 8 cho ta số dư trong phép chia của n cho 8. Nếu n có trị số nhỏ hơn 8, tức là các trị số từ 0 đến 7, biểu thức n % 8 cũng cho trị số từ 0 đến 7. Nếu n có trị số từ 8 trở lên, chẳng hạn các trị số từ 8 đến 15, biểu thức n % 8 vẫn cho các trị số tương ứng từ 0 đến 7. Chẳng hạn, khi n là 8, biểu thức n % 8 cho trị số 0 (số dư của phép chia 8 cho 8). Khi n là 9, biểu thức n % 8 cho trị số 1 (số dư của phép chia 9 cho 8). Nói chung biểu thức n % 8 luôn luôn cho trị số từ 0 đến 7, không bao giờ cho trị số vượt ra ngoài phạm vi đó. Nhờ vậy, biểu thức "Tile" + n%8 luôn cho kết quả trong phạm vi từ Tile0 đến Tile7, dù biến n tăng đều do vòng lặp. Ấn Ctrl+Enter để chạy thử chương trình, bạn thu được kết quả như hình 2.

Bài 32: Xáo hình ngẫu nhiên

tiles = new Array();

n = 0;

for(i = 0; i < 4; i++) {

  for(j = 0; j < 4; j++) {

    attachMovie("Tile" + n%8, "tile" + i + j, n);

    n++;

    tiles[i][j]._x = 20 + 120 * j; // Xê dịch 20 pi-xôn

    tiles[i][j]._y = 20 + 120 * i; // Xê dịch 20 pi-xôn

  }

Viết thêm như vậy nghĩa là bạn chừa lề trên và lề trái một khoảng 20 pi-xôn (điểm ảnh). Do khoảng cách giữa hai hình cũng là 20 pi-xôn, mỗi hình có chiều rộng và chiều cao là 100 pi-xôn, sân khấu của ta cần có kích thước 500 pi-xôn x 500 pi-xôn. Bạn hãy ấn Ctrl +F3 để mở bảng Properties. Trong bảng Properties, bạn bấm nút Size. Hộp thoại Document Properties xuất hiện, giúp bạn quy định chiều rộng và chiều cao của sân khấu (hình 1). Xong, bạn bấm OK, ấn Ctrl+F3 để dẹp bảng Properties.

Việc xếp hình xem như ổn, ta bắt đầu tính đến việc xáo trộn hình. Cụ thể, bạn cần viết một hàm có khả năng làm cho vị trí của các hình thay đổi ngẫu nhiên. Nghĩa là sau khi gọi hàm đó, vị trí các hình thay đổi lộn xộn, không thể biết trước. Tuy nhiên, các hình của ta hiện chỉ có màu tô khác nhau, sẽ không dễ nhận ra sự thay đổi vị trí của chúng. Cần làm cho các hình có "mặt mũi" nhất định cho dễ phân biệt. Bạn có thể tạm thời dùng các biểu tượng đơn giản của phông chữ Wingdings để gắn vào hình. Sau này, bạn có thể thay bằng hình khác đẹp hơn. Bạn hãy mở cửa sổ Microsoft Word, chọn Insert > Symbol. Trong hộp thoại Symbol (hình 2), bạn chọn Wingdings trong ô Font, bấm kép vào một biểu tượng nào đó thuộc phông chữ Wingdings, biểu tượng "mặt cười"  chẳng hạn, để đưa biểu tượng đó vào văn bản. Sau khi đưa tám biểu tượng khác nhau vào văn bản, bạn đóng hộp thoại Symbol, chọn biểu tượng đầu tiên  (kéo chuột ngang qua biểu tượng), ấn Ctrl+C để sao chép.

Trở lại cửa sổ Flash, bạn gõ F11 để mở bảng Library, bấm kép vào biểu tượng của nhân vật Tile0  để bắt đầu chỉnh sửa Tile0. Trong bảng thời tuyến của Tile0, bạn bấm vào dấu chấm ở cột Lock/UnLock. Biểu tượng ổ khóa  xuất hiện tại đó. Thao tác như vậy nhằm khóa lớp Layer 1, giúp cho hình vuông trong lớp Layer 1 không bị xê dịch bất ngờ trong thao tác tiếp theo của bạn. Bạn bấm nút Insert Layer  để tạo lớp Layer 2, ấn Ctrl+V để dán biểu tượng  đã sao chép từ cửa sổ Word vào lớp Layer 2. Để biểu tượng có kích thước lớn hơn, tương xứng với hình vuông, bạn gõ phím Q hoặc chọn công cụ Free Transform Tool  ở hộp công cụ. Chung quanh biểu tượng  xuất hiện những "dấu chọn". Bạn trỏ vào dấu chọn ở góc biểu tượng, giữ phím Shift và kéo chuột để kéo dãn biểu tượng (nếu bạn không giữ phím Shift khi kéo chuột, chiều rộng và chiều cao biểu tượng sẽ dãn không đều, gây biến dạng). Khi biểu tượng có kích thước phù hợp, bạn di chuyển nó đến vị trí thích hợp, cân xứng ở giữa hình vuông (hình 3) bằng cách ấn các phím mũi tên.

Bạn chuyển qua cửa sổ Word, sao chép biểu tượng khác, rồi trở về cửa sổ Flash, bấm kép vào biểu tượng của nhân vật Tile1 trong danh sách nhân vật của bảng Library, thực hiện lại thao tác tương tự như trên đối với nhân vật Tile1. Cứ thế, bạn chỉnh sửa các nhân vật tiếp theo để chúng đều có diện mạo nhất định. Xong xuôi, bạn ấn Ctrl+Enter. Kết quả sẽ tương tự như hình 4.

Hiện tại, mỗi lần chạy chương trình, các hình đều ở vị trí cố định. Để vị trí của các hình thay đổi ngẫu nhiên mỗi lần chạy chương trình, ta có thể thực hiện giải thuật như sau: chọn ngẫu nhiên hai hình nào đó, hoán đổi vị trí của chúng và lặp lại thao tác đó nhiều lần. Nếu lặp lại thao tác hoán đổi vị trí của hai hình được chọn ngẫu nhiên chừng... 200 lần chẳng hạn, chắc chắn bạn sẽ thu được kết quả sắp xếp thực sự ngẫu nhiên. Để thực hiện ý định vừa nêu, bạn viết thêm vào chương trình hiện có trong bảng Actions - Frame như sau:

tiles = new Array();

n = 0;

  tiles[i] = new Array();

  for(j = 0; j < 4; j++) {

    attachMovie("Tile" + n%8, "tile" + i + j, n);

    n++;

    tiles[i][j] = this["tile" + i + j];

    tiles[i][j]._x = 20 + 120 * j;

    tiles[i][j]._y = 20 + 120 * i;

  }

}

 

function getRandom(min, max) {

}

  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;

    tiles[r1][c1]._x = tiles[r2][c2]._x;

    tiles[r2][c2]._x = tx;

  }

Đoạn mã vừa viết thêm nhằm gọi hàm shuffleTiles() sau khi xếp hình trên sân khấu. Hàm shuffleTiles() phụ trách việc xáo hình. Để định nghĩa hàm shuffleTiles(), ta cần đến hàm getRandom() có chức năng tạo số ngẫu nhiên giữa hai trị cho trước. Bạn đã từng dùng hàm getRandom() khi thực hiện trò chơi "bắt sao biển" trước đây. Trong hàm shuffleTiles(), vòng lặp for giúp bạn thực hiện 200 lần thao tác hoán đổi vị trí. Trong vòng lặp for, ta lấy chỉ số hàng r1 và r2, lấy chỉ số cột c1 và c2 một cách ngẫu nhiên từ 0 đến 3 nhờ hàm getRandom(). Để hoán đổi vị trí của hình (r1, c1) với hình (r2, c2), trước hết ta tạm thời lưu hoành độ _x và tung độ _y của hình (r1, c1) lần lượt vào hai biến tx và ty. Tiếp theo, ta gán tọa độ _x và _y của hình (r2, c2) cho hình (r1, c1). Cuối cùng, hình (r2, c2) được nhận tọa độ mới (tx, ty). Ấn Ctrl+Enter để chạy thử chương trình, bạn thấy quả thực các hình được sắp xếp khác trước. Bạn thử mở cửa sổ Windows Explorer, tìm đến thư mục chứa tập tin SWF vừa thu được do biên dịch và bấm kép vào nó để chạy chương trình trong cửa sổ Flash Player (hình 5). Bạn đóng cửa sổ Flash Player và lại bấm kép vào tập tin SWF để chạy chương trình lần nữa. Bạn thấy rõ trong mỗi lần chạy chương trình, các hình có vị trí ngẫu nhiên, không giống như lần chạy chương trình trước.