用javascript实现的拼图游戏, 代码如下:
<html>
<head><title>拼图游戏</title>
<style>
td {border: 1px solid #5588EE; text-align:center;}
#workarea {border-collapse:collapse;width:400px; height:300px }
span {font-size:14px; font-family:Consolas, Verdana, Arial}
#seconds {width:40px; text-align:right; color: #2255BB; font-weight:bold}
img {border:0px; width:100px;height:100px; cursor: pointer}
</style>
</head>
<body>
<input type="button" onclick="shuffle()" value="Shuffle" />
<span>Elapse: <span id="seconds">0.00</span> seconds.</span>
<BR><BR>
<table id="workarea" cellspacing="0" cellpadding="0">
<tr>
<td id="11" onclick="clickMe(this)"></td>
<td id="12" onclick="clickMe(this)"></td>
<td id="13" onclick="clickMe(this)"></td>
<td id="14" onclick="clickMe(this)"></td>
</tr>
<tr>
<td id="21" onclick="clickMe(this)"></td>
<td id="22" onclick="clickMe(this)"></td>
<td id="23" onclick="clickMe(this)"></td>
<td id="24" onclick="clickMe(this)"></td>
</tr>
<tr>
<td id="31" onclick="clickMe(this)"></td>
<td id="32" onclick="clickMe(this)"></td>
<td id="33" onclick="clickMe(this)"></td>
<td id="34" onclick="clickMe(this)"></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var blankId = "blank";
var blankImg = "<img src='" + blankId + ".jpg' id='" + blankId + "'/>";
var a = [[-1, 0], [0, -1], [0, 1], [1, 0]];//top, left, right, bottom
var tick = null;
var t = 0;
var span = document.getElementById("seconds");
function elapse() {
span.innerHTML = (t++/100.0).toFixed(2);
}
function init() {
var cells = document.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++)
cells[i].innerHTML = "<img src='" + cells[i].id + ".jpg' />";
cells[cells.length-1].innerHTML = blankImg;
shuffle();
}
function shuffle() {
for (var i = 0; i < 400; i++) {
var blankCell = document.getElementById(blankId).parentNode;
var rnd = Math.floor(Math.random() * 4);
var row = parseInt(blankCell.id.substring(0,1)) + a[rnd][0];
var col = parseInt(blankCell.id.substring(1)) + a[rnd][1];
var cell = document.getElementById(row + "" + col);
if (cell) move(cell, blankCell);
}
}
function clickMe(cell) {
if (tick == null) tick = setInterval(elapse, 10);
var row = parseInt(cell.id.substring(0,1));
var col = parseInt(cell.id.substring(1));
var blankCell = findBlank(row, col);
if (blankCell) {
move(cell, blankCell);
isWin();
}
}
function move(cell, blankCell) {
blankCell.innerHTML = cell.innerHTML;
cell.innerHTML = blankImg;
}
function isWin() {
var cells = document.getElementsByTagName("td");
if (cells[cells.length - 1].innerHTML.indexOf(blankId) == -1)
return false;
for (var i = 0; i < cells.length - 1; i++) {
if (cells[i].innerHTML.indexOf(cells[i].id) == -1 )
return false;
}
window.clearInterval(tick);
tick = null;
alert("you are win");
return true;
}
function findBlank(row, col) {
for (var i = 0; i < a.length; i++) {
var cell = document.getElementById((row + a[i][0]) + "" + (col + a[i][1]));
if (cell && cell.innerHTML.indexOf(blankId) > -1)
return cell;
}
return null;
}
init();
</script>
585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
