Hey all! How would you model a snake game with React Hooks? Here's how I would do it! (You can play here! and Edit here!)
The main things to look at:
- This is written in Typescript, to assist the gist also contains the same code in JavaScript.
- The types!
- Snake takes place on a two dimensional grid, so we represent locations on that grid with a
Coordinate
type, which is a tuple of two numbers representing the x and y positions - The Snake itself is represented in two ways:
-
Snake
: An array of coordinate arrays -
SnakeMap
: A sort of Trie built from the coordinates - Why both? Do you want to know where the snake is, or if the snake is in a specific place? You'll probably need to know both things at different times, so we create two structures that efficiently answer each question.
-
- The
Game
is a combination of all the data about the snake, plus:- a coordinate for the
food
- the
score
- and an
alive
boolean
- a coordinate for the
- Finally, we need a direction to move in, so we have a union type of single characters for each cardinal
Direction
- Snake takes place on a two dimensional grid, so we represent locations on that grid with a
- There are three important hooks our
useSnake
hook calls:- First: It calls
useReducer
, reducing aGame
from aDirection
. This is an action packed reducer, which is the logic behind themoveSnake
function. - Second: It calls
useRef
to create a persistent object to store our direction. WhyuseRef
instead ofuseState
? Because we don't want to re-render every time you hit a direction key, which updating a stateful value would do. We also useuseCallback
here to create a persistent callback to update the ref. - Third: It calls
useEffect
, which (assuming the snake is alive) sets up the interval which forms our game loop. What do we do in the loop? Move the snake in the current direction!
- First: It calls
If snakes or games aren't your thing, but you like this style, leave a comment with what hooks snippet I should write next!
Top comments (0)