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 👽

Sounds (right click and 'Save link as'):

(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)

🌌 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:

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)

Get Skillshare FREE for 1 month:

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

[Lyricszofficial]

Amazing Content. First time seeing an extended mobile game dev on youtube vid tutorials. Compliment of the year, Frank!

[Frankslaboratory]

Hi coders, HAPPY NEW YEAR! I prepared some fun projects to start 2024 with :)

[micanal]

Done it ! Work' s on computers and mobiles, very well. Cool tutorials and I learned a lot! Thank You !

[claudehaudegon]

Hey Frank, thanks to your work, i like your code is so clean and clear. I finish it and it works fine on Firefox 133.0 (64-bit) !

[benja-min]

So sad I only just discovered you. Loved your 9hr course, and now this? Thank so much!

[Push_ups__]

Can you show us how to add more enemies and beetlemorph and lobstermorph back with state design pattern please.

BTW I love you content❤

[MeinDeutschkurs]

So cool, isn‘t it possible to use pointer events instead of mouse and touch to use one method instead of two?

[JuanPabloGomez-ccvm]

OMG! thank you so much! We want more content about mobile games with js!! please!

[suelingsusu]

WOW... superb... bravo!!! 😎😎😎👌👌👌🙏🙏🙏🙏🖖🖖🖖🖖🖖🖖🖖🖖🖖🌹🌹🌹

[mahbleh]

In this jobless era. we needed your inspiring fun tutorials. thank you for the video

[adidevbhattacharya]

This is was really very amazing tbh, learnt a lot.
I was wondering if it's possible for you to bring some 3-D game tutorials using Three.js with HTML canvas and stuff like how to create own 3-D arts, if you have time :).

[forgottenaquarium]

Missed your amazing tutorials. Just what I needed to exercise my JavaScript muscles. Thank you sir

[Musfiq]

Amazing, plz make webgl related content, waiting for long time, literally I was hoping.... one day you make webgl things

[playmambo]

Hi! Thank you for all your content!!! It is wonderful!!! You have a great teaching technique!!! It would be awesome if you could make a series about responsive tile map game design!!!! Have a great new year!! Best regards from Mexico!

[ЛеонідПрокопенко-лм]

Amazing job! I always waiting for your video.

[muksid]

Hvaing an issue in lobstarmorp enemy code when i add it, when the enemy spawns the lives of the player automatically decreases. unable to find the bug

[mahimabhardwaj]

waiting for this type of video one of the best content on youtube thanks.

[Radu]

Oh wow! You're doing mobile games too now. Awesome!

[Dragon_Coder]

Sir I am very impressed with your skill, by watching you I also want to make games like you.

[gideonting]

OH MY GOODNESS thankk u so much for this free tutorial u are amazing!!! Also, just wondering, how exactly do u get the project onto your phone? I tried extracting my zip file into a folder on my phone but when i opened the html, none of the backgrounds or CS or JS loaded i think.. am i supposed to like find a way to host this on a website and open it on my phone browser? or like isit possible to build an apk file thingy with this? sorry if these are really stupid questions, im new to this haha