sliding puzzle
http://guny.kr/archives/50
HTML
<table id="board"></table>
CSS
#board {border: 1px solid #ccc;}
#board td { width:25px; height:25px; padding:5px; text-align: center; }
#board td.num {background-color: yellow; border:1px solid #000; }
JavaScript
(function($) {
"use strict";
var ColsNumber = 3;
var YLEN = ColsNumber, // 행 길이
XLEN = ColsNumber, // 열 길이
blank = YLEN * XLEN - 1, // 빈칸 위치
BLANK = 0, // 빈칸의 값
board = [], // 보드 배열 (YLEN x XLEN)
boardEl = $('#board'); // 테이블 엘리먼트
function initPuzzle() { // 퍼즐 데이터를 초기화
board = [];
for (var y = 0; y < YLEN; y++) {
board[y] = []; // 각 행마다 열 배열 설정
for (var x = 0; x < XLEN; x++) {
var idx = y * XLEN + x;
if (idx < blank) board[y][x] = idx + 1; // 순서대로 숫자 할당
else board[y][x] = BLANK; // 마지막 빈칸 설정
}
}
// 이동 방향
var moves = ['r', 'l', 'd', 'u'];
for (var z = 0; z < 500; z++) { // 500회 동안 무작위로 이동
move(moves[parseInt(Math.random() * 4,10)], false);
}
// 데이터 초기화 후 화면 갱신
updateBoard();
}
function updateBoard() { // 퍼즐 데이터를 화면에 표시
boardEl.empty(); // 테이블을 비우고
var html = '';
for (var y = 0; y < YLEN; y++) {
html += '<tr>';
for (var x = 0; x < XLEN; x++) {
if (board[y][x] != BLANK) html += '<td class="num">' + board[y][x] + '</td>';
else html += '<td class="blank"> </td>'; // 빈칸
}
html += '</tr>';
}
boardEl.html(html);
}
function moveTo(to) { // 빈칸을 to 위치로 이동
// 빈칸에 to 위치의 숫자 옮기고
board[parseInt(blank / YLEN,10)][blank % XLEN] = board[parseInt(to / YLEN,10)][to % XLEN];
// to 위치에 빈칸 값 설정
board[parseInt(to / YLEN,10)][to % XLEN] = BLANK;
// to 위치를 빈칸으로 설정
blank = to;
// 화면 갱신
updateBoard();
}
function isEnd() {
for (var y...