user profile image

A JavaScript memory game on Codepen ! Click the cards and find matches to win.. you know how to play. Hope you like it :)

Comments

  1. I love memory games! Reminds me of my first game ever http://flip.zerospree.com/

  2. Nice game. But I broke it! I clicked on the same card and he marked it as right. :D

  3. Well done dude!

  4. Thanks guys! :) @visualcookie fixed that bug

  5. Thanks @amos ! I agree you do rock haha! Do you mean CSS instead of using images? That would be sick, fork it up!

  6. @amos I don't know about best, but seemed best route to me when I did it. SVG would be pretty cool probably.

  7. I didn't see Internet Explorer in the list. What's up with that? Just playin. Stay awesome!

  8. Seems the .back img persists when the card is picked. I added the following CSS to resolve the issue in Firefox 39.0

    .card .picked .back img {
       display:none;
    }
    
  9. Hey Nate. I got da perfect use for this. Send you a fork when I done.

  10. Great work Nate.

    I'm a high school tech teacher and I wanted to use your project as one of our coding projects. I'm having trouble running the JavaScript. Is there something I'm missing? I'm a JS newbie.

    thanks!

  11. @buildhouse Hey Justin, thanks! That sounds awesome :)

    I'm guessing that you might have not included jQuery.

    You can add

    //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

    (In a script tag.. CodePen won't let me post script tags oops)

    Before the code from the pen, and it should work. Let me know if that doesn't work out.

  12. This is awesome! I used it on one of my projects. I'll let you know when it's finished. Great work!

  13. Nice work Nate!

    I noticed that when playing several games, the reset function is called 1,2,4,8... times after each game times so I changed the binding a bit:

    from this.$restartButton.on("click", $.proxy(this.reset, this)); to $("button.restart").unbind().click( $.proxy(this.reset, this));

    Thanks for sharing your project

  14. I've just started learning the new CSS Grid thing, and I instantly thought about to apply that to a memory game. I googled and your pen came up in the top results!

    I have a question, if I only want the card flipping effect upon click, which part of the CSS and JS code would I need (one thing on the front and another on the back)?

    Many thanks!

  15. How could I change this to just be 1 winner? e.g. only 2 cards match?

  16. Hi there. Awesome memory game! I'm trying to use this code as a blueprint for my own memory game but when I copy and paste the code it doesn't work. Help, please.

    Sincerely, a true fan of your work :)

  17. AWESOME NOT KIDDING

    I like this very much. Althogh there is a bug. whenever you click play again, you cant turn the cards. please fix

  18. hmmm... it's just my computer. nevermind.

  19. @zerospree nice game... I FAILed.

  20. Wonderful Pen!

    Unfortunately, I'm having the same problem as David.

    When I win and click Play Again, the cards appear but I can no longer click them. Anyone know why that would be?

    I'm not getting any errors in the console.

  21. How can I make the flip slow and have a bit of a delay when they are both flipped over? Also, when I get a match I would like the background color of the cards to change to a different color? Love the game, trying to make a version for some young children so they need a little more time to remember the cards. Thanks

  22. anyone find out what the bug is for chrome mac that play again makes cards not clickable?

  23. wow, it's really good

    Could it be tweaked to have trios instead of pairs?

  24. Hi I am new to coding and am struggling with a problem. I have found your excellent open source coding to create a memory game, However, they are all matching pictures. What I want to do is match two pictures which are not the same eg. a horse and a foal, a lion and the word LION. Anyone out there to help me? Terry

  25. Hey @natewiley. This ist a very nice job! I've a problem to run this game in Internet Explorer. can you help me to run it in ie?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...