Side-Scrolling Games (JavaScript tutorial)

[@Frankslaboratory]

MOBILE games 📱 or DESKTOP games 🖥?

[@jimmyroserovallejo]

RESPONSIVEgames 👾

[@davdev1695]

50%/50% 😁

[@JM-de2gh]

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]

@@jimmyroserovallejo 👾👾

[@Frankslaboratory]

@@davdev1695 thanks for letting me know

[@sebastianbrunobautes7145]

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.

[@greenparksquad6336]

man, your code is so pleasant to watch. clear code style, nice variables and function names and most important - you choose simplest ways to solve problems, it is so easy to understand, no complex algoritms

[@Frankslaboratory]

Hi Max, thank you for your kind feedback, much appreciated

[@lawleds1]

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

[@Frankslaboratory]

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

[@Musfiq77]

@@Frankslaboratory plz make webgl related content

[@adrian3355w]

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

[@Frankslaboratory]

Hi Anne. Happy I could help

[@khajiit92]

This was very helpful for me to get used to object oriented style programming in JS and using canvas, thank you!

[@gflaap]

Wow! Awesome as always Frank!

[@Frankslaboratory]

Thank you 😊

[@JuanPabloGomez-cc6vm]

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

[@Frankslaboratory]

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

[@adriaanboshoff4492]

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)

[@swedishpsychopath8795]

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]

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]

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

[@bestiafera7913]

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!

[@laptoprelaks]

heyy this is nice and easy to understand….i used to learn lua and gml for game making but i was too lazy… but i want to learn gamedev again with javascript because i want to learn frontend dev too

[@Frankslaboratory]

Hi, glad you found some value, I had a lot of fun making this project

[@Barnardrab]

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.

[@andrzejgrabowski8750]

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

[@Frankslaboratory]

Hi Andrzej, glad I could help

[@shinobi1975]

Hey Frank. Do you have a functional programming tutorial for game dev?

[@davdev1695]

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]

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]

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

[@smicolon]

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

[@Frankslaboratory]

Hi. Thank you. Very kind to say

[@irfansaeedkhan7242]

wow so i can directly watch this, awesome

[@Frankslaboratory]

Hi Irfan, have fun :D

[@mr.holmes1508]

Thanks for these amazing lessons frank ❤

[@Frankslaboratory]

I'm here to help Mr Holmes :P

[@serenityhavenforall]

Great Job Frank. Thank you so much.

[@Frankslaboratory]

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

[@jackboone964]

Great Channel!! How can I play this on different devices or send it to another person that doesn't have vs code?

[@gideonting]

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]

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]

@@Frankslaboratory ooh ok once again THANK YOU SO MUCHH

[@CodeMaker23]

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?

[@kodessamods9624]

Hi there, from my understanding (which feel free someone else to correct), he uses math to create physics and manage the spacing and placement of everything on the screen in a way that is not complex and doesn't need much more code. So for example, if the object is in this place (place is a math number) then the object should do this. As a person also learning, what helped me understand this more was doing Css positions and booleans as practice. I hope this made sense!

[@CodeMaker23]

@@kodessamods9624 Could you give me more details?

[@CodeWolf-d1h]

Good staff

[@MrEdwardhartmann]

Do you have any videos that explain your development environment and how you set it up so that changes instantly show up on the webpage?

[@Frankslaboratory]

I use VS code editor and Live server plugin for instant reloads

[@yaboibedrivingafordexplore7404]

Goated

[@muzzamiloloyede]

what about the restart button how did you make it and those things at the buttom

[@IamVladimirGreate]

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?

[@Radu]

Fantastic! Keep it uo :-)

[@Frankslaboratory]

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

[@sudipbasak-m7y]

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

[@jimmyroserovallejo]

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]

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]

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

[@sudipbasak-m7y]

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

[@sudipbasak-m7y]

@@jimmyroserovallejo I am also working on a boss fight

[@jimmyroserovallejo]

@@sudipbasak-m7y I would like to see that

[@frontendprotogy6749]

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.

[@javifontalva7752]

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

[@Frankslaboratory]

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

[@strum007]

It said mobile game so I was expecting you to package it for mobile using a technology like Cordova. Other than that nice tutorial.

[@MeinDeutschkurs]

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.

[@SimPwear84]

Use parcel JS to minify and compile your JS files so that it can work on all browsers

[@rahieitee]

good stuff!

[@rachitshukla30]

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

[@onuberonly7846]

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]

Which browser, Chrome or Safari?

[@Noxterful]

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]

Hi. You can use it. Have fun 😊

[@Noxterful]

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

@Noxterful you can do. Good luck with your project

[@Noxterful]

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

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

[@PopLll-lo9ot]

Amazing 😍

[@applbery]

hello boss, wheres the draw image part for background ?

[@applbery]

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

[@applbery]

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

[@JuanPabloGomez-cc6vm]

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

[@Frankslaboratory]

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

[@onuberonly7846]

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

[@Frankslaboratory]

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

[@oguspogos]

I did it!

[@Frankslaboratory]

Well done Ogus

[@P1D15H4H]

Can you tell me? your screen recorder?

[@Frankslaboratory]

I use OBS studio, simple and free

[@edwardhandrich6043]

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]

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

[@SILVERFANG77]

Please make a tutorial on making games in orthographic view

[@Frankslaboratory]

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

[@SILVERFANG77]

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

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

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

[@TimothyMichaelGould-z7m]

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

[@Frankslaboratory]

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

[@TimothyMichaelGould-z7m]

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

[@TimothyMichaelGould-z7m]

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

[@alexanderpoker6655]

👽

[@Frankslaboratory]

😝

[@aravindvv2276]

Hey magician 🎉❤

[@Frankslaboratory]

Hi Aravind. Hope you're well

[@harpallofi]

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]

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]

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

[@Frankslaboratory]

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

[@harpallofi]

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

[@sudipbasak-m7y]

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

[@Frankslaboratory]

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

[@sudipbasak-m7y]

@@Frankslaboratory kzbin.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]

@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

[@sudipbasak-m7y]

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

[@johnniegilkerson4724]

where is code?

[@johnniegilkerson4724]

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

[@dgzv8360]

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

[@Frankslaboratory]

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

[@philliplam2704]

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

[@Frankslaboratory]

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]

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