Intro to Game Development with JavaScript - Full Tutorial

[@civicslohan360]

This is by far the greatest introduction into game programming. It goes over the majority of concepts needed to be understood, and a great way to organize it. For those looking for improvement, this is a great game to experiment on, and even create a new game project from. All I can say is fantastic job, and keep up the good work!

[@FatsFalafel]

I'm really excited that I'm getting to a point where I can watch this without a keyboard in front of me and follow along exactly without having to pause to reinforce a point. I'm also simultaneously furious at how seamlessly and effortlessly these refactors come to you.

[@SorrySuckYou]

I've tried to understand the POINT of refactoring for years. I understand what it means, how it works, and why to do it... but in my mind it just makes things MORE complicated, not less. You could just setup all the classes in the ONE index.js file and have an array hold ALL the data... and the code would work the same... without nonsense code like: "this.game.paddle.position.x" FIVE nested items... over 5 different .js files? How is that MORE clear. After refactoring the entire project looks like spaghetti, with everything tangled into everything else. I guess I'm just too stupid to do "advanced" refactoring so will have to stick with 'childish" arrays instead.

[@webentwicklungmitrobinspan6935]

@@SorrySuckYou i recomment reading: clean code, if you want to have a better understanding on how and why code should be clean and organized. applying clean code and a good architectute for only a few hundret lines of code is not important from my experience. it gets important after 500loc, maybe 1000 if you have alot of the same thing going on. a more complicated project however needs more refactoring, keeping functions small and let then do only one thing. helped me recently in bulding a chess game, went from quite hard to proceed to easy just by applying the rules of clean code.

[@jazzvanbenass]

THANK YOU FOR NOT ALLOWING AD INTERRUPTIONS IN YOUR 1 HOUR VIDEO! P.s. Very well explained, upvoted and subscribed! Looking forward to watching more alike!

[@alabirasheed3861]

I am actually sad that there is no way I could pay back for this great content

[@curtiskil]

If you're from Cali let's code together sometime

[@kevinfeng6700]

@@curtiskil Wanna string manips?

[@katech6020]

@@alabirasheed3861 I think they take donations

[@elClubdelas7Cifras]

@@curtiskil yo! I was in Cali last week. amazing place

[@parnasmi]

One of the best tutorials about javascript canvas game intro!

[@umbauk]

Loved this tutorial! Super clear and easy to follow. I downloaded a bunch of JavaScript game tutorials for a flight and this was by far the best one Thanks Chris!

[@gyohza]

I instantly clicked like the moment he mentioned the course would be entirely using vanilla JS.

[@korasbole5983]

clicked what you were already watching

[@kevinfeng6700]

@@korasbole5983 like like like like like like like like like stall word

[@forgaming2266]

Hey dani

[@LizardPlaysBass]

Same

[@shaneespinoza5343]

@@korasbole5983 He instantly clicked like as in the Like Button

[@valencia375x]

Just completed the tutorial and it was great! For those of you who are having problems with using the modules and with CORS (assuming you are using a different text editor than shown in the tutorial such as VScode) 1) make sure your index.js file has type = "module" on your html file 2) for VScode download the extension "Live Server" by Ritwick Dey and run it (after you install it, it should be on your bottom right corner and it says "Go Live") 3) For ALL your module javaScript files DON'T USE the .js extension, but use .mjs AND when importing them make sure to include the .mjs extension in the file name. (for example: import Paddle from './src/paddle.mjs' I hope this can help some of you :) (I'm not 100% sure but you may also need nodejs installed on your computer as well)

[@ericfricke4512]

That feeling when your code is literally the exact same as his but it doesn't work.

[@ronaldceballos15]

I know! lol but than if you copy and paste his code it works but you can't identify WTH is wrong with yours

[@nerdiloo9863]

lmao - Just slow down, and back track - pause the screen if you gotta and double check your code. Often times its misspellings. I did this game in Flash Actionscript 3 many years ago. You'll get it 👍

[@ericfricke4512]

@@nerdiloo9863 Yeah I already tried that. Maybe I'll come back to this vid another time and give it one more shot.

[@lilyliciousss]

bruhhhhh that's the worst.

[@everettmusicdojo]

At 9:49, when I add: import Paddle from '/src/paddle'; to line 1 of index.js I get: Uncaught SyntaxError: Cannot use import statement outside a module in the dev tools console. Anyone else get this error message?

[@scoutee]

thanks, I only understand 60 percent here, but I followed line by line and now I have a good base to refer to while working on my own game idea. really helpful!

[@techyleviathan2054]

This is like GameDev but on steroids. Such an amazing video. For someone who doesn't know a lot about programming I think it would be rather difficult to implement this (even via copy pastying, since he wouldn't know how to resolve any bugs). I am lucky that I'm coming from Java background and this looks like a piece of cake.

[@TusharShukladevx]

This video is so damn good, I'm still half-way of the tutorial but I'm so much liking it. Thanks a lot for this.

[@miwhcyvybaksjd]

This is the best intro I've seen for code organization.

[@webentwicklungmitrobinspan6935]

working for 3 years in a professional enviroment with javascript and frameworks like angular for producing good software products and almost forgot why i got exitet in the first place. game development looks so much more fun then bulding yet another form with nice search selects and stuff

[@Ixune]

If anyone has trouble with the paddle not moving at about 19:00, try changing "if (!deltaTime) return;" to "if (deltaTime == 0) return;". It worked for me!

[@twotridents]

thank you!

[@Ixune]

@@twotridents np!

[@lucas-hv6mz]

Thx works for me

[@RomanKnav]

Beautful! I typed in the whole thing myself and added comments/took notes along the way as you explained stuff.

[@taihatranduc8613]

Game is much more complicated than web. You write code so clean, so neat

[@mikhailglukhov6680]

Absolutely great tutorial! Step by step, in just 1 hour you get a working game - incredible!

[@vitaliishlomenko9844]

I have watched just few video about JS gaming. But it is the best video explanation I have ever watched for this topic!

[@pulsechainalltheway1845]

Amazing, thanks. The refactoring is great

[@gabrielmanguy3407]

Thank you so much I've been looking for a tutorial like this for a while. Much appreciated

[@mattcroat]

Great job Chris! Thank you for sharing this.

[@ellsonmds5310]

Hopefully, some day I'll get to this level of yours, nice, amazing tutorials, both design patterns and game dev playlist are awesome and of great help.Thanks for sharing this knowledge.

[@syedtawakkal6866]

Are you there yet!

[@TolgaOzisik]

Coolest javascript video that I have encountered!

[@aliguliyev99]

THIS COURSE IS VERY USEFUL THANK YOU SO MUCH! :))))))))))))

[@michaelcurtis7478]

That filter for marked deletion was slick.

[@timeforrice]

Great stuff. Hope he makes more videos!!!

[@hansschenker]

Good explanation and Clean Coding Style! Thank's a lot !

[@ronidey7100]

Thank you sooo sooo much. This is the first time when i created this game and i'm very happy. Because i have already built some projects using canvas that's why this tutorial was really easy for me to understand. If you are a beginner then you may face difficulties building this game. Again thank you so much❤❤❤

[@aaronmotacek9343]

Still watching the video (it's great and I'm learning a lot), and I know this video is more about learning than the nitty gritty, but at 42:44 the collision with the paddle / the paddle's "hit box" could be a little better visually for gameplay. Currently, if the start of the ball image is just one pixel further left than the start of the paddle, it will not "hit" the paddle, although visually it should still be hitting it (and similar issue on the right side). A good fix could be incorporating the width of the ball image (and splitting it in half): if (...&& this.position.x - this.size / 2 >= leftSideOfPaddle && this.position.x + this.size / 2

[@codeguppy]

This is a very nice tutorial!

[@hamzahajji5814]

This tutorial is awesome, GREAT JOB!

[@ozkang654]

You used almost every properties of Java script for a simple fucking game 😂 that was so helpful thanks

[@ryanbuizon58]

thank you so much!!!!! i was stuck on player movement when trying to figure out this stuff by myself xD

