Click to play
Hướng dẫn javascript puzzles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- Element có id="board-time" nơi hiển thị thời gian.
- Element có id="play" nơi nhấn nút play.
- Element có id="puzzle" nơi hiển thị matrix puzzle là phần quan trọng nhất của trò chơi.
- Mỗi element có class="cell-puzzle" là 1 phần tử của matrix puzzle. Matrix puzzle có cầu trúc 4 hàng * 4 cột, 1 phần tử là 1 ô vuông có cạnh 60px,nên mỗi phần tử sẽ thuộc 1 hàng và 1 cột riêng biệt nên sẽ có class riêng biệt để css.
- VD: phần tử thuộc hàng số 2, cột số 3 sẽ có class lần lượt là: **class="cell-puzzle row-2 col-3" **
3. Code tính toán, hiệu ứng của trò chơi bằng Jquery/Javascript:
- Liên kết hàm jquery để code ngắn hơn, chạy mượt hơn.
// ma trận toàn cục điều khiển mọi hoạt động của game
var matrix = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
[13, 14, 15, 0],
];
// các biến toàn cục dùng để tính giờ
var secs = 0;
var currentSeconds = 0;
var currentMinutes = 0;
var timer;
// gọi sự kiện bắt đầu game khi ấn nút play
$["#play"].bind["click",function[]{
initialize[];
beginTime[];
$["#alert_puzzle"].text[""];
}]
// Khi click vào 1 sô thì gọi đến hàm move để di chuyển
$["#puzzle .cell-puzzle"].bind["click",function[] {
if[secs > 0]{
var obj = $[this];
move[obj];
}
}]
// hàm init game, gọi 1 dãy số từ 1 đến 15 bất kì, sắp xếp các element theo dãy số đó để bắt đầu game
function initialize[]{
var arrRandomNumber = shuffleMatrix[];
var count = 0;
for[var i = 0; i < 4; i++] {
for[var j = 0; j < 4; j++] {
var number = arrRandomNumber[count];
matrix[i][j] = number;
if [i == 3 && j == 3] {
matrix[i][j] = 0;
}
$["#puzzle .cell-puzzle[number=" + number + "]"].css["top", i * 60 + "px"];
$["#puzzle .cell-puzzle[number=" + number + "]"].css["left", j * 60 + "px"];
count++;
}
}
}
// hàm tạo dãy số bất kì từ 1 đến 15
function shuffleMatrix[]{
var arr = [];
while[arr.length < 15]{
var r = Math.floor[Math.random[] * 15] + 1;
if[arr.indexOf[r] === -1] arr.push[r];
}
return arr;
}
// hàm bắt đầu đếm giờ
function beginTime[] {
secs = 0;
currentSeconds = 0;
currentMinutes = 0;
clearTimeout[timer];
intervalTime[];
}
// hàm đếm giờ
function intervalTime[] {
currentMinutes = Math.floor[secs / 60];
currentSeconds = secs % 60;
if[currentMinutes 0 && matrix[i - 1][j] == 0] {
$["#puzzle .cell-puzzle[number=0]"].css["top", i * 60 + "px"];
obj.animate[{
'top': [i - 1] * 60 + 'px'
},300];
matrix[i-1][j] = numberCell;
matrix[i][j] = 0;
} else if[i
Chủ Đề