昨天没事做，就用JS写了个数字拼图的小游戏，自娱自乐。
可惜关于逆序数的问题还没解决，现在有时是拼不成的，大家见谅了。
<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 newNumArr = 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>
分享到：
相关推荐
在这个项目中，我们将探讨如何使用JS来实现一个数字拼图游戏。数字拼图游戏通常由一张完整的图像分割成多个小块，玩家需要通过拖动这些小块，将它们正确拼接起来恢复原图。 首先，我们需要准备一个完整的图像，并将...
拼图</title> <style> td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100% ; height : 100% ; background-color : #000 ; color : #FFF ; text-align : center ; vertical-align : ...
《H5拼图小游戏开发详解》 在当今的数字化时代，HTML5（简称H5）作为新一代的网页标准，以其强大的交互性和丰富的媒体支持，深受开发者喜爱。本篇文章将深入探讨一个基于H5和jQuery实现的简单拼图小游戏的开发过程...
在当前数字化时代，HTML5、JavaScript和jQuery等技术被广泛应用于网页游戏开发，其中H5益智拼图小游戏1.2便是典型代表。这款游戏在原有的基础上进行了诸多改进，提升了用户体验，同时也为开发者提供了更便捷的维护和...
cocos2d-js数字拼图游戏源码 cocos精品小游戏源码 , 完整项目源码 是整个项目的压缩包 , 新建空项目直接导入到项目里面就可以运行了,无需其他操作。 适合二次开发和学习使用,都是经典游戏,需要其他游戏源码包可以...
在本实践项目中，"Web前端小实践之拼图游戏.rar"是一个包含了HTML、CSS和JavaScript源代码的压缩包，由博主"青丝缠光阴"创作。这个项目旨在帮助学习者掌握Web开发基础，特别是前端技术的应用。我们将深入探讨这个...
JavaScript拼图游戏是一种常见的网页互动元素，通过JavaScript编程语言实现，为用户提供了一种有趣的娱乐方式。这个游戏的基本原理是将一个完整的图像分割成多个小块，然后打乱顺序，玩家需要通过移动这些小块来恢复...
在本项目中，我们探索了如何使用React.js框架来开发一个15-puzzle拼图游戏。React是Facebook推出的一种用于构建用户界面的JavaScript库，以其组件化开发模式和高效的虚拟DOM更新而闻名。这个项目展示了React如何与...
在“HTML5 Canvas学习笔记(6)拼图游戏（数字版）”这篇博文中，作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**： - Canvas是一个基于矢量图形的画布元素...
HTML5 3D魔方旋转拼图小游戏是利用现代浏览器对HTML5技术的支持，结合JavaScript实现的一款互动性强、视觉效果丰富的在线游戏。这个游戏的核心在于3D变换和交互设计，为玩家提供了一种全新的数字娱乐体验。 HTML5是...
在本文中，我们将探讨如何利用Vue.js实现一个数字拼图游戏，以此来展示Vue的特性。 首先，数字拼图游戏的核心在于生成随机数字并允许玩家通过交换数字方块的位置来完成拼图。在Vue中，我们首先需要创建一个数据对象...
【JavaScript实现九宫格拼图小游戏详解】 九宫格拼图是一种常见的益智游戏，通常由9个小方块组成一个3x3的矩阵，玩家需要通过拖动或点击来重新排列这些方块，使得它们按照一定的顺序排列。在这个JS实现的小游戏中，...
**完美版的JS拼图游戏**是基于JavaScript开发的一款在线拼图游戏，它解决了网络上许多拼图游戏存在的问题，如随机打乱可能导致无解的布局。本版本的游戏经过精心设计和优化，确保每次游戏开始时都有解，给玩家带来更...
在数字时代，这种传统游戏也被巧妙地融入到网页设计中，通过CSS（层叠样式表）和JavaScript（JS）技术，将静态网页变得生动有趣。对于初学者来说，理解如何运用这两门技术创建一个简单的拼图游戏，是学习Web开发的...
“puzzel”是一款典型的凹凸拼图游戏，它融合了传统拼图的乐趣与数字逻辑的挑战。玩家需要通过旋转和移动拼图块，使它们按照一定的规则排列组合，最终形成完整的图像。这种游戏设计不仅锻炼玩家的空间想象能力，还...
九宫格拼图小游戏是一种经典的智力游戏，它基于一个3x3的网格，目标是通过滑动各个小方块，使得整个网格上的数字或图片按照某种特定顺序排列整齐。在这个项目中，我们将深入探讨如何利用编程语言实现这样一个游戏。 ...
《使用jQuery实现随机打乱的拖拽拼图小游戏详解》 在数字娱乐和教育领域，拼图游戏是一种深受用户喜爱的互动元素。这种游戏能够锻炼玩家的空间想象能力和逻辑思维，同时也能提供一定的娱乐性。本篇文章将深入探讨...
《cocos-js小游戏2048游戏源码及素材详解》 2048是一款深受玩家喜爱的数字拼图游戏，其简洁的设计和富有挑战性的玩法吸引了大量的编程爱好者进行二次开发。本篇将深入探讨使用cocos-js实现的2048小游戏的源码结构、...
在当今的数字化时代，H5技术因其跨平台、易分享的特点，已经成为创建互动游戏的热门选择。本篇文章将深入探讨“H5拼图游戏”的开发，从基础概念到具体实现，为你揭示其中蕴含的技术细节。 1. **H5概述** HTML5...