gpt4 book ai didi

javascript - 如何将显示所有卡片按钮添加到下面的 javascript 代码中?

转载 作者:行者123 更新时间:2023-12-01 17:17:32 25 4
gpt4 key购买 nike

我这里有这段代码是用 javascript、HTML 和 CSS 语言编写的,用于内存游戏,我想在这里的代码中添加一个显示所有按钮(点击它会显示所有卡片几秒钟,然后再次翻转)但是它不适合我,我在下面发布了代码,所以如果你能提供帮助,我将不胜感激。提前致谢: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>

最佳答案

查看控制台,可以看到如下错误:

index.html:13 Uncaught ReferenceError: shuffleCards is not defined

这意味着您的按钮无法访问函数 shuffleCards,解决此问题的一种方法是在您的 ready() 中获取元素并将其连接到游戏是这样的:

let showAll = document.querySelector(".show-all");
showAll.addEventListener("click", () => {
game.cardsArray.forEach((card) => card.classList.add("visible"));
});

<button class="show-all">Show All</button>

请检查以下代码段:

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>

关于javascript - 如何将显示所有卡片按钮添加到下面的 javascript 代码中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61513709/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com