memory-game-in-javascript

[utterances-bot]

How to Create a Memory Game in JavaScript - Webtips

In this tutorial, we will be looking into how you can recreate a memory game with flipping cards in vanially JavaScript. GitHub link is also provided.

https://www.webtips.dev/memory-game-in-javascript

[EtnoPolino]

it's seriously hard for beginning level, that i fail to understand what javaScript knowledge im supposed to learn.

[flowforfrank]

it's seriously hard for beginning level, that i fail to understand what javaScript knowledge im supposed to learn. Hey @EtnoPolino

I suggest checking out the following topics to get a better understanding of JavaScript at a basic level:

• Data Types
  • For some interesting topics on type conversion, that are not required but you might find it interesting:
  • Type Conversion
  • Advanced Type Conversion
• Variables
• Functions
• Arrays
• Objects
  • this keyword
• The DOM
  • Here some other web apis too such as fetch or local storage

I also recommend checking out these interview questions that can help you get a better understanding of JavaScript, as well as these smaller JavaScript tips. Let me know if there is any specific topic you are looking for.

[drducmanh]

How to stop and reset the game without reload page? I've wrote this function to stop the game via button, but not work!

function stopGame(){ state.gameStarted = false; state.flippedCards = 0; state.totalFlips = 0; state.totalTime = 0; state.loop = null; state.gameStarted = false; clearInterval(state.loop); flipBackCards(); }

Please help me!!! Thank you!

[drducmanh]

Oh! i've just move the line state.loop = null; to below clearInterval(state.loop); and it's work perfectly. Thank you!

const stopGame = ()=>{ state.gameStarted = false; state.flippedCards = 0; state.totalFlips = 0; state.totalTime = 0; state.gameStarted = false; clearInterval(state.loop); state.loop = null; selectors.moves.innerText = 0 moves selectors.timer.innerText = time 0 sec }

[CodedavidperloW]

What can be done if you want to switch the emojis with a picture? In the javascript I saw you added emojis. But what if you want to pair a picture and the name of what is in the picture.

[flowforfrank]

What can be done if you want to switch the emojis with a picture? In the javascript I saw you added emojis. But what if you want to pair a picture and the name of what is in the picture.

Hey @CodedavidperloW, thanks for the question. With the bare minimum amount of changes, I'd approach this in the following way:

const images = [
    { src: 'https://bit.ly/3JEnbxb', alt: 'React' },
    { src: 'https://bit.ly/3JEnbxb', alt: 'JS' },
    { src: 'https://bit.ly/3JEnbxb', alt: 'HTML' },
    { src: 'https://bit.ly/3JEnbxb', alt: 'CSS' },
    { src: 'https://bit.ly/3JEnbxb', alt: 'Svelte' },
    { src: 'https://bit.ly/3JEnbxb', alt: 'Jest' },
    { src: 'https://bit.ly/3JEnbxb', alt: 'Cypress' },
    { src: 'https://bit.ly/3JEnbxb', alt: 'Sass' },
    { src: 'https://bit.ly/3JEnbxb', alt: 'AI' },
    { src: 'https://bit.ly/3JEnbxb', alt: 'Phaser' }
]
const picks = pickRandom(images, (dimensions * dimensions) / 2) 
const items = shuffle([...picks, ...picks])
const cards = `
    <div class="board" style="grid-template-columns: repeat(${dimensions}, auto)">
        ${items.map(item => `
            <div class="card">
                <div class="card-front">${item.alt}</div>
                <div class="card-back">
                    <img src="${item.src}" />
                </div>
            </div>
        `).join('')}
    </div>
`

Let me explain what has been changed:

• First, we change the emojis array to an images holding the source and text for each image.
• We can pass the correct attributes into card-front (item.alt) and card-back (item.src) respectively
• For card-back, we can inject an image element with the src attribute pointing to item.src
• If you rename the array from emojis to images, don't forget to update the reference inside the pickRandom fn.

We can also add some additional styles to make the text more legible, and fit the image inside the cards:

.card-front {
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

img {
   width: 100%;
}

Hope this helps

I created a branch with the changes so it is easier to understand where this has been changed, you can find it here: https://github.com/flowforfrank/memory-game/compare/master...using-images

[CodedavidperloW]

Wow thank you, I am a new JS student and really liked your project. I hope to learn from it and help me build my portfolio. I just saw this message now and since found a video explaining how to make a memory game and I felt that the skill level was just right for me. The next time I try doing something like this I will follow your set up. BTW I saw the video on YouTube for your project and it was very well done!