Bài 36: Đồng hồ bấm giây
Khi chạy thử trò chơi lật hình đã viết, bạn sẽ thấy hiện tượng: sau khi lật một hình và bấm vào một hình nữa để lật, nếu hình thứ hai (hình được bấm sau) giống với hình thứ nhất (hình được bấm trước), nó mới được lật lên. Trong trường hợp hình thứ hai không giống hình thứ nhất, nó "không thèm" lật lên cho bạn thấy "mặt mũi". Lô-gích của hàm xử lý tình huống bấm chuột không sai. Tuy nhiên, hình thứ hai được lật lên và úp xuống ngay lập tức, trong thời gian ngắn hơn chu kỳ cập nhật màn hình của Flash. Do vậy, bạn không thấy hình được lật lên, rồi được úp xuống.
Điều ta mong muốn là mọi hình đều được lật lên khi được bấm. Nếu hình được bấm sau không giống hình được bấm trước, hình đó cần được hiển thị trong thời gian vừa đủ trước khi úp xuống để người chơi kịp nhận biết nó là hình gì. Muốn vậy, bạn cần sử dụng "đồng hồ bấm giây" (timer) của Flash. Khi hình thứ hai được lật lên, ta "bấm đồng hồ". Nếu hình thứ hai không giống hình thứ nhất, sau một khoảng thời gian định trước nào đó, ta mới cho hình ấy úp xuống trở lại. Cụ thể, thao tác "bấm đồng hồ" được thực hiện bằng cách gọi hàm getTimer(). Nếu bạn lưu trị trả về bởi hàm getTimer() vào biến time chẳng hạn, trị của biến time cho biết thời điểm "bấm đồng hồ", tức thời điểm gọi hàm getTimer(). Trong chương trình, bạn hãy sửa đổi như sau:
tiles = new Array();
backs = new Array();
n = 0;
type = 0;
count = 0;
time = 0;
...
this.onMouseUp = function() {
for(i = 0; i < 4; i++) {
for(j = 0; j < 4; j++) {
if(tiles[i][j].hitTest(_root._xmouse, _root._ymouse, true)) {
//backs[i][j]._visible = false;
if(!tiles[i][j].solved) {
if(count == 0) {
...
}
else if(count == 1) {
...
if(tiles[r][c].type == tiles[i][j].type) {
...
}
else {
//backs[i][j]._visible = true;
//backs[r][c]._visible = true;
//count = 0;
rr = i;
cc = j;
count = 2;
time = getTimer();
}
}
}
return;
}
}
}
}
this.onEnterFrame = function() {
if(getTimer() < time + 500)
return;
if(count == 2) {
backs[r][c]._visible = true;
backs[rr][cc]._visible = true;
count = 0;
}
}
Như bạn thấy, ta chỉnh sửa hàm onMouseUp() và viết thêm hàm onEnterFrame(). Trong hàm onMouseUp(), khi hình thứ hai khác với hình thứ nhất, ta không vội giấu nó đi ngay, không vội cho biến count trở về trị 0 bình thường, mà chỉ ghi nhớ chỉ số hàng và chỉ số cột của hình ấy. Biến count được gán trị 2, chỉ một trạng thái mới, không bình thường. Sau đó, ta "bấm đồng hồ": gọi hàm getTimer() và lưu trị trả về của hàm getTimer() vào biến time. Vậy thì khi nào ta mới thực hiện những việc bị trì hoãn, cho trạng thái không bình thường trở thành bình thường? Hàm xử lý tình huống onEnterFrame() chịu trách nhiệm "suy nghĩ" về việc đó. Chắc bạn còn nhớ, hàm xử lý tình huống onEnterFrame() được gọi tự động khi một khung hình (frame) của Flash được hiển thị. Cứ sau thời gian hiển thị một khung, hàm onEnterFrame() lại được gọi. Dù ta chỉ có một khung, hàm onEnterFrame() vẫn được gọi lặp đi lặp lại sau thời gian hiển thị của khung. Trong hàm onEnterFrame(), ta lại dùng hàm getTimer() để biết thời điểm hiện tại, so sánh với trị của biến time. Nếu trị số chỉ thời điểm hiện tại vẫn còn nhỏ hơn trị của biến time cộng với 500 mi-li-giây (tức nửa giây) thì không làm gì cả. Điều này nghĩa là ta chỉ thực hiện những việc cần thiết sau khi nửa giây trôi qua. Sau khi nửa giây trôi qua, ta xét xem biến count có trị số 2 hay không (đang có thao tác bị trì hoãn hay không). Nếu trị của count là 2 (quả thực có thao tác đang bị trì hoãn), ta thực hiện thao tác đó: che giấu hình thứ nhất và hình thứ hai (cho chúng úp xuống trở lại) và gán trị 0 bình thường cho biến count. Bạn hãy chạy thử chương trình để thấy rằng sự trì hoãn mà ta vừa thực hiện thực sự có hiệu lực: nếu hình thứ hai không giống hình thứ nhất, nó được lật lên trong nửa giây rồi được úp xuống. Có lẽ bạn thấy ngay cần tiếp tục cải tiến: sau khi cả 16 hình được lật lên, nên cho phép người chơi bắt đầu lần chơi kế tiếp (thay vì phải chạy lại chương trình). Ta có thể chọn cách tương tác đơn giản: người chơi bấm vào bất kỳ chỗ nào trên sân khấu để bắt đầu lần chơi kế tiếp. Điều này nghĩa là trong hàm xử lý tình huống bấm chuột onMouseUp(), bạn cần xét đến trường hợp cả 16 hình đã được lật lên. Trong trường hợp đó, để bắt đầu lần chơi kế tiếp, ta cho mọi hình úp xuống và gọi hàm shuffleTiles() để xáo hình. Để biết nhận biết dễ dàng trường hợp cả 16 hình đã được lật lên, bạn cần có một biến đếm. Có thể đặt tên cho biến đó là solutions. Bạn viết thêm vào chương trình như sau:
...
tiles = new Array();
backs = new Array();
n = 0;
type = 0;
count = 0;
time = 0;
solutions = 0;
...
this.onMouseUp = function() {
if(solutions == 8) {
for(i = 0; i < 4; i++) {
for(j = 0; j < 4; j++) {
tiles[i][j].solved = false;
backs[i][j]._visible = true;
}
}
solutions = 0;
shuffleTiles();
return;
}
for(i = 0; i < 4; i++) {
for(j = 0; j < 4; j++) {
if(tiles[i][j].hitTest(_root._xmouse, _root._ymouse, true)) {
if(!tiles[i][j].solved) {
if(count == 0) {
...
}
else if(count == 1) {
...
if(tiles[r][c].type == tiles[i][j].type) {
tiles[i][j].solved = true;
tiles[r][c].solved = true;
count = 0;
solutions++;
}
else {
...
}
}
}
return;
}
}
}
}
...
Như bạn thấy, trong hàm xử lý tình huống bấm chuột onMouseUp(), mỗi khi so sánh hình thứ hai với hình thứ nhất và thấy chúng giống nhau, ta lại tăng trị của biến solution thêm 1. Nhờ vậy, khi trò chơi chấm dứt, cả 16 hình đều được lật lên, biến solutions có trị là 8. Cũng trong hàm xử lý tình huống bấm chuột onMouseUp(), ta viết thêm câu lệnh điều kiện if(solutions == 8) để xét đến trường hợp cả 16 hình đều được lật lên. Trong trường hợp ấy, hàm onMouseUp() cho trò chơi trở về trạng thái ban đầu và không làm gì hơn nữa. Cho trò chơi trở về trạng thái ban đầu nghĩa là che giấu mọi hình, gán trị false cho biến solved trong mọi hình, cho biến solutions trở về trị 0 và xáo hình nhờ hàm shuffleTiles(). Trò chơi lật hình của ta xem như hoàn chỉnh. Bạn chơi thử xem sao nha. Trò chơi vẫn còn cần được cải tiến. Chẳng hạn, bạn có thể dùng một biến để ghi nhớ số lần bấm chuột và hiển thị biến ấy phía trên sân khấu chẳng hạn (bạn cần mở rộng kích thước sân khấu). Người hoàn tất trò chơi với số lần bấm chuột ít nhất dĩ nhiên là người chơi giỏi nhất. Toàn bộ mã nguồn của chương trình được trình bày dưới đây để bạn tiện theo dõi:
tiles = new Array();
backs = new Array();
n = 0;
type = 0;
count = 0;
time = 0;
solutions = 0;
for(i = 0; i < 4; i++) {
tiles[i] = new Array();
backs[i] = new Array();
for(j = 0; j < 4; j++) {
type = n%8;
attachMovie("Tile" + type, "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;
tiles[i][j].type = type;
tiles[i][j].solved = false;
backs[i][j] = this["back" + i + j];
backs[i][j]._x = 20 + 120 * j;
backs[i][j]._y = 20 + 120 * i;
}
}
shuffleTiles();
function getRandom(min, max) {
return Math.floor(Math.random()*(max - min + 1) + min);
}
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;
}
}
this.onMouseUp = function() {
if(solutions == 8) {
for(i = 0; i < 4; i++) {
for(j = 0; j < 4; j++) {
tiles[i][j].solved = false;
backs[i][j]._visible = true;
}
}
solutions = 0;
shuffleTiles();
return;
}
for(i = 0; i < 4; i++) {
for(j = 0; j < 4; j++) {
if(tiles[i][j].hitTest(_root._xmouse, _root._ymouse, true)) {
if(!tiles[i][j].solved) {
if(count == 0) {
backs[i][j]._visible = false;
count = 1;
r = i;
c = j;
}
else if(count == 1) {
backs[i][j]._visible = false;
if(r == i && c == j)
return;
if(tiles[r][c].type == tiles[i][j].type) {
tiles[i][j].solved = true;
tiles[r][c].solved = true;
count = 0;
solutions++;
}
else {
rr = i;
cc = j;
count = 2;
time = getTimer();
}
}
}
return;
}
}
}
}
this.onEnterFrame = function() {
if(getTimer() < time + 500)
return;
if(count == 2) {
backs[r][c]._visible = true;
backs[rr][cc]._visible = true;
count = 0;
}
}
Chia sẻ với bạn bè của bạn: | 
