Learn JavaScript By Building Games | How To Make A Game With Vanilla JS [Frogger]

In today's creative coding tutorial we will learn JavaScript by building games. I will teach you how to make a game with vanilla JS and HTML canvas element all from scratch with no libraries. We will focus on collision detection, keyboard input, frame-rate optimization and sprite animation, but every technique we learn can be used for other web development projects as well, not just for games. The skills and techniques I am about to teach you today will help you build your own unique games faster, but you can also apply them in any other JavaScript project, we are using pure vanilla JavaScript so everything we learn here are transferable skills.
LIKE the video please if you're getting value out of my tutorials and SUBSCRIBE if you want to learn more vanilla JavaScript!
Some of my favorite UDEMY courses:
** Creative coding **
How to Program Games: Tile Classics in JS for HTML5 Canvas bit.ly/2ZUfKuG
Next Level CSS Creative Hover & Animation Effects bit.ly/3jEkzju
** CSS / Front-end web development **
The Web Developer Bootcamp (Older but still very relevant) bit.ly/2ZZJM0d
Modern HTML & CSS From The Beginning (Including Sass) bit.ly/2Ec6Cch
Advanced CSS and Sass: Flexbox, Grid, Animations and More! bit.ly/3g0uqxT
** Vanilla JavaScript from beginner to advanced **
JavaScript Basics for Beginners bit.ly/32Tn5wq
JavaScript: Understanding the Weird Parts bit.ly/2WVe0zn
The Complete JavaScript Course 2020: Build Real Projects! bit.ly/3fXGwaZ
Modern JavaScript From The Beginning bit.ly/3fWJgWk
Object-oriented Programming in JavaScript bit.ly/3f4Otu0
Recommended book: Game Programming Patterns amzn.to/2ZlnplB (Amazon)
If you are really interested in game development check out this book. It's written in pseudo-code so it can be used for any programming language, if you are able to follow this video you will be able to use this book. It covers game development concepts that will eventually help you how to create much more complicated games, frogger game we are building today is very basic, but it is a nice project for beginners to practice JavaScript on.
Sprites & background images:
Project files:
All files zip: www.frankslabo...
Individual files:
Background www.frankslabo...
Background 2 www.frankslabo...
Background 3 www.frankslabo...
Background 4 www.frankslabo...
Frogger spritesheet www.frankslabo...
Cars www.frankslabo...
Collisions www.frankslabo...
Turtles www.frankslabo...
Log www.frankslabo...
This tutorial is part of a series - COMPLETE PLAYLIST:
• JavaScript Flappy Bird...
Today we are going to take things we have have learned in this series so far - and create a bigger polished game you can show off on your coding portfolio or personal website. It is a remake of classic Konami arcade game released in 1981, it received a popular sequel for PC and PlayStation 1 in 1997 and there are multiple clones for this game concept like go chicken go. Let's build FROGGER! :)
Tools I use:
Adobe Creative Cloud bit.ly/3e60cI0 (official Adobe website to buy Creative Suite applications)
Recommended channel: Ania Kubów #JavaScriptGames
/ @aniakubow
You can message me on TWITTER / code_laboratory
Check out some of my source code on CODEPEN codepen.io/fra...
#javascript #htmlcanvas #frankslaboratory
Music:
Business / Corporate by Mixaund | mixaund.bandca...
Music promoted by www.free-stock...
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]

Click the LIKE please :D Did you learn coding from KZbin or using more structured courses on platforms like Udemy? What other classic games would you like to build with me?

[@Hotatoes]

i did from UDemy first then youtube

[@ShayanBinShad]

I don't prefer learn coding from KZbin or Udemy. I think coding is an art and it can't learned by structured courses, rather it's done by passion, patience and dream!

[@JM-de2gh]

You're a solid guy Frank. As mentioned a little before, I've been doing Embroidery for seven years but started learning Web development to shift careers. I'm probably another month out before I start looking for jobs, but the time will come soon when I would be very interested to hear about your interview processes as you seem like a good source for solid advice. Now, more along fun lines -- are you ever interested in doing a game jam? I've been super interested in a couple each year, but I don't want to tackle it alone. I do know some programming, but basically started as an artist, even some 3D stuff. Here's an old portfolio to make some of the point -- I've actually been doing embroidery since this portfolio and never made a video of any of that! (kzbin.info/www/bejne/f2TaeYqhfbCsp68). Ignore the horrible website design. That was way back when I had no idea what I was doing. If you are interested in a Game Jam, I'll seriously hit you up the next time one of the bigger ones come up. I think between us we could make something simple and fun. I have a pretty solid music guy as well. He can make some top level stuff.

[@Frankslaboratory]

I did something similar. Structured courses at first when I didnt know anything to guide me and then I filled the gaps on KZbin, Specifically with creative coding there arent many structured courses so I had to piece it together myself.

[@Frankslaboratory]

Interesting point of view, I agree but also JavaScript has a lot of rules so to understand things like scope and closures I need technical explanation. Once I knew complete rules of JavaScript it was easier to become creative and go deeper into the art territory.

[@jarzis]

yours is one of the most addictive youtube channels out there

[@Frankslaboratory]

Is it? Love this comment, thank Jarzis ❤

[@froyyo104]

This channel is amazing Frank! I’m doing a coding boot camp soon and I just started learning JavaScript! This game took me about 2 days to finish because I had to research things like “class” and “structure” and “e.code” etc. Etc. In addition to all the notes I was adding based on your commentary. Amazing work! I was wondering if anyone had the source code tho, thanks in advance.

[@Frankslaboratory]

Hi Froyyo, nice to meet you. You have a good system, making notes like this will make the learning process faster, I also did something similar when I was learning. This codebase is not for complete beginners so it sounds like you are already doing well. Good luck with the bootcamp!

[@frankheagerty7339]

This was great, thank you for taking the time to make these videos! The amount I have learned from you so quickly is insane. The best part of your videos for me is that I "know" the concepts used to create the projects, but how you implement them is a way my brain would have never allowed without your videos and great explanations. Thank you again for the help and I appreciate the email response! Looking forward to see what else is in store on your channel!

[@Frankslaboratory]

Hi Frank, good to speak to you again. You are right that knowing the techniques and tools and using them for specific tasks might be two different things, and I like to watch other programmers approaching the same problem in a different way, using the same tools. Hope your coding studies go well, I'm just having fun with these coding tutorials, it's good to know that someone finds them helpful.

[@AlexandruLungan]

Hi, On min 14:58: e.keyCode is Deprecated so i use e.code keys[e.code] = true; if (keys["ArrowLeft"] || keys["ArrowRight"] || keys["ArrowUp"] || keys["ArrowDown"]) { frogger.jump(); Looks like it's executing the method jump. :)

[@Frankslaboratory]

Hi, you are right e.keyCode is deprecated, although it still works. I noticed there are some support issues with e.code, need to look into it more for the next video.

[@AnNoYiNsPo0n]

Thank you for that!

[@korktheorc1978]

hello frank!!!! i have bbeen on a vacation!!! i was on island, no internet, no water, barely food. now i follow this. i look at video 1 time and follow. now my second attempt (try to follow as little as possible) start! this guide is super great! really dig u man! keep it up, coll detection was on point and it was my weakest point b efore bute not any longer!!! hope u enjoy this maybe last or second last month of nice warm and sun shining,!!!! keep it up, ur fellow! kork the orc!

[@Frankslaboratory]

Hi Kork. Welcome back. Hope you enjoyed your holidays, although 'no water and barely food' doesn't sound like my ideal vacation aahahaha. Sorry :D I'm happy you like it. There are many ways to do collision detection between two 'axis aligned' rectangles like this. I also want to do collision between rotated rectangles which is much more complex but needed for physics games like Angry birds. The algorithm you need for that is called 'Separating axis theorem'. I will do it soon but it will not be an easy one :D Good luck with your project, let me know if you need any help

[@comfortablydumm]

Just finished the tutorial. Followed along, learned new things, and got the game to run. Awesome video!

[@Frankslaboratory]

Hi Robert. Congratulations on completing your project 👍well done!

[@lucascecin]

Just followed through the whole code and got my game running! Thank you so much, Frank! Learned a lot! At some points it was way too fast for me to catch up. Now I will study the code and try to mod it. Thanks again and keep going, man! This channel is awesome!

[@Frankslaboratory]

Hi, congratulations on completing the project! :) I'm still learning how to do these tutorials well, and trying to improve a little bit with each video, thank you for letting me know I went too fast, I will keep that in mind next time I'm recording a tutorial. Good luck with playing with the code and making your own versions of the game, that's always my favourite part!

[@thydevdom]

Your tutorials have really broadened my knowledge. I felt stuck for a while but now building my second app with you has definitely inspired me and made me feel rejuvenated. Thank you!

[@Frankslaboratory]

Hi Dominik, very happy to hear that. I hope you manage to keep yourself motivated and get to the point where JavaScript becomes easy

[@gotem370]

you had me at planes birds and other magical creatures!

[@cameronrowe2032]

Great stuff, Frank! Very easy to follow along (with a few exceptions when it wasn't 100% clear which file you were editing). I'd love to see a Part 2! Thanks very much

[@robertobenedit]

this is why i started to learn Coding in the begining! awesome!

[@Khary28]

I completed it and most importantly understood it! Thank you again!

[@antontrautman8786]

Hey guys, why there is only a few hundreds of likes? For sure, it should be thousands! Thank you for nice videos!

[@Frankslaboratory]

Thanks Anton, very kind of you to say ❤

[@Hotatoes]

OMG i like it so much I am even following it right now and gonna do it for my kids :D

[@Frankslaboratory]

Hi, nice :D I hope your kids will like it. You can make the difficulty curve easier for them, although I shouldn't underestimate kids, they are better playing games than me :D

[@CoolScratcher]

@@Frankslaboratory You're surprisingly considerate for an adult... most adults I meet think kids are not serious about things like these.

[@Frankslaboratory]

Well I think most kids are very serious about playing video games and some even about building them with code :)

[@jgarale]

frogger!!! one of my favorite games!! thank you for teaching us!!

[@Frankslaboratory]

Mine too, I'm remaking all my favourite classic in JS :D

[@billallwell6507]

That's a superb tutorial Frank. I'm onboard ! You are a gifted teacher

[@Frankslaboratory]

Wow, thanks Gordon, nice to get feedback like this, thanks for letting me know! :)

[@fonncatalina6464]

Thank you again! 6am in the morning still dig into the code! I found that visualize the code on paper really clear my mind especially the collision detection! And silly me stucked at the triple brackets error for quite a while lol....

[@Frankslaboratory]

Hi! :) Writing logic on a piece of paper is a good technique, especially for things that require more focus and visualisation of where things are, such as collision detection. I miss brackets and misspell 'length' all the time, I spent hours trying to find bugs like this :DD

[@chucksresume7203]

Love this video Frank!! Thanks for inspiring game devs!!

[@Finn-jp6pn]

Just wanted to let you know that your intro inspired me to work harder. I have always shied away from really mastering HTML/CSS. But I am hoping your videos will help me gain a better grasp on HTML/CSS. Liked and subbed. Thanks for the videos.

[@Frankslaboratory]

Hi Fen1x, glad to hear you got inspired. Coding is a fun job and anyone can do it, but only if you really want it, because it will take some time, patience and a lot of practice. I try to make my exercises fun so it feels more like play than learning. Good luck with your studies :)

[@nickvledder]

There is no better and fun way to develop one's JS skills.

[@Frankslaboratory]

Hi Nick. I agree. Making games and creative coding makes learning JS more fun and easier to remember for me

[@karlee8608]

Hi Frank, just found your video on KZbin. Saw the whole video on Frogger. Really awesome :) Enjoy watching it as well as learning the code behind the game. This is so amazing. Keep up the good work. I heard you said you use to work at Kohl and learning how to code. Not sure if this is personal but are you working as a developer in a company now? I would like to get some of your experience in getting there. Currently, I am learning JavaScript for a few months already but pretty much know the basic and can write a simple program. But getting a job at a company, it's going to take a lot more than just Javascript. Oops I wrote too much. Once again, thanks Frank :) By the way, Liked and Subscribed :)

[@Frankslaboratory]

Hi Kar :D Nice to meet you. Thank you for taking your time to give me your feedback and write a nice comment. I appreciate it. I didn't share much of my professional story online yet. It took me a LONG time to get my first dev job here in London. I worked for a supermarket but not as a developer and it wasn't Kohl. It was a regular shop assistant job. Then I worked for a call centre and while doing these jobs I was learning basics of JavaScript. Once I understood the basics I started experimenting and having fun with it and some of my experiments I share here on the channel. I have been thought a lot of interviews and code tests so if you want to discuss this more let me know :) All the companies I have interviewed for place most importance on vanilla JS. You can pick up React in one week if you know vanilla really well.

[@karlee8608]

@@Frankslaboratory how many interviews did you do prior to getting your 1st dev job? And yes please do a video on interview questions they asked. Thanks again Frank and keep making more videos on KZbin.

[@ShayanBinShad]

I'm absolutely sure that it's one of your hardest efforts ever! It's more than 1.1 Hours! 👏 👏 👏 👏 I wish, I could hit the Like twice! 👍 👍

[@Frankslaboratory]

It took a while to put this one together, you only know because you also make coding videos. Normally people wouldn't notice that there's a lot of work behind the scenes :) Your coding projects are unique, it takes a while to get picked up by KZbin algorithm but if you keep doing it you will get a lot of success on here. Good luck :)

[@ShayanBinShad]

@@Frankslaboratory That's true! it takes a lot of effort to make videos, specially coding videos, we also have to sync audio and video, add transitions, end screen, cards, comments and a lot more to make every video shine. I'm so glad that you found my coding projects interesting. Thank you. I'll try my best to do it. Best of luck to you too! :)

[@Frankslaboratory]

Yes, KZbin mostly cares about average watch time and click through rate on thumbnail, everything else is less important. With coding tutorials its more difficult to grow because people have to code along so they can't just watch and listen to the video while eating or something. They have to sit down and focus so tutorials always have lower watch time than videos where you just speak about a topic. There are a lot of SEO practices you have to learn as well, on top of video editing and actual coding. You know it you make videos as well

[@ShayanBinShad]

@@Frankslaboratory I recently discovered KZbin does that. I've worked around a lot of SEO practices and I'm trying to fit them in my videos as well. Agree that coding tutorials is more difficult to grow with but as I'm still a student, I'd a great opportunity to enhance my skills and get some time to do practise, while making the video. Also I'm afraid to speak in front of a lot of people or even in front of a 2 years old camera, so giving a speech on a specific topic does no good to me. 😋 I always create video thumbnails using HTML and CSS. 😁 BTW which video editor do you prefer to edit your videos?

[@Frankslaboratory]

Your thumbnails and video ideas are very creative, I think making them with HTML and CSS gives them unique distinguishable look. It takes a while to get comfortable in front of the camera. I'm still very stiff and this is not how I normally speak. Hopefully eventually I learn how to do that. I have been using Movavi and moving on to Adobe Premiere Pro since I have it as part of my Photoshop package anyway. What do you use.

[@sciencefordreamers2115]

Very great stuff! Very generous of you to share!

[@Frankslaboratory]

Hi! Thank you for saying that ❤

[@ShayanBinShad]

Congrats! it's your 50th upload! I hope you'll make me counting in future.🥰

[@Frankslaboratory]

Thank you my friend :)

[@danielchochlinski1732]

thank you so much for taking time and making those videos you are truly amazing person for that !

[@Frankslaboratory]

Daniel! Thank you for saying that, it's nice to be appreciated

[@Flocherryblossom]

Yayyyy thank you for this awesome tutorial!!!!! I finished it. Could you please explain why you did top: 50% left: 50%, translate(-50%, -50%)? One thing to note is that if you want cars of different widths, you need to make sure to remember to change ctx2.drawImage(car, this.frameX * this.width, this.carType * this.height, grid * 2, grid, this.x, this.y, this.width, this.height); to ctx2.drawImage(car, this.frameX * grid * 2, this.carType * this.height, grid * 2, grid, this.x, this.y, this.width, this.height); Otherwise it won't correctly cut out the image from the sprite sheet.

[@Frankslaboratory]

Hi :) top: 50% left: 50%, translate(-50%, -50%) will center any HTML element both vertically and horizontally if that element has position set to absolute. If you play with these values you will see what it does, it pushes it 50% to the right and then half of the elements width to the left so it's centered Good point about the cars, thank you!

[@AlexandruLungan]

Just started watching and i like it! i'll follow to the end. :)

[@Frankslaboratory]

I had a lot of fun with with this project, hope you do too

[@fullautomaton5948]

This is great fun, and I'm learning a lot. Thanks Frank! I made it through to the end and would like to see the added graphical features like shadows from flyers and the submerged fish. If you don't plan on a part 2, which of your other tutorials have those effects explained?

[@Frankslaboratory]

Hi, I don't plan to do part 2 for now, shadows and submerged objects are basically done the same way I do for example bubbles in my fish game. It's just an object that periodically spawns and is being removed as it travels past canvas. It's very simple. I might go back to it eventually, but you could say that I use iteration of this technique in most of my gamedev videos, so I think people can figure it out if they want to do it. If you have any specific questions how to achieve it let me know. If I don't respond on here you cam dm me on Twitter, sometimes youtube doesnt notify me for comments on older videos

[@danielraducu9073]

this is amazing !!!!!!!!!

[@Frankslaboratory]

Thanks Dan

[@danielraducu9073]

@@Frankslaboratory I have almost finished the tutorial and i am happier with each minute i go forward, but i have something to ask ... i would like a lot to see a tutorial js about an inventory system, add and drop items in a inventory box/ at player position on the ground. There is only 1tutorial about a js inventory sysyem on whole yt by pothonprogramming and it is not a well made tutorial because it is not step by step built and it is hard for me to understand from scratch what s there... he made his code public on github, but i don't still understand how should i start something like that if i d do one scratch my own, you can watch it here... but please try to do an inventory tutorial kzbin.info/www/bejne/d3ytfpltaK1kgMU

[@kelinci3867]

Thanks for the tutorial man... This is my first game that i code hahaha 😅👍👍

[@Frankslaboratory]

Hi. Have fun coding. This code is not very beginner friendly. My latest game I released is probably more suitable for beginners but if you can handle this one as well why not

[@andymoore1415]

Dude love all the videos man, I've learned so much just watching these vids

[@Frankslaboratory]

Hi Andy, thank you. Really happy to hear you find my videos useful :)

[@andymoore1415]

@@Frankslaboratory serious dude i started lea4ning javascript gaming through lockdown, and book resources are ok if well written but these videos are super helpful along with Poth programming and Code train although it's really helpful your videos are in vanilla javascript rather than using phaser or js5...but thank you man

[@Frankslaboratory]

I like both of these channels. Coding train videos are in Processing and p5.js but when you reach certain level with vanilla JS you can just watch his videos and write the code he's doing with JavaScript. 90% of his effects are possible to do that way, except when he uses very advanced p5 methods like getting outline of SVG shapes, still have no idea how I would do that with vanilla js. Well done on spending your time in lockdown learning new skills, that already puts you ahead of most people

[@andymoore1415]

@@Frankslaboratory i think the key with all of these channels including yours is just learning and getting more tools to apply to what you want to achieve and one thing id like to understand is how you get AI to follow paths etc or patterns etc...and even just out of curiosity of learning there is some interesting concept on code train channel on behaviours not that I fully understand but the great thing about your stuff you start from scratch and its easy to follow, top job

[@Frankslaboratory]

I think there are 100s of different ways to make AI follow paths. I used only the simplest version in my mouse trail autopilot video. There is also concept called flow field / vector fields and many other things of varying complexity all the way to machine learning. I wish I had more time to make videos about all of these. Do you have any personal projects you are working on or are you at the stage where you follow tutorials trying to learn all the techniques you need.

[@AneesKodappana]

Great tutorial, well explained

[@Frankslaboratory]

Hi Anees. Thank you :)

[@ishaqbux2278]

Fun tutorial like always. I coded along and enjoyed a lot.

[@Frankslaboratory]

Hi Ishaq. I'm happy you enjoyed it

[@peoplearecool8766]

Very good tutorial , Please upload second part

[@Frankslaboratory]

Thank you. Second part is in the works :)

[@taihatranduc8613]

THANK YOU FOR MAKING VIDEOS. I have looked for this kind of video for 2 days. Thank you

[@Frankslaboratory]

Happy you found it, good to have you here Tai

[@mohitprathipati9286]

Thank you! I learned a LOT!

[@Frankslaboratory]

Mohit! Glad to hear you found some value in my video, thank you for letting me know

[@carolinesantos2362]

Thank you so much for this video, I learned a lot!

[@Frankslaboratory]

Hi Caroline, glad you found some value!

[@dip4040]

Thank you infinite.Your video made my day😊

[@Frankslaboratory]

Hi Nilanku, I'm happy you enjoyed it :)

[@danielneuber3742]

Hi Frank, your Channel is great and i learn a lot of you about Javascript. Thank you for sharing your Knowledge width us !!! Why you dont make a Javascript - Course on Udemy ???

[@Frankslaboratory]

Hi Dan, thank you, it's nice to see that someone finds my stuff useful. I might make a complete JS course in the future but right now I'm on other projects. Maybe eventually yea, I would like to.

[@ishaqbux2278]

Frank please make second part of it and add some graphics. It will be fun. And thanks a lot for your hard work.

[@Frankslaboratory]

I would like to add a second level with sharks and crocodiles 🐊 😉 I'll add it on my to do list

[@Frankslaboratory]

I would like to add a second level with sharks and crocodiles 🐊 😉 I'll add it on my to do list

[@tarun7617]

Omg !! 1:18:35 !! You were going all out time 😉 amazing !! It'll be fun ..... Oh !! And I'm already building different type of games ... Thanks to you tutorials help ... I'm picking up different stuff from like every video ... And now working on a big game !! Anyways !! Thanks for your hard work 👍👍

[@Frankslaboratory]

Thank you Tarun, what kind of game are you building now, anything interesting?

[@tarun7617]

@@Frankslaboratory something like ... That star wars game ... But with different kind of weapons on different keys of the keyboard different enemies with different ai and after about 5000 😝frames it'll gave the player a chest to heal it's hp ... Oh !! Ya I did added a health bar ....for the player , still need to figure out how to set game over rules when hp is 0 ..., And in the end I'll be adding a dragon with big health bar ... Simple stuff

[@Frankslaboratory]

Sounds like a fun game, You are adding a lot of cool features. I would just create a top level gameOver() function and in another function that manages health bar I would add if statement that checks if healt === 0, then call gameOver(). There are much better programming patterns you need when you build larger projects but for smaller games it fine just to place the code anywhere really.

[@tarun7617]

@@Frankslaboratory thanks for the help ! I really appreciate it 😊

[@tarun7617]

@@Frankslaboratory Q : which course would be best for me ... Can you please clear my doubts ... As your kinda my teacher , so , can you please let me know a fine course I should be buying ( please get your student a nice course ) (θ‿θ)

[@prozeen2880]

Loves your videos Frank, do you have a video on all the ways you can do collision detection or do you plan on making one?

[@Frankslaboratory]

Hi Zeen, thank you for a great video idea. Collision detection can be tricky especially for new students. I will put something together to explain it properly. In short there are many ways to do collision between two rectangles, 1 very good way to test collision between two circles and then we have collision between irregular shapes which can get really complex.

[@prozeen2880]

@@Frankslaboratory Thank You I would really appreciate it if you make a video on collision detection.

[@adev_312]

Looks like the link to the sprites and background images is broken... Awesome tutorial!

[@Frankslaboratory]

Hi Anthony, thanks for letting me know, will fix the link now

[@Frankslaboratory]

I added links to individual files in the video description

[@peoplearecool8766]

This is very very goood ! I am so happy that i found this channel

[@Frankslaboratory]

Hi. Thank you. I'm happy you found it as well. Welcome

[@AtacamaHumanoid]

AWESOME!

[@Frankslaboratory]

Thank you Johnny :)

[@nimrahqureshi8381]

some things is not working for me properly so if you provide the code files is also very benifcial Thanks alot

[@antonisspathis2459]

Hello frank I'm doing exactly the same as you I'm a bus driver and trying to learn javascript on my free time can you share your experience

[@Frankslaboratory]

Hi Antonis, if you can follow and understand everything in this particular video you are job ready for a frontend webdev position. Here in London most companies want HTML, CSS, vanilla JS and React for frontend roles, I have no tech education and had no coding work experience before my first job. I had public GitHub profile I updated daily and coding portfolio with 10 example projects, I sent 1000s of job applications, before I got my job. Getting the first one is the hardest, but it's worth it because once you get it, your life will never be the same. Good luck :)

[@indrakhatiwada9860]

great video again Frank

[@Frankslaboratory]

Thank you Indra :)

[@marcocalderon7316]

Say frank do you have a linkedin page as well? please and thanks 🙂🙂🙂

[@taihatranduc8613]

I really like your videos

[@Frankslaboratory]

Thanks Tai :)

[@ramin9134]

you are amazing

[@Frankslaboratory]

Hi Ramin, so are you, thank you for a nice comment

[@tramvu8280]

Hello Frank, what a great tutorial video and a really easy catch up one, but I have problem with the "keydown event function" - the keyCode is deprecated and somehow I cant manage the alternative one. Can you help me out with the issue plz ?

[@Frankslaboratory]

Hi. If you console log event object on key down event you will see all the properties it contains. I'm on my phone now so can't test it but just look at the namea of these properties and replace it with the new version. You will be able to tell which one is it because its value is the same and key number we use currently

[@taihatranduc8613]

Frank, can you make a game with a top-down camera which the camera follows the player?

[@Frankslaboratory]

Hi, yes I will make a game like that, something in style of classic Pokemon rpgs

[@manbearpig762]

how are you getting acces to all of the ctx variables from outside files without imports/exports?

[@Frankslaboratory]

Hi Alex. If you include multiple script tags those JavaScript files will get read one by one. Exports imorts were only added to JavaScript in 2015 so there are many ways to do it without them

[@sojuthomas7727]

hi, frank, I can manage to do all this in one canvas, is there any reason why you use multiple canvases?

[@Frankslaboratory]

Hi Soju, you are right, all of this can be drawn on a single canvas. I used multiple canvases to demonstrate the layers in a better way. The reason you would want multiple canvas elements in a project like this would be to only clear and redraw layers that have active animation hapenning and only clear/redraw the area around player for example, when it's moving, rather than the entire canvas layer. There are many optimisations you can do while using multiple canvases but I didnt do it here because the video was already too long. I will make a video on this soon :)

[@kamilvelaro4244]

@Franks laboratory, does it matter to have multiple canvas elements? Does performance suffer? Does multiple canvas is the same as multiple layering?

[@Frankslaboratory]

Multiple canvases just give us more drawing area. How we use that area will affect performance. Having multiple canvases is actually very good optimisation techniques where we don't have do delete and redraw certain things that are static or we only redraw them occasionally when they change. I will make more detailed video about layering canvases very soon

[@kamilvelaro4244]

@@Frankslaboratory waw, cool, good answer, will be waiting that video, and thank you for your efforts. Learned too much from you, your videos

[@cherriepie]

The sound quality at the beginning made me laugh so hard

[@Frankslaboratory]

Yeah haha. Never tried recording outside. I guess people who do that have special equipment :DD

[@kalanaweerasinha8750]

super

[@Frankslaboratory]

Hi Kalana, thank you :)

[@larrykid11]

Is there any way to import only a single JS file into the HTML file, so that the imports are managed within the JS files only? I find it very bloated if I have to reference every script in the HTML file every time I create a new class.js file for my project.

[@Frankslaboratory]

Hi. Yes. Its easier that way just use export default and import keywords. The reason I don't do it is that it will only work if you run a local server. You can't just import local files

[@deepakbhargav7434]

Wow man

[@maxet2374]

Man thanks a lot. How old were Y when started learning?

[@Frankslaboratory]

Hi Макс, I learned HTML and CSS back in 2008 but couldn't write any JavaScript until 2016. I'm still relatively new to all this

[@gerardsmith4279]

yo, first of all, this is amazing. truly, so thank you * 10000000 for this I also have an issue, I can see ctx3 green w/ fillRect but no matter whatever png file I upload to froggerSprite (from appropriate file after having downloaded it) nothing appears. I have no frog! If i 'comment-out' ctx3 green w/fillRect as you do towards the end of the vid, I see nothing except the dust/ripple particles.

[@Frankslaboratory]

Hi Gerard, I would need to see your code to help you, if you cant fix it message me on Twitter

[@TheSlovo28]

I tried to follow along and nothing is working properly...cars don't load in but still collide, the turtles look like they are trying to take flight and I can't get the frogger sprite to appear x.x I'm yanking my hair out

[@Frankslaboratory]

If you want the source code message me on Twitter, you could compare it to your codebase

[@arock1942]

Why is frogger not defined in utilities… 😕

[@Frankslaboratory]

You need to be careful how you structure your code. When you know what's undefined you have to track the variable through your code and fix it. The code will work if you copy exactly what I did. If you want source code you can message me on Twitter

[@mohamednaina4656]

can i get the source code ? (because, I stuck on canvas stacking), thank you

[@Frankslaboratory]

Hi, yes you can message me on Twitter, KZbin now auto deletes comments if I leave a link here

[@marcocalderon7316]

hey frnak grrat video and i just sended you a message on your twitter regarding the particles.js file where i was stuck inthe handleParticles part of the draw(), did you recieved it ? also please and thanks as well frank :)

[@taihatranduc8613]

Hey Frank, can you please make "Angry Bird" game or "Pac Man" game?

[@Frankslaboratory]

Hi Tai, I can do Pac man. Angry birds will have to be a series because it has a lot of physics so I would have to explain collision detection between 2 irregular shapes. That's very advanced JavaScript

[@olakhaceolas8740]

can somebody send their entire code of the game? i need to check if mine is ok...thanks

[@pusarlaaishwarya5035]

thankyou learnt a lot and can you provide the source code link

[@Frankslaboratory]

Hi, message me on Twitter and I can send you the code

[@sameermuley8707]

Hi Frank. Thanks for this awesome tutorial. I am still very beginner. I ran into some weird problem. I created particles class and tried to call it in animate function in utilities but still my particles are not working. There is no error in the code since when I double checked using inspect in chrome, there was no error in the console. Would you be able to help me find what exactly is going wrong. Here is my code for particles. Thanks! class Particle { constructor(x, y) { this.x = x; this.y = y; this.radius = Math.random() * 20 + 1; this.opacity = 1; this.directionX = Math.random() * 1 - 0.5; this.directionY = Math.random() * 1 - 0.5; } draw() { ctx3.fillStyle = "rgba(150,150,150,0)"; ctx3.beginPath(); ctx3.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx3.fill(); ctx3.closePath(); } update() { this.x += this.directionX; this.y += this.directionY; } } function handleParticles() { for (let i = 0; i < particlesArray.length; i++) { particlesArray[i].update(); particlesArray[i].draw(); } if (particlesArray.length > maxParticles) { for (let i = 0; i < 30; i++) { particlesArray.pop(); } } if ( (keys[37] || keys[38] || keys[39] || keys[40]) && frogger.y > 100 && particlesArray.length < 200 ) { for (let i = 0; i < 10; i++) { particlesArray.unshift(new Particle(frogger.x, frogger.y)); } } }

[@Frankslaboratory]

Hi Sameer, I don't see any typo here, I would need the entire codebase. You can debug by console logging your particles array, put console log in your draw and update methods etc, to see what code is not being triggered when it should. If you can't find it send me full code on Twitter and I will have a look when I can

[@elliottmigotti891]

Hi! I'm new to coding in general, and I got stuck at 13:52 . I corrected the canvas names (1,2,3,4,5) but the green rectangle is still invisible/not working. I rewatched the video, corrected errors I haven't seen so my code SHOULD be the same as yours, or almost. To be fair since I've put all the images in another folder -> on setup.css , background: url('ImagesTutorial/background.png'); I've also watched until 19:00 but since I can't see the rectangle I didn't want to risk going further without knowing if it works. Do you have any advice?

[@Frankslaboratory]

Hi Elliott. There is some small typo somewhere in your code. Hard to tell without seeing the whole thing. If you want you can message me on Twitter and I can send you the final project files from this video

[@Frankslaboratory]

This project is not for beginners. Maybe you should have a look at my beginner playlist first

[@elliottmigotti891]

Thank you! I'll check the beginner videos first, and I'll message you for the code

[@mr.pacific8845]

@@Frankslaboratory I am having same issue too. Green rectangle doesn't show up. In console, it says canvas is not defined on utilities on frogger.js and utilities.js. I rechecked my code multiple times, its same as yours.

[@junejuly3196]

I just started front end development, what Udemy course did you use? thx

[@Frankslaboratory]

Hi. I put a list of my favourite Udemy courses in the video description. I was working for a supermarket and learned coding in my free time after work from these. Good luck with your studies :)

[@tarun7617]

@@Frankslaboratory wowie !! This was unexpected !!

[@Frankslaboratory]

What did you expect Tarun :)

[@tarun7617]

@@Frankslaboratory I was expecting for you to be in programming for the very start .. .... After reading that you were in supermarket ... Wowie !!

[@Frankslaboratory]

@Tarun Yes I was always more focused on science and biology but I also enjoy tech, I used to play a lot of video games when I was a teenager and it's avery natural transition into programming :) Anyone can become a coder if you really want it and don't give up mid way through their studies.

[@garroshhellscream8459]

my frog is jumping under the trunk, where did i go wrong?

[@Frankslaboratory]

It's because you draw frog first and trunk after if they are on the same canvas element, what gets drawn last is drawn on top. If you put them on separate canvas elements then it's easy to reposition them correctly

[@agent-33]

I am following along the video tutorial until this thing is driving me crazy so I stopped and make this comment. I can't believe no one noticed or mentioned this but with all those codes by the time 26:14 ... your cars animation should look like rectangle extending to right side. Reasons: >For your draw method of Obstacles class you used 'ctx1' which is context of 'canvas' (first canvas) >In animate() of utilities.js, you only used clearRect() to 'ctx3' which is context for 'canvas3' for the frog >There is no clearRect() for 'ctx1' to clear the previous drawings from the first canvas So how is it possible that the cars animation did not leave trace of the previous draw if they were not cleared? I was like "Whaaaaaaaat?" 😵 Is it because it automatically fix it in NodeJS?

[@agent-33]

Now I know. You made a mistake to assign all context to one canvas in setup.js, that's why cars are animating properly even when drawn on canvas1.

[@Frankslaboratory]

HI Agent, yes you are right, I got a bit confused with multiple canvases, and I fixed it later on. It was all animating on one context/canvas and I only noticed when my layers didn't do what I wanted them to do. Well done for noticing, looks like you understand canvas well, since you were the only one who managed to spot that so far

[@kayleighthomas6320]

Does anyone have the source codes? My frog is not sitting on top of the log & turtles? hahaha

[@Frankslaboratory]

I do :) you can message me on Twitter and I'll send it over

[@JNET_Reloaded]

way too many links all i want is 1 link link to code thats all now edit and and put just that 1 link good boy!