如何让我的随机播放按钮随机播放数组中的片段？
[英]How do I get my shuffle button to shuffle the pieces in my array?
问题描述
I am creating a tile swap puzzle and came across a problem after writing my javascript.
我正在创建一个瓷砖交换难题，并在编写 javascript 后遇到了一个问题。 My puzzle pieces won't shuffle at all.我的拼图根本不会洗牌。 I want to make sure the puzzle is solved when the page is loaded so the user can shuffle it using the button.我想确保在加载页面时解决难题，以便用户可以使用按钮对其进行随机播放。 I was wondering if my initialize function has something to do with the problem since it is supposed to show the solved puzzle in the beginning.我想知道我的初始化 function 是否与该问题有关，因为它应该在一开始就显示已解决的难题。 How do I tackle this?我该如何解决这个问题？
Link to the jsfiddle: https://jsfiddle.net/Relativ/5fvx8meL/13/#&togetherjs=r5Em1xsJQS链接到 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
I identified 4 errors related to shuffle not randomizing the pieces in your code.我发现了 4 个与 shuffle 相关的错误，而不是随机化代码中的片段。 First, you are using getElementsById instead of getElementsByClassName , which would be returning only one element (which it isn't because img-holder is a class and not id) and so length, is undefined.首先，您使用的是getElementsById而不是getElementsByClassName ，这将只返回一个元素（这不是因为img-holder是 class 而不是 id），因此长度未定义。 Second, you didn't call shuffle in initialize function.其次，您没有在initialize function 时调用shuffle 。 Third, In the for loop, you are using allSlices.length even though the variable is named allPieces .第三，在 for 循环中，您使用的是allSlices.length ，即使变量名为allPieces 。 Fourth, you are doing allPieces.addEventListener even though that is an array, so use allPieces[i].addEventListener .第四，你正在做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>
EDIT: Final code after fixing all the errors:编辑：修复所有错误后的最终代码：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么在我洗牌时我的阵列没有被重新分配？ - Why does my array not get reassigned when I shuffle it?
如何使用 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?
如何使用shuffle.js快速调整图片大小？ - How do I get my images to responsively resize with shuffle.js?
如何在数组中随机排列数组？ - How do I shuffle an array within an array?
如何对 javascript 数组进行排序和洗牌？ - How do I sort and shuffle javascript array?
如何将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
如何使用onClick防止阵列重复洗牌 - how to prevent repetitive shuffle of my array using onClick
如何获取响应然后对其执行数组洗牌？ - How do I fetch a response and then perform array shuffle on it?
如何随机排列数组中的对象 - How to shuffle objects in an array
相关标签