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

[@volodymyrstefanyshyn1713]

It is very interesting video, and I glad i found this. Thank you. Currently I finished JS course and went to the React but as you have mentioned in the video, the info you learn in the courses doesn't really goes to the core memory unless you start doing something on your own. I have this idea of making a simple game, one of the first I ever played. That game was made to teach people type on keyboard quickly. Basically you see the line of characters, and you have your "Hero" which moves only when you type the closest character to him, and there is a monster behind which moves towards you, and will eventually kill you if you won't move quickly enough. I am getting pretty excited to make, also I am afraid=) Again thank you for going deep in interesting aspects of your game.

[@oatie4262]

Very very informative and thoughtful video, thanks for this!

[@dalanxd]

Wow, I got a lot of useful info and inspiration from you Thanks so much! Great video btw ;)

[@leafy-tree]

I just learned JavaScript and React and have always wanted to make games, but was unsure where to start. Thank you for this great introduction!

[@siidaf]

what kind of game do you want to develop?

[@myusernameisrighther]

Ah, I love the great John Simmons! Greatest show I ever saw.

[@magjonzzi]

Nice, I just started learning JS!

[@Jay_Banz_2x]

me as well! Coding is sooo much harder than I thought : I

[@harm991]

My condoleances

[@treyabolicum]

tactical . , went straigt to next.js after the basics of ecma5 and 6

[@terry-]

Great!

[@jakubtomas9154]

Good video

[@ridermiller7602]

I just started learning how to make games on unity

[@tildesarecool7782]

john paul george and ringo? finally. a man of taste.

[@MikePeiman]

Awesome video! Very inspiring for this older web developer who has secretly harbored dreams of being a game developer since 1991. Very cool game ideas, I'm going to try out your math game with my daughter who I'm homeschooling, I think she'll love it. By the way, you have an excellent "radio voice", very warm and pleasant to listen to. Keep it up! You've got a new subscriber. Do you have any plans to develop a game for money? I know you said you weren't keen on the business/money side, but... you've got plenty of experience now. Also, do you have a video on how to publish a js-based game to Steam? Also also, any experience with JS game engines?

[@markmakesstuff6702]

Years ago I released a few for iOS where I charged the minimum amount, like $0.99 or something, but it just created bookkeeping and tax headaches. That's just my personal experience, of course. A lot of indie devs are good at that end of things and like to market their work, and that's awesome. I'm terrible at it because I'm usually knee-deep in another project by the time I need to think about the business part of it. I usually just release something and amble on down the road to my next project that I may or may not release. I just finished a React-based web game called Spice Hustle modeled after the commodity trading games on old PCs in the 80's and early 90's. It was fun to make, but by the time I released it I was already obsessed with another game project, so it's just a cycle. Most projects are just an excuse to try new ways of making things, so the new one will focus (I think) on building an application around the game with user-designed levels and play-lists of levels, all built on top of NextJS, Typescript and MongoDB. It'll be fun if I ever get around to finishing it ha ha.

[@tomk3682]

As someone who wants to learn React through making games what course/tutorial would you recommend.. I know basic vanilla Javascript but no React, thank you

[@real23lions]

If you know JS, you’re halfway there. Just do projects and for any problems, ask ChatGPT to be your tutor and fix errors. Ask it questions. I didn’t know any code and I’m already using nextjs with React after a month plus.

[@Vid-Hero]

@5:55 - What's the name of this point and click game? Looks rad!

[@markmakesstuff6702]

The one where you're trapped outside your house was called Domestic Bliss. That was a lot of fun to make. Your neighbor was a Russian mob boss and you had to use your kid's swing to jump into their yard to do some detective work. I miss Flash so much.

[@Vid-Hero]

I really love the style, thanks for sharing about it. Does it exist in any form on Steam or elsewhere?

[@zughbor]

is there an update on what you did in this year ?

[@markmakesstuff6702]

I put together a web game in React/Typescript based on old school commodity trading games. I'm currently working on a project wrapping Pixie (2D JS engine) inside NextJS so we can add level editing and other user features. I don't know when I'll get back to that.

[@getoverhere4465]

Making games in JS seems fine but React seems like I’d need a ton of components per page

[@maugrins]

i downloaded your game student driver but it did not work. nothing happened when i pressed play and if i need credits to play it then there was no way to get any. Just informing you there is a bug. I would love to play it if you fix it.

[@markmakesstuff6702]

Thanks. I'm running it on an Intel-based MacBook Pro and it runs fine. It also ran for me on a Windows box. I'll take a look later to see if there's something I need to do.

[@maugrins]

@@markmakesstuff6702 I have the M2 chip mac mini. I followed you hope to see more of your content! Thanks!

[@markmakesstuff6702]

Ah, that makes sense. It was built for the Intel Mac architecture and probably shouldn't be available via steam for M2 chips. I plan to get my hands on an M3 pro to churn out a new version.

[@kluchtube7042]

why you have such a low view count. I'm surprised