Point & Shoot Games (JavaScript tutorial)
Every mobile game needs to have 3 main elements: fullscreen, touch controls & optimized code, that runs well on a variety of devices. We will do all of that, and we will 1) build a BLANK REUSABLE BOILERPLATE project and 2) in the advanced section we will add graphics, animation & sounds to turn it into an ANIMATED SPACE HORROR game. Scary noises included.
OBJECT POOL DESIGN PATTERN allows us to reuse objects, rather than constantly creating new ones and destroying the old ones. This approach will improve the performance of the codebase, because it solves problems with automatic memory allocation and garbage collection processes.
STATE DESIGN PATTERN allows us to separate behaviors of the object into separate code blocks, giving us the ultimate control over each individual state, while at the same time making the code easier to read, maintain and debug.
Let's learn how to implement both of these design patterns in a real project using JavaScript & HTML Canvas.
👽 Download Project Art assets 👽
Background horizontal: https://www.frankslaboratory.co.uk/do...
Background vertical: https://www.frankslaboratory.co.uk/do...
Simple crew member: https://www.frankslaboratory.co.uk/do...
Beetlemorph 100x100px frames: https://www.frankslaboratory.co.uk/do...
Lobstermorph 100x100px frames: https://www.frankslaboratory.co.uk/do...
Crew members sprite sheet: https://www.frankslaboratory.co.uk/do...
Phantommorph 100x100px frames: https://www.frankslaboratory.co.uk/do...
Sounds (right click and 'Save link as'):
New game: https://www.frankslaboratory.co.uk/do...
Boom 1: https://www.frankslaboratory.co.uk/do...
Slide: https://www.frankslaboratory.co.uk/do...
Boom 2: https://www.frankslaboratory.co.uk/do...
Boom 3: https://www.frankslaboratory.co.uk/do...
Boom 4: https://www.frankslaboratory.co.uk/do...
Win: https://www.frankslaboratory.co.uk/do...
Lose: https://www.frankslaboratory.co.uk/do...
Scream: 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 🌌
Beginner project:
00:00:00 Build mobile games JavaScript and HTML Canvas.
00:01:08 Project setup
00:03:05 Make everything responsive
00:09:20 Enemy class
00:17:19 Object pool design pattern
00:20:55 Periodic triggers
00:27:45 Mouse controls
00:29:15 Collision detection
00:37:05 Touch events
00:38:43 Game text
00:45:46 Start & restart
00:49:21 Fullscreen games
Advanced project:
00:53:29 Simple crew members
00:54:59 Simple enemy type
00:59:23 Sprite animation
01:03:44 Animation timing
01:07:52 Debug mode
01:10:01 Enemy variety
01:14:31 Randomized space crew
01:18:18 State management in games
01:22:46 State design pattern
01:38:10 Sounds and final details
Source code:
Checkpoint 1 (00:16:21): https://www.frankslaboratory.co.uk/do...
Checkpoint 2 (00:52:46): https://www.frankslaboratory.co.uk/do...
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
