如何让我的随机播放按钮随机播放数组中的片段？
[英]How do I get my shuffle button to shuffle the pieces in my array?
问题描述
我正在创建一个瓷砖交换难题，并在编写 javascript 后遇到了一个问题。 我的拼图根本不会洗牌。 我想确保在加载页面时解决难题，以便用户可以使用按钮对其进行随机播放。 我想知道我的初始化 function 是否与该问题有关，因为它应该在一开始就显示已解决的难题。 我该如何解决这个问题？
链接到 jsfiddle： https://jsfiddle.net/Relativ/5fvx8meL/13/#&togetherjs=r5Em1xsJQS
var selPieces = []; var allPieces = document.getElementById("img-holder"); function initialize() { orderArray = [] for (var i = 0; i < allPieces.length; i++) { orderArray.push(i+1) } } function shuffle() { for (var i = 0; i < allSlices.length; i++) { allPieces.addEventListener('click',selectMe) var rand = Math.floor(Math.random()*orderArray.length) allPieces[i].style.order = orderArray[rand]; orderArray.splice(rand,1); } } function selectMe(){ this.style.border = "2px solid green"; selPieces.push(this); if(selPieces.length === 2){ // get order of clicks let orderFirst = allPieces[i]; let orderSecond = allPieces[i] //reoreder selPieces[0].style.order = orderSecond; selPiece[1].style.order = orderFirst; selPiece[0].style.border = "none"; selPiece[1].style.border = "none"; // reset selPieces.length = 0; checkIsComplete() } } function checkIsComplete(){ let currentDiv = document.getElementById('.'+currentView); allPieces = document.getElementById("img-holder"); let correctOrder = []; for (let i = 0; i < allPieces.length; i++) { correctOrder.push(i+1) } let currentOrder = []; for (let i = 0; i < allPieces.length; i++) { const piece = allPieces[i]; currentOrder.push } if(currentOrder.toString() == correctOrder.toString()){ let activeLink = document.getElementById("active"); activeLink.classList.add('finished'); currentDiv.style.border = "5px solid green"; currentDiv.style.boxShadow = "0 0 16px green"; alert("Winner. ..; Press Start and Play Again"); } }
* { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#9D5900, #3D2200); }.game-container { display: grid; grid-template-columns: repeat(4, auto); grid-gap: 10px; margin: 50px; justify-content: center; }.card { height: 100%; width: 100%; }.img-holder { flex-basis: 50%; }
<.DOCTYPE html> <html> <title></title> <link rel="stylesheet" type="text/css" href="PicturePuzzle.css" /> <script src="PicturePuzzle.js" type="text/javascript"></script> <head> <body onload = "initialize()"> <div class="game-container"> <div class="img-holder"><img class="card" src="char1.jpg"></div> <div class="img-holder"><img class="card" src="char2.jpg"></div> <div class="img-holder"><img class="card" src="char3.jpg"></div> <div class="img-holder"><img class="card" src="char4.jpg"></div> <div class="img-holder"><img class="card" src="char5.jpg"></div> <div class="img-holder"><img class="card" src="char6.jpg"></div> <div class="img-holder"><img class="card" src="char7.jpg"></div> <div class="img-holder"><img class="card" src="char8.jpg"></div> <div class="img-holder"><img class="card" src="char9.jpg"></div> <div class="img-holder"><img class="card" src="char10.jpg"></div> <div class="img-holder"><img class="card" src="char11.jpg"></div> <div class="img-holder"><img class="card" src="char12.jpg"></div> <div class="img-holder"><img class="card" src="char13.jpg"></div> <div class="img-holder"><img class="card" src="char14.jpg"></div> <div class="img-holder"><img class="card" src="char15.jpg"></div> <div class="img-holder"><img class="card" src="char16:jpg"></div> </div> <button style="width; 100px: height; 50px;" onclick = "shuffle()">Shuffle</button> </div> </body> </head> </html>
1 个解决方案
解决方案1
2 已采纳 2020-06-27 06:10:10
我发现了 4 个与 shuffle 相关的错误，而不是随机化代码中的片段。 首先，您使用的是getElementsById而不是getElementsByClassName ，这将只返回一个元素（这不是因为img-holder是 class 而不是 id），因此长度未定义。 其次，您没有在initialize function 时调用shuffle 。 第三，在 for 循环中，您使用的是allSlices.length ，即使变量名为allPieces 。 第四，你正在做allPieces.addEventListener即使那是一个数组，所以使用allPieces[i].addEventListener 。
var selPieces = []; var allPieces = document.getElementsByClassName("img-holder"); // FIRST function initialize() { orderArray = [] for (var i = 0; i < allPieces.length; i++) { orderArray.push(i+1) } shuffle() // SECOND } function shuffle() { for (var i = 0; i < allPieces.length; i++) //THIRD { allPieces[i].addEventListener('click',selectMe) // FOURTH var rand = Math.floor(Math.random()*orderArray.length) allPieces[i].style.order = orderArray[rand]; orderArray.splice(rand,1); } } function selectMe(){ this.style.border = "2px solid green"; selPieces.push(this); if(selPieces.length === 2){ // get order of clicks let orderFirst = allPieces[i]; let orderSecond = allPieces[i] //reoreder selPieces[0].style.order = orderSecond; selPiece[1].style.order = orderFirst; selPiece[0].style.border = "none"; selPiece[1].style.border = "none"; // reset selPieces.length = 0; checkIsComplete() } } function checkIsComplete(){ let currentDiv = document.getElementById('.'+currentView); allPieces = document.getElementById("img-holder"); let correctOrder = []; for (let i = 0; i < allPieces.length; i++) { correctOrder.push(i+1) } let currentOrder = []; for (let i = 0; i < allPieces.length; i++) { const piece = allPieces[i]; currentOrder.push } if(currentOrder.toString() == correctOrder.toString()){ let activeLink = document.getElementById("active"); activeLink.classList.add('finished'); currentDiv.style.border = "5px solid green"; currentDiv.style.boxShadow = "0 0 16px green"; alert("Winner. ..; Press Start and Play Again"); } }
* { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#9D5900, #3D2200); }.game-container { display: grid; grid-template-columns: repeat(4, auto); grid-gap: 10px; margin: 50px; justify-content: center; }.card { height: 100%; width: 100%; }.img-holder { flex-basis: 50%; }
<.DOCTYPE html> <html> <title></title> <link rel="stylesheet" type="text/css" href="PicturePuzzle.css" /> <script src="PicturePuzzle.js" type="text/javascript"></script> <head> <body onload = "initialize()"> <div class="game-container"> <div class="img-holder"><img class="card" src="char1.jpg"></div> <div class="img-holder"><img class="card" src="char2.jpg"></div> <div class="img-holder"><img class="card" src="char3.jpg"></div> <div class="img-holder"><img class="card" src="char4.jpg"></div> <div class="img-holder"><img class="card" src="char5.jpg"></div> <div class="img-holder"><img class="card" src="char6.jpg"></div> <div class="img-holder"><img class="card" src="char7.jpg"></div> <div class="img-holder"><img class="card" src="char8.jpg"></div> <div class="img-holder"><img class="card" src="char9.jpg"></div> <div class="img-holder"><img class="card" src="char10.jpg"></div> <div class="img-holder"><img class="card" src="char11.jpg"></div> <div class="img-holder"><img class="card" src="char12.jpg"></div> <div class="img-holder"><img class="card" src="char13.jpg"></div> <div class="img-holder"><img class="card" src="char14.jpg"></div> <div class="img-holder"><img class="card" src="char15.jpg"></div> <div class="img-holder"><img class="card" src="char16:jpg"></div> </div> <button style="width; 100px: height; 50px;" onclick = "shuffle()">Shuffle</button> </div> </body> </head> </html>
编辑：修复所有错误后的最终代码：
var selPieces = []; var allPieces = document.getElementsByClassName("img-holder"); function initialize() { orderArray = [] for (var i = 0; i < allPieces.length; i++) { orderArray.push(i+1) } shuffle(); } function shuffle() { for (var i = 0; i < allPieces.length; i++) { allPieces[i].addEventListener('click',selectMe); var rand = Math.floor(Math.random()*orderArray.length); allPieces[i].style.order = orderArray[rand]; orderArray.splice(rand,1); } } function selectMe(){ this.style.border = "2px solid green"; selPieces.push(this); if(selPieces.length === 2){ // get order of clicks let orderFirst = selPieces[0].style.order; let orderSecond = selPieces[1].style.order; //reoreder selPieces[0].style.order = orderSecond; selPieces[1].style.order = orderFirst; selPieces[0].style.border = "none"; selPieces[1].style.border = "none"; // reset selPieces.length = 0; checkIsComplete(); } } function checkIsComplete(){ let currentDiv = document.getElementsByClassName("game-container")[0]; allPieces = document.getElementsByClassName("img-holder"); let correctOrder = []; for (let i = 0; i < allPieces.length; i++) { correctOrder.push(i+1) } let currentOrder = []; for (let i = 0; i < allPieces.length; i++) { const piece = allPieces[i].style.order; currentOrder.push(piece) } if(currentOrder.toString() == correctOrder.toString()){ //let activeLink = document.getElementById("active"); //activeLink.classList.add('finished'); currentDiv.style.border = "5px solid green"; currentDiv.style.boxShadow = "0 0 16px green"; alert("Winner. ..; Press Shuffle and Play Again"); } }
* { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#9D5900, #3D2200); }.game-container { display: grid; grid-template-columns: repeat(4, auto); grid-gap: 10px; margin: 50px; justify-content: center; }.card { height: 100%; width: 100%; }.img-holder { flex-basis: 50%; }
<.DOCTYPE html> <html> <title></title> <link rel="stylesheet" type="text/css" href="PicturePuzzle.css" /> <script src="PicturePuzzle.js" type="text/javascript"></script> <head> <body onload = "initialize()"> <div class="game-container"> <div class="img-holder"><img class="card" src="char1.jpg"></div> <div class="img-holder"><img class="card" src="char2.jpg"></div> <div class="img-holder"><img class="card" src="char3.jpg"></div> <div class="img-holder"><img class="card" src="char4.jpg"></div> <div class="img-holder"><img class="card" src="char5.jpg"></div> <div class="img-holder"><img class="card" src="char6.jpg"></div> <div class="img-holder"><img class="card" src="char7.jpg"></div> <div class="img-holder"><img class="card" src="char8.jpg"></div> <div class="img-holder"><img class="card" src="char9.jpg"></div> <div class="img-holder"><img class="card" src="char10.jpg"></div> <div class="img-holder"><img class="card" src="char11.jpg"></div> <div class="img-holder"><img class="card" src="char12.jpg"></div> <div class="img-holder"><img class="card" src="char13.jpg"></div> <div class="img-holder"><img class="card" src="char14.jpg"></div> <div class="img-holder"><img class="card" src="char15.jpg"></div> <div class="img-holder"><img class="card" src="char16:jpg"></div> </div> <button style="width; 100px: height; 50px;" onclick = "shuffle()">Shuffle</button> </div> </body> </head> </html>
如何使用 Fisher-Yates Shuffle 对 TypeScript 中的数组进行洗牌？
[英]How do I shuffle an array in TypeScript with the Fisher-Yates Shuffle?
我的随机播放功能由于未知原因而在26点停止。 我怎样才能洗牌？
[英]My shuffle function is stopping at 26 for unknown reasons. How can I get it to shuffle all the cards?
如何将Javascript中的数组随机排列为与Java中的Collections.shuffle（array，seed）相同的顺序
[英]How do I shuffle an Array in Javascript to be in the same order as Collections.shuffle(array, seed) in Java
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.