Skip to content

Latest commit

 

History

History
104 lines (51 loc) · 2.16 KB

README.md

File metadata and controls

104 lines (51 loc) · 2.16 KB
Raw

React Snake Game

Our project this week was to create an app using react using API data within.

We decided to build a Snake Game with tipping our hats to the Nokia days - Keep your eyes peeled for the easter 🥚...

In this game you will never be defeated by react 🧘

To get started

  1. Clone the repo
  2. npm i
  3. npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Netlify Link

Snake Game 🐍

Wireframe

Rough psudo/sketch of build plan

  1. Fetch github users profile image

  2. Create basic HTML page

Logo (it could anchor tag that on click runs the reset() function - acting like a home button?)

Template/ React render():

Profile image (Name) - response from API

Form/input box with submit button - fetch request

Create Grid

  • flexbox : container
  • containing a snake-grid div
  • containing a grid of div-items

Snake (With profile picture)

Snake food

  1. Append profile image to snake head

Strecth Goal

Append a random follower profile image to the food item

Reset button

Workshops that could be helpful

  1. Handle forms and inputs in React https://github.com/oliverjam/learn-react/tree/main/05-transform-the-form

  2. Working with the github API in React

https://github.com/sofiapoh/react-dynamic-data-workshop

useInterval

Javascript’s initial setInterval wasn't great with hooks so we've used useInterval, a custom React Hook that provides a declarative setInterval.

useInterval(callback, delay);

It takes a callback parameter, function that will be called every delay milliseconds This delay parameter is a number representing the delay in msecs. Set to null to "pause" the interval.

Known issues

  • Netlify link hasn't updated to the master branch - Any tips on this would be appreciated
  • A manual refresh is needed to restart the game

Tech Stack

  • React
  • JS
  • CSS
  • Whimsical

Team TT

Trish 🐙 and Terry :palm_tree: