Record Reveal

Date: 3/11/2022

By: Frank Marra


Description:

Record Reveal is a new take on an old idea. You, the player, are presented with a grid of boxes each containing a music related symbol. Your goal is to find the pairs of boxes containing the same symbols. This will result in the boxes being cleared from the board, and revealing part of an album cover. Clear all of the boxes to see the full album art!

The game pulls in 80 album covers, 20 each from some of my favorite labels, to play with. At the current moment, these albums are pulled from the Discogs API. A future update will include more curated collections to choose from, as these are just 20 random covers from each of the 4 labels that are being used. Fork, clone, open, and enjoy!


Technologies Used:

  • Html
  • CSS
  • JavaScript
    • DOM Manipulation
    • API Calling
    • Local Storage

Getting Started:

After reading the instructions on the "Info page, either click the link that says "click here to play", or click on the "Game" link in the nav bar.

image

This will take you to the game screen, where all you have to do is click the "Let's Play!" button and start matching. After clearing all of the boxes, the album artist and title will be displayed with the full artwork. You can also now click on the "Next Album" button to play again.

Each correct guess will get you 10 points, while each wrong guess will take away 5. See if you can get a high score in as low amount of tries as possible!

image

More features will be added to the game as time allows. Some future implementations include:

  • Player Hi-Score
    • On the "Info" page, your top 5 scores will be displayed instead of just 5 scores.
  • Add a player timer
    • This will track your time and give you extra points based on how quickly you solve the puzzle.
  • Have a more curated selection of album artwork to play with.
    • Link up to playlists to use their art.
  • And more!

I hope you enjoy playing this game, and maybe even finding some new music to listen to!


Credits:

These are sites that I used to create this game

Font Icons: Font Awesome

Font Awesome Animation Documentation: Font Awesome

API Documentation: Discogs

Local Storage info: MDN | JavaScript Tutorial

Color Choice: Adobe Color