将下面的代码拷到txt文件里面,然后把后缀名改为(.htm),再双击打开就可以了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>拼图</title>
<style type="text/css">
.input1
{
width:40px; height:40px; background-color:Blue; border:0 outset; font-size:large; color:White; text-align:center;
}
.input2
{
width:40px; height:40px; background-color:Gray; border:0 outset; font-size:large; color:White; text-align:center;
}
</style>
<script type="text/javascript">
var times = 0;
var movesteps = 0;
var interval = "";
var start = false;
function move(num) {
if (start == false) {
alert('您还没有开始!');
return;
}
if (stoped.value == "继续") {
alert('请点击继续!');
return;
}
var element = document.getElementsByName(num);
if (element[0].value != "") {
var clickinput_top = parseInt(element[0].style.top);
var clickinput_left = parseInt(element[0].style.left);
var fixed_top = parseInt(document.getElementById(selected.value*selected.value).style.top);
var fixed_left = parseInt(document.getElementById(selected.value*selected.value).style.left);
if (-45 <= clickinput_left - fixed_left && clickinput_left - fixed_left <= 45 && -45 <= clickinput_top - fixed_top && clickinput_top - fixed_top<=45) {
if (Math.abs( clickinput_left - fixed_left) != Math.abs( clickinput_top - fixed_top)) {
document.getElementById(selected.value*selected.value).style.backgroundColor = "Blue";
document.getElementById(selected.value*selected.value).value = element[0].value;
document.getElementById(selected.value*selected.value).id = element[0].id;
document.getElementsByName(num)[0].style.backgroundColor = "Gray";
document.getElementsByName(num)[0].value = "";
document.getElementsByName(num)[0].id = selected.value*selected.value;
movesteps = movesteps + 1;
movestep.innerText = movesteps;
if (iswin()) {
clearInterval(interval);
alert("YOU WIN!!");
start = false;
ischanged(selected.value);
}
}
}
}
}
function begin() {
stoped.value = "暂停";
start = true;
times = 0;
time.innerText = 0;
movesteps = 0;
movestep.innerText = 0;
clearInterval(interval);
var numbers = new Array();
for (var i = 0; i < selected.value * selected.value; i++) {
numbers[i] = parseInt(i) + 1;
}
do {
for (var i = 0; i < selected.value * selected.value; i++) {
var num = parseInt(Math.random() * (selected.value * selected.value - i));
var emp = numbers[selected.value * selected.value -1 - i];
numbers[selected.value * selected.value -1 - i] = numbers[num];
numbers[num] = emp;
}
} while (judge(numbers));
for (var i =0 ; i < selected.value * selected.value; i++) {
if (numbers[i] == selected.value * selected.value) {
document.getElementsByName(parseInt(i)+1)[0].value = "";
document.getElementsByName(parseInt(i) + 1)[0].id = selected.value * selected.value;
document.getElementsByName(parseInt(i) + 1)[0].style.backgroundColor = "Gray";
}
else {
document.getElementsByName(parseInt(i) + 1)[0].value = numbers[i];
document.getElementsByName(parseInt(i) + 1)[0].id = numbers[i];
document.getElementsByName(parseInt(i) + 1)[0].style.backgroundColor = "Blue";
}
}
interval=( setInterval("settime()", 1000));
}
function judge(array) {
var count = 0;
for (var i = 1; i < selected.value * selected.value; i++) {
for (var j = i+1; j <= selected.value * selected.value; j++) {
if (parseInt(array[i]) > parseInt(array[j])) {
count = count + 1;
}
}
}
if (count % 2 == 0) {
return false;
}
else {
return true;
}
}
function iswin() {
for (var i = 1; i <= selected.value * selected.value; i++) {
var node=document.getElementById(i);
if (node.id != node.name) {
return false;
}
}
return true;
}
function ischanged(selected) {
var s = "";
for (var i = 1; i < selected * selected; i++) {
s = s + "<input id=" + i + " value=" + i + " name=" + i + " readonly='readonly' οnclick='move(" + i + ")' class='input1' style='position:absolute; top:" + ((parseInt((i - 1) / selected) + 1) * 5 + parseInt((i - 1) / selected) * 40) + "px; left:" + (((i - 1) % selected + 1) * 5 + (i - 1) % selected * 40) + "px;' />";
}
s = s + "<input id='" + selected * selected + "' value='' name='" + selected * selected + "' readonly='readonly' οnclick='move(" + selected * selected + ")' class='input2' style='position:absolute; top:" + (selected * 5 + (selected - 1) * 40) + "px; left:" + (selected * 5 + (selected - 1) * 40) + "px;' />";
div2.innerHTML = s;
div2.style.width = selected * 5 + (selected - 1) * 40 + 45 + 'px';
div2.style.height = selected * 5 + (selected - 1) * 40 + 45 + 'px';
div1.style.width = selected * 5 + (selected - 1) * 40 + 85 + 'px';
div1.style.height = selected * 5 + (selected - 1) * 40 + 170 + 'px';
times = 0;
time.innerText = 0;
movesteps = 0;
movestep.innerText = 0;
clearInterval(interval);
}
function settime() {
times=times+1;
time.innerText = times;
}
function stop() {
if (start == false) {
return;
}
if (stoped.value == "暂停") {
stoped.value = "继续";
clearInterval(interval);
}
else {
stoped.value = "暂停";
interval= setInterval("settime()", 1000);
}
}
</script>
</head>
<body οnlοad="ischanged(selected.value)">
<div id="div1" style="margin-left: auto;margin-right: auto;background-color:Aqua; border-style:solid; border-width:5px; border-color:Black;">
<center>
<div style=" border-bottom-style:solid; border-width:5px; border-bottom-color:Black;">
<table>
<tr>
<td>难度:</td>
<td>
<select id="selected" οnchange="ischanged(selected.value)" style="width:60px">
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" οnclick="begin()" value="开始游戏" />
</td>
<td>
<input type="button" id="stoped" οnclick="stop()" value="暂停" style="width:60px"/>
</td>
</tr>
<tr>
<td>用时:</td>
<td><label id="time">0</label></td>
</tr>
<tr>
<td>移动次数:</td>
<td><label id="movestep">0</label></td>
</tr>
</table>
</div>
<div id="div2" style=" position:relative;background-color:Gray; border-top-width:10px; border-top-style:solid; border-top-color:Aqua">
</div>
</center>
</div>
</body>
</html>