State Management in 2D GAMES
Franks laboratory Franks laboratory
79.8K subscribers
5,571 views
0

 Published On Nov 17, 2023

State design pattern is the most powerful technique a beginner can learn. It gives us complete control over our project. This is how I implement it with plain vanilla JavaScript and object oriented programming.

We can apply state pattern to an individual character to give it a set of abilities and special moves.

We can also apply it to the entire game, split it into levels and give each level different environment and other unique features.

State design pattern focuses on separating code for each state in it's own code block, that code block could be a special attack or individual game level for example.

In my implementation we will also include elements of finite state machine, which is more about the relationships between the individual states and how they transition into each other. We will restrict which states the alien is able to switch into and how it reacts to user inputs, depending on which state it is currently in.

👽 Download Project Art assets 👽
Alien: https://www.frankslaboratory.co.uk/do...
Background (optional): https://www.frankslaboratory.co.uk/do...
(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)

Playlist:    • JavaScript Game Development Mastercla...  

🌌 Tutorial Contents 🌌
00:00 Why we need state management
02:11 Project setup
06:21 Keyboard controls with JavaScript Sets
08:14 How to implement State design pattern
14:11 Switching states on keypress
16:12 Animation loop
21:54 Switching states on automated condition
24:14 Making each state unique
26:31 State dependent status text
32:43 State dependent animations

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪
https://www.udemy.com/course/learn-cr...
https://www.udemy.com/course/learn-ga...
https://www.udemy.com/course/creative...
https://www.udemy.com/course/build-an...
https://www.udemy.com/course/learn-ht...
https://www.udemy.com/course/remake-r...
https://www.udemy.com/course/learn-ht...

Get Skillshare FREE for 1 month: ‍🎓
https://www.skillshare.com/en/r/profi...

The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

show more

Share/Embed