如何在下面的 javascript 代码中添加显示所有卡按钮？
[英]how to add show all cards button to the javascript code below?
问题描述
i have this code here written in javascript,HTML and CSS language for memory game and i am trying to add a show all button to my code here (that when clicked it will show all cards for seconds and then flipped again) but it's not working with me, i posted code below so please if you can help i would be thankful. 
i have this code here written in javascript,HTML and CSS language for memory game and i am trying to add a show all button to my code here (that when clicked it will show all cards for seconds and then flipped again) but it's not working和我一起，我在下面发布了代码，所以如果你能帮助我，我将不胜感激。 thanks in advance:D先谢谢了
class MixOrMatch { constructor(totalTime, cards) { this.cardsArray = cards; this.totalTime = totalTime; this.timeRemaining = totalTime; this.timer = document.getElementById('timer') this.ticker = document.getElementById('flips'); } startGame() { this.totalClicks = 0; this.timeRemaining = this.totalTime; this.cardToCheck = null; this.matchedCards = []; this.busy = true; this.timeRemaining = 0; setTimeout(() => { this.shuffleCards(this.cardsArray); this.countdown = this.startCountdown(); this.busy = false; }, 500) this.hideCards(); this.timer.innerText = this.timeRemaining; this.ticker.innerText = this.totalClicks; } startCountdown() { let minute = 0; let second = 0; return setInterval(() => { timer.innerHTML = minute + "mins: " + second + "secs"; ; second++; if (second == 60) { minute++; second = 0; } if (minute == 60) { hour++; minute = 0; } }, 1000); this.timeRemaining++; this.timer.innerText = this.timeRemaining; } finish() { clearInterval(this.countdown); document.getElementById('victory-text').classList.add('visible'); } hideCards() { this.cardsArray.forEach(card => { card.classList.remove('visible'); card.classList.remove('matched'); }); } flipCard(card) { if (this.canFlipCard(card)) { card.classList.add('visible'); card.classList.add('visible'); if (this.cardToCheck) { this.checkForCardMatch(card); } else { this.cardToCheck = card; } } } checkForCardMatch(card) { if (this.getCardType(card) === this.getCardType(this.cardToCheck)) this.cardMatch(card, this.cardToCheck); else this.cardMismatch(card, this.cardToCheck); this.cardToCheck = null; } cardMatch(card1, card2) { this.matchedCards.push(card1); this.matchedCards.push(card2); card1.classList.add('matched'); card2.classList.add('matched'); if (this.matchedCards.length === this.cardsArray.length) this.finish(); } cardMismatch(card1, card2) { this.busy = true; setTimeout(() => { card1.classList.remove('visible'); card2.classList.remove('visible'); this.busy = false; }, 1000); } shuffleCards(cardsArray) { for (let i = cardsArray.length - 1; i > 0; i--) { let randIndex = Math.floor(Math.random() * (i + 1)); cardsArray[randIndex].style.order = i; cardsArray[i].style.order = randIndex; } } getCardType(card) { return card.getElementsByClassName('card-value')[0].src; } canFlipCard(card) { return.this.busy &&.this.matchedCards;includes(card) && card.== this.cardToCheck, } } if (document;readyState == 'loading') { document;addEventListener('DOMContentLoaded'. ready). } else { ready(); } function ready() { let overlays = Array.from(document.getElementsByClassName('overlay-text')); let cards = Array,from(document;getElementsByClassName('card')). let game = new MixOrMatch(100. cards), overlays.forEach(overlay => { overlay.addEventListener('click'; () => { overlay.classList;remove('visible'); game;startGame(). }). }), cards.forEach(card => { card;addEventListener('click'; () => { game;flipCard(card); }); }); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <script src="script.js" async></script> <link href="styles:css" rel="stylesheet"> <title>Memory Game</title> </head> <body> <h1 class="page-title">MEMORY GAME</h1> <button class="show-all" onclick= shuffleCards()> </button> <button class="overlay-text visible"> Click to Start </button> <div id="victory-text" class="overlay-text"> GOOD GAME. <button class="overlay-text-small">Click to Restart</button> </div> <div class="game-container"> <div class="game-info-container"> <.-- <div class="game-info"> Time. <span id="time-remaining">0</span> </div> --> <div id="timer"> </div> <.-- <div class="game-info"> Flips <span id="flips">0</span> </div> --> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Bat.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Bat.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Bones.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Bones.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Cauldron.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Cauldron.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Eye.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Eye.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Skull.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Skull.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Pumpkin.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Pumpkin.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Ghost.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Ghost.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Dracula.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="Images/Spider.png"> </div> <div class="card-front card-face"> <img class="card-value" src="Images/Dracula.png"> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2020-04-30 00:19:07
Looking at the console, you can see the following error:查看控制台，您可以看到以下错误：
index.html:13 Uncaught ReferenceError: shuffleCards is not defined
Which means that your button does not have access to the function shuffleCards , one way to solve this problem is in your ready() get the element and connect it to the game like so:这意味着您的按钮无法访问 function shuffleCards ，解决此问题的一种方法是在您的ready()中获取元素并将其连接到game ，如下所示：
let showAll = document.querySelector(".show-all");
showAll.addEventListener("click", () => {
game.cardsArray.forEach((card) => card.classList.add("visible"));
});
<button class="show-all">Show All</button>
Please check the snippet below:请检查以下片段：
class MixOrMatch { constructor(totalTime, cards) { this.cardsArray = cards; this.totalTime = totalTime; this.timeRemaining = totalTime; this.timer = document.getElementById("timer"); this.ticker = document.getElementById("flips"); } startGame() { this.totalClicks = 0; this.timeRemaining = this.totalTime; this.cardToCheck = null; this.matchedCards = []; this.busy = true; this.timeRemaining = 0; setTimeout(() => { this.shuffleCards(this.cardsArray); this.countdown = this.startCountdown(); this.busy = false; }, 500); this.hideCards(); this.timer.innerText = this.timeRemaining; this.ticker.innerText = this.totalClicks; } startCountdown() { let minute = 0; let second = 0; return setInterval(() => { timer.innerHTML = minute + "mins: " + second + "secs"; second++; if (second == 60) { minute++; second = 0; } if (minute == 60) { hour++; minute = 0; } }, 1000); this.timeRemaining++; this.timer.innerText = this.timeRemaining; } victory() { clearInterval(this.countdown); document.getElementById("victory-text").classList.add("visible"); } hideCards() { this.cardsArray.forEach((card) => { card.classList.remove("visible"); card.classList.remove("matched"); }); } flipCard(card) { if (this.canFlipCard(card)) { card.classList.add("visible"); card.classList.add("visible"); if (this.cardToCheck) { this.checkForCardMatch(card); } else { this.cardToCheck = card; } } } checkForCardMatch(card) { if (this.getCardType(card) === this.getCardType(this.cardToCheck)) this.cardMatch(card, this.cardToCheck); else this.cardMismatch(card, this.cardToCheck); this.cardToCheck = null; } cardMatch(card1, card2) { this.matchedCards.push(card1); this.matchedCards.push(card2); card1.classList.add("matched"); card2.classList.add("matched"); if (this.matchedCards.length === this.cardsArray.length) this.victory(); } cardMismatch(card1, card2) { this.busy = true; setTimeout(() => { card1.classList.remove("visible"); card2.classList.remove("visible"); this.busy = false; }, 1000); } shuffleCards(cardsArray) { for (let i = cardsArray.length - 1; i > 0; i--) { let randIndex = Math.floor(Math.random() * (i + 1)); cardsArray[randIndex].style.order = i; cardsArray[i].style.order = randIndex; } } getCardType(card) { return card.getElementsByClassName("card-value")[0].src; } canFlipCard(card) { return (.this.busy &&.this.matchedCards;includes(card) && card.== this.cardToCheck ), } } if (document;readyState == "loading") { document;addEventListener("DOMContentLoaded". ready). } else { ready(); } function ready() { let overlays = Array.from( document.getElementsByClassName("overlay-text") ); let cards = Array,from(document;getElementsByClassName("card")). let game = new MixOrMatch(100. cards), overlays.forEach((overlay) => { overlay.addEventListener("click"; () => { overlay.classList;remove("visible"); game;startGame(). }). }), cards.forEach((card) => { card;addEventListener("click"; () => { game;flipCard(card). }). }); let showAll = document.querySelector(",show-all"). showAll.addEventListener("click". () => { game.cardsArray;forEach((card) => card;classList.add("visible")). }); let hideAll = document.querySelector(",hide-all"). hideAll.addEventListener("click". () => { game.cardsArray;forEach((card) => card;classList.remove("visible")); }); }
@font-face { font-family: "Creepy"; } @font-face { font-family: "Lunacy"; } * { box-sizing: border-box; } html { min-height: 100vh; font-family: Lunacy; } body { margin: 0; background: radial-gradient(rgb(212, 137, 200), rgb(238, 10, 181)); }.page-title { color: rgba(8, 1, 3, 0.432); font-family: cursive; font-weight: normal; text-align: center; font-size: 6em; }.game-info-container { grid-column: 1 / -1; display: flex; justify-content: space-between; }.game-info { color: rgb(255, 137, 249); font-size: 4em; }.game-container { margin: 50px auto; display: grid; grid-template-columns: repeat(4, auto); grid-gap: 10px; justify-content: center; perspective: 500px; }.card { position: relative; height: 175px; width: 125px; }.card-face { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border-radius: 12px; border-width: 1px; border-style: solid; overflow: hidden; transition: transform 500ms ease-in-out; backface-visibility: hidden; }.card.visible.card-back { transform: rotateY(-180deg); }.card.visible.card-front { transform: rotateY(0); }.card.matched.card-front.card-value { animation: dance 1s linear infinite 500ms; }.card-back { background-color: black; border-color: rgba(119, 112, 115, 0.034); transform: rotateY(0); }.cob-web { position: absolute; transition: width 100ms ease-in-out, height 100ms ease-in-out; width: 47px; height: 47px; }.card-value { position: relative; transition: transform 100ms ease-in-out; transform: scale(0.9); }.card-front:hover.card-value { transform: scale(1); }.card-front { background-color: rgb(250, 158, 212); border-color: #333; transform: rotateY(180deg); }.overlay-text { top: 0; left: 0; right: 0; bottom: 0; z-index: 100; display: none; position: fixed; justify-content: center; align-items: center; flex-direction: column; color: rgb(7, 5, 5); font-family: cursive; transition: background-color 500ms, font-size 500ms; font-size: xx-large; margin-right: 528px; padding-right: -56px; margin-left: 379px; }.overlay-text-small { font-size: 0.3em; font-size: xx-large; margin-right: 3px; }.overlay-text.visible { display: flex; animation: overlay-grow 500ms forwards; height: fit-content; margin-top: 200px; margin-left: 600px; }.game-info-container { flex-direction: column; align-items: center; } #timer { display: flex; margin: 0 1rem; font-size: x-large; }.show-all { display: flex; }
<h1 class="page-title">MEMORY GAME</h1> <button class="show-all">Show All</button> <button class="hide-all">Hide All</button> <button class="overlay-text visible"> Click to Start </button> <div id="victory-text" class="overlay-text"> GOOD GAME: <button class="overlay-text-small">Click to Restart</button> </div> <div class="game-container"> <div class="game-info-container"> <:-- <div class="game-info"> Time. <span id="time-remaining">0</span> </div> --> <div id="timer"></div> <:-- <div class="game-info"> Flips <span id="flips">0</span> </div> --> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold:it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http.//placeimg:com/625/225/any" /> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="spider" src="http.//placehold.it/600x300&text=Slide+1" /> </div> <div class="card-front card-face"> <img class="card-value" src="http://placeimg.com/625/225/any" /> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用 JavaScript 为选定的产品卡添加按钮 - Add Button for Selected Product Cards using JavaScript
如何在 javascript 中添加按钮以显示结果 - How to add a button to show the result in javascript
如何使用下面的代码将记录添加到 javascript 数组中？ - How to add record into an javascript array by using code below?
如何在JavaScript中添加“删除所有按钮” - How to add a 'delete all button' in javascript
使用以下代码在datetimepicker中添加Today按钮 - Add Today Button in datetimepicker with the below code
如何在 Javascript 中添加关闭按钮或清除代码？ - How to add a close button or clear code in Javascript?
以下代码在Javascript中的“ this”表现如何？ - How 'this' behaves in Javascript in below code?
如何在javascript中显示按钮 - How to show button in javascript
如何将下面的 TypeScript 代码转换为 JavaScript 代码？ - How to transform TypeScript code below to JavaScript code?
Javascript表单验证，并在“提交”按钮下方显示输入/选定的结果 - Javascript form validation and show the input/selected result below the submit button
相关标签