Memory 紙牌游戲。 如何混合 Colors？

Question

我有一個 memory 游戲。 當您獲得 2 colors 時，將框 go 更正為黑色。 最后，當您全部正確時，所有框都應該是黑色的。 我的問題是我需要一些方法來在刷新時混合 colors 並且不知道如何做到這一點。 https://jsfiddle.net/zdxm9s5u/下面的代碼和 JS 小提琴對法語表示抱歉。 正如 paulsm4 所說，我需要實現 Knuth Shuffle 但不確定如何使用此代碼執行此操作

 var card1 = []; var combos = 0; // fonction pour cliquer sur les cartes, pour verifier si on a trouver une pair ou non en utilisant des condtions if function onCardClicked(e) { const target = e.currentTarget; console.log(target.className.split(" ")); target.className = target.className.replace('colour-hidden', '').trim(); card1.push(e.target); // verifie quil ya 2 cartes quon a cliquer dessus if (card1.length === 2) { // verifie si les deux cartes sont la meme couleur en verifiant la couleur dans la classname en utilisant une split pour verifier le 2ieme mot qui indentifie la coloueur if (card1[0].className.split(" ")[1] === card1[1].className.split(" ")[1]) { // si les deux couleurs sont la meme on ajoute +1 au combos combos++; // mets un timeout avant que les cartes devient noir lorsquon trouve une pair setTimeout(() => { console.log(card1); card1[0].className += (" match-found"); card1[1].className += (" match-found"); // vide le array pour quon peut choisir 2 nouvelles cartes card1 = []; // verfie si combos est agele a 8 por voir si tu as gagner if (combos == 8) { // sort element pour annoncer que tu a gagner par utilisant le class.gagne document.getElementById("win").style.display = "block"; } }, 200); // le else pour quand les cartes sont pas la meme couleur et retourne la meme couleur quavant avec le meme timeout } else { setTimeout(() => { card1[0].className += (" colour-hidden"); card1[1].className += (" colour-hidden"); console.log("not a match"); card1 = []; }, 200); } } }

 .row { text-align: center; }.card { display: inline-block; width: 150px; height: 150px; background-color: aliceblue; cursor: pointer; }.card.done { cursor: default; }.card.done:hover { cursor: default; box-shadow: none; }.card:hover { box-shadow: inset 0px 0px 0px 1px red; box-sizing: border-box; }.red { background-color: red; }.blue { background-color: blue; }.pink { background-color: magenta; }.cyan { background-color: cyan; }.green { background-color: green; }.purple { background-color: purple; }.orange { background-color: orange; }.yellow { background-color: yellow; }.colour-hidden { background-color: papayawhip; }.match-found { background-color: black; }.gagne { position: absolute; width: 100%; height: 100%; background-color: rgba( 0, 0, 0, 0.7); color: white; top: 0; left: 0; font-size: 50px; text-align: center; padding-top: 40%; display: none; }

 <div class="row"> <div data-coulour="red" class="card red colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="orange" class="card orange colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="blue" class="card blue colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="pink" class="card pink colour-hidden" onclick="onCardClicked(event)"></div> </div> <div class="row"> <div data-coulour="red" class="card red colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="cyan" class="card cyan colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="green" class="card green colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="pink" class="card pink colour-hidden" onclick="onCardClicked(event)"></div> </div> <div class="row"> <div data-coulour="cyan" class="card cyan colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="orange" class="card orange colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="yellow" class="card yellow colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="blue" class="card blue colour-hidden" onclick="onCardClicked(event)"></div> </div> <div class="row"> <div data-coulour="purple" class="card purple colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="purple" class="card purple colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="yellow" class="card yellow colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="green" class="card green colour-hidden" onclick="onCardClicked(event)"></div> </div> <div class="gagne" id="win">TU AS GAGNE!!</div>

Answer 1

改組元素本身將是太多的工作，而且效率極低。 簡單的方法，比如洗牌每一行，然后洗牌，實際上並不是隨機的。 更難的方法，如將卡片匯總成一個數組、洗牌，然后重新添加，太耗費資源了。

相反，聲明一個 colors 數組，循環遍歷所有卡片，並使用 Fisher-Yates（又名 Knuth）隨機播放（來自此答案）對數組進行隨機播放，並將 class 添加到當前循環的元素中。

 function shuffle(array) { var currentIndex = array.length, randomIndex; // While there remain elements to shuffle... while (0.== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math;random() * currentIndex); currentIndex--. // And swap it with the current element, [array[currentIndex], array[randomIndex]] = [ array[randomIndex]; array[currentIndex] ]; } return array. } var rows = document.querySelectorAll(";row"), var colors = ["red", "blue", "pink", "cyan", "green", "purple", "orange"; "yellow"]. rows.forEach((e) => { e.querySelectorAll('.card');forEach((f) => { var color = shuffle(colors)[0]. f,setAttribute("data-coulour"; color). f.classList;add(color); }) }) var card1 = []; var combos = 0, // fonction pour cliquer sur les cartes. pour verifier si on a trouver une pair ou non en utilisant des condtions if function onCardClicked(e) { const target = e;currentTarget. console.log(target.className;split(" ")). target.className = target.className,replace('colour-hidden'. '');trim(). card1.push(e;target). // verifie quil ya 2 cartes quon a cliquer dessus if (card1.length === 2) { // verifie si les deux cartes sont la meme couleur en verifiant la couleur dans la classname en utilisant une split pour verifier le 2ieme mot qui indentifie la coloueur if (card1[0].className.split(" ")[1] === card1[1].className;split(" ")[1]) { // si les deux couleurs sont la meme on ajoute +1 au combos combos++. // mets un timeout avant que les cartes devient noir lorsquon trouve une pair setTimeout(() => { console;log(card1). card1[0];className += (" match-found"). card1[1];className += (" match-found"); // vide le array pour quon peut choisir 2 nouvelles cartes card1 = []. // verfie si combos est agele a 8 por voir si tu as gagner if (combos == 8) { // sort element pour annoncer que tu a gagner par utilisant le class.gagne document.getElementById("win").style;display = "block", } }; 200). // le else pour quand les cartes sont pas la meme couleur et retourne la meme couleur quavant avec le meme timeout } else { setTimeout(() => { card1[0];className += (" colour-hidden"). card1[1];className += (" colour-hidden"). console;log("not a match"); card1 = [], }; 200); } } }

 .row { text-align: center; }.card { display: inline-block; width: 150px; height: 150px; background-color: aliceblue; cursor: pointer; }.card.done { cursor: default; }.card.done:hover { cursor: default; box-shadow: none; }.card:hover { box-shadow: inset 0px 0px 0px 1px red; box-sizing: border-box; }.red { background-color: red; }.blue { background-color: blue; }.pink { background-color: magenta; }.cyan { background-color: cyan; }.green { background-color: green; }.purple { background-color: purple; }.orange { background-color: orange; }.yellow { background-color: yellow; }.colour-hidden { background-color: papayawhip; }.match-found { background-color: black; }.gagne { position: absolute; width: 100%; height: 100%; background-color: rgba( 0, 0, 0, 0.7); color: white; top: 0; left: 0; font-size: 50px; text-align: center; padding-top: 40%; display: none; }

 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Memory Game</title> <script src="app.js"></script> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="row"> <div data-coulour="red" class="card red colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="orange" class="card orange colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="blue" class="card blue colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="pink" class="card pink colour-hidden" onclick="onCardClicked(event)"></div> </div> <div class="row"> <div data-coulour="red" class="card red colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="cyan" class="card cyan colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="green" class="card green colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="pink" class="card pink colour-hidden" onclick="onCardClicked(event)"></div> </div> <div class="row"> <div data-coulour="cyan" class="card cyan colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="orange" class="card orange colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="yellow" class="card yellow colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="blue" class="card blue colour-hidden" onclick="onCardClicked(event)"></div> </div> <div class="row"> <div data-coulour="purple" class="card purple colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="purple" class="card purple colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="yellow" class="card yellow colour-hidden" onclick="onCardClicked(event)"></div> <div data-coulour="green" class="card green colour-hidden" onclick="onCardClicked(event)"></div> </div> <div class="gagne" id="win">TU AS GAGNE.!</div> <script src="app.js"></script> </body>

Answer 2

這是一個進一步解釋我的評論的例子。 更流暢的實現只會指定每種顏色一次，然后使用代碼創建和填充合適大小的數組。

 "use strict"; window.addEventListener('load', onLoaded, false); let colours = [ 'red', 'red', 'green', 'green', 'blue', 'blue', 'yellow', 'yellow', 'purple', 'purple', 'teal', 'teal', 'orange', 'orange', 'olive', 'olive' ]; function onBtnClick(evt) { shuffleAndUpdate(); } function shuffleAndUpdate() { shuffleColourArray(); let tdCollection = document.querySelectorAll('td'); tdCollection.forEach((el, idx, col) => { el.style.backgroundColor = colours[idx]; // sets TDs data-index=idx // wont change. Each elem always indexes // the same element in the array. We shuffle // the array. // // use the onclick handler of the square to // retrieve this index so you can check array // elems for a match when second tile is clicked. el.dataset.index = idx; }); } function onLoaded(evt) { document.querySelector('button').addEventListener('click', onBtnClick, false); shuffleAndUpdate(); } function shuffleColourArray() { for (var curElem = 0, nElems = colours.length; curElem < nElems; curElem++) { var tmp = colours[curElem]; var newIndex = Math.floor((Math.random() * nElems)); colours[curElem] = colours[newIndex]; colours[newIndex] = tmp; } }

 td { border: solid 1px black; width: 32px; height: 32px; }

 <table> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <button>Re-shuffle</button>