Week 8: REACT

Our project brief this week was to use React to build an interactive game that uses data from an API.

We used:

• the Github API
• whack-a-mole style games as our inspiration

Team

Mariya + Jo

Concept

This week, we discovered about VS Code's collaboration tool, Live Share. When sharing an editor in a collaboration session for the first time, Mariya exclaimed "there's a ghost in my code!". And thus the project's idea was born! 🐤

Inspired by that 1980 classic arcade game, Pac-Man, this is...

👻 VS Code Live Scare !! 👻

How to Play

1. Go to boo-lean-said-the-ghost.netlify.app
2. Sign up with your GitHub username and click "Play".
3. Click on a ghost to kill it. ⚔️
4. The game is over when you've killed all the ghosts. 😬

Screenshots from the game:

User sign up page:

Game play:

Usage guidelines

• Clone this repo
• Run npm run dev
• Open localhost:3000

Acceptance Criteria

• Accept some user input (e.g. a username)
• Query an API (e.g. the Github API, or any other fun one)
• Populate the UI with API data
• Have some form of persistent state and interactivity, e.g. a hunger bar

Stretch criteria

• Save your state to localstorage so you can leave the page and come back later.
• Make it look great

Additional stretch goals

• Make the ghosts move
• Glow effect around ghosts ❇️
• Difficulty levels (number of ghosts)

Design/Prototype

Tools

• React
• HTML
• CSS
• Javascript / ES6
• Figma
• Vite
• Netlify
• GitHub's API
• VS Code

Known Issues

• ✖️ End-game screen is not yet implemented
• ✖️ Ghosts do not reappear elsewhere
• ✖️ Not mobile responsive