Skip to content

fac20/Week10TT

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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: