D4mations.com

Memory Game Programming JavaScript Tutorial



Lesson Code: http://www.developphp.com/video/JavaScript/Memory-Game-Programming-Tutorial
In this programming exercise you can learn to create a JavaScript powered memory game that you can easily enhance and extend as your skills improve as a JavaScript programmer. We will use HTML and CSS for the looks and user interface.

Original source

d4mer

, , , , , , , , , , , , , , , , , , ,

50 responses to “Memory Game Programming JavaScript Tutorial”

  2. None of my card images are coming up, even though my image is in the database and the urls match up. I don't understand why this is happening; I'm not missing any semicolons either.

  3. can anyone please edit the program and put score in this game!! I need it asap! And also if a match is made then can anyone make the cards disappear!! Your help is highly appreciated.

  5. hey Adam, im new to programming, but i do understand enough of whats going on. although i have an uncaught bug after your tutorial and i dont understand whats causing it. the ifs in memoryFlipTile are only calling flip 2 back the first time i flip 2 cards, afterwards it just lets me flip all the cards over, any ideas of what to look for while im debugging?

  10. Hi Adam,

    I would repeat one of the questions below, as I did not find an reply to it, if I may : How to add images to cards instead of letters?
    In fact, I was trying to get one side image and the other side the name of the image. Many thanks

  21. hi, i'd like to implement your game but i have a problem. all my tiles form one big image so i can't use div#memory-board >div background… (i'm using different images as tiles). is it also possible to make a memory card game on this way?

  23. How can I add images to the back side of the cards when it first put it down. I did to the css DIV , the radical gradient works , the image does not.  /* works          background: radial-gradient(circle, black, white);*/
     /* no worky    background: url(images/imagebg.jpg);*/
      border:#000 1px solid;
     width:71px;
     height:71px;
     float:left;
     margin:10px;
     padding:20px;
     font-size:18px;
     cursor:pointer;
     text-align:center;

  26. Hey Adam. I know someone already asked this but it never got a reply. If you click on two tiles that you already correctly matched it continues to count as another match. So in my case with 8 possible matches all you have to do is make one match and then just repeatedly click the two to make 7 more matches without flipping over anymore cards. Also if you click one card you matched and a new card it flips the one card you already matched back over. Obviously the problem is your allowed to continue to click on cards you already matched when you shouldnt be able too. Im sure your aware and probably left it out on purpose to get people to figure out how to fix it but anyone know of solution?

  29. What if I want a card to match another card but with a different content? For instance there are cards like "tiger", "rose", "tuna", so I want the card "tiger" match the card "animal". How to manage to do that?
    Thank you! awesome video btw

  30. Adam, this is a great video. I have one question. I am trying to include this on my web site. I have three files: HTML, CSS, and jQuery files. I copied the HTML into the HTML file, the CSS into the CSS file and the jQuery into the jQuery file. When I run this it only show a gray box and no cards. Clicking anywhere in the box does not work either. Any suggestions on how I might link the three files? I have other options that use these three files and everything else works fine. Thank you Kydolphin2013.

  32. Excellent video, really well explained, I recommend this highly for anyone learning JS.

    One comment: I had to take out the 'on repeat' on two of the lines setting the background style back to the image, within the flip2back function; with 'on repeat', my image did not display consistently with the CSS settings.

    Thanks for that script and video!

  33. Hey, I am using this game, but there is a bug where if you accidentally click on a card thats already turned over, it will turn it back around. Is there a way to make it impossible to click on cards that are already turned over?

  35. hi.. can u plz tell me how can i insert a timer into the above code..so that when the game starts the timer starts..and when the user finishes the game it should display how much time the user took to finish the game..thanks

  37. Hi 🙂 Nice Tutorial, thank you a lot!
    After reading a few comments, I still don't get how to use colors instead of letters for the memory cards! Actually I don't want to use images/jpg's, just chance the array, but when I do, the cards dissapear.. can anybody help me :/? It's quite important! Thanks in anticipation (>.<)/

  46. I was trying to simplify the code, why can't I put
    "// Clear both arrays
    memory_values = [];
    memory_tile_ids = [];"

    right after the if-else statement? rather than writing it out twice. It gives some strange behaviour though…

  48. Only one complaint, but first, I am very happy to have stumbled onto this corner of the Internet. Okay, to the complaint. The white spaces at the corner of the memory cards creates a powerful optical illusion that scatters dark dots across the board. This is probably one of the strongest examples I've seen of this phenomena, but probably not what you were going for.

  50. Hey Adam how about when i flip the card and it the same it disappear ? how do you code that ? and what if by level ? can you answer my questions please for my thesis requirements 

Leave a Reply