DrewBradley / memory-game

This is a basic memory, card matching game. Players choose two cards, if they match, the match is tallied, and the cards stay face up. If not, they flip back over.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Memory Game

This project was bootstrapped with Create React App.

Overview

This is a basic memory, card matching game. Players choose two cards, if they match, the match is tallied, and the cards stay face up. If not, they flip back over.

Technologies

This was built with Create React App and uses HTML and CSS.

Architecture

The three main components in this project are Header.js, Board.js, and Card.js.

  • Header.js contains the title, match counter, and 'new game' button.
  • Board.js is the gameboard and contains most of the logic, and renders the grid that displays the cards.
  • Card.js contains the JSX and data that relates to the individual card.

Future Updates

  • Fix "double click" bug: If a user clicks the same card twice, it is marked as a "match". Each card has a unique ID, so the cards IDs must be different, but the cards images, much match.

Images

Mobile View Win Screen

Thanks and Contributors

Special thanks to Brian Forbes for helping architect the logic that allowed cards to be matched. Thank you to Cameron Aragon and Matthew Dean for code review and support. This application was built by Drew Bradley

About

This is a basic memory, card matching game. Players choose two cards, if they match, the match is tallied, and the cards stay face up. If not, they flip back over.


Languages

Language:JavaScript 61.0%Language:CSS 29.2%Language:HTML 9.7%