Bài 39: Hàm dịch chuyển hình

Bài 39: Hàm dịch chuyển hình

Như vậy, việc tiếp theo cần làm là viết một hàm có chức năng dịch chuyển mẩu hình ở cạnh bên vị trí trống vào vị trí trống. Muốn làm được việc đó, trước hết ta cần có hai biến ghi nhớ chỉ số hàng và chỉ số cột của vị trí trống, có thể đặt tên là blankx và blanky. Mỗi mẩu hình cần có hai biến ghi nhớ chỉ số hàng và chỉ số cột hiện hành của nó, có thể đặt tên là currentx và currenty, giúp ta biết được vị trí hiện hành của mẩu hình. "Sao thế nhỉ? Trong dãy hai chiều tiles, chỉ số hàng và chỉ số cột của mẩu hình đã cho biết vị trí của nó rồi còn gì?". Có thể bạn đang nghĩ như vậy theo kinh nghiệm từ trò chơi lật hình. Trong trò chơi lật hình, mỗi khi thay đổi vị trí của hình trên sân khấu, ta cũng thay đổi vị trí của nó trong dãy hai chiều. Nhờ vậy, chỉ số hàng và cột của hình trong dãy hai chiều luôn thể hiện vị trí hiện hành của hình trên sân khấu. Ví dụ, tiles[2][3] luôn luôn trỏ đến hình đang ở hàng 2, cột 3. Trong trò chơi ráp hình, ta không nên làm vậy. Mẩu hình có thể thay đổi vị trí trên sân khấu nhưng vị trí của nó trong dãy hai chiều không nên thay đổi. Nhờ chỉ số hàng và cột của mẩu hình trong dãy hai chiều không đổi, ta luôn biết được vị trí đúng của nó, luôn biết được người chơi đã hoàn tất việc ráp hình hay chưa. Ví dụ, đối với mẩu hình tiles[2][3], ta luôn biết rằng vị trí đúng của nó là ở hàng 2, cột 3, còn vị trí hiện hành của nó (ở hàng và cột nào đó) được thể hiện theo cách khác, bởi biến currentx và biến currenty trong mẩu hình, nói cụ thể hơn là biến tiles[2][3].currentx và biến tiles[2][3].currenty. Ta hãy gọi hàm dịch chuyển mẩu hình là moveTile và gọi hàm đó khi người chơi bấm vào mẩu hình. Trong bảng Actions - Frame của khung 1, bạn hãy viết thêm như sau:

tiles = new Array();

n = 0;

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;

  }

}

 

  moveTile(this);

}

 

function moveTile(t) {

  tempy = blanky;

  blankx = t.currentx;

  blanky = t.currenty;

  t.currentx = tempx;

  t.currenty = tempy;

  t._x = t.currentx * 100;

  t._y = t.currenty * 100;

}

Như bạn thấy, ta thêm hai biến blankx và blanky. Biến blankx có trị ban đầu là 3, biến blanky có trị ban đầu là 0 vì vị trí trống ban đầu ở hàng 0, cột 3. Để tạo biến currentx và currenty bên trong mẩu hình tiles[i][j], bạn cứ "tự nhiên" sử dụng hai biến đó, gán chỉ số cột j cho tiles[i][j].currentx và gán chỉ số hàng i cho tiles[i][j].currenty. Có lẽ bạn đã quen với sự "tự nhiên" của ngôn ngữ ActionScript dùng trong Flash: muốn tạo ra một biến, chỉ đơn giản là dùng nó, không cần câu lệnh khai báo. Câu lệnh tiles[i][j].onPress = doPress; quy định rằng hàm doPress được gọi khi xảy ra tình huống onPress. Khác với tình huống onMouseDown, tình huống onPress của một nhân vật trong Flash chỉ xảy ra nếu người dùng ấn phím chuột khi con trỏ chuột đang trỏ vào nhân vật đó. Hàm doPress gọi hàm moveTile với đối mục là this, trong đó this là từ dùng để chỉ nhân vật phát sinh tình huống. Hàm moveTile(t) có đối mục là một mầu hình bất kỳ (thể hiện của nhân vật nào đó). Chức năng của hàm moveTile là dịch chuyển hình vào vị trí trống. Để dịch chuyển mẩu hình vào vị trí trống, trước hết ta hoán đổi trị của biến blankx và blanky với trị của biến currentx và currenty của nhân vật. Bao giờ cũng vậy, khi muốn hoán đổi trị của hai biến, ta cần có biến trung gian. Trong hàm moveTile, biến tempx và tempy là biến trung gian. Sau khi hoán đổi trị của biến blankx, blanky với trị của biến currentx và currenty trong mẩu hình, ta thực sự thay đổi vị trí của mẩu hình trên sân khấu bằng cách gán hoành độ và tung độ vào hai biến _x và _y của mẩu hình. Ví dụ, chỉ số hàng mới currentx là 2 và chỉ số cột mới currenty là 3, hoành độ mới của mẩu hình là 2 * 100 (tức là 200 pi-xôn) và tung độ mới của mẩu hình là 3 * 100 (tức là 300 pi-xôn). Chạy thử chương trình và bấm vào mẩu hình bất kỳ, bạn thấy mẩu hình nhảy vào vị trí trống, vị trí cũ của mẩu hình trở thành vị trí trống. Điều đó chỉ mới chứng tỏ hàm moveTile hoạt động tốt, chưa thực sự là điều ta mong muốn. Cần áp đặt thêm điều kiện: chỉ mẩu hình ở cạnh vị trí trống mới được phép dịch chuyển vào vị trí trống. Bạn có thể diễn đạt điều kiện như vậy bằng cách viết thêm vào hàm doPress như sau:

  if( (Math.abs(this.currentx - blankx) == 1 && this.currenty == blanky) ||

      (this.currentx == blankx && Math.abs(this.currenty - blanky) == 1) ) {

    moveTile(this);

  }

}

Theo cách viết vừa nêu, hàm moveTile chỉ được gọi khi điều kiện đặt ra bởi câu lệnh if được thỏa. Điều kiện đó là: chỉ số cột hiện hành currentx của mẩu hình hơn kém 1 so với chỉ số cột blankx của vị trí trống và chỉ số hàng hiện hành currenty của mẩu hình bằng với chỉ số hàng blanky của vị trí trống (mẩu hình ở bên cạnh vị trí trống trên cùng một hàng): Math.abs(this.currentx - blankx) == 1 && this.currenty == blanky hoặc là chỉ số cột hiện hành currentx của mẩu hình bằng với với chỉ số cột blankx của vị trí trống và chỉ số hàng hiện hành currenty của mẩu hình hơn kém 1 so với chỉ số hàng blanky của vị trí trống (mẩu hình ở bên cạnh vị trí trống trên cùng một cột): this.currentx == blankx && Math.abs(this.currenty - blanky) == 1 Để diễn đạt điều kiện "hơn kém 1" (tức là hơn 1 hay kém 1), ta kiểm tra trị tuyệt đối của hiệu hai chỉ số, xem có bằng 1 hay không. Bạn nhớ lại, trị tuyệt đối được tính nhờ hàm Math.abs (hàm abs của lớp Math). Tác tử && diễn đạt từ "và". Tác tử || diễn đạt từ "hoặc". Chạy lại chương trình, bạn sẽ thấy điều kiện if có hiệu lực: chỉ khi bấm vào mẩu hình ở cạnh bên vị trí trống, mẩu hình đó mới dịch chuyển vào vị trí trống. Nếu bạn bấm vào mẩu hình không ở cạnh bên vị trí trống, mẩu hình đó "không thèm" nhúc nhích.