Making Games with Javascript and React

Making games in React is a blast, and it can help you learn new skills or refine existing ones as you take your modest game project from planning to development and production. Last fall, I gave a pair of talks at local coding meetups about game development in React, and I wanted to share this with you. We'll go over the technical and creative considerations for design, development, testing and deployment. I'll walk through some of my game projects from the past few years to demystify the process and hopefully convince you to make something weird and fun for yourself.

- React Games
- Noodle Quest: https://noodlequest.ridiculopathy.com/
   - Source: https://github.com/markarenz/noodle-q...
  - Text Adventures: https://adventure.ridiculopathy.com/
   - Source: https://github.com/markarenz/mms-text...
  - Figure Five Frenzy: https://figurefive.ridiculopathy.com/
   - Source: https://github.com/markarenz/figure-f...
  - Mugwomp: https://thing.ridiculopathy.com/02-mu...
- Tic-Tac Know Source: https://github.com/markarenz/tic-tac-...
- Star Squadron Student Driver: https://store.steampowered.com/app/15...
- Video: Making a High Scores API with AWS Serverless, Lambda, API Gateway & DynamoDB: Making a Serverless API with the Serv...
- Video: Reverse Engineering a Game Engine from 1978 in React: Are You Retro Enough? Text Adventure ...
- Flash Stuff (Play at your own risk): https://github.com/markarenz/rid-flas...
- Other stuff: https://www.markmakesstuff.com/


Chapters:
00:00:00 Why make games in React?
00:01:19 Disclaimer
00:02:00 Making games in Flash, iOS, Godot
00:03:08 Making Games in React
00:03:23 Javascript Game Engines
00:03:38 React Concepts for Games
00:04:04 Planning Your Game
00:07:02 Scope: Keep it Simple, Silly
00:08:32 Design Document
00:09:38 Outside-In vs. Inside-Out
00:10:44 The Player Value Proposition
00:11:41 Tic-Tac-Know Project Breakdown
00:15:30 Game-specific Issues Related to State Management
00:16:39 Games and Testing
00:18:59 Text Adventures and Passing Objects
00:21:41 Noodle Quest: Memoization and SVG
00:25:21 Mugwomp: SVG Animations
00:26:25 Untitled RPG: SVG Character Creator
00:27:41 Figure Five Frenzy: AWS Service for High Scores
00:29:28 Deploying to S3
00:30:48 Deploying React Games to Itch.io
00:31:17 Conclusion

• #science_technology
• #javascript
• #react
• #reactjs
• #game_development
• #isometric_game
• #adventure_game
• #platformer_game
• #2d_game
• #text_adventure
• #retro
• #turn_based
• #typescript
• #unit_testing
• #web_development
• #software_engineering