Uploaded November 2023 | Updated September 2026, 1 week ago
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: frankslaboratory.co.uk/downloads/133/locustmorph_large.png
Background (optional): frankslaboratory.co.uk/downloads/133/background.png
(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: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW
๐ 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! ๐ช
udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7
udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01
Get Skillshare FREE for 1 month: โ๐
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
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
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: frankslaboratory.co.uk/downloads/133/locustmorph_large.png
Background (optional): frankslaboratory.co.uk/downloads/133/background.png
(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: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW
๐ 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! ๐ช
udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7
udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01
Get Skillshare FREE for 1 month: โ๐
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
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