[@A09550]

This tutorial is awesome in terms of game development but also with the updated Javascript features, it deserves more comments.

[@ChrisPerko]

Thanks so much!

[@Bollsjen]

This was a HUGE help to get started! THANKS :D

[@PieterKuppens]

At 13:22, I think you should multiply by deltaTime.

[@elysiafilm6215]

This was awesome, thanks so much!!

[@Lap343]

I love this video really good job explaining everything

[@krakor92]

Thanks for this great turorial, very cool

[@BollywoodEntertainment-uq6bd]

thank you sooo much you solved my problem in my game

[@roberto9369]

very paused and well explained man. thanks for sharing this

[@ChrisPerko]

Thanks! I'm glad you liked it!

[@AndrewJens]

I was wondering about the potential problem of a ball getting inside a brick (and bouncing), and at 1:09:59, it happened. Thanks for the great tutorial.

[@bobnot]

If you are developing in a local environment and using a browser to visualize the results, does not forget to put type="module" in your ;)

[@150Neron]

Still my browser won't show it :(

[@makkarpuneet]

Great tutorial. Thanks, Chris.

[@slahserTV]

at 54:20 when he imports from collision detection the way he writes it is different from how he had been doing before, and in my codesandbox it couldn't detect it. So I changed it to "/src/CollisionDetection"; and it worked

[@noahibrahim3364]

Tried implementing it on my vs code js while watching the video made me research alot and use my brain to solve alot of problems but I am afraid I am giving up at the point for the disappearing bricks thank you learnt alot of class manipulation and OOP and modules free code camp always turn up

[@JeffBohler]

Great video, thank you!

[@webdevstudyroom]

Great work 👍

[@justcodingandwhatnot9890]

interesting tutorial. I learned a good amount.

[@Dude408f]

Great video, thanks a lot. I enjoy just seeing it, maybe I'll give it a try later

[@salvadormartinez3935]

feo

[@emexesa]

this is rather educative

[@twister8884]

Excellent tutorial. I have learnt so much from this, not only about game development but JavaScript also. Coding along with a project like this is a great way to learn. Thank you for taking the time and effort to make this video, it is much appreciated.

[@ChrisPerko]

Thanks so much! I'm glad you enjoyed the video!

[@gunb00t]

Why there's no paddle in my local but appears with the same exact code in codesandbox?

[@tusharrawat9665]

same problem plz help!!!

[@avi12]

12:16 This is clearly not the reason. JavaScript is a single-threaded programming language, i.e. all the code runs on that thread by default. if you put somewhere, without a breakpoint: while (true) { // Code } The JS engine will just be stuck at this block of code, and as a result - the page will freeze (unless somewhere in the code you include a break; statement). The reason for using requestAnimationFrame() recursively, is that this built-in function _asks_ the browser "run me when *you* can". It's similar but different than setTimeout() - the difference is that setTimeout() runs after all the code around it in the same block was executed, and then the function will run after X amount of ms that you specify to it. Same goes for setInterval(), but setInterval() is just like setTimeout() that continues until somewhere in the setInterval() code you call: clearInterval(interval_ID);

[@kunalsinghgusain2070]

thanks for info buddy.

[@montananewman2397]

Not sure what you're saying when you're saying all the "code in the same block". That makes no sense. When the call stack is clear, the event loop is able to poll the event queue for new events, and if so, add them to the stack. So you are right in a way, a while loop would result in an infinitely running call stack that never cleared, and is thus never able to grab anything from the event queue.

[@_manasikara]

ok.... 1:52 - got exactly the same code on my screen and that fuckn black screen doesn't show up!

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@sandil1232]

to keep things simpler you can also use color names like ~ "red" , "blue" instead of #f00 or #000 ....

[@nikeedev]

actually, no i tried.

[@mgm553]

@@nikeedev actually yes i tried

[@NeoKailthas]

IMPORT will not work if you are using local editor like VS CODE. you can look it up on your own if you care to know why. fixes will either compromise your browser security or you will have to host your files in AWS or run your code on a webserver of some sort. Anyway, I suggest combining both paddle.js and index.js in one file for now. while you are learning at least.

[@SethGardnerVlogs]

Very helpful comment! Thank you so much!

[@js_programmer8423]

If you get an import error, that is because you have to use this: --> add in type="module"

[@forrestnaylor7385]

Had this issue, thanks!

[@MauritsWilke]

Tysm!

[@polydoesgames2906]

lazy effort on the tutorials part. He should of been teaching you how to import the files from outside folders, preferably in an IDE that people will use, not some webpage that some college kid made in a month.

[@spookier444]

For those whom the rectangle doesn't show up try to change the import to import Paddle from "./paddle.js"

[@isaac-739]

ghostboy I did that and now I get an error saying gameWIDTH not defined even though it is. Did I do something wrong?

[@bagratgharagyozyan7655]

I appreciate your EFFORT!!!

[@codeguppy]

This is a nice tutorial!

[@scigama71]

very good.thanks.

[@drkmgoswami3042]

I love this tutorial

[@CodingJourney]

Very nice!! Thanks!

[@oskarszarowicz581]

Great project! Thank you , really helped my javascript learning. If anyone wants to add some more "replay-ability" you can add this function that generates random levels of varying difficults as p increases from 0 to 1! :) function RandomLevel(p) { let bricks = []; for( let i =0 ; i

[@nicolagassmann9554]

Is no one gonna talk about the completely broken collision detection? It only checks if the ball is touching the top or bottom of the brick. If it touches the sides it doesn't work anymore. A similar problem is with the paddle. You can basically "pick up" the ball if it's under the paddle but hasn't touched the ground yet. I mean, maybe that's intentional, but I don't think anyone would want that kind of unpredictable behaviour in their game.

[@saifeddine7716]

You could easily fix that, you only have to come up with a function that detects if the ball touched the left/right side of the game or not and add some logic here and there and ud be good to go

[@tylery7238]

Well, this tutorial was really enjoyable until the 32:11 when we started refactoring. Moving between several files while having the app broken made it hard to tell if my changes matched your changes (as we both had an error screen). Somehow, somewhere, something went wrong. I'm sure it's a typo on my part, but I'm not getting any console errors to go on. I'm just suddenly missing my paddle and my ball no longer responds to the walls. Really frustrating. Since refactoring is a difficult concept for all but seasoned developers (and even some of them struggle) I'd like to suggest you take it a bit slower next time. Fix one thing and make sure the app loads, then fix another thing. Don't try to fix several things and have the app magically start working at the end.

[@SorrySuckYou]

Yes, same problem here. I finally GAVE UP and rewrote the entire game myself, just using his ideas. Refactoring is f*****g stupid and not even necessary.

[@markovracaricic9913]

The same problem, so fast and made me to go from the beginning and if it repeats changing the channel, this is supposed to be intro for the beginners.

[@Teganinify]

I know this is 3 years too late for the OP but I had the same issue with the paddle disappearing after the refactor. The solution was that I had not set this.gameHeight = gameHeight in my paddle.js files constructor. Hopefully, this can help anyone else who has the same issues!

[@chillofono]

In the minute 13:20 shouldn't it be a multiplication (*) instead of a division (/)? The biggest the delta time (the time that takes a frame to render) the further the element should move.

[@patrickpaxton4858]

Somehow this channel always creates content, that's so zoomed out, that you can't even read the code, aspecially not on a mobile device, no thank you free code camp!

[@someonehere4380]

put a higher resolution... prres the 3 dots up there

[@tobiaslarsen1682]

If you had problems displaying the paddle: Make sure you don't style the size of the canvas in css. It has to be styled on the html tag like this:

[@Mostafa_Heidari]

that is true :)

[@rachidrezzik]

life saver haha

[@johnmadsen37]

Cool. Thanks.

[@Brick10Man]

Great tutorial

[@garethgreen3076]

Me: I'm gonna learn JS Also me: can't get the paddle to draw even though I followed his instructions perfectly

[@ahnafalhabib5430]

Same here, what is your code, mine is... Paddle Class: export default class Paddle { constructor(gameWidth, gameHeight){ this.width = 150; this.height = 30; this.position = { x: gameWidth / 2 - this.width / 2, y: gameHeight - this.height - 10, } } draw(ctx){ ctx.fillStyle = "red"; ctx.fillRect(this.position.x, this.position.y, this.width, this.height) } } Index: import Paddle from "paddle"; let canvas = document.getElementById("gameScreen"); let ctx = canvas.getContext("2d"); const GAME_WIDTH = 800; const GAME_HEIGHT = 600; ctx.crearRect(0,0, 800, 600); let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT); paddle.draw(ctx); /*ctx.fillStyle = "red"; ctx.fillRect(200,20,100,100); ctx.fillStyle = "blue"; ctx.fillRect(370,260,50,50);*/

[@ahnafalhabib5430]

@CreepePaul Thanks yours works!!

[@TheKandyan]

Bro I actually want to erase myself from earth I can’t figure out the import error even though I put them in different folders or write the import code it still says error module not found

[@iq0578]

Gold

[@iscottjones]

Help: At the beginning when you are showing how to clear the screen you change the position of the 2nd square and it turns into a rectangle. For me this square just moves and didn't need to code in the clear screen part. Why is this?

[@Stevesteacher]

If you're using a normal browser and you refresh, then it redraws the canvas and everything on it

[@charliewayne220]

This happened to me too. I'm wondering if maybe since this video is 2+ years old there was an update to code sandbox that prevents the need to clear the screen when moving the square?

[@paolo_castellani]

Great job man!

[@AntonOhlin]

10:10 The console tells me: "Uncaught SyntaxError: Cannot use import statement outside a module".

[@Bollsjen]

I got the same error. In the script tag on the html page you write type="module"

[@pix3l13]

One thing you could do is to include the type="module" tag in your HTML file. (for example: ) The disadvantage of this solution is that you will have CORS problems. So, for now, it would be rather adviseable to add a script tag for every single JS file in your HTML file. (for example: )

[@pogathedev5764]

@@Bollsjen This worked for me, thanks heaps.

[@andreadg5429]

@@pix3l13 thanks!

[@codestorywithMIK]

@@pix3l13 To avoid CORS problem, you can go to about:config and set security.fileuri.strict_origin_policy to false

[@DanA-10357]

Imagine being as smart as this guy

[@name4758]

can't be me

[@name4758]

can't be me

[@dany241]

Thank you so much

[@joem8251]

I also had import/export issues. I attempted some things suggested in the comments by another user with no success. I draw a rectangle without the import line (commented out): success I draw a rectangle with the import line (not commented out): fail; the rectangle doesn't draw

[@ara7546]

you need to add .js here an example import {Test} from "./test.js";

[@maxxtsoumpelis2216]

@@ara7546 doesn't work still for me either. Can draw rectangles in beginning, but as soon as import Paddle comes into play in Index.js nothing will show up anymore...

[@12uler-tv]

@@ara7546 This worked for me! Must have been the ' . / ' root folder issue. Thanks!

[@12uler-tv]

@@maxxtsoumpelis2216 I think you need to add type="module" to your in html.

[@twotridents]

If you're having trouble getting the bricks to load correctly, make sure you list x positions before y positions. I had y position first in one file and my bricks were loading sideways.

[@MrBrady95]

Thanks! @23:00 I tried to rewrite this so that the if statements weren't needed in input.js but it failed. Unclear why though. I tried many things within the paddle.js but couldn't make the bug, pause when changing direction, go away.

[@shaanyahoo]

speed = distance / time, so displacement should = speed * time. You need to fix the speed and multiple it by deltatime to get the displacement.

[@sprite7393]

+, i just spent 10 minuts trying to understand why he wrote speed = distance / time xD

[@woomygfx]

i spent one hour trying to fix the paddle not showing on my screen, nothing worked so i copied and pasted your code, then to realize that there isnt the option "upload file" when i tried to add the img to images

[@lanitoman410]

r u using processing js

[@hasibh37]

I followed the tutorial correctly. I typed my code the same as his. But why won't my paddle move? (issue started from 19:17) Someone, please help me. (Issue in the tutorial: Moving the paddle, 17:56- 21:35)

[@roguepifighter189]

im having the same problem have you fond any solutions

[@Koala019]

u cant not show people any code or context and just expect them to use voodoo magic and make ur game work..

[@shinobi1975]

4:28 finally! Been wondering why it gets linger and longer. But may I know why does it do that tho? Is it like a limitation or something? I have urge to to understand every single thing lol

[@Voip3D]

When I was following along and I go to test it's saying, "cannot read property 'getContext' of null"

[@waynedickman8201]

In brief: html/css and javascript files load into the browser engine at separate places and run side by side. Your issue is likely the javascript asking for the html object before it's been loaded into the engine. Try moving your work into a single function that's called when the window loads (if you haven't worked out a solution by now already!)

[@dudeguyman2618]

@@waynedickman8201 How do I do that?

[@colerau2409]

If you're having trouble with CORS or getting your paddle to show up, check out H Hope-Carter's pointers below

[@SquierMarr]

You should not do this. You should work it out and make it work. You will always need multiple files in a project especially if you make anything bigger than this. Here are some pointers: 1. Make sure you've put all the files in a script tag in index.html 2. Mark those script tags with type="module" 3. For me at least, the way he's writing the paths is wrong. If the file is in the same folder you're in you don't write the folder name. So if you're in ball.js, and you want to import from brick.js, the path is "./brick.js" the . indicates being in the same folder. 5. Always check that you have added export default properly to the file you're exporting. 6. Sometimes VSCode will autofill for me and there will be no ".js" at the end of the file path. This is fine for React but doesn't work in other contexts like this, so make sure the filepath ends in .js It's been a year now so I assume you know everything I wrote, but just in case someone else comes across your comment I wanted to make this point. You should right click inspect and then click on the console in the menu that opens, find you errors and google them to find results like the one above, not just try and write your program in one file. Look for answers that's how you're going to learn.

[@colerau2409]

@@SquierMarr I agree with what you've said. Putting all your classes into one file instead of properly configuring imports and exports is not a good habit to have. My original comment was bad advice so I've edited it. Thank you for your reply.

[@SquierMarr]

@@colerau2409 Nice one man, that's a really good idea! Thanks for the reply.

[@amvschool7414]

4:28... I only got a black square instead of red... And the blue square did not even appeard... Why sir?

[@maxxtsoumpelis2216]

Can someone help, as soon as I start to do the export default/ import, the paddle never shows up. Also, "ctx.fillStyle = '#f00'; ctx.fillRect(20, 20, 100, 100);" to Index.js doesn't do anything anymore. It seems the exporting / importing isn't working / breaking everything. Also, I'm using Atom, so is it that I'm missing some packages or something??? Im a newbie newbie please someone help!

[@ericfricke4512]

same problem here, I'm using Sublime Text. Has to be an importing issue.

[@ahnafalhabib5430]

Same here, with Visual Studio Code, I fixed with all in one docs j script

[@tirubitchi]

Having the same problem

[@C.C17409]

BRUH i just spent 20 minutes tryna get this stupid box to exist IT WOULDN'T LOAD COS I HADN'T SAVED IT AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHH

[@lamp5256]

For something so small it takes so much time to code - even when I'm just copying.

[@uttkarshpathak2904]

If you dont see paddle use type="module" in HTML in script tag

[@noahibrahim3364]

Made it seriously made it 😆🦾

[@arthurariado503]

im confuse my canvas automatically updates do i still need to do this 4:25

[@Teshia]

To be compatible with all browsers, yes.

[@jacksonchan9774]

I don't understand the "lasttime" and the "timestamp"...it's the JS's API?

[@awekeningbro1207]

no, timestamp is just a variable that hold the current time(in ms) assigned by global function 'requestanimationframe', basically the idea is to get the time interval between frames when you subtract the timeStamp and lasttime. here, lasttime is the timeStamp of the previous frame.