Code Monkey home page Code Monkey logo

memory-game's Introduction

Memory Game

For this assignment, you'll be building a memory game in the browser using HTML, CSS, and JavaScript. Your goal is to build a card-based memory game.

Memory Game

Players will be shown a collection of cards, face down, and can click on a card to reveal what's underneath.

After clicking on two cards, the game should check to see whether they match. If they do, they will remain facing up.

If not, the cards should remain displayed to the player for one second, and then flip back down.

The goal of the game is to match up all the pairs.

You can find a 30 second video demo of a possible solution here.

You should submit a zip file containing your code as part of this assessment.

Part One: Reading the code

Take a look at the starter code provided.

  • We have an array of colors which we shuffle and then loop over to create 10 div elements on the page and give them a class of the color we loop over.
  • We then append the div elements to the DOM and add an event listener for a "click" for each of the elements.

Make sure to read through the code before continuing on!

Part Two: Implementing clicks and matches

  • Clicking a card should change the background color to be the color of the class it has.
  • Users should only be able to change at most two cards at a time.
  • Clicking on two matching cards should be a "match" โ€” those cards should stay face up.
  • When clicking two cards that are not a match, they should stay turned over for at least 1 second before they hide the color again. You should make sure to use a setTimeout so that you can execute code after one second.

Part Three: Gotchas

  • Make sure this works only if you click on two different cards โ€” clicking the same card twice shouldn't count as a match.
  • Make sure that you cannot click too quickly and guess more than two cards at a time.

Further Study

  • Add a button that when clicked will start the game.
  • Add a button that when clicked will restart the game once it has ended.
  • For every guess made, increment a score variable and display the score while the game is played.
  • Store the lowest-scoring game in local storage, so that players can see a record of the best game played.
  • Allow for any number of cards to appear, rather than always using the same deck.
  • Instead of hard-coding colors, try something different like random colors or even images.

memory-game's People

Contributors

nathanrydel avatar

Watchers

 avatar

memory-game's Issues

[BUG] Favicon Missing

failed to update path in index.html when I updated the file structure

  • change path
  • merge change

[BUG] Score incorrect when starting new game with pending card

Bug occurs when one card is flipped and a user presses "New Game"

The next card clicked on the new game board causes the score to increment incorrectly.

The new game will have Score: 1 on first card click
The cards get disabled as expected for second card
setTimeout for 1000ms occurs

After timeout,
first card click flips card as expected,
second card click increments score as expected

[ENHANCEMENT] - Add an image/gif mode

Instead of just colors, have the cards be images or gifs

  • Add image/gif button to switch modes
  • Have each card access an API to grab the src for the cards
  • Make sure to generate pairs

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.