The memory game is a pretty interesting game, and has been around for a while. You are given a set of cards containing images which are turned to t...
For further actions, you may consider blocking this person and/or reporting abuse
Hello :) Thank you for posting a nice solution to this thrilling game. I want to use it on my website but I want to use my custom pictures. I copied the code from codepen but it doesn't work on the desktop. I put all the files in one folder and linked them together. Then I replaced your pictures with mine and placed them in the same folder. Still doesn't work. Do you know what can be the problem?
Hi, thank you for going through it, I really appreciate it.
If you want to use this project locally, the only issue that s suppose to occur is with the images. I am using a lot of images in the imgArray, so make sure you point all of them to your local images.
Also I have a blank image that I am using in like three places (createBoard function and checkMatch function). Make sure you point those also to your local images i.e blank.jpg.
Hope that answers your question.
Thank you.
thank you so much for your reply, I solved that problem, it's working with my own images now after I extracted zip file from Codepen (probably I linked sth wrong myself first ;) Now I'm struggling with another problem. I want to play sound each time we click pair of cards. I'm making a game for my students to learn English.
I don't know how to select the specific card from the array and put it into variable. Query selector won't work, document by ID either, maybe sth similar to this: function playSound() {
let selected = this.dataset.id;
cardsSelected.push(cardArray[selected].name => should I write the name of the card here?); every help much appreciated.
that's the address of my website where I placed it:
english-quiz.cba.pl/Memory%20game/...
Sorry for the late reply,
I have updated my codepen link and added sounds like you said. So if two different images are selected, an error sound, and if they are the same picture, a success sound. I am not really good with the audio api, but I hope that is what you want, tell me if you want any change.
It works like this, when you click on two images and it checks if they are the same or not, it sets the src of the audio source and loads it before playing it. Note that the loading is very important,
Thank you
Hi, thank you so much for your help! it really works! I will include it on my website. It's a little different than what I wanted but also nice. I want to include voice of a lector who will say the correct pronunciation of each card, eg. when they click "trousers" it should say: "trousers, etc. I will think about it. I'm looking for ways to access objects from the array with pictures (cardArray) and make a new variable, eg. var trousers = cardArray[0] and later function: playSound() case: trousers =>"trousers.mp3". Sth like that. I will work on it meantime. Thanks a lot!
Ok I think I have worked on it , the names you will use in each object will be basically the same name has the mp3 like you said.
So what I did was, everytime a card is clicked the name is pushed to an array, I got the name and I appended .mp3 to it and played it.
You can check the link again, but note that mine won't work since I dont have a fries.mp3 :).
And if your music will be in a different folder, you can do this.
source.src=
./music/data/${cardsSelected[1]}.mp3you can use the first or second value since they are basically the same name
Thank you so much. It's really kind of you to work on this problem for me. (it's not so common recently).
I will try your code and see how it works ;) All the best for you and good luck in your programming career!
No problem
I am glad I helped
and thank you
for me is better if I declare sound variable eg. let trousers = new Audio("./trousers.mp3") and later addEvent listener to a picture. Function playSound {trousers.play();}. it words well but how can I let the program know which condition has to be met to play sound. Because if I add event listener to grid or to img he plays sound for all of the pictures in the grid.
But how to choose these specific pictures? We need to label these picture somehow that if they are clicked sound will be played. Can you give me a hint cause I am quite frustrated with this problem and your first solution only play sound if 2 cards are picked either match or wrong. But what I meant is to play sound when every single card is clicked. And sound should be different depending on different card. For trousers => trousers.mp3 for skirt => skirt mp3, etc.
Good day,
like I said earlier, I am not really familiar with the audio api, so I cannot really tweak your method. So this is what I came up with.
Since everytime a card is clicked, we get the dataset-id and then use this to get the name from the array, you can easily play the sound from there
let clicked =cardArray[selected].name
cardsSelected.push(clicked);
source.src=
${clicked}.mp3audio.load()
audio.play()
I also updated it in the link.
But for your method, you can try
let clicked =cardArray[selected].name
cardsSelected.push(clicked);
let sound =new Audio(
./${clicked}.mp3)function playSound(sound){
sound.play()
}
playSound(sound).
This will be called each time a card is clicked, you can just simply interchange it with the one above. I commented this out in the codepen link.
hello bro ;) I did it
check my game out here:
english-quiz.cba.pl/Memory%20game/...
thanks for all your help
Whoa, I love this.
Well done :) :)
hello sir can you please help me i added audio in my game but 'm facing some issue with the audio
Hi there, I made my own Halloween version of this, but I noticed a problem. When you press the replay button to play again, clicking on the images doesn't do anything. I can't figure out what the problem is.
Ever solved the issue?
hello can you share the code with me