Mimstris: Building an arcade puzzle game in React / Redux

•

0 gostou•565 visualizações

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.

Software

Mimstris:
Building an arcade puzzle
game in React / Redux

Why?
How?
What?
ChoosingtomakeTetris
Challengesofcodingagameinreact
Takeawaysfromtheexperience

Thatsoundsfun 
•Playwithmyson
•Makecrazyshapesandstuff
•Tryoutsomenewframeworks,etc.

const game = () =>
NeedstobeES2017
cuzit’s2017,obvs.

1.
2.
3.
Buildingthegame
Renderingtocanvas
TheReduxStore

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 ],
]

“GameLoop”
init()
update()
draw()
every frame

•Timingofpiecemovement(timesincelastupdate)
•Respondingtouserinput(seepressedlater)
•Piecematrixpositionandrotation
•Collisiondetection(foreachsquare,iftheyarebothnon-zero)
•Clearinglines(Ifawholerowisnon-zero)
•Scorekeeping
•Configuration
Insideupdate()

Ihadaproblem.
Isawtherewereseveralgoodsolutions.
Imademyownthatwassliiiightlydifferent.

pressed.js
Trackswhichkeysarecurrentlypressed

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()

canvasRenderer.js
drawGame(board, piece)
clear()
drawMatrix(board)
drawBlock(x,y,color)
drawMatrix(piece)
drawBlock(x,y,color)

• Babel / ES6
• React
• Redux (incl. reselect, redux-acitons, etc.)
• Ducks
• Lodash
• Writing an npm module
• Mocha, Chai, Tape, AVA
• Atom
ThingsItriedforthefirsttime…

•rendering
•matrixmaths
Usemodulestohandleisolatedfunctionality
Makesitmucheasiertorefactorlater

Weirdpiecesarefunbutthey’renotinthegameforareason.

•Actions
•ActionCreators
•Reducers
•Selectors
Ducksisaguidelineforcombining…
…intoasinglefile.
(Askmeabout boilerplate-reducer)
Ducks.

mimstris.surge.sh
github.com/mimshwright/mimstris

Mais conteúdo relacionado

Destaque

How to Earn the Attention of Today's BuyerHubSpot

25 Discovery Call QuestionsHubSpot

Class 1: Email Marketing Certification course: Email Marketing and Your BusinessHubSpot

Behind the Scenes: Launching HubSpot TokyoHubSpot

Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...HubSpot

What is Inbound Recruiting?HubSpot

3 Proven Sales Email Templates Used by Successful CompaniesHubSpot

CultureReed Hastings

Luxury market in crisis - disruption, change, reinvention luxury daily first...Pamela Danziger

Sap grc online trainingpriya reddy

Destaque (10)

How to Earn the Attention of Today's Buyer

25 Discovery Call Questions

Class 1: Email Marketing Certification course: Email Marketing and Your Business

Behind the Scenes: Launching HubSpot Tokyo

Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...

What is Inbound Recruiting?

3 Proven Sales Email Templates Used by Successful Companies

Culture

Luxury market in crisis - disruption, change, reinvention luxury daily first...

Sap grc online training

Semelhante a Mimstris: Building an arcade puzzle game in React / Redux

Mimstris: Building a puzzle game in React / Redux - DotJS Lightning TalkMims H Wright

比較明合成による流星の検出sitiya

Conway's Game of Life with Repakizzx2

Python simplecvUFPA

[Graph] DFS 복사본.pdfssuser82c38d

4 Dimensionality reduction (PCA & t-SNE)Dmytro Fishman

Tetrisを作ろう！ゲーム制作で学ぶ論理的思考TakumiKitagawa

Miguel yustizMiguelYustiz1

Franklin barcoFranklin Barco

海量視覺資料－孫民台灣資料科學年會

Semelhante a Mimstris: Building an arcade puzzle game in React / Redux (10)

Mimstris: Building a puzzle game in React / Redux - DotJS Lightning Talk

比較明合成による流星の検出

Conway's Game of Life with Repa

Python simplecv

[Graph] DFS 복사본.pdf

4 Dimensionality reduction (PCA & t-SNE)

Tetrisを作ろう！ゲーム制作で学ぶ論理的思考

Miguel yustiz

Franklin barco

海量視覺資料－孫民

Último

Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsAlberto González Trastoy

ManageIQ - Sprint 236 Review - Slide DeckManageIQ

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfkalichargn70th171

Optimizing AI for immediate response in Smart CCTVshikhaohhpro

The Ultimate Test Automation Guide_ Best Practices and Tips.pdfkalichargn70th171

AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesVictorSzoltysek

Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionOnePlan Solutions

introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfVishalKumarJha10

Microsoft AI Transformation Partner Playbook.pdfWilly Marroquin (WillyDevNET)

W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...panagenda

HR Software Buyers Guide in 2024 - HRSoftware.comFatema Valibhai

AI & Machine Learning Presentation TemplatePresentation.STUDIO

The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...kalichargn70th171

How To Troubleshoot Collaboration Apps for the Modern Connected WorkerThousandEyes

Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...Nitya salvi

%in kempton park+277-882-255-28 abortion pills for sale in kempton park masabamasaba

%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfonteinmasabamasaba

Exploring the Best Video Editing App.pdfproinshot.com

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS

Sector 18, Noida Call girls :8448380779 Model Escorts | 100% verifiedDelhi Call girls

Mimstris: Building an arcade puzzle game in React / Redux

1. MimsH.Wright FreelanceSoftwareDeveloper hallo@mims.berlin @mimshwright github.com/mimshwright/

2. Mimstris: Building an arcade puzzle game in React / Redux

3. Why? How? What? ChoosingtomakeTetris Challengesofcodingagameinreact Takeawaysfromtheexperience

4. Why?

7. Thatsoundsfun  •Playwithmyson •Makecrazyshapesandstuff •Tryoutsomenewframeworks,etc.

8. JavaScript circa 2014

10.

11.

12. const game = () => NeedstobeES2017 cuzit’s2017,obvs.

13.

14. Reductris I’llcallit…

15. 👈

16. Reductris Reactris I’llcallit…

17.

18. Reductris Reactris Mimstris I’llcallit…

19. How?

20. 1. 2. 3. Buildingthegame Renderingtocanvas TheReduxStore

21. 1. 2. 3. Buildingthegame Renderingtocanvas TheReduxStore

22. 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 ], ]

23. piece = [ [ 0, 1, 0 ], [ 0, 1, 0 ], [ 0, 1, 1 ], ]

24. 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 ], ]

25. “GameLoop” init() update() draw() every frame

26. •Timingofpiecemovement(timesincelastupdate) •Respondingtouserinput(seepressedlater) •Piecematrixpositionandrotation •Collisiondetection(foreachsquare,iftheyarebothnon-zero) •Clearinglines(Ifawholerowisnon-zero) •Scorekeeping •Configuration Insideupdate()

27. PushMethod(event-driven)

28. PullMethod(polling)

29. Pressed.js

30. Ihadaproblem. Isawtherewereseveralgoodsolutions. Imademyownthatwassliiiightlydifferent.

31. pressed.js Trackswhichkeysarecurrentlypressed

32. 1. 2. 3. Buildingthegame Renderingtocanvas TheReduxStore

33. 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()

34.

35. canvasRenderer.js drawGame(board, piece) clear() drawMatrix(board) drawBlock(x,y,color) drawMatrix(piece) drawBlock(x,y,color)

36. 1. 2. 3. Buildingthegame Renderingtocanvas TheReduxStore

37.

38. What?

39.

40. Takeaways…

41. • Babel / ES6 • React • Redux (incl. reselect, redux-acitons, etc.) • Ducks • Lodash • Writing an npm module • Mocha, Chai, Tape, AVA • Atom ThingsItriedforthefirsttime…

42. 😍ES6 😍

43. Configfiles!

44. •rendering •matrixmaths Usemodulestohandleisolatedfunctionality Makesitmucheasiertorefactorlater

45. Weirdpiecesarefunbutthey’renotinthegameforareason.

46. •Actions •ActionCreators •Reducers •Selectors Ducksisaguidelineforcombining… …intoasinglefile. (Askmeabout boilerplate-reducer) Ducks.

47. Stresssaver

48. justworks. DrawingtothecanvasinReact

49. Unittestearly…foryoursanity

50. arobotwhois clickingonthings update()is

51. Memoize!

52. Make a thing for fun.

53. mimstris.surge.sh github.com/mimshwright/mimstris