我一直在开发带有图像目录中的一组图像的记忆游戏。
游戏正常。但是我想在游戏中添加图像模式。就像匹配图像时一样，该图像应在模型中弹出。
PHP：
<?php
$dire="Annotated Dataset/images/";
$images = glob($dire. '*.{jpg,jpeg}',GLOB_BRACE);
shuffle($images);
$images=array_slice($images,8);
$_SESSION['images']=$images;
?>
<body>
<table class="game-board">
<tbody class="game-grid">
<tr class="game-grid-row">
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[0]"; ?>" alt="cake1">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[1]"; ?>" alt="cake2">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[2]"; ?>" alt="cake3">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[3]"; ?>" alt="cake4">
</td>
</tr>
<tr class="game-grid-row">
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[4]"; ?>" alt="cake5">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[5]"; ?>" alt="cake6">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[6]"; ?>" alt="cake7">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[7]"; ?>" alt="cake8">
</td>
</tr>
<tr class="game-grid-row">
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[0]"; ?>" alt="cake1">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[1]"; ?>" alt="cake2">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[2]"; ?>" alt="cake3">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[3]"; ?>" alt="cake4">
</td>
</tr>
<tr class="game-grid-row">
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[4]"; ?>" alt="cake5">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[5]"; ?>" alt="cake6">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[6]"; ?>" alt="cake7">
</td>
<td class="game-card">
<img class="game-card-img" src="<?php echo "$images[7]"; ?>" alt="cake8">
</td>
</tr>
</tbody>
</table>
javascript：
let cardElements = document.getElementsByClassname('game-card');
let cardElementsArray = [...cardElements];
let imgElements = document.getElementsByClassname('game-card-img');
let imgElementsArray = [...imgElements];
let openedCards = [];
let matchedCards = [];
function startGame() {
//shuffle cards
let shuffledImages = shuffle(imgElementsArray);
for(i=0; i<shuffledImages.length; i++) {
//remove all images from previous games from each card (if any)
cardElements[i].innerHTML = "";
//add the shuffled images to each card
cardElements[i].appendChild(shuffledImages[i]);
cardElements[i].type = `${shuffledImages[i].alt}`;
//remove all extra classes for game play
cardElements[i].classList.remove("show","open","match","disabled");
cardElements[i].children[0].classList.remove("show-img");
}
//listen for events on the cards
for(let i = 0; i < cardElementsArray.length; i++) {
cardElementsArray[i].addEventListener("click",displayCard)
}
//when game starts show all the cards for a split second
flashCards();
//reset moves
moves = 0;
counter.innerText = `${moves} move(s)`;
//reset star rating
for(let i=0; i<starElementsArray.length; i++) {
starElementsArray[i].style.opacity = 1;
}
//Reset Timer on game reset
timer.innerHTML = '0 mins 0 secs';
clearInterval(interval);
}
function flashCards() {
for(i=0; i<cardElements.length; i++) {
cardElements[i].children[0].classList.add("show-img")
}
setTimeout(function(){
for(i=0; i<cardElements.length; i++) {
cardElements[i].children[0].classList.remove("show-img")
}
},1000)
}
function displayCard() {
this.children[0].classList.toggle('show-img');
this.classList.toggle("open");
this.classList.toggle("show");
this.classList.toggle("disabled");
cardOpen(this);
}
function cardOpen(card) {
openedCards.push(card);
let len = openedCards.length;
if(len === 2) {
moveCounter();
if(openedCards[0].type === openedCards[1].type) {
matched();
} else {
unmatched();
}
}
}
上面是我的游戏代码，在其中我将图像随机排列并将其放入卡中。检查匹配项的逻辑如下。
function matched() {
openedCards[0].classList.add("match");
openedCards[1].classList.add("match");
openedCards[0].classList.remove("show","open");
openedCards[1].classList.remove("show","open");
matchedCards.push(openedCards[0]);
matchedCards.push(openedCards[1]);
openedCards = [];
if(matchedCards.length == 16) {
endGame();
}
}
我想要一个匹配后显示图像的弹出模式。我在本节中完全迷失了。有人可以通过给我一些有关如何使匹配的图像变为模态的想法或解决方案来帮助我。