Memory cards yugioh game

JavaScript
1

I try to build a card memory game but the images doesn’t display in the screen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Memory Game</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>  
    <h3>Score:<span id="result"></span></h3>
    <div class="grid">
        
    </div>

   

    <script src="app.js"></script>
</body>
</html>```

#grid {
width: 400px;
height: 300px;
display: flex;
flex-wrap: wrap;

}

body{
background-image: url(‘images/yami.png’);

}

document.addEventListener(‘DOMContentLoaded’, () => {
//card options by adding in const
const cardArray = [
{
name: ‘GreatMammothofGoldfine’,
img:‘images/GreatMammothofGoldfine.png’
},
{
name: ‘GreatMammothofGoldfine’,
img:‘images/GreatMammothofGoldfine.png’
},

     {
        name: 'crown-zombie',
        img:'images/crown-zombie.png'
     },
     {
        name: 'crown-zombie',
        img:'images/crown-zombie.png'
     },
     {
        name: 'dragon-zombie',
        img:'images/dragon-zombie.png'
     },
     {
        name: 'dragon-zombie',
        img:'images/dragon-zombie.png'
     },
     {
        name: 'armored-zombie',
        img:'images/armored-zombie.png'
     },
     {
        name: 'armored-zombie',
        img:'images/armored-zombie.png'
     },
     {
        name: 'Pumpking',
        img:'images/Pumpking.png'
     },
     
     {
        name: 'Pumpking',
        img:'images/Pumpking.png'
     },
     
     {
        name: 'TheSnakeHair',
        img:'images/TheSnakeHair.png'
     },
     
     {
        name: 'TheSnakeHair',
        img:'images/TheSnakeHair.png'
     }
     
]

})

const grid = document.querySelector(‘.grid’)
var cardsChosen =
var cardsChosenId =
//create your Board

function createBoard() {
for (let i = 0; i < cardArray.length; i++){
var card = document.createElement(‘img’)
card.setAttribute(‘src’, ‘images/call.png’)
card.setAttribute(‘data-id’, i)
card.addEventListener(‘click’, flipcard)
grid.appendChild(card)
}

}

//check for matches
function checkForMatch() {
var cards = document.querySelectorAll(‘img’)
const optionOneId = cardsChosenId[0]
const optionTwoId = cardsChosenId[1]
if (cardsChosen[0] === cardsChosen[1] ){
alert(‘You found a match’)

}

}

// flip your card
function flipCard(){
var cardId = this.getAttribute(‘data-id’)
cardsChosen.push(cardArray[cardId.name])
cardsChosenId.push(cardId)
this.setAttribute(‘src’, cardArray[cardId].img)
if (cardsChosen.length === 2) {
setTimeout (checkForMatch, 500)
}
}
createBoard()

2

Is the image path you are using correct?

Double check by listing the directory contents which has the index.html.
If the directory doesn’t have images in it, that might be why the code doesn’t find the images directory.
(Or you may need to to be use ./images/… )

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.