Minecraft Memory

Minecraft Memory is a Minecraft-themed memory game built with React. This project was created as a fun way to practice working with React side-effects and to explore the use of sound in web applications.

Live Website

Preview

Features

• Engaging sound effects: Each click is accompanied by a unique sound, enhancing the interactive experience. Plus, enjoy soothing background music throughout your gameplay.
• Pixelated UI: The user interface has a textured, pixelated design, giving it a distinctive Minecraft feel.
• Hidden feature: Look out for a secret button. It's not too hard to find, and when clicked, it triggers the sound of a Minecraft villager.

How to Play

• Click on various cards and try to remember the ones you've previously clicked.
• Your score increases with each unique card you click.
• The game is won when all 12 unique cards have been clicked without repeating.
• Enjoy the game with the background music from the album "Minecraft - Volume Alpha" by C418.

Tools/Languages

Getting Started

• Make sure you have Node v14 or higher and Git downloaded

$ git clone [email protected]:mathdebate09/memory-game.git
$ cd memory-game
$ npm install
$ npm run dev

Learning Outcomes

• Gained experience with the React useEffect hook
• Learned how to add music to a website using the useSound hook from the use-sound library
• Explored the use of sound in web applications to enhance user experience

References

• Background Music: The track "Minecraft" by C418 sets the mood for the game.
• Fonts: The logo uses the "Minecrafter" font, and the text uses the "MinecraftSystemUI" font. Both fonts are owned by Microsoft/Minecraft.
• Textures: The header uses a "lime terracotta" texture, the scorecard uses a "sandstone-bricks" texture, the card container uses a "sandstone" texture, and the footer uses a "gilled blackstone" texture. All textures are owned by Microsoft/Minecraft.
• Sound Effects: Various onClick sound effects are part of the Minecraft texture pack (Programmers Pack).

Code references

• Adding sound in React [Source]
• Pixelated borders codepen [Source]
• Meta tags in HTML [Source]