Bài 40: Dịch chuyển hình tự động
Trong trò chơi xếp hình, bạn đã viết được hàm moveTile để dịch chuyển hình vào vị trí trống. Hàm đó được gọi khi người chơi bấm vào mẩu hình ở cạnh vị trí trống. Bạn đã có thể bắt đầu chơi bằng cách dịch chuyển lung tung các mẩu hình để tạo ra tình trạng xáo trộn và đố người khác tái lập tình trạng trật tự như lúc đầu. Thay vì tự tay xáo trộn hình, ta hãy viết một hàm shuffleTiles để làm chuyện "lung tung" đó và gọi hàm như vậy lúc khởi động trò chơi, sau khi các mẩu hình đã được xếp đặt trật tự trên sân khấu.
Tự động dịch chuyển lung tung các mẩu hình nghĩa là chọn ngẫu nhiên một mẩu hình cạnh vị trí trống để đưa nó vào vị trí trống và cứ thế lặp đi lặp lại nhiều lần. Khi nói đến việc chọn ngẫu nhiên, chắc bạn nhớ ngay đến hàm tạo trị số ngẫu nhiên getRandom mà ta đã viết khi thực hiện trò chơi lật hình. Vâng, ta sẽ viết lại hàm đó. Bạn mở bảng Actions - Frame của khung 1, viết thêm câu lệnh gọi hàm shuffleTiles, viết thêm định nghĩa hàm shuffleTiles và viết thêm hàm lấy trị số ngẫu nhiên quen thuộc getRandom:
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++) {
if(i == 0 && j == 3)
continue;
r = i + 1;
c = j + 1;
attachMovie("Tile" + r + c, "tile" + i + j, n++);
tiles[i][j] = this["tile" + i + j];
tiles[i][j]._x = 100 * j;
tiles[i][j]._y = 100 * i;
tiles[i][j].currentx = j;
tiles[i][j].currenty = i;
tiles[i][j].onPress = doPress;
}
}
shuffleTiles();
function shuffleTiles() {
for(k = 0; k < 100; k++) {
rand = getRandom(-1, 1);
if(getRandom(0, 1)) {
changex = blankx + rand;
changey = blanky;
}
else {
changex = blankx;
changey = blanky + rand;
}
}
}
function getRandom(min, max) {
return Math.floor(Math.random()*(max - min + 1) + min);
}
Trong định nghĩa hàm shuffleTiles, trước mắt ta chỉ mới tính đến việc chọn ngẫu nhiên mẩu hình ở cạnh vị trí trống. Đó là mẩu hình so với vị trí trống có hoành độ hơn kém 1 và có cùng tung độ, hoặc có cùng hoành độ và có tung độ hơn kém 1. Để quyết định chọn "hơn 1" hoặc "kém 1", ta gọi hàm getRandom(-1, 1) để có trị số ngẫu nhiên từ -1 đến 1. Để quyết định trị số ngẫu nhiên getRandom(-1, 1) được cộng vào hoành độ hoặc tung độ của vị trí trống, ta lại dùng hàm getRandom để "tung đồng xu", nghĩa là dùng biểu thức getRandom(0, 1) với tư cách là điều kiện của câu lệnh if. Nếu biểu thức getRandom(0, 1) cho trị khác 0, trị số ngẫu nhiên được cộng vào hoành độ. Ngược lại, nếu biểu thức getRandom(0, 1) cho trị 0, trị số ngẫu nhiên được cộng vào tung độ. Biến changex và changey lưu giữ hoành độ và tung độ của mẩu hình được chọn ngẫu nhiên. Tuy vậy, trước khi di chuyển mẩu hình đó vào vị trí trống, ta cần kiểm tra xem kết quả chọn ngẫu nhiên có cho tọa độ "dùng được" hay không. Chẳng hạn, nếu vị trí trống đang ở hàng trên cùng và tọa độ chọn ngẫu nhiên ứng với vị trí cao hơn nữa thì rõ ràng tọa độ đó không phải là tọa độ của mẩu hình thực sự. Bạn viết thêm như sau vào định nghĩa hàm shuffleTiles:
function shuffleTiles() {
for(k = 0; k < 100; k++) {
rand = getRandom(-1, 1);
if(getRandom(0, 1)) {
changex = blankx + rand;
changey = blanky;
}
else {
changex = blankx;
changey = blanky + rand;
}
if(changex >= 0 && changex <= 3 && changey >= 0 && changey <= 3) {
for(i = 0; i < 4; i++)
for(j = 0; j < 4; j++) {
if(i == 0 && j == 3)
continue;
if(tiles[i][j].currentx == changex && tiles[i][j].currenty == changey)
moveTile(tiles[i][j]);
}
}
}
}
Đoạn mã vừa bổ sung kiểm tra xem biến changex và changey có trị số từ 0 đến 3 hay không. Nếu biến changex và changey có trị số hợp lý (đều lớn hơn hoặc bằng 0 và nhỏ hơn hoặc bằng 3), ta dò tìm mẩu hình tương ứng với tọa độ đó trong dãy hai chiều tiles. Khi dò tìm, bạn chú ý rằng ta bỏ qua không xét trường hợp chỉ số hàng là 0 và chỉ số cột là 3 vì dãy hai chiều của ta không có phần tử đó. Khi tìm được mẩu hình cần thiết (trị số currentx trong phần tử bằng trị số changex và trị số currenty trong phần tử bằng trị số changey), ta trao mẩu hình đó cho hàm moveTile để mẩu hình được dịch chuyển vào vị trí trống. Việc chọn ngẫu nhiên mẩu hình và dịch chuyển hình vào vị trí trống được lặp đi, lặp lại 100 lần. Điều đó đủ gây ra tình trạng xáo trộn "nghiêm trọng". Thử chạy chương trình, bạn thấy đúng như vậy (hình 1).
Thử dịch chuyển lần lượt các mẩu hình vào vị trí trống để tái lập trật tự, có lẽ bạn thấy rằng việc đó sẽ dễ dàng hơn nếu người chơi được tham khảo hình gốc bất cứ lúc nào. Nếu không được như vậy, trò chơi có thể trở nên quá khó, nhất là khi dùng hình phức tạp hơn hình chuột Mickey. Ta hãy thêm vào vùng trống bên dưới các mẩu hình một nút bấm Solve để người chơi xem "lời giải". Khi nhấn nút Solve, người chơi thấy được hình gốc. Khi buông nút Solve, các mẩu hình trở lại vị trí hiện hành để người chơi tiếp tục cuộc "vật lộn" của mình. Trước đây, bạn đã từng "chế tạo" nút bấm Start'>Start (bài 24). Bạn hãy dùng lại nút bấm đó, làm cho nó trở thành nút bấm Solve. Cụ thể, bạn ấn Ctrl+Shift+O (hoặc chọn File > Import > Open External Library). Trong hộp thoại Open as Library vừa hiện ra, bạn tìm tập tin FLA chứa nút bấm Start và bấm kép vào nó. Thao tác như vậy mở ra cửa sổ Library của tập tin đã chọn, trong đó có nút bấm Start cần dùng.(hình 2).
Bạn kéo nút bấm Start vào sân khấu của trò chơi xếp hình, đặt ở góc dưới, bên trái, ấn Ctrl + F3 để mở bảng Properties (trình bày các thuộc tính của nút bấm). Trong ô Instance Name, bạn gõ solve để đặt tên cho nút bấm (hình 3).
Việc cần làm tiếp theo là chỉnh sửa nhãn của nút bấm, từ Start thành Solve. Bạn bấm kép vào nút bấm (vào chế độ chỉnh sửa), chọn công cụ Text Tool  , bấm vào nhãn Start, sửa thành Solve (hình 4). Bạn cũng chỉnh sửa như vậy ở khung 2 và khung 3 của nút bấm. Bạn nhớ: khung 2 và khung 3 lần lượt quy định diện mạo của nút bấm khi được trỏ vào và khi được nhấn vào.
Bạn chọn Scene 1 để thoát khỏi chế độ chỉnh sửa, mở bảng Actions - Frame ứng với khung 1 và viết thêm hàm xử lý tình huống onPress và onRelease cho nút bấm mang tên solve như sau:
tiles = new Array();
n = 0;
blankx = 3;
blanky = 0;
for(i = 0; i < 4; i++) {
...
}
shuffleTiles();
solve.onPress = function() {
for(i = 0; i < 4; i++)
for(j = 0; j < 4; j++) {
if(i == 0 && j == 3)
continue;
tiles[i][j]._x = j * 100;
tiles[i][j]._y = i * 100;
}
}
solve.onRelease = function() {
for(i = 0; i < 4; i++)
for(j = 0; j < 4; j++) {
if(i == 0 && j == 3)
continue;
tiles[i][j]._x = tiles[i][j].currentx * 100;
tiles[i][j]._y = tiles[i][j].currenty * 100;
}
}
function shuffleTiles() {
...
Trong hàm xử lý tình huống onPress của nút bấm solve (hàm được gọi khi nhấn nút solve), ta làm cho các mẩu hình trở về vị trí đúng bằng cách quy định lại tọa độ mẩu hình dựa vào chỉ số của mẩu hình trong dãy hai chiều tiles. Ví dụ, với mẩu hình ở hàng 2, cột 3 (trị của i là 2, trị của j là 3) trong dãy tiles, vị trí đúng có hoành độ là 2 * 100 và tung độ là 3 * 100. Trong hàm xử lý tình huống onRelease của nút bấm solve (hàm được gọi khi buông nút solve), ta tái lập vị trí hiện hành của các mẩu hình chỉ đơn giản bằng cách quy định lại tọa độ mẩu hình dựa vào hai biến currentx và currenty bên trong mẩu hình.
Chạy thử chương trình, nhấn giữ nút Solve, bạn thấy được hình gốc nhờ các mẩu hình được đưa đến vị trí đúng. Khi bạn vừa buông nút Solve, các mẩu hình trở lại tình trạng lộn xộn hiện hành. Bạn hãy cố gắng tự sắp xếp các mẩu hình để có lại hình ban đầu. Nhờ vậy, bạn hình dung được độ khó của trò chơi.
Chia sẻ với bạn bè của bạn: | 
