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的朋友一点学习经验小结
Nov 23 Javascript
JavaScript小技巧整理
Dec 30 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
angularjs实现天气预报功能
Jun 16 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
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数组实例总结与说明
2011/08/23 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php实现的用户查询类实例
2015/06/18 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
node.js的事件机制
2017/02/08 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
微信公众号token验证失败解决方案
2019/07/22 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Python递归函数特点及原理解析
2020/03/04 Python
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
劳资员岗位职责
2013/11/11 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
教师个人培训总结
2015/02/11 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL