js实现拼图游戏，爱好js的来看看吧
来源：互联网 发布：商城数据库表结构 编辑：程序博客网 时间：2024/04/30 20:33
<script language="JavaScript">
<!--
var b_pos = 16,
count = 0,
pos = new Array(),
nam = new Array();
pos[1] = 7;
pos[2] = 10;
pos[3] = 14;
pos[4] = 9;
pos[5] = 12;
pos[6] = 2;
pos[7] = 13;
pos[8] = 1;
pos[9] = 8;
pos[10] = 5;
pos[11] = 4;
pos[12] = 6;
pos[13] = 3;
pos[14] = 11;
pos[15] = 15;
function start() {
nam[1] = L1.style;
nam[2] = L2.style;
nam[3] = L3.style;
nam[4] = L4.style;
nam[5] = L5.style;
nam[6] = L6.style;
nam[7] = L7.style;
nam[8] = L8.style;
nam[9] = L9.style;
nam[10] = L10.style;
nam[11] = L11.style;
nam[12] = L12.style;
nam[13] = L13.style;
nam[14] = L14.style;
nam[15] = L15.style;
document.onkeydown = keyDown;
}
function keyDown() {
var ieKey = event.keyCode;
if (ieKey == 38) {
if (b_pos < 13) {
count=b_pos + 4;
X = fun(count);
Z = (parseInt(nam[X].top));
nam[X].top = Z - 52;
Q = pos[X];
pos[X] = b_pos;
b_pos = Q;
}
}
else if (ieKey == 40) {
if (b_pos > 4) {
count = b_pos - 4;
X = fun(count);
Z = (parseInt(nam[X].top));
nam[X].top = Z + 52;
Q = pos[X];
pos[X] = b_pos;
b_pos = Q;
}
}
else if (ieKey == 37) {
r = b_pos % 4
if (r == 0) {
}
else {
count = b_pos + 1;
X = fun(count);
Z = (parseInt(nam[X].left));
nam[X].left = Z - 52;
Q = pos[X];
pos[X] = b_pos;
b_pos = Q;
}
}
else if (ieKey == 39) {
ch = b_pos + 3;
r = ch % 4;
if (r == 0) {
}
else {
count = b_pos - 1;
X = fun(count);
Z = (parseInt(nam[X].left));
nam[X].left = Z + 52;
Q = pos[X];
pos[X] = b_pos;
b_pos = Q;
}
}
else {
alert("禁止使用其它按键！");
}
A = false;
b = 0;
for (i = 1; i < 16; i++) {
b++;
if (pos[i] == b) {
A = true;
}
else {
A = false;
break;
}
}
if (A)alert("恭喜你，您已过关！");
}
function fun(count) {
for (var i = 1; i < 16; i++) {
if (pos[i] == count) {
var X = i;
}
}
return X;
}
//-->
</script>
</head>
<body onLoad="start()">
<center><div ID="L8" STYLE="position:absolute; left:50px; top:50px; width:50px; height:50px; background-color:blue;">
<br><b><center><font color=white>8</center>
</div>
<div ID="L6" STYLE="position:absolute; left:102px;top:50px; width:50px; height:50px; background-color:blue;">
<br><b><center>6</center>
</div>
<div ID="L13" STYLE="position:absolute; left:154px;top:50px; width:50px; height:50px; background-color:blue;">
<br><b><center>13</center>
</div>
<div ID="L11" STYLE="position:absolute; left:206px;top:50px; width:50px; height:50px; background-color:blue;">
<br><b><center>11</center>
</div>
<div ID="L10" STYLE="position:absolute; left:50px; top:102px; width:50px; height:50px; background-color:blue;">
<br><b><center>10</center>
</div>
<div ID="L12" STYLE="position:absolute; left:102px;top:102px; width:50px; height:50px; background-color:blue;">
<br><b><center>12</center>
</div>
<div ID="L1" STYLE="position:absolute; left:154px;top:102px; width:50px; height:50px; background-color:blue;">
<br><b><center>1</center>
</div>
<div ID="L9" STYLE="position:absolute; left:206px;top:102px; width:50px; height:50px; background-color:blue;">
<br><b><center>9</center>
</div>
<div ID="L4" STYLE="position:absolute; left:50px; top:154px; width:50px; height:50px; background-color:blue;">
<br><b><center>4</center>
</div>
<div ID="L2" STYLE="position:absolute; left:102px;top:154px; width:50px; height:50px; background-color:blue;">
<br><b><center>2</center>
</div>
<div ID="L14" STYLE="position:absolute; left:154px;top:154px; width:50px; height:50px; background-color:blue;">
<br><b><center>14</center>
</div>
<div ID="L5" STYLE="position:absolute; left:206px;top:154px; width:50px; height:50px; background-color:blue;">
<br><b><center>5</center>
</div>
<div ID="L7" STYLE="position:absolute; left:50px; top:206px; width:50px; height:50px; background-color:blue;">
<br><b><center>7</center>
</div>
<div ID="L3" STYLE="position:absolute; left:102px;top:206px; width:50px; height:50px; background-color:blue;">
<br><b><center>3</center>
</div>
<div ID="L15" STYLE="position:absolute; left:154px;top:206px; width:50px; height:50px; background-color:blue;">
<br><b><center>15</font></center>
</div></center>
<table STYLE="position:absolute; left:280px;top:50px;">
<tr align=center>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">1</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">2</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">3</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">4</td>
</tr>
<tr align=center>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">5</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">6</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">7</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">8</td>
</tr>
<tr align=center>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">9</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">10</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">11</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">12</td>
</tr>
<tr align=center>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">13</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">14</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">15</td>
<td width=40 height=40></td>
</tr>
</table>
<!--
var b_pos = 16,
count = 0,
pos = new Array(),
nam = new Array();
pos[1] = 7;
pos[2] = 10;
pos[3] = 14;
pos[4] = 9;
pos[5] = 12;
pos[6] = 2;
pos[7] = 13;
pos[8] = 1;
pos[9] = 8;
pos[10] = 5;
pos[11] = 4;
pos[12] = 6;
pos[13] = 3;
pos[14] = 11;
pos[15] = 15;
function start() {
nam[1] = L1.style;
nam[2] = L2.style;
nam[3] = L3.style;
nam[4] = L4.style;
nam[5] = L5.style;
nam[6] = L6.style;
nam[7] = L7.style;
nam[8] = L8.style;
nam[9] = L9.style;
nam[10] = L10.style;
nam[11] = L11.style;
nam[12] = L12.style;
nam[13] = L13.style;
nam[14] = L14.style;
nam[15] = L15.style;
document.onkeydown = keyDown;
}
function keyDown() {
var ieKey = event.keyCode;
if (ieKey == 38) {
if (b_pos < 13) {
count=b_pos + 4;
X = fun(count);
Z = (parseInt(nam[X].top));
nam[X].top = Z - 52;
Q = pos[X];
pos[X] = b_pos;
b_pos = Q;
}
}
else if (ieKey == 40) {
if (b_pos > 4) {
count = b_pos - 4;
X = fun(count);
Z = (parseInt(nam[X].top));
nam[X].top = Z + 52;
Q = pos[X];
pos[X] = b_pos;
b_pos = Q;
}
}
else if (ieKey == 37) {
r = b_pos % 4
if (r == 0) {
}
else {
count = b_pos + 1;
X = fun(count);
Z = (parseInt(nam[X].left));
nam[X].left = Z - 52;
Q = pos[X];
pos[X] = b_pos;
b_pos = Q;
}
}
else if (ieKey == 39) {
ch = b_pos + 3;
r = ch % 4;
if (r == 0) {
}
else {
count = b_pos - 1;
X = fun(count);
Z = (parseInt(nam[X].left));
nam[X].left = Z + 52;
Q = pos[X];
pos[X] = b_pos;
b_pos = Q;
}
}
else {
alert("禁止使用其它按键！");
}
A = false;
b = 0;
for (i = 1; i < 16; i++) {
b++;
if (pos[i] == b) {
A = true;
}
else {
A = false;
break;
}
}
if (A)alert("恭喜你，您已过关！");
}
function fun(count) {
for (var i = 1; i < 16; i++) {
if (pos[i] == count) {
var X = i;
}
}
return X;
}
//-->
</script>
</head>
<body onLoad="start()">
<center><div ID="L8" STYLE="position:absolute; left:50px; top:50px; width:50px; height:50px; background-color:blue;">
<br><b><center><font color=white>8</center>
</div>
<div ID="L6" STYLE="position:absolute; left:102px;top:50px; width:50px; height:50px; background-color:blue;">
<br><b><center>6</center>
</div>
<div ID="L13" STYLE="position:absolute; left:154px;top:50px; width:50px; height:50px; background-color:blue;">
<br><b><center>13</center>
</div>
<div ID="L11" STYLE="position:absolute; left:206px;top:50px; width:50px; height:50px; background-color:blue;">
<br><b><center>11</center>
</div>
<div ID="L10" STYLE="position:absolute; left:50px; top:102px; width:50px; height:50px; background-color:blue;">
<br><b><center>10</center>
</div>
<div ID="L12" STYLE="position:absolute; left:102px;top:102px; width:50px; height:50px; background-color:blue;">
<br><b><center>12</center>
</div>
<div ID="L1" STYLE="position:absolute; left:154px;top:102px; width:50px; height:50px; background-color:blue;">
<br><b><center>1</center>
</div>
<div ID="L9" STYLE="position:absolute; left:206px;top:102px; width:50px; height:50px; background-color:blue;">
<br><b><center>9</center>
</div>
<div ID="L4" STYLE="position:absolute; left:50px; top:154px; width:50px; height:50px; background-color:blue;">
<br><b><center>4</center>
</div>
<div ID="L2" STYLE="position:absolute; left:102px;top:154px; width:50px; height:50px; background-color:blue;">
<br><b><center>2</center>
</div>
<div ID="L14" STYLE="position:absolute; left:154px;top:154px; width:50px; height:50px; background-color:blue;">
<br><b><center>14</center>
</div>
<div ID="L5" STYLE="position:absolute; left:206px;top:154px; width:50px; height:50px; background-color:blue;">
<br><b><center>5</center>
</div>
<div ID="L7" STYLE="position:absolute; left:50px; top:206px; width:50px; height:50px; background-color:blue;">
<br><b><center>7</center>
</div>
<div ID="L3" STYLE="position:absolute; left:102px;top:206px; width:50px; height:50px; background-color:blue;">
<br><b><center>3</center>
</div>
<div ID="L15" STYLE="position:absolute; left:154px;top:206px; width:50px; height:50px; background-color:blue;">
<br><b><center>15</font></center>
</div></center>
<table STYLE="position:absolute; left:280px;top:50px;">
<tr align=center>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">1</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">2</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">3</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">4</td>
</tr>
<tr align=center>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">5</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">6</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">7</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">8</td>
</tr>
<tr align=center>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">9</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">10</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">11</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">12</td>
</tr>
<tr align=center>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">13</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">14</td>
<td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">15</td>
<td width=40 height=40></td>
</tr>
</table>
- js实现拼图游戏，爱好js的来看看吧
- 爱好JAVA编程的都来看看
- js实现拼图游戏
- js写的拼图游戏
- Js写的拼图游戏
- 利用Vue.js实现拼图游戏
- JS拼图游戏
- js拼图游戏
- 一个简单的JS拼图游戏
- JavaScript学习笔记10--用js实现的拼图游戏
- JS旅行笔记：2 来看看数据类型
- 原创JS拼图游戏
- 原生js拼图游戏
- js中简单的全选check 设计爱好选择举例
- 从源码看JS Object的实现
- 刚创建的 来看看吧
- 我来看看的
- 我来看看的
- 充分发展的管内层 流流动换热中对流换热系数与通道的当量尺寸成反比
- javescript实现图片切换功能
- 8086汇编 开机启动程序（裸机运行）
- Android广播接收器两种注册_广播六
- 过滤器----张国亮总结第三季之Filter常见应用
- js实现拼图游戏，爱好js的来看看吧
- asp.net 页面应用了 Transaction="Required" 报错“无法执行事务处理代码。
- VS2010在资源管理器中添加工程
- CreateFileMapping实现的共享内存及用法
- JS阻止冒泡事件以及默认事件发生
- IOS 表格边框上添加阴影
- ListView刷新的版本间差异
- 面向对象的5个基本设计原则
- find之xargs
