Question

嗨所以我想把桌子上的细胞洗牌，这样每次点击随机播放按钮都会重新排列每个单元格中的数字。因此，该表每行有三个单元格，每个单元格上都有一个数字。这是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];
};

Answer 1

你在javascript功能结束时缺少一个结束函数括号。

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];
 };
}

shuffle方法按预期工作

您可以查看here。

8益智游戏点击随机按钮

1 个答案: