Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mimstris: Building an arcade puzzle game in React / Redux

0 views

Published on

I thought it would be fun to build a tetris clone so I could make weird-shaped pieces. But what started out as an innocent game tutorial soon became a semi-obsessive crash course in modern front-end concepts. It also is quite fun to play! Come watch as I retell my journey from nothing to a 60-line package.json file.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Mimstris: Building an arcade puzzle game in React / Redux

  1. 1. MimsH.Wright FreelanceSoftwareDeveloper hallo@mims.berlin @mimshwright github.com/mimshwright/
  2. 2. Mimstris: Building an arcade puzzle game in React / Redux
  3. 3. Why? How? What? ChoosingtomakeTetris Challengesofcodingagameinreact Takeawaysfromtheexperience
  4. 4. Why?
  5. 5. Thatsoundsfun
 •Playwithmyson •Makecrazyshapesandstuff •Tryoutsomenewframeworks,etc.
  6. 6. JavaScript circa 2014
  7. 7. const game = () => NeedstobeES2017 cuzit’s2017,obvs.
  8. 8. Reductris I’llcallit…
  9. 9. 👈
  10. 10. Reductris Reactris I’llcallit…
  11. 11. Reductris Reactris Mimstris I’llcallit…
  12. 12. How?
  13. 13. 1. 2. 3. Buildingthegame Renderingtocanvas TheReduxStore
  14. 14. 1. 2. 3. Buildingthegame Renderingtocanvas TheReduxStore
  15. 15. 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 ], ]
  16. 16. piece = [ [ 0, 1, 0 ], [ 0, 1, 0 ], [ 0, 1, 1 ], ]
  17. 17. 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 ], ]
  18. 18. “GameLoop” init() update() draw() every frame
  19. 19. •Timingofpiecemovement(timesincelastupdate) •Respondingtouserinput(seepressedlater) •Piecematrixpositionandrotation •Collisiondetection(foreachsquare,iftheyarebothnon-zero) •Clearinglines(Ifawholerowisnon-zero) •Scorekeeping •Configuration Insideupdate()
  20. 20. PushMethod(event-driven)
  21. 21. PullMethod(polling)
  22. 22. Pressed.js
  23. 23. Ihadaproblem. Isawtherewereseveralgoodsolutions. Imademyownthatwassliiiightlydifferent.
  24. 24. pressed.js Trackswhichkeysarecurrentlypressed
  25. 25. 1. 2. 3. Buildingthegame Renderingtocanvas TheReduxStore
  26. 26. init() Before React update() draw() init() update() react draw() every frame every frame componentDidUpdate() render() React + Redux init() update() redux store react draw() every frame componentDidUpdate() subscribe() / connect() dispatch()
  27. 27. canvasRenderer.js drawGame(board, piece) clear() drawMatrix(board) drawBlock(x,y,color) drawMatrix(piece) drawBlock(x,y,color)
  28. 28. 1. 2. 3. Buildingthegame Renderingtocanvas TheReduxStore
  29. 29. What?
  30. 30. Takeaways…
  31. 31. • Babel / ES6 • React • Redux (incl. reselect, redux-acitons, etc.) • Ducks • Lodash • Writing an npm module • Mocha, Chai, Tape, AVA • Atom ThingsItriedforthefirsttime…
  32. 32. 😍ES6 😍
  33. 33. Configfiles!
  34. 34. •rendering •matrixmaths Usemodulestohandleisolatedfunctionality Makesitmucheasiertorefactorlater
  35. 35. Weirdpiecesarefunbutthey’renotinthegameforareason.
  36. 36. •Actions •ActionCreators •Reducers •Selectors Ducksisaguidelineforcombining… …intoasinglefile. (Askmeabout boilerplate-reducer) Ducks.
  37. 37. Stresssaver
  38. 38. justworks. DrawingtothecanvasinReact
  39. 39. Unittestearly…foryoursanity
  40. 40. arobotwhois clickingonthings update()is
  41. 41. Memoize!
  42. 42. Make a thing for fun.
  43. 43. mimstris.surge.sh github.com/mimshwright/mimstris
  44. 44. MimsH.Wright FreelanceSoftwareDeveloper hallo@mims.berlin @mimshwright github.com/mimshwright/

×