This is a web version of your typical memory card game, where the player clicks or taps cards to turn them over and reveal the image on the other side, with the goal of matching all pairs as quickly as possible.
This is the second project for my Front-End Nanodegree through Udacity, for which I was awarded a merit scholarship by Grow with Google. It's the first significant app I've built from scratch (yep, I chose to eschew the starter files!) combining my knowledge of HTML, CSS, and JavaScript.
Because I'm interested in architecture, I chose to have players match buildings from around the world (see image links below for a list of buildings).
The cards for gameplay are built in the DOM. Each time the game is started or reset, the cards are rebuilt and randomized. Matches are determined by comparing CSS classes (pair-1, pair-2, etc.) whenever two cards have been clicked. The app tracks clicks and moves, times gameplay, and calculates a "rating" based on how many moves a player takes to find all matches.
The game has no dependencies. It does make use of Font Awesome and Google Fonts, which it accesses through stylesheet links in the document head rather than making you download them.
If you encounter an error while using, I would be so thrilled to be notified!!
Please submit an issue if you find one and don't want to fix it yourself. If you do want to fix an issue yourself, or if you'd like to update a feature, please create your pull request on a new branch rather than on the master branch so I can easily merge it in.
I am not looking to implement new features at this point, but perhaps in the future. Nothing is ever finished, right?
All photos sourced from Pexels under the Creative Commons Zero (CCO) license and edited by me.
Original Image Links
- Flatiron Building, NYC
- Eiffel Tower, Paris
- Opera House, Sydney
- Taipei 101
- Leaning Tower of Pisa
- Big Ben (Elizabeth Tower), London
- Oriental Pearl Tower, Shanghai
- Burj Al Arab, Dubai
A few pages I referenced while coding:
- https://ux.stackexchange.com/questions/91672/how-to-limit-mouse-clicks-in-javascript
- CSS-Tricks, and especially this article by Sara Soueidan
- My own time-tracking project
- MDN, always and forever
This is a student project, but I did spend a lot of hours on it! Please feel free to use, but please let me know if you do so.