Point & Shoot Games (JavaScript tutorial)

Рет қаралды 12,802

Күн бұрын

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: www.frankslaboratory.co.uk/do...
Background vertical: www.frankslaboratory.co.uk/do...
Simple crew member: www.frankslaboratory.co.uk/do...
Beetlemorph 100x100px frames: www.frankslaboratory.co.uk/do...
Lobstermorph 100x100px frames: www.frankslaboratory.co.uk/do...
Crew members sprite sheet: www.frankslaboratory.co.uk/do...
Phantommorph 100x100px frames: www.frankslaboratory.co.uk/do...
Sounds (right click and 'Save link as'):
New game: www.frankslaboratory.co.uk/do...
Boom 1: www.frankslaboratory.co.uk/do...
Slide: www.frankslaboratory.co.uk/do...
Boom 2: www.frankslaboratory.co.uk/do...
Boom 3: www.frankslaboratory.co.uk/do...
Boom 4: www.frankslaboratory.co.uk/do...
Win: www.frankslaboratory.co.uk/do...
Lose: www.frankslaboratory.co.uk/do...
Scream: 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 Develo...
🌌 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): www.frankslaboratory.co.uk/do...
Checkpoint 2 (00:52:46): www.frankslaboratory.co.uk/do...
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)
www.udemy.com/course/learn-cr...
www.udemy.com/course/learn-ga...
www.udemy.com/course/creative...
www.udemy.com/course/build-an...
www.udemy.com/course/learn-ht...
www.udemy.com/course/remake-r...
www.udemy.com/course/learn-ht...
Get Skillshare FREE for 1 month:
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

Пікірлер: 101

@Frankslaboratory 6 ай бұрын

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

@douglascounts4634 6 ай бұрын

Wow, really looking forward to them.

@Push_ups__ 3 ай бұрын

Can you show us how to add more enemies and beetlemorph and lobstermorph back with state design pattern please. BTW I love you content❤

@micanal5533 5 ай бұрын

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

@Frankslaboratory 5 ай бұрын

Nice work. Congratulations on completing the project!

@Lyricszofficial 6 ай бұрын

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

@Frankslaboratory 6 ай бұрын

People don't usually do it because there are some cross browser inconsistencies on mobile devices, but from my testing it's much better this year. I think we are good to go with mobile now

@benja-min1588 6 ай бұрын

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

@Frankslaboratory 6 ай бұрын

Nice to meet you Benjamin, glad you found some value!

@forgottenaquarium2879 6 ай бұрын

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

@Frankslaboratory 6 ай бұрын

Hope your JS muscles get strong this year ! :D

@user-rs1kp4uu4v 6 ай бұрын

Amazing job! I always waiting for your video.

@Frankslaboratory 6 ай бұрын

This time it was a long wait, holiday season slowed me down :D

@gflaap 6 ай бұрын

Awesome Frank!!!!❤

@Frankslaboratory 6 ай бұрын

Thank you ❤

@helidrones 6 ай бұрын

Hi! Thank you for that awesome content! I have developed a game based on one of your previous tutorials, the one with the brave little dog. Back then you did not show how to implement different levels, so I had to figure it out by myself which was a lot of fun. Also, I made the dog capable of moving to the left and right with the landscape scrolling accordingly and enemies coming in from both sides. The rolling attack uses up power and power-ups can be found along the way. The game can be installed for offline use (PWA). I could make this become true because of your great tutorials. Thanks again!

@Frankslaboratory 5 ай бұрын

Well done. You've added a lot of features. Glad you found my class useful. Good luck with your coding 💪

@AlexanderBarakhov 6 ай бұрын

Awesome Frank! Thank you once again!

@Frankslaboratory 6 ай бұрын

Hi Alex, happy to help :D

@mahimabhardwaj1807 6 ай бұрын

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

@Frankslaboratory 6 ай бұрын

Glad you think so.

@playmambo9573 6 ай бұрын

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!

@Frankslaboratory 5 ай бұрын

I'm doing a responsive mobile game series now. Will try to include one that has tilemaps. Making a note. Need to prototype it and check how to best approach this

@M4rt1nX 6 ай бұрын

Wow Frank, thanks a lot!!!

@Frankslaboratory 6 ай бұрын

Hi Luz

@JuanPabloGomez-cc6vm 6 ай бұрын

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

@Frankslaboratory 6 ай бұрын

OK. Thanks for letting me know I will try to include more mobile friendly projects

@JuanPabloGomez-cc6vm 6 ай бұрын

thank you so much for your response!@@Frankslaboratory

@Musfiq77 5 ай бұрын

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

@quantum_microscope 6 ай бұрын

thanks bro your videos is very helpful

@Frankslaboratory 6 ай бұрын

I'm here to help

@CodeSnap01 6 ай бұрын

just a wow content . Pure gold.

@Frankslaboratory 6 ай бұрын

Glad you found some value

@adidevbhattacharya9220 5 ай бұрын

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 :).

@mahbleh404 6 ай бұрын

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

@Frankslaboratory 6 ай бұрын

Glad you think so, I always prefer to learn on a fun memorable project, I'm a visual learner

@gideonting 4 ай бұрын

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

@javifontalva7752 6 ай бұрын

Superb!!! You did it again!!! GOOD JOB!!

@Frankslaboratory 6 ай бұрын

Hi Javi, thank you

@Shitai-4ever 4 күн бұрын

how am i gonna play it on any device?? am i suppose to host it the website? please help for the full completion of the project

@worldbest3097 6 ай бұрын

finally!! waitedd so longgg

@Frankslaboratory 6 ай бұрын

Yea it took me a while this time around :D

@suelingsusu1339 6 ай бұрын

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

@Frankslaboratory 6 ай бұрын

Thank you

@tarcisiooliveira8810 5 ай бұрын

Great as always, I would like to see you create a roguelike game, would you give it a chance?

@Frankslaboratory 5 ай бұрын

Hi Tarcisio. Nice to meet you. Yes, I like roguelikes. It would probably have to be a bigger course, these games are more complex. I will do some research

@amoljadhav5088 6 ай бұрын

Amezing content 👍

@Frankslaboratory 6 ай бұрын

Thank you

@Radu 6 ай бұрын

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

@Frankslaboratory 6 ай бұрын

Hi Radu, yes, it was requested a lot

@Radu 5 ай бұрын

@@Frankslaboratory I'm sure it was :-) been getting asked about it too.

@HXP24 5 ай бұрын

nice game kick off the year with a full game tutorial love it😍🥰🤩

@Frankslaboratory 5 ай бұрын

Yup. And I'm making more

@user-yf4zp2cq9q 4 ай бұрын

@@Frankslaboratory Hello Frank , how can reach you in twitter , please

@XAVIER-ns7sx 5 ай бұрын

🎉🎉🎉

@Frankslaboratory 5 ай бұрын

😜

@irfansaeedkhan7242 6 ай бұрын

awesome

@Frankslaboratory 6 ай бұрын

Thank you

@MeinDeutschkurs Ай бұрын

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

@jimmyroserovallejo 6 ай бұрын

Best regards, I am developing a game based on your tutorials, however for the mobile theme it has been difficult to place the buttons on the screen, since if I place them inside the canvas they interfere with the other events of the DOM, I am also thinking of placing the final boss but the character continues advancing forward and I can't think of placing another level where he faces the final enemy, mega man style, I'll share with you a little of the progress I've made, I hope you can help me or run a tutorial final boss to save me, thank you very much.

@Frankslaboratory 6 ай бұрын

Nice game ideas, you can implement all of that but you probably have to switch your game to a different state for the boss fight. I would create a different state block for each level which defines the behaviour of the game (scrolling speed, background images, environmental elements etc), you can have a separate state for each unique boss fight as well. This is quite advanced and there are many ways to do it. A simple way would be to use the state pattern I used for the phasing enemy in this class, but use it to define and control game states instead. I will do a class on handling multiple levels eventually but it might take a while. You can also do a crude simple thing, something like if boss is active, player speed or game scrolling speed is 0, not the best solution but it will work. For mobile controls you can hide the buttons and control the game with swipes for example. I did a very simple swipe control to make the player jump in my mobile side scroller class.

@Push_ups__ 4 ай бұрын

Can you show us how to add more enemies and beetlemorph and lobstermorph back with state design pattern please. BTW I love you content❤

@daneshland4122 6 ай бұрын

So thanks dear frank. \

@Frankslaboratory 6 ай бұрын

Happy to help

@Push_ups__ 3 ай бұрын

What more should we do

@UncleDavid 5 ай бұрын

can you make something more practical and modern like a platformer with jump buffers, coyote time, double jump etc, or a top down game with dash mechanics, level generation-you know, shit like that

@Frankslaboratory 5 ай бұрын

Yup. Next one will be more complex. The basics are more practical. Beginners often rush to make the next Candy Crush project or something before they even learn how to animate sprites or control swipes. I wanted to cover the fundamentals first.

@devilrjn1587 6 ай бұрын

Thankyou sir. I have a request on you. Can you please upload a dedicated video on MediaSource. From server side to client side. Please sir

@Frankslaboratory 6 ай бұрын

I think Radu has some videos on that, I haven't used MediaSource for a while, will do some research to update myself what's new there

@user-jc6cc9pl9k 6 ай бұрын

wow❤

@Frankslaboratory 6 ай бұрын

❤

@user-jc6cc9pl9k 6 ай бұрын

Sir, i love game development and I have watched almost every game dev tutorial of this channel.Iam sudip and I am from Bangladesh, please reply me anything you want 😅

@user-jc6cc9pl9k 6 ай бұрын

i have learned many things from this channel ❤. And currently iam developing Cuphead game for mobile device using html css and a lost of JavaScript 😅🙂

@Frankslaboratory 6 ай бұрын

@@user-jc6cc9pl9k what makes it like Cuphead. The extreme difficulty or more the art style, 1930's cartoon. I love the art style want to make a game in that.

@Frankslaboratory 6 ай бұрын

@@user-jc6cc9pl9kNice to meet you Sudip, greetings to Bangladesh

@muksid100 Ай бұрын

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

@Frankslaboratory Ай бұрын

You can email me and I give you the code if you want. Sounds like you made a typo somewhere with collision box position

@technoinfoworldwide2329 6 ай бұрын

how to convert into mobile hybrid app and generate apk

@douglascounts4634 6 ай бұрын

Your initial CSS has a bug in it. The .canvas section should have `transform: translate(-50%, -50%);` But you have left off the transform keyword and also left off the parenthesis.

@Frankslaboratory 6 ай бұрын

Hi Doug, I used a new syntax. As you can see in the video it works, they rolled out some new CSS to separate different transforms such as translate and scale from the transform keyword, to allow us to animate them separately etc. It was a long requested feature.

@douglascounts4634 6 ай бұрын

@@Frankslaboratory Your are right it does work. I put a comma between the two values and that breaks it.

@Frankslaboratory 6 ай бұрын

@@douglascounts4634 yup

@magickomchanell4556 6 ай бұрын

could u pls make tutor marble wars territory game? its physq game thanks

@Frankslaboratory 6 ай бұрын

Thanks for bringing this game up. Never seen it. Just watched the gameplay. Very interesting. It might work well with a tile map series I'm planning

@jmschl96 3 ай бұрын

where is the discord ? would be awesome ! :D

@zach6862 4 ай бұрын

How can I play the game on my original mobile device?

@Frankslaboratory 4 ай бұрын

Put the files online and open index html or just put the project folder on your phone. It's a JavaScript project treat it like a website

@shubhamawasya5385 5 ай бұрын

Can you teach how to make QR code

@Frankslaboratory 5 ай бұрын

Hi Shubha, I had to do it recently at work and I just used a library. It takes only a few lines of code. Are you saying you are more interested in doing it with vanilla to actually see how it works?

@shubhamawasya5385 5 ай бұрын

@@Frankslaboratory yes , without any library

@HXP24 5 ай бұрын

next time put files in google drive pls

@Frankslaboratory 5 ай бұрын

Are you struggling to download the files from the links I provided?

@sandsriggs 6 ай бұрын

I am sooo excited for this. Still finishing up your other gaming tutorials. Do you have discord or another platform you chat with followers? Thanks again for the premium content!

@Frankslaboratory 6 ай бұрын

Hi, there is no rush it takes me a while to make a course like this anyway :D working on the next mobile game class now. So far no Discord, will probably set it up