运行结果
将下面代码全部拷到txt文件中，然后保存关闭，再把文件的后缀名改为（.htm），就ok了。
<!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; var numbers = new Array(); 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); 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 = 0; i < selected.value * selected.value-1; i++) { for (var j = i+1; j < selected.value * selected.value; j++) { if (parseInt(array[i]) > parseInt(array[j])) { count = count + 1; } } } for (var i = 0; i < selected.value * selected.value; i++) { if (array[i] == selected.value * selected.value) { count = count + parseInt(i / 3) + 1 + i % 3 + 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() { var s = ""; for (var i = 1; i < selected.value * selected.value; i++) { s = s + "<input id=" + i + " value=" + i + " name=" + i + " readonly='readonly' onclick='move(" + i + ")' class='input1' style='position:absolute; top:" + ((parseInt((i - 1) / selected.value) + 1) * 5 + parseInt((i - 1) / selected.value) * 40) + "px; left:" + (((i - 1) % selected.value + 1) * 5 + (i - 1) % selected.value * 40) + "px;' />"; } s = s + "<input id='" + selected.value * selected.value + "' value='' name='" + selected.value * selected.value + "' readonly='readonly' onclick='move(" + selected.value * selected.value + ")' class='input2' style='position:absolute; top:" + (selected.value * 5 + (selected.value - 1) * 40) + "px; left:" + (selected.value * 5 + (selected.value - 1) * 40) + "px;' />"; div2.innerHTML = s; div2.style.width = selected.value * 5 + (selected.value - 1) * 40 + 45 + 'px'; div2.style.height = selected.value * 5 + (selected.value - 1) * 40 + 45 + 'px'; div1.style.width = selected.value * 5 + (selected.value - 1) * 40 + 85 + 'px'; div1.style.height = selected.value * 5 + (selected.value - 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 onload="ischanged()"> <div id="div1" style="margin-left: auto;margin-right: auto;background-color:Aqua; border-style:solid; border-5px; border-color:Black;"> <center> <div style=" border-bottom-style:solid; border-5px; border-bottom-color:Black;"> <table> <tr> <td>难度：</td> <td> <select id="selected" onchange="ischanged()" style="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" onclick="begin()" value="开始游戏" /> </td> <td> <input type="button" id="stoped" onclick="stop()" value="暂停" style="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-10px; border-top-style:solid; border-top-color:Aqua"> </div> </center> </div> </body> </html>