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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
用JS实现选项卡
Mar 23 Javascript
jQuery实现简单全选框
Sep 13 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 urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
基于php下载文件的详解
2013/06/02 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python类成员继承重写的实现
2020/09/16 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
Python: glob匹配文件的操作
2020/12/11 Python
python基于openpyxl生成excel文件
2020/12/23 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
数学国培研修感言
2014/02/13 职场文书
连带责任保证书
2014/04/29 职场文书
预备党员考察意见范文
2015/06/01 职场文书