8拼图游戏单击“洗牌”按钮



嗨,所以我试图将桌子中的单元格放置,以便每次单击"洗牌"按钮时,它都会重新布置每个单元格中的数字。因此该表有每行三个单元格,每个单元格上有一个数字。这是8个益智游戏,但是现在我只是想掌握洗牌部分。我希望这是有道理的。所以我的html是:

    <!DOCTYPE html>
<html>
<head>
<meta charset = "uft-8">
<title>8 puzzle game</title>
 <script type="text/javascript" src="valenti_puzzle.js"></script>
 <style type = "text/css">
 .puzzle { width : 40px;
        height 40px;
        text-align: center;
        font -size: large;
        background-color: pink;
        }
 .empty { background-color : white;}
   </style>
  </head>
<h1> 8 puzzle </h1>
<div class = "display">
<p id = "moves">
<table border = "2">
<table class = "table">
<tr>
<td id = "1" class = "puzzle"> 1</td> 
<td id = "2" class = "puzzle">2</td> 
<td id ="3" class = "puzzle">3</td>
</tr>
<tr>
<td id = "4" class = "puzzle">4</td> 
<td id = "5" class = "puzzle">5</td> 
<td id = "6" class = "puzzle">6</td>
</tr>
<tr>
<td id = "7" class = "puzzle">7</td> 
<td id = "8" class = "puzzle">8</td>
<td id = "9" class = "empty"> </td>
</tr>
</div>
</table>
<p><input type = "button" id="Shuffle"  value = "Shuffle"></p>
</body>
</html>

我的java脚本是:

    // JavaScript Document
var $ = function (id) { return document.getElementById(id); };

var cell1 = document.getElementById("1");
var cell2= document.getElementById("2");
var cell3= document.getElementById("3");
var cell4= document.getElementById("4");
var cell5= document.getElementById("5");
var cell6= document.getElementById("6");
var cell7 = document.getElementById("7");
var cell8= document.getElementById("8");
var emptyCell = document.getElementById("9");
var Shufflebutton = document.getElementById("Shuffle");
 Shufflebutton =document.addEventListener("click", Startpuzzle, false);

var one = [1,2,3,4,5,6,7,8,9];
cell1.addEventListener("click", Startpuzzle, false);
cell2.addEventListener("click", Startpuzzle, false);
cell3.addEventListener("click", Startpuzzle, false);
cell4.addEventListener("click", Startpuzzle, false);
cell5.addEventListener("click", Startpuzzle, false);
cell6.addEventListener("click", Startpuzzle, false);
cell7.addEventListener("click", Startpuzzle, false);
cell8.addEventListener("click", Startpuzzle, false);
emptyCell.addEventListener("click",Startpuzzle, false);

function shuffle(array)
{
var temp;
var index;
  var counter = array.length;
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);
        // Decrease counter by 1
        counter--;
        // And swap the last element with it
         temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }
    return array.length;
}

function Startpuzzle() {
shuffle(one);
for(var i=1; i<9; i++){
cell1.innerHTML = one[0];
cell2.innerHTML = one[1];
cell3.innerHTML = one[2];
cell4.innerHTML = one[3];
cell5.innerHTML = one[4];
cell6.innerHTML = one[5];
cell7.innerHTML = one[6];
cell8.innerHTML = one[7];
emptyCell.innerHTML = one[8];
};

您在JavaScript fucntion末尾缺少终端功能。

function Startpuzzle() {
shuffle(one);
 for(var i=1; i<9; i++){
  cell1.innerHTML = one[0];
  cell2.innerHTML = one[1];
  cell3.innerHTML = one[2];
  cell4.innerHTML = one[3];
  cell5.innerHTML = one[4];
  cell6.innerHTML = one[5];
  cell7.innerHTML = one[6];
  cell8.innerHTML = one[7];
  emptyCell.innerHTML = one[8];
 };
}

随机混音方法按预期工作

您可以在此处检查。

最新更新