在工作室暑期集訓結束，回家的路上。 長春到北京的動車，將近七個小時，忘記拷電影了。。。手機裏也沒有遊戲。。。 無聊至極了，就自己寫了個遊戲。。。
用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();
}
}/*舊版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();
}
}這個方法在判斷的時候是依次判斷每個格子的值和索引值是否相等，不相等立馬跳出。這種方法減少了不必要的取數以及字符串拼接的操作，程序的運行時間會更少。雖然在這個程序裏這點時間是完完全全微不足道無法察別的，不過在大一些的程序裏，減少不必要的操作肯定對提升程序效率大有裨益~~
