Point & Shoot Games (JavaScript tutorial)

[@Frankslaboratory]

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

[@douglascounts4634]

Wow, really looking forward to them.

[@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❤

[@Code_With_Shami]

wow brother you doing great work can make it playlist one by one

[@Frankslaboratory]

Hi Shami, nice to met you, good luck with your channel, I can see you are making videos as well

[@Code_With_Shami]

@@Frankslaboratory yes brother I make also video related to web about JavaScript react js WordPress wix and Shopify type website

[@micanal5533]

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

[@Frankslaboratory]

Nice work. Congratulations on completing the project!

[@Lyricszofficial]

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

[@Frankslaboratory]

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

[@MeinDeutschkurs]

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

[@jimmyroserovallejo]

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]

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__]

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

[@benja-min1588]

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

[@Frankslaboratory]

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

[@technoinfoworldwide2329]

how to convert into mobile hybrid app and generate apk

[@jmschl96]

where is the discord ? would be awesome ! :D

[@JuanPabloGomez-cc6vm]

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

[@Frankslaboratory]

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

[@JuanPabloGomez-cc6vm]

thank you so much for your response!@@Frankslaboratory

[@Push_ups__]

What more should we do

[@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

[@sandsriggs]

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]

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

[@UncleDavid]

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]

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.

[@johnniegilkerson4724]

@40.25 in video I am not getting any score and my code is identical to yours.

[@Frankslaboratory]

Hi John, if you need source code you can email me. Somewhere in your code there is a typo otherwise you would get the same result as me.

[@tarcisiooliveira8810]

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

[@Frankslaboratory]

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

[@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

[@Musfiq77]

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

[@adidevbhattacharya9220]

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

[@HXP24]

next time put files in google drive pls

[@Frankslaboratory]

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

[@Radu]

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

[@Frankslaboratory]

Hi Radu, yes, it was requested a lot

[@Radu]

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

[@playmambo9573]

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]

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

[@forgottenaquarium2879]

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

[@Frankslaboratory]

Hope your JS muscles get strong this year ! :D

[@devilrjn1587]

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]

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

[@shubhamawasya5385]

Can you teach how to make QR code

[@Frankslaboratory]

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]

@@Frankslaboratory yes , without any library

[@magickomchanell4556]

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

[@Frankslaboratory]

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

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

Amazing job! I always waiting for your video.

[@Frankslaboratory]

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

[@suelingsusu1339]

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

[@Frankslaboratory]

Thank you

[@mahbleh404]

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

[@Frankslaboratory]

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

[@XAVIER-ns7sx]

🎉🎉🎉

[@Frankslaboratory]

😜

[@quantum_microscope]

thanks bro your videos is very helpful

[@Frankslaboratory]

I'm here to help

[@AlexanderBarakhov]

Awesome Frank! Thank you once again!

[@Frankslaboratory]

Hi Alex, happy to help :D

[@mahimabhardwaj1807]

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

[@Frankslaboratory]

Glad you think so.

[@Dragon_Coder]

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

[@Frankslaboratory]

Glad you found some value. In the next video I will show a bit more advanced mobile game

[@douglascounts4634]

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]

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]

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

[@Frankslaboratory]

@@douglascounts4634 yup

[@CodeSnap01]

just a wow content . Pure gold.

[@Frankslaboratory]

Glad you found some value

[@daneshland4122]

So thanks dear frank. \

[@Frankslaboratory]

Happy to help

[@M4rt1nX]

Wow Frank, thanks a lot!!!

[@Frankslaboratory]

Hi Luz

[@HXP24]

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

[@Frankslaboratory]

Yup. And I'm making more

[@danielsurmat]

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

[@gflaap]

Awesome Frank!!!!❤

[@Frankslaboratory]

Thank you ❤

[@javifontalva7752]

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

[@Frankslaboratory]

Hi Javi, thank you

[@Shitai-4ever]

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

[@amoljadhav5088]

Amezing content 👍

[@Frankslaboratory]

Thank you

[@irfansaeedkhan7242]

awesome

[@Frankslaboratory]

Thank you

[@sudipbasak-m7y]

wow❤

[@Frankslaboratory]

❤

[@sudipbasak-m7y]

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 😅

[@sudipbasak-m7y]

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]

@@sudipbasak-m7y 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]

@@sudipbasak-m7yNice to meet you Sudip, greetings to Bangladesh

[@helidrones]

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]

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

[@worldbest3097]

finally!! waitedd so longgg

[@Frankslaboratory]

Yea it took me a while this time around :D