JS写的数字拼图小游戏代码[学习参考]


Posted in Javascript onOctober 29, 2008
<html> <head> 
<title>拼图</title> 
<style> 
td.numTd{ 
width : 20px ; 
height : 20px ; 
} 
div.numDiv{ 
width : 100% ; 
height : 100% ; 
background-color : #000 ; 
color : #FFF ; 
text-align : center ; 
vertical-align : middle ; 
} 
</style> 
<script> 
var currPos = 9; 
function move(event){ 
switch(event.keyCode){ 
case 37 : 
// 左键 
if (currPos % 3 != 0){ 
var currTd = document.getElementById("numTd_" + currPos); 
var nextTd = document.getElementById("numTd_" + (currPos + 1)); 
var temp = nextTd.innerHTML; 
nextTd.innerHTML = " "; 
currTd.innerHTML = temp; 
currPos ++ ; 
} 
break; 
case 38 : 
// 上键 
if (currPos < 7){ 
var currTd = document.getElementById("numTd_" + currPos); 
var nextTd = document.getElementById("numTd_" + (currPos + 3)); 
var temp = nextTd.innerHTML; 
nextTd.innerHTML = " "; 
currTd.innerHTML = temp; 
currPos += 3; 
} 
break; 
case 39 : 
// 右键 
if (currPos % 3 != 1){ 
var currTd = document.getElementById("numTd_" + currPos); 
var nextTd = document.getElementById("numTd_" + (currPos - 1)); 
var temp = nextTd.innerHTML; 
nextTd.innerHTML = " "; 
currTd.innerHTML = temp; 
currPos -- ; 
} 
break; 
case 40 : 
// 下键 
if (currPos > 3){ 
var currTd = document.getElementById("numTd_" + currPos); 
var nextTd = document.getElementById("numTd_" + (currPos - 3)); 
var temp = nextTd.innerHTML; 
nextTd.innerHTML = " "; 
currTd.innerHTML = temp; 
currPos -= 3; 
} 
break; 
default : 
break; 
} 
if (isWin()){ 
alert("恭喜你,过关了!"); 
initNums(); 
} 
} 
function isWin(){ 
for (i = 1; i < 9; i ++ ){ 
var numTd = document.getElementById("numTd_" + i); 
var numDiv = numTd.getElementsByTagName("div"); 
if (i != numTd.innerText){ 
return false; 
} 
} 
return true; 
} 
function initNums(){ 
var numArr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9); 
var newnewNumArr = new Array(); 
do{ 
var tempStr = ""; 
for(i in numArr){ 
var flag = true; 
do{ 
tempNum = numArr[parseInt(Math.random() * 100) % 9]; 
if (tempStr.search(tempNum) == -1){ 
newNumArr[i] = tempNum; 
tempStr += tempNum; 
flag = false; 
} 
} 
while(flag); 
} 
}while(inverNum(newNumArr) % 2 == 0); 

var len = newNumArr.length; 
for(j = 0; j < len; j ++ ){ 
if (newNumArr[j] != 9){ 
document.getElementById("numTd_" + (j + 1)).innerHTML = "<div id='numDiv_"+newNumArr[j]+"' class='numDiv'>" + newNumArr[j] + "</div>"; 
} 
else{ 
document.getElementById("numTd_" + (j + 1)).innerHTML = " "; 
currPos = j + 1; 
} 
} 
// document.getElementById("output").innerText = newNumArr; 
} 
function inverNum(numArr){ 
var len = numArr.length; 
var count = 0; 
for(i = 0; i < len - 1; i ++ ){ 
for(j = i + 1; j < len; j ++ ){ 
if (numArr[j] > numArr[i]){ 
count ++ ; 
} 
} 
} 
// alert("逆序数: "+count); 
return count; 
} 
</script> 
</head> 
<body onkeyup="move(event);" onload="initNums();"> 
<table align="center"> 
<tr> 
<td id="numTd_1" class="numTd"> 
</td> 
<td id="numTd_2" class="numTd"> 
</td> 
<td id="numTd_3" class="numTd"> 
</td> 
</tr> 
<tr> 
<td id="numTd_4" class="numTd"> 
</td> 
<td id="numTd_5" class="numTd"> 
</td> 
<td id="numTd_6" class="numTd"> 
</td> 
</tr> 
<tr> 
<td id="numTd_7" class="numTd"> 
</td> 
<td id="numTd_8" class="numTd"> 
</td> 
<td id="numTd_9" class="numTd"> 
</td> 
</tr> 
</table> 
<table> 
<tr> 
<td id="output"></td> 
</tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
js实现图片懒加载效果
Jul 17 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
JavaScript函数、方法、对象代码
Oct 29 #Javascript
js身份证验证超强脚本
Oct 26 #Javascript
javascript引导程序
Oct 26 #Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 #Javascript
Div自动滚动到末尾的代码
Oct 26 #Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 #Javascript
js判断变量是否空值的代码
Oct 26 #Javascript
You might like
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
python实现桌面气泡提示功能
2019/07/29 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
servlet面试题
2012/08/20 面试题
办公室年终个人自我评价
2013/10/28 职场文书
车间统计员岗位职责
2014/01/05 职场文书
总经理工作职责范文
2014/03/14 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
体育教师个人总结
2015/02/09 职场文书
校车司机安全责任书
2015/05/11 职场文书
cypress测试本地web应用
2022/06/01 Javascript