您的位置：首页 > Web前端 > JavaScript

简易网页游戏——八数码问题游戏

2016-08-07 18:44 288 查看

在工作室暑期集训结束，回家的路上。长春到北京的动车，将近七个小时，忘记拷电影了。。。手机里也没有游戏。。。无聊至极了，就自己写了个游戏。。。

用HTML+SASS+JS实现八数码问题的小游戏~

直接贴上代码：

（文件目录）

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9 bubbles</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="sta">
您已经过<span id="staSpan">0</span>步，加油啊！
</div>
</body>
<script src="js/action.js"></script>
</html>

SCSS：

$boxsize: 200px;
$boxmargin: 10px;
$clearmargin: -6px;
*{
margin: 0;
padding: 0;
}
#container{
width: $boxsize * 3 + $boxmargin * 2 + 6px;
height: $boxsize * 3 + $boxmargin * 2 + 6px;
margin: 0 auto;
background: gray;
text-align: center;
line-height: $boxsize;
color: red;
font-weight: bold;
font-size: 4em;
text-shadow: 1px 1px gray;

.box{
float: left;
width: $boxsize;
height: $boxsize;
margin-right: $boxmargin;
margin-bottom: $boxmargin;

background: yellow;
border: 1px solid red;
cursor: pointer;
}
.box:nth-child(3n){
margin-right: 0;
}
}
#sta {
width:$boxsize * 3 + $boxmargin * 2 + 6px;
margin: 0 auto;
text-align: center;

color: blue;
font-weight: bold;
}

JAVASCRIPT：

var boxes = document.getElementById("container").children;
var boxValue = [1,2,3,4,5,6,7,8,""];
var clickNum = 0;

window.onload = function (){
bulidGame();
}

/*初始化游戏*/
function bulidGame(){
var j = boxes.length;
for(var i = boxes.length - 1; i >= 0; i--){
/*构建索引值*/
boxes[i].index = j;
j--;

/*填充随机起始状态*/
var w = i - 0;
var b = Math.round(Math.random() * w + 0);
boxes[i].innerHTML = boxValue[b];
boxValue.splice(b,1);/*删除数组元素并保持数组元素索引连续的通用方法*/
/*事件绑定*/
boxes[i].onclick = changeSta;
}
}

/*探测四个方向是否可操作*/
function changeSta(){
var thisIndex = this.index - 1;
var temp = undefined;
changeVelidate(thisIndex,-1);
changeVelidate(thisIndex,+1);
changeVelidate(thisIndex,-3);
changeVelidate(thisIndex,+3);
checkWin();
}

/*封装方法，单向验证*/
function changeVelidate(thisIndex,veli){
if(boxes[thisIndex+veli]){
if(boxes[thisIndex + veli].innerHTML == ""){
temp = boxes[thisIndex].innerHTML;
boxes[thisIndex].innerHTML = "";
boxes[thisIndex + veli].innerHTML = temp;
changeClickNum();
};
}
}

/*单击次数记录器*/
function changeClickNum(){
clickNum++;
document.getElementById("staSpan").innerHTML = clickNum;
}

/*获胜判别*/
function checkWin(){ /*优化版checkWin*/
var string = "";
for(var k = 0;k < boxes.length; k++){
string += boxes[k].innerHTML;
}
if(string == "12345678"){
alert("恭喜你，答对了。");
window.location.reload();
}
}

截图：

实现思路：

       利用DIV+CSS构建九宫格图案

       给每个格子赋予一个index值

       将12345678和空白用随机方法填入每个格子，以innerHTML属性承载

       判断格子是否可移动是先通过index的加减关系值得出目标格子四个方向是否有格子，在判断innerHTML是否为空确定能否移动

       移动方块的位置即是交换两个格子innerHTML的值

       判断是否获得胜利则是判断九个格子的innerHTML合起来的字符串是否等于“12345678 ”

由于是在动车上短短的时间开发的，不免会有很多缺点：

        感觉界面和效果过于简单了，之后研究研究在这基础之上加入动画效果的解决方案，并优化样式设计。

        至于八数码问题的自动求解方法，目前本人的算法能力还太弱鸡。。。。。。等以后上了人工智能课老师大概会讲这个算法吧2333333333

华丽丽的分割线

~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.

2016-8-9晚：

       发现了程序的重大bug 在程序的胜负判断函数

/*获胜判别*/
function checkWin(){ /*优化版checkWin*/
var string = " ";
for(var k = 0;k < boxes.length; k++){
string += boxes[k].innerHTML;
}
if(string == "12345678 "){
alert("恭喜你，答对了。");
window.location.reload();
}
}

中，所判断的是最终所获得的字符串是否为‘12345678 ’.然由于在最初的数组中对空白区域的标识出了问题，代码中使用了”“而不是” “，导致游戏区域中空白区域填入了undefined而不是空格，结果就是类似于”123 45678“这样的情况也能被识别为游戏完成，判断错误。粗心呐~~~~~

      解决方案有两个：

             （1）、将代码中所有的""直接替换为" "，利用查找替换功能可以轻易实现。

             （2）、在胜负判断函数中添加判断条件：boxes[8].innerHTML == 8

/*获胜判别*/
function checkWin(){ /*优化版checkWin*/
var string = "";
for(var k = 0;k < boxes.length; k++){
string += boxes[k].innerHTML;
}
if(string == "12345678 " && boxes[8].innerHTML == 8){
alert("恭喜你，答对了。");
window.location.reload();
}
}

问题解决~~~~~
顺别贴出最初的胜利判断方法，后来觉得代码太长了看不下去做了优化（其实是重写23333），后来仔细想想，这种方法也是有优点的。

/*旧版checkWin*/
function checkWin(){
var winSta = true;
for(var i = 0;i < boxes.length; i++){
if(boxes[i].innerHTML != ""){
if(boxes[i].innerHTML != boxes[i].index){
winSta = false;
break;
}
}else{
if(boxes[i].index != 9){
winSta = false;
break;
}
}
}

if(winSta == true){
alert("恭喜你，胜利了！");
bulidGame();
}
}

这个方法在判断的时候是依次判断每个格子的值和索引值是否相等，不相等立马跳出。这种方法减少了不必要的取数以及字符串拼接的操作，程序的运行时间会更少。虽然在这个程序里这点时间是完完全全微不足道无法察别的，不过在大一些的程序里，减少不必要的操作肯定对提升程序效率大有裨益~~
其实代码并不完全是越短越好，对吧？

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 游戏 javascript

相关文章推荐

新的分享

章节导航