Side-Scrolling Games (JavaScript tutorial)

No video

Side-Scrolling Games (JavaScript tutorial)

Рет қаралды 20,255

Franks laboratory

Күн бұрын

Пікірлер: 122

@Frankslaboratory 6 ай бұрын

MOBILE games 📱 or DESKTOP games 🖥?

@jimmyroserovallejo 6 ай бұрын

RESPONSIVEgames 👾

@davdev1695 6 ай бұрын

50%/50% 😁

@JM-de2gh 6 ай бұрын

Doing a great job there Frank. Sadly I haven't watched all your videos in full for a bit, but I def check out each one you upload and it's good stuff. I hope to make a tribute or two soon. Oh, my vote would be Desktop games!

@Frankslaboratory 6 ай бұрын

@@jimmyroserovallejo 👾👾

@Frankslaboratory 6 ай бұрын

@@davdev1695 thanks for letting me know

@sebastianbrunobautes7145 4 ай бұрын

I speak Spanish and understand English a little, but I can safely say that I have learned much more from your videos than the kind of content I can get in my native language.

@lawleds1 6 ай бұрын

You are sir, not only a great programmer, a great person as well for sharing all these stuff. I’m grateful.

@Frankslaboratory 6 ай бұрын

Thank you, very kind to say, glad you found some value

@Musfiq77 5 ай бұрын

@@Frankslaboratory plz make webgl related content

@annekeruben3238 6 ай бұрын

This really helps with my understanding of JS. Thank you for your uploads

@Frankslaboratory 6 ай бұрын

Hi Anne. Happy I could help

@gflaap 6 ай бұрын

Wow! Awesome as always Frank!

@Frankslaboratory 6 ай бұрын

Thank you 😊

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

It's really great these tutorials about mobile games with JavaScript!

@Frankslaboratory 6 ай бұрын

Hi Juan, I made more mobile games this weekend, might turn them into tutorials based on the feedback I get on this

@swedishpsychopath8795 5 ай бұрын

First I have to say: Your videos are TOP QUALITY in every way. Pedagogically, it cannot be done better and it is impossible not to understand what you explain. There is not ONE javascript statement that is out of place and there are not "cargo cult" statements that you do not understand. But best of all: NO LIBRARIES. To create visual teaching material combined with exactly what we need of oral information is an art and you master it to the full. There's no "uh" or "oops, I wrote it wrong", or "forget what I said - here's the right thing". Everything is perfect from A to Z. It must take an extreme amount of hours to make videos like this. So thank you very much! So to the question: Do you have any videos where you show how to get "live video stream" from the web camera where you manipulate video data "realtime" with plain javascript to present on HTML canvas?

@Barnardrab 5 ай бұрын

His tutorial is very good, but he utilized object oriented programming excessively. Some logic didn't need to be represented as objects. He could have made use of static properties in some of his classes.

@swedishpsychopath8795 5 ай бұрын

@@BarnardrabI hear what you are saying and know what you mean. BUT his use of Object Oriented Programming is what I like the MOST (I was taught SIMULA 67 at the University in Oslo in 1990's, so maybe I'm a biased but I don't think so). As you know SIMULA / OOP was invented in Norway and intoduced the OOP principels to the world that later inspired C++ and Java. Nowadays the trends is to "flatten" the languages and it is done too much all over the place - making code difficult to reuse, extend, maintain and debug. OOP makes it a little bit more verbose - but the code is super easy to read. Franks Laboratory is the prime example of how to use OOP. If he had made it "flat" without classes and encapsulation his code would've been very difficult to read / follow.

@adriaanboshoff4492 5 ай бұрын

Thank you so much. This was the most fun tutorial I've done in a long time. Added my own art and sounds, and will look at your other tutorials to see how I can improve it. Maybe a menu, high scores and some levels with different difficulty (increase speed and obstacle size)

@davdev1695 6 ай бұрын

Amazing video! Hey Frank, did you ever thought for next videos on making a tutorial on a classic role play game with base 3d? Something like Daggerfall or maybe the original Doom, using sprites for enemies and NPCs. I would be thrilled to learn how to make that!

@Frankslaboratory 6 ай бұрын

Yes that would be fun, I would probably start with a maze or something, because there is a lot going on. Hmm, it's a good project idea, simple Doom alien shooter in 3D

@Musfiq77 6 ай бұрын

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

@andrzejgrabowski8750 6 ай бұрын

Many thanks. You are an amazing teacher, instructor and person. Your videos help me a lot.

@Frankslaboratory 6 ай бұрын

Hi Andrzej, glad I could help

@bestiafera7913 5 ай бұрын

Loved it, just finished :). would be cool to see how to implement the buttons (r, f, d), will continue working on this game perhaps making levels, adding pause button, sound on and sound-off, also initial sceen with controls explanation. Thanx a lot!

@smicolon 6 ай бұрын

Sir , your channel is sooo underrated. 😢 But , I love u Your work is always amazing. 😊

@Frankslaboratory 6 ай бұрын

Hi. Thank you. Very kind to say

@Barnardrab 5 ай бұрын

The Game class didn't need to have instance attributes. The same applies for any state for which there is only one instance. You could have used the static keyword. Also, there wasn't any need to pass the Game object to the Player constructor because that could have been accessed within the body of the constructor.

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

Good staff

@serenityhavenforall 4 ай бұрын

Great Job Frank. Thank you so much.

@Frankslaboratory 3 ай бұрын

Hi Devendra, nice to meet you, glad you found some value

@CodeMaker23 5 ай бұрын

hello frank, the truth is that I think you are a master, I learn a lot with you, many times it is somewhat complex to understand the reason for the mathematical calculations that you do and I usually get stuck in those points where you make calculations so fast and so complex, it would help me a lot if you gave me some advice, how do I improve that part, there is no video of yours that I do not see, I want to become a master like you in this canvas, what do you recommend me to study apart from watching your videos to reinforce knowledge, or what should I do?

@MeinDeutschkurs 2 ай бұрын

It is really helpful and I love to see touch integration. But please add cue-points for ad, it’s hard to follow, when in the middle of an explanation business interrupts. Btw, if you recommend to not use Safari, maybe you should stop doing tutorials. If there are tweaks, a good tutorial would implement the tweaks.

@gideonting 6 ай бұрын

OH MY GOODNESS thank u so much for this free tutorial u are literally amazing!!! Also, just wondering, how do u er get this onto your phone? i tried to extract my zip file onto a folder on my phone but when i opened the html file, i think the backgrounds and all the css and js didnt load? am i supposed to find a way to host this on a website then open it on my phone browser? or am i supposed to build one of those apk file thingys? (im so sorry if these are very dumb questions im new to this haha)

@Frankslaboratory 6 ай бұрын

If you are a beginner you can simply put it online somewhere and open index.html in a browser. It's JavaScript. Its basically a website. Deploy is I'm any way you deploy a website. You can also just copy the project folder into your phone and open it from there yes

@gideonting 6 ай бұрын

@@Frankslaboratory ooh ok once again THANK YOU SO MUCHH

@yaboibedrivingafordexplore7404 2 ай бұрын

Goated

@irfansaeedkhan7242 6 ай бұрын

wow so i can directly watch this, awesome

@Frankslaboratory 6 ай бұрын

Hi Irfan, have fun :D

@rahieitee Ай бұрын

good stuff!

@mr.holmes1508 6 ай бұрын

Thanks for these amazing lessons frank ❤

@Frankslaboratory 6 ай бұрын

I'm here to help Mr Holmes :P

@frontendprotogy6749 5 ай бұрын

THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU.

@Radu 6 ай бұрын

Fantastic! Keep it uo :-)

@Frankslaboratory 6 ай бұрын

Hi Radu. Not as impressive as your content. Thank you 😊

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

@@Frankslaboratory love you guys ♥️♥️, two hearts for two of my favorite coders 😀👩‍💻👩‍💻

@javifontalva7752 6 ай бұрын

Thank you again for a wonderful tutorial! Btw. Can we make our mobile shake in JavaScript? Just wondering.

@Frankslaboratory 6 ай бұрын

Hi Javi, I should have thought of that, Navigator.vibrate(), next one I will do it

@PopLll-lo9ot 6 ай бұрын

Amazing 😍

@IamVladimirGreate 5 ай бұрын

Hello. Love your videos, they are great, but I find it hard to learn javascript by watching videos. Maybe you have something in text format.

@markus4437 Ай бұрын

For me the game is unplayble in Safari Browser. Tried on MacBook,iPhone and iPad. In Chrome/Firefox it runs perfectly without any issues. Is there a fix for it?

@alexanderpoker6655 6 ай бұрын

👽

@Frankslaboratory 6 ай бұрын

😝

@jimmyroserovallejo 6 ай бұрын

Best regards, please don't forget if you have time to do the final fight with a metrovania type boss or cup head with their powers respectively and a level, I think I'm not the only one who is waiting for that, thank you for your contributions and I hope that you feel well.

@Frankslaboratory 6 ай бұрын

Oh yea. We spoke about that before. That's a much bigger project. I will probably have to simplify that somehow or it will be a 12 hour video 🤣

@jimmyroserovallejo 6 ай бұрын

@@Frankslaboratory It doesn't matter how long the time lasts, but it would be good since you would give us a way to develop something fundamental in 2D games, you could divide the videos into part 1, part 2 and so on, the important thing is that you can take time out of your life haha, sorry for the request, although I have advanced in mine and I already did a fight with a final boss, I would like to have an idea from someone professional like you

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

@@jimmyroserovallejo hello jimmy, can you share that with me

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

@@jimmyroserovallejo I am also working on a boss fight

@jimmyroserovallejo 6 ай бұрын

@@user-jc6cc9pl9k I would like to see that

@aravindvv2276 6 ай бұрын

Hey magician 🎉❤

@Frankslaboratory 6 ай бұрын

Hi Aravind. Hope you're well

@rachitshukla30 3 ай бұрын

Didnt get that setTimeout thing at 1:56:00 why the wingsUp was not working on mobile

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

It would be great if you could teach us how to create games with React!

@Frankslaboratory 6 ай бұрын

I could do but there are 1000 React channels and not that many that cover vanilla JS

@Noxterful 5 ай бұрын

Hi Frank! I would like to ask if I can use your idea and the sprites you use, if I transcribe it all into a java android application? If not, can i pay for license or something else?😊

@Frankslaboratory 5 ай бұрын

Hi. You can use it. Have fun 😊

@Noxterful 5 ай бұрын

@@Frankslaboratory Thank you so much! I can't say for sure, but if i succeed, can I upload it anywhere, for example to the play store? I understand if not. 🙂

@Frankslaboratory 5 ай бұрын

@Noxterful you can do. Good luck with your project

@Noxterful 5 ай бұрын

@@Frankslaboratory Thank you for everything and thank you for the quick reply also. Please keep making content like this. You're awesome!♥️😁

@onuberonly7846 2 ай бұрын

I get massive performance lags on my iPhone 12 Pro and iPad Air - when flapping - I will try removing sound and see if that helps.

@Frankslaboratory 2 ай бұрын

Which browser, Chrome or Safari?

@edwardhandrich6043 6 ай бұрын

The title is "Build your FIRST Mobile Game". I must have missed the part where you show how to put this on a phone.

@Frankslaboratory 6 ай бұрын

Its JavaScript. Just open index.html in mobile browser. It's basically a website

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

I’ve learned so much from your videos! Let’s make some games together! 😃

@Frankslaboratory 6 ай бұрын

Glad you found some value. What game are you planning to build

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

@@Frankslaboratory well I am gonna start with the basic ones all the basic ones, but I want to add some coding and content that will sorta make them different in their own way. Your videos really do inspire me though.

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

@@Frankslaboratory I am working on the artwork right now, but a more complex version of most of the simple games

@johnniegilkerson4724 25 күн бұрын

ReferenceError: ctx is not defined at Game.render (ma

@deepikagautam464 Ай бұрын

when you create render function i didn't get the output like yours 6.30 seconds can you tell the solution

@Frankslaboratory Ай бұрын

Hey. I need more details. Are you saying your deltaTime is 6.30? That's because you have high refresh rate screen.

@bukboo Ай бұрын

hello boss, wheres the draw image part for background ?

@bukboo Ай бұрын

or maybe just do more check points so we can complete the tutorial boss

@bukboo Ай бұрын

So what is the logic here, to advertise incomplete projects?

@SILVERFANG77 6 ай бұрын

Please make a tutorial on making games in orthographic view

@Frankslaboratory 6 ай бұрын

Interesting idea. Give me an example. Something like Age of Empires 2?

@SILVERFANG77 6 ай бұрын

@@Frankslaboratory Yes , Age of empires is a great example of isometric view games. Also clash of clans, Fallout 2, wasteland 3, Diablo, etc are some of the examples of isometric/ perspective view games. And I realised in my very first comment I said orthographic view but actually it's isometric/ perspective view games that I was talking abt. Srry for any confusion I made.

@Frankslaboratory 6 ай бұрын

@SILVERFANG77 I see. Yes I want to make something like this. If you are loose with the term I already made an isometric game last February with the eggs and beholders. The way hit boxes are positioned in relation to sprite sheet could be considered a very simple isometric view I guess. I only say that since you mentioned Clash of Clans which has the most basic isometric view as well

@SILVERFANG77 6 ай бұрын

@@Frankslaboratory I'm looking forward to your tutorials. I hope you'll make something similar to diablo. Very much excited. And thanks for replying tho

@johnniegilkerson4724 10 күн бұрын

where is code?

@onuberonly7846 2 ай бұрын

I get no issues on Samsung devices- so could it be e a iPhone issue?

@Frankslaboratory 2 ай бұрын

It's a JavaScript codebase so browser you use plays a major role as well.

@harpallofi 6 ай бұрын

if we are beginner and learning Javascript. But problem is that when we go to make a game we becomes unable to write game code in JS. so what should us do as I am in class 10th. (Please).

@Frankslaboratory 6 ай бұрын

My advice would be 1) do a full beginner course that covers all the basics of JavaScript 2) build a few simple projects 3) then you are ready for interactive animated projects like this.

@harpallofi 6 ай бұрын

But which course are better on YT suggest me such a channel from that i can learn it full. @@Frankslaboratory

@Frankslaboratory 6 ай бұрын

@@harpallofi find a teacher you like. There are many. Try and see what teacher you learn the best from

@harpallofi 6 ай бұрын

Please suggest me from youtube i am unable to find please @@Frankslaboratory

@TheTeamofMuhammad Ай бұрын

Can you tell me? your screen recorder?

@Frankslaboratory Ай бұрын

I use OBS studio, simple and free

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

Frank, please make a action platformer game for mobile devices ❤❤❤❤

@Frankslaboratory 6 ай бұрын

Sure can do but how will that control with swipes and taps. Need to have a think about controls. Mobile controls are not as versatile as mouse/keyboard

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

@@Frankslaboratory kzfaq.infoCgq6TmxPYr8?feature=shared this the video of my Cuphead mobile game, the black squares are the buttons for controlling shooting and jumping, i haven't implemented those funcnallity yet, later i will add more buttons.

@Frankslaboratory 6 ай бұрын

@user-jc6cc9pl9k looks great. I never implemented this type of controls. I want to try that as well. Looks like your project is progressing well

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

@@Frankslaboratory Thanks sir, I have to do a lot of work to complete that game .

@dgzv8360 6 ай бұрын

Why do you use udemy, and not your own platform? You could make much more money

@Frankslaboratory 6 ай бұрын

Hi. I should probably do that. Udemy take a big cut unless people use the links I provide to access the site.

@philliplam2704 6 ай бұрын

Is there a video on how to optimize for other screens with 60hz vs 120hz?

@Frankslaboratory 6 ай бұрын

I can make the next game optimised like that. It can be done by limiting the speed at which request Animation frame runs. Write some code that says only render the game every x miliseconds

@philliplam2704 6 ай бұрын

@@Frankslaboratoryooooh ok thank you I’ll try that on my own while waiting for the next video.