Point & Shoot Games (JavaScript tutorial)

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 ม.ค. 2025

ความคิดเห็น • 104

  • @Frankslaboratory
    @Frankslaboratory  ปีที่แล้ว +19

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

    • @douglascounts4634
      @douglascounts4634 ปีที่แล้ว

      Wow, really looking forward to them.

    • @Push_ups__
      @Push_ups__ 10 หลายเดือนก่อน

      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
    @micanal5533 11 หลายเดือนก่อน +6

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

    • @Frankslaboratory
      @Frankslaboratory  11 หลายเดือนก่อน +2

      Nice work. Congratulations on completing the project!

  • @Lyricszofficial
    @Lyricszofficial ปีที่แล้ว +6

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +3

      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
    @benja-min1588 ปีที่แล้ว +1

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

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

  • @claudehaudegon1939
    @claudehaudegon1939 หลายเดือนก่อน

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

  • @JuanPabloGomez-cc6vm
    @JuanPabloGomez-cc6vm ปีที่แล้ว +1

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +2

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

    • @JuanPabloGomez-cc6vm
      @JuanPabloGomez-cc6vm ปีที่แล้ว

      thank you so much for your response!@@Frankslaboratory

  • @forgottenaquarium2879
    @forgottenaquarium2879 ปีที่แล้ว

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      Hope your JS muscles get strong this year ! :D

  • @mahbleh404
    @mahbleh404 ปีที่แล้ว +1

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

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

  • @playmambo9573
    @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
      @Frankslaboratory  11 หลายเดือนก่อน

      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

  • @ЛеонідПрокопенко-л8м
    @ЛеонідПрокопенко-л8м ปีที่แล้ว

    Amazing job! I always waiting for your video.

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

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

  • @MeinDeutschkurs
    @MeinDeutschkurs 7 หลายเดือนก่อน

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

  • @gideonting
    @gideonting 11 หลายเดือนก่อน

    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

  • @adidevbhattacharya9220
    @adidevbhattacharya9220 11 หลายเดือนก่อน

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

  • @mahimabhardwaj1807
    @mahimabhardwaj1807 ปีที่แล้ว

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

  • @Musfiq77
    @Musfiq77 11 หลายเดือนก่อน

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

  • @javifontalva7752
    @javifontalva7752 ปีที่แล้ว

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      Hi Javi, thank you

    • @Shitai-4ever
      @Shitai-4ever 6 หลายเดือนก่อน

      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

  • @jimmyroserovallejo
    @jimmyroserovallejo ปีที่แล้ว +2

    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
      @Frankslaboratory  ปีที่แล้ว +1

      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.

  • @AlexanderBarakhov
    @AlexanderBarakhov ปีที่แล้ว

    Awesome Frank! Thank you once again!

  • @sandsriggs
    @sandsriggs ปีที่แล้ว +2

    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
      @Frankslaboratory  ปีที่แล้ว +1

      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

  • @Push_ups__
    @Push_ups__ 10 หลายเดือนก่อน

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

  • @Radu
    @Radu ปีที่แล้ว

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      Hi Radu, yes, it was requested a lot

    • @Radu
      @Radu 11 หลายเดือนก่อน

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

  • @gflaap
    @gflaap ปีที่แล้ว

    Awesome Frank!!!!❤

  • @suelingsusu1339
    @suelingsusu1339 ปีที่แล้ว

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

  • @tarcisiooliveira8810
    @tarcisiooliveira8810 11 หลายเดือนก่อน

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

    • @Frankslaboratory
      @Frankslaboratory  11 หลายเดือนก่อน +1

      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

  • @helidrones
    @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
      @Frankslaboratory  11 หลายเดือนก่อน

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

  • @CodeSnap01
    @CodeSnap01 ปีที่แล้ว

    just a wow content . Pure gold.

  • @UncleDavid
    @UncleDavid 11 หลายเดือนก่อน

    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
      @Frankslaboratory  11 หลายเดือนก่อน +1

      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.

  • @Dragon_Coder
    @Dragon_Coder 11 หลายเดือนก่อน

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

    • @Frankslaboratory
      @Frankslaboratory  11 หลายเดือนก่อน

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

  • @Push_ups__
    @Push_ups__ 9 หลายเดือนก่อน

    What more should we do

  • @HXP24
    @HXP24 ปีที่แล้ว

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      Yup. And I'm making more

    • @danielsurmat
      @danielsurmat 10 หลายเดือนก่อน

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

  • @muksid100
    @muksid100 7 หลายเดือนก่อน

    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
      @Frankslaboratory  7 หลายเดือนก่อน

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

  • @devilrjn1587
    @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
      @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

  • @Code_With_Shami
    @Code_With_Shami 4 หลายเดือนก่อน

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

    • @Frankslaboratory
      @Frankslaboratory  4 หลายเดือนก่อน +1

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

    • @Code_With_Shami
      @Code_With_Shami 4 หลายเดือนก่อน

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

  • @M4rt1nX
    @M4rt1nX ปีที่แล้ว

    Wow Frank, thanks a lot!!!

  • @technoinfoworldwide2329
    @technoinfoworldwide2329 ปีที่แล้ว

    how to convert into mobile hybrid app and generate apk

  • @douglascounts4634
    @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
      @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
      @douglascounts4634 ปีที่แล้ว

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      @@douglascounts4634 yup

  • @worldbest3097
    @worldbest3097 ปีที่แล้ว

    finally!! waitedd so longgg

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      Yea it took me a while this time around :D

  • @quantum_microscope
    @quantum_microscope ปีที่แล้ว

    thanks bro your videos is very helpful

  • @johnniegilkerson4724
    @johnniegilkerson4724 4 หลายเดือนก่อน

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

    • @Frankslaboratory
      @Frankslaboratory  4 หลายเดือนก่อน

      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.

  • @amoljadhav5088
    @amoljadhav5088 ปีที่แล้ว

    Amezing content 👍

  • @daneshland4122
    @daneshland4122 ปีที่แล้ว

    So thanks dear frank.
    \

  • @magickomchanell4556
    @magickomchanell4556 ปีที่แล้ว

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

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      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

  • @shubhamawasya5385
    @shubhamawasya5385 11 หลายเดือนก่อน

    Can you teach how to make QR code

    • @Frankslaboratory
      @Frankslaboratory  11 หลายเดือนก่อน

      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
      @shubhamawasya5385 11 หลายเดือนก่อน

      @@Frankslaboratory yes , without any library

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 ปีที่แล้ว

    awesome

  • @XAVIER-ns7sx
    @XAVIER-ns7sx 11 หลายเดือนก่อน

    🎉🎉🎉

  • @sudipbasak-m7y
    @sudipbasak-m7y ปีที่แล้ว

    wow❤

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

    • @sudipbasak-m7y
      @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
      @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
      @Frankslaboratory  ปีที่แล้ว +1

      @@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
      @Frankslaboratory  ปีที่แล้ว +1

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

  • @HXP24
    @HXP24 ปีที่แล้ว

    next time put files in google drive pls

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

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