/week8-MJ

A whack-a-ghost game that uses data from an API, built in React.

Primary LanguageJavaScript

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:

image

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

Known Issues

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