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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
js 上传图片预览问题
Dec 06 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
js运动动画的八个知识点
Mar 12 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
vue router 传参获取不到的解决方式
Nov 13 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
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php MessagePack介绍
2013/10/06 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php简单smarty入门程序实例
2015/06/11 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
js格式化时间小结
2014/11/03 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
python实现一次创建多级目录的方法
2015/05/15 Python
python配置grpc环境
2019/01/01 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python如何实现动态数组
2019/11/02 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Python内存映射文件读写方式
2020/04/24 Python
Python的logging模块基本用法
2020/12/24 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL