8益智游戏点击无序播放按钮
8益智游戏点击无序播放按钮
提问于 2017-03-02 11:30:58
您好，我正在尝试打乱表格中的单元格，以便每次单击“打乱”按钮时，它都会重新排列每个单元格中的数字。因此，表中每行有三个单元格，每个单元格上都有一个数字。这是一个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];
};回答 1
Stack Overflow用户
发布于 2017-03-02 13:35:22
您的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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42546316
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号