kubowania/memory-game

JavaScript, HTML and CSS grid-based game

Memory Game

A retro grid-based game in vanilla JavaScript, HTML and CSS

View the full walkthrough here

Memory Game, also known as the Concentration card game or Matching Game, is a simple card game where you need to match pairs by turn over 2 cards at a time. There are so many versions of it it is hard to in down it's exact origin. There are claims that the famuos writer of Huckleberry Finn, Mark Twain invented his own version. I googled it and whatever it is, it looks more like a way of trying to figure out how much tax you owe rather than match cards.

In this repo, I will be putting extra focus on setting Attributes in JavaScript. If you want to learn how to use setAttritube and getAttribute effectively, please have a look at my code.

I have kept the styling at a bare miniumum for you to go wild and make it your own. Please tag me as I would LOVE to see your game!!!

What inbuilt functions are we going to focus on?

• for loops
• addEventListener
• setAttribute
• getAttribute
• data-name
• document.querySelector
• createElement

Rules of Memory Game

• You will start by flipping over one card
• If the next card you flip matches, a pop up alert notifies you and you get +1 to your score
• These cards then disspear
• If the next card you flip does not match, a pop up alert notifies you of ths and the cards flip back
• The game continues until you match all the cards on the board

MIT Licence

Copyright (c) 2020 Ania Kubow

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*Translation: Ofcourse you can use this for you project! Just make sure to say where you got this from :)

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

memory-game's Issues

stop showing alert instead

stop showing alert
instead, show it in some h1 tag
on web page

Help!

I am not sure what I am doing, All I am getting is a blank page with "score." What am I doing wrong here? I thought I understood how to use java in the very basic sense, but I suppose not. lol

On clicking the white card the card comes into play when it shouldn't

Issue with White Card

Here's how the game should go

• If the player clicks on a new card the card should flip
• If the player clicks on an already played card the game should show a message that card is already played

The problem is white card is still being flipped which causes an error in the game.

Incorrect tag in app.js source code for the memory game

Source code on line 56 as follows: const grid = document.querySelector('.grid')

This should read: const grid = document.querySelector('#grid')

.grid should be #grid for the code to run correctly and match the tutorial

Line 52 of app.js missing semicolon

Revised:
];

The charset attribute on the script element is obsolete.

From line 7, column 3; to line 7, column 39
Just get rid of charset="utf-8" in the script tag.

The Array sort is not very random.

If you feed the images into the card array in order,
{ name: 'ice-cream', img: 'images/ice-cream.png' }, { name: 'ice-cream', img: 'images/ice-cream.png' },
The array.sort seems to place the cards next to each other on the game board.

you can select more than 2 cards to flip, resulting in game mechanics being confused

Hi,
if you click quickly to more than 2 cards you can flip as many cards as you want, resulting in majority of these cards stay flipped and game mechanics being confused

Games ok

Stray end tag link.

From line 6, column 43; to line 6, column 49
Just delete
Do not add /> in the link when you do this, it will not validate correctly.

I try it using my own photos (JPG!) -> I just see white board and score:

Dear Community,

What do I need to change in the code if I want to use my own photos with jpg?

For example

Instead of:

name: "blank",
img: "images/blank.png"

I renamed it to:

name: "church",
img: "images/church.jpg"

And I did the renaming of all the other parts of the code too.

Appreciate any help <3

Score is removed after completing game

The final score is omitted with "Congratulations! ...":

if you click during timeout you can flip others cards

Score only and a blank white page

Hey, I've gone over my code a lot and I can't seem to find out why I keep getting a white page with just the word "score" at the top. I've seen other people asking this question online but so far I haven't gotten an answer. HELP!

Move script to bottom <script src="app.js"></script>

Move that right above the for easier reading. Make sure to delete the one in the head.

Line 54 of app.js missing semicolon

Revised: cardArray.sort(() => 0.5 - Math.random());

Can't get DOM element through app.js BUT CAN in console

I followed tutorial by using this
const grid = document.querySelector('.grid') line to get the grid element

But I got undefined as the value of grid.

Then I tried the same line in console, I got the correct div element, and I could retrieve every dom objects I wanted.

I tried all the ElementSelector such as : getElementById, querySelectorAll etc, still I couldn't retrieve a single dom object using app.js.

I checked my html head, it was all good, I included all nessary links and files.

Then I copied all code from the original app.js, it worked with
document.addEventListener('DOMContentLoaded', () => {} included.

BUT when I removed it, it failed to work again.

I'm so confused, thanks for your answers.

If you click on one tile two times, it counts the score.

Restriction for multiple click on the same card

Hi @kubowania ,
Here, I noticed that if you try clicking on the same card, for every pair of clicks it is making a score. The game should not allow for multiple clicks.