Как создать модальное изображение в игре памяти для согласованного изображения - PullRequest
Новая
       21

Как создать модальное изображение в игре памяти для согласованного изображения

0 голосов
/ 08 апреля 2020

Я занимаюсь разработкой игры с набором изображений из каталога изображений.

Игра работает отлично. Но я хотел добавить модальное изображение в игру. Как и при сопоставлении изображения, оно должно появиться в модели.

PHP: 

<?php

$dire="Annotated Dataset/images/";
$images = glob($dire. '*.{jpg,jpeg}', GLOB_BRACE);
shuffle($images);
$images=array_slice($images,0,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();
    }
}
}

код моей игры, где я перемешиваю изображения и помещаю их в карту. Лог c для проверки соответствия приведен ниже. 

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();
}
}

Я хотел всплывающее модальное окно для отображения изображения после установления соответствия. Я полностью потерян в этом разделе. Может ли кто-нибудь помочь мне, дав мне несколько идей или решений о том, как сделать изображение модальным для согласованного изображения.

...