Embed Size (px)
Citation preview
Mimstris:Building an arcade puzzle
game in React / Redux
Why? How?
What?
Choosing to make Tetris
Challenges of coding a game in react
Takeaways from the experience
Why?
That sounds fun• Play with my son
• Make crazy shapes and stuff • Try out some new frameworks, etc.
JavaScript circa 2014
const game = () =>
Needs to be ES2017 cuz it’s 2017, obvs.
ReductrisI’ll call it…
👈
Reductris Reactris
I’ll call it…
Reductris Reactris Mimstris
I’ll call it…
How?
1. 2. 3.
Building the game
Rendering to canvas
The Redux Store
1. 2. 3.
Building the game
Rendering to canvas
The Redux Store
board = [ [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],]
piece = [ [ 0, 1, 0 ], [ 0, 1, 0 ], [ 0, 1, 1 ], ]
board = [ [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],]
“Game Loop”
init()
update()
draw()
every frame
• Timing of piece movement (time since last update) • Responding to user input (see pressed later) • Piece matrix position and rotation • Collision detection (for each square, if they are both non-zero) • Clearing lines (If a whole row is non-zero) • Score keeping • Configuration
Inside update()
Push Method (event-driven)
Pull Method (polling)
Pressed.js
I had a problem.
I saw there were several good solutions.
I made my own that was sliiiightly different.
pressed.js
Tracks which keys are currently pressed
1. 2. 3.
Building the game
Rendering to canvas
The Redux Store
init()
Before React
update()
draw()
init()
update()
react
draw()
every frame every frame
componentDidUpdate()
render()
React + Redux
init()
update()
reduxstore
react
draw()
every frame
componentDidUpdate()
subscribe() / connect()
dispatch()
canvasRenderer.js
drawGame(board, piece)
clear()
drawMatrix(board)
drawBlock(x,y,color)
drawMatrix(piece)
drawBlock(x,y,color)
1. 2. 3.
Building the game
Rendering to canvas
The Redux Store
What?
Takeaways…
• Babel / ES6 • React • Redux (incl. reselect, redux-acitons, etc.) • Ducks • Lodash • Writing an npm module • Mocha, Chai, Tape, AVA • Atom
Things I tried for the first time…
😍 ES6 😍
Config files!
• rendering • matrix maths
Use modules to handle isolated functionality
Makes it much easier to refactor later
Weird pieces are fun but they’re not in the game for a reason.
• Actions • Action Creators • Reducers • Selectors
Ducks is a guideline for combining…
…into a single file.
( Ask me about boilerplate-reducer)
Ducks.
Stress saver
just works. Drawing to the canvas in React
Unit test early… for your sanity
a robot who is clicking on things
update() is
Memoize!
Make a thing for fun.
mimstris.surge.shgithub.com/mimshwright/mimstris
