JavaScript Game Development Course for Beginners

[@Frankslaboratory]

Hope you have fun with the projects! 😊 If you have any questions or have issues downloading the art assets let me know! Thanks FCC for sharing my course! ❤🙏

[@kishoreramesh8110]

I Love it

[@kishoreramesh8110]

You earned a new subscriber

[@annm2855]

You're a nice man, thanks for this project

[@arsagor8506]

Love it

[@JM-de2gh]

Heh, you are spreading around the coding community Frank! Respect+. I always appreciate donations to the freeCodeCamp movement. In the past I actually dropped out of college, but was able to get a good job through educational and inspirational channels like these -- which of course includes yours.

[@martapfahl940]

For everyone who is seeing this, if you want to practice your object oriented programming skills, this tutorial is really really good for that!

[@TangiersIntrigue]

I'm not a huge fan of OOP and I usually avoid it like the plague, but it was an interesting tutorial to dive deeper into it.

[@102ayushkumar3]

Is this tutorial good for learning dom manipulation?

[@3RR0RNULL]

@@102ayushkumar3They have a separate video for that.

[@3RR0RNULL]

I came here to practice using JS, HTML, and CSS together, as I already know JavaScript, but not how to use it with HTML and CSS, or even those two alone.

[@andreasfrederiksen3898]

I have not watched it just quickly scrolled through it, it seems to mostly work within the canvas element so I do not believe there is much if any DOM manipulation. @@102ayushkumar3

[@norahyde5733]

3 lessons in, after a miserably failed attempt a few years ago with Sprite sheets where I got completely lost halfway thru someone else's tutorial, so far every single thing here has worked and even though I don't fully understand 100% yet what everything is doing, you explain it in a way where I will get there as my knowledge grows. Thank you so much, this course is so fun!

[@web3hQ000]

we're exactly in the same boat.. although i know some basics on .js, i still find it hard to understand some of what he did with dah dog sprite but as i kept watching and flowing along i came to get what he was talking about. Really great video..

[@knight6227]

This is pretty easy to understand, if you know all the web api's he's using. And this really wasn't the best way to make it, but it worked.

[@codewithsoumik]

I have recently crossed my 30s and my life is very far from sorted, yet I am not giving up. These structured free videos give me hope and strength.

[@blessyouunholy]

Hell yeah, keep fighting dude :D

[@leonstone3443]

hey im right there with ya, lets not let our 30s go to waste and make a better future!

[@MrMathers1991]

keep going bhai ! left retail industry to study web dev at age 30..anything is possible in life , go hard and win in life !

[@randompop-up]

We are on the same page ✌

[@yaredhaile9322]

why would u give up in your 30s?? you still young as hell man!

[@phillpeters]

1 hour in and the this keyword has been completely demystified!! Your one sentence did more to explain 'this' than other complete videos I've watched.

[@fadwarezika9041]

This video came at the right time, I've been curious about game development

[@alex_chugaev]

Same for me, just perfect timing ❤️

[@rcachampionnats6734]

me too hh i wiil reskin this game what about you?

[@alex_chugaev]

@Ort do you mean “learn 2D/3D rendering and canvas, but use it in other domains except for game dev?”

[@loganmagnuson4813]

Just finished the course from beginning to end. Had a blast the entire way through! This was a really fun way to learn some new stuff in JavaScript. Gonna take what I learned here and build a 2D game for my portfolio! Keep it up my friend and keep making great content! Thanks

[@brothercaleb]

Good one! How long did it take you?

[@web3hQ000]

@@brothercaleb like 3 months.. lol 😅

[@demetriuslee7291]

😭 I just want a job one day. This shit’s so hard

[@Gleb_Pastushenko]

At 5:09:55 the gap you see is a background defect (if you merge two backgrounds horizontally in Photoshop you will see the same gap due to the one pixel wide empty column on the left side of the image). So, when you try to compensate for this gap by subtracting the speed value, you shift the second background in such a way that it does not match the first one in the picture. So to get rid of this gap you just have to compensate 1px regardless of speed. And your background will move perfect an any speed. The only thing you have to do - is to compensate the same 1px when sliding background to the start position to avoid background jerking: draw(context) { context.drawImage(this.image, this.x, this.y, this.width, this.height); context.drawImage( this.image, this.x + this.width - 1,

[@Frankslaboratory]

Yea you are right, nice, I wish I noticed when I was recording the video :D

[@youarethecssformyhtml]

JavaScript is love! You can literally do almost anything you think about with it from web apps to mobile, desktop apps, iot, game development...

[@wallacesousuke1433]

If only Unreal Engine 5 used it instead of C++ :/

[@sourtil7158]

just because you can doesn't mean you should.

[@danser_theplayer01]

@@sourtil7158 You can tell that to well known applications. Besides, there's this popular game Balatro written in Lua (and all of the roblox games) that is a scripting language not very far from javascript.

[@andrewllewellyn6937]

There's my weekend gone 😂. I've been re-learning vanilla JavaScript, following a short period of learning it on a full-stack course. Being interested in game development also, this has come right at the right time. Thank you Frank and thank you FCC.

[@Ebizzill]

lmaoooo!!!

[@mbm6048]

Unbelievable, The law of attraction really works.I was looking forward to learning javascript game development so I can apply at tech with Tim's startup company. Then outta nowhere fcc posts.

[@wearegeeks]

The law of attraction doesn't exist. It's just a good polished algorithm or just you subscribed to the right channel.

[@keskinkesir4468]

its a bot comment...

[@weihe3579]

谢谢！

[@CloudNey]

I just got myself something cool to do on this weekend 😁😁😁 thanks for sharing your knowledge with us!

[@Gleb_Pastushenko]

About getting the XY coordinates of the cursor at the click point (2:35:00). You can get the coordinates of the cursor relative to the canvas directly, without any calculations, using the global coordinates of the cursor and the position of the canvas. To do this, you must use the canvas onclick event listener, not the window event listener, and then get the coordinates from the offsetX and offsetY properties of the event object.

[@Frankslaboratory]

Yes this works well, just tested it, will use it in the next game dev class I'm working on

[@agonzalez7389]

I've been using Javascript since the year after it came out, but never ever had this much fun with it. Thanks!

[@sabih__]

1995?

[@agonzalez7389]

@@sabih__ 1996. When only Navigator spoke it.

[@sabih__]

@@agonzalez7389 oh nice

[@cloudpractitioner5158]

That's really cool. So many years of experience!

[@TheodorSirmanoff]

Hey Frank, a big "thank you" firstly. You spent much more time than the tutorial.length in fact. What a dedication! Impressive.

[@MelvinG24]

For me, this has been the definitive course on how to create a 2d game with Javascript. I have used Unity to make my 2D games, but I never like it. I found Unity games too heavy with many unnecessary libraries and features that I never use in my games. So I took the initiative to rewrite one of my simples games in Javascript, and this tutorial is the perfect place to start working with

[@evolgenius1150]

I'm a front-end web developer! Soon as he said it I took that as a sign! I'm on the right path!

[@everydaykhiem974]

Man, I'm so stoked about this! I've started making simple arcade games on my own, but it'll be cool to eventually implement 2D scrollers and platformers. Thanks for sharing FCC and FL!

[@bernardus3289]

I love how you explain stuff. You go into detail why stuff is there and you try to explain complex stuff that even a noob like me can follow.

[@Frankslaboratory]

Thank you for this feedback. I will try to do more detailed explanations like this more often

[@rmnkot]

Fantastic tutorial. For me, as experienced JS developer different game technics were the most precious. Thanks a lot.

[@lukyyt9637]

I love how he goes silent once in a while to give us a little time to think and understand what he just explained without having to pause the video.

[@Frankslaboratory]

Thanks for that feedback

[@kankikan8584]

thank you, finished this course in 5 days!! great course!!

[@karlkoch3345]

Finished! Frank's stuff is awesome. So much great information.

[@roshnasanam8347]

Broo did you upload this project in Github if so will you please share your GitHub my code is not working I was struck for 3 days. Plz help me out

[@maksimsergeevich8096]

One of best courses I ever seen. Thank you, guys!

[@beer6432]

Hats off to you, the best tutorial that really explains what to do and the reason why, loved it and please do not stop posting more videos!!

[@Gleb_Pastushenko]

The problem of jumping background layers when changing speed is solved very simply (1:24:20). Along with the frame rate, you are essentially changing the speed of the game's timeline. In this case, the time in the game is set by the total number of frames. By changing the speed, you recalculate the total number of frames each time. The game jumps to a new position in the timeline, and the background layers jump to new coordinate positions corresponding to the game's position in the timeline. To save the current coordinates of the background layers, you need to save the position of the game on the timeline. In other words, when changing the speed, it is necessary to save the total number of frames. Because the total number of frames depends on the number of the "gameFrame" and on the "gameSpeed" then when changing the speed, it is necessary to change the "gameFrame" inversely proportionally to the change in speed. In the context of the code, this is just one line in the "onchange" event handler function of the slider, where you need to get the new number of the "gameFrame" by simply dividing the total number of frames by the new speed value: gameFrame = (gameFrame * gameSpeed) / e.target.value; Important: you must place this line of code at the very beginning of the handler function, where the "gameSpeed" ​​variable remains its value until the speed is changed. I have checked this solution, it works perfectly.

[@juliok4627]

Thank you! Anyone that had troubles, maybe this could help I accidently put it under showGameSpeed.inneetHTML = ... suppose to be on top in the slider.addEventListener.....

[@alexbird1507]

Thanks, but there is a problem. When you change the game speed value to 0, the canvas becomes completely black and any further attempts to change the game speed will not restore the dead animation.

[@filled998]

​@@alexbird1507 Solved in this way: Inside the handler function (I prefer to listen for an input event, instead of the change, in this case you can see the speed changing along with the range input, without need to release the click) -> const newSpeed = Number(evt.target.value); if (newSpeed && gameSpeed) { gameFrame = (gameFrame * gameSpeed) / newSpeed; } Inside update --> if (this.speed) this.x = gameFrame * this.speed % this.width; Inside animate --> if (gameSpeed) gameFrame--; Maybe there is a better way to code this? Idk, but works fine for me. I hope this helps you as well :D

[@DyonEnedi]

The best video i have seen ever. In 2013 i try made a game by myself and it was very hard cause I didn't find contents like this to learn. Now I can return to my project and try finish it using Canvas. Rotate objects was my problem, but now I am otimist I will get it done :)

[@xVinoz]

Finally after 5 days of intense coding lol. This course is amazing bro, i always wondered how pure vanilla games were built, i had a reference but actually doing it its cool. Using state management with classes its good to re enforce architecture stuff. Definetly this course is 4 beginners in gaming development but not 4 beginners in programming in general or in javascript haha, using clases is something you have to know well. -Peace

[@lauris5275]

Yea, for sure. Im learning js/frontend for some time now and game development is actually different from frontend. There are many things that i find hard and i don't consider myself a complete beginner. Mby not hard, but you need to know something before you can go forward you know.

[@roshnasanam8347]

Broo did you upload this project in Github if so will you please share your GitHub my code is not working I was struck for 3 days. Plz help me out

[@CorCronje]

Thanks!

[@Paulluskelvin]

Jeez, over 200k views in 7days. I will start this course in a week. Has to be the best out there for JavaScript developers cos building games is a surefire way to fast-pace your JavaScript skills not to mention how wonderful these games are, they'll really be great for portfolios

[@sugoish9461]

15:53 FLASH WARNING ⚠️ Not just at this specific point, but on some occasions too shortly after, as we are dealing with animating from a spritesheet, and how to not include blank frames in the animation shown. The animation is displayed at very fast speed and the subject is black, so there is a high-speed flickering between black and white. At 18:52 the animation speed has been slowed down again, so there shouldn't be a problem after that. Just wanted to make sure this is known! Love the video so far!

[@KY-xz9yb]

8:01:40 background.js full 8:02:42 fixing typo on background.js 9:25:26 background completed 8:11:56 enemy.js 8:25:07 8:28:14 climbing enemy 8:31:37 end 9:06:21 particle code 9:08:52 lines 32 particle.js 7:40:21 player.js draw,onground,setstate functions 9:35:49 player.js lines 1to 31 9:07:48 playerstates line 1-30 9:10:45 full code for playerstates.js 9:15:02 collisionAnimation.js 9:18:30 9:20:58 UI.js 9:22:47 9:32:58 floatingMessage.js Full 8:39:58 main.js this.UI.draw(context input.js 7:23:30 9:24:42 main.js adding particles 8:47:00 - 8:52:20 about particles

[@Gleb_Pastushenko]

About Chance that there will be two identical colors generated next to each other (3:26:10): 1. Chance of two identical colors: 1/256^6 (256^6 means: 256 to the power of 6) 2. Chance of at least two identical colors: 1/256^6 + 1/256^9 + 1/256^12 + .... + 1/256^(3*n) - where '"n" is the number of ravels. Сalculations are correct assuming a normal distribution of random values returned by the Math.random() method.

[@Gleb_Pastushenko]

About deleting unused objects (which hid behind the left side of the screen 03:07:15). I think the best way to remove them is to remove them in the "update" method of the objects, this way we will significantly reduce the load on the processor, because. in this case, the "filter" method iterates over the raven array only when objects need to be removed, and not every animation cycle. To see the difference - just call console.log() in both cases (console.log should be called in the same place as "filter") and feel the difference.

[@oleksandraokhotnykova8672]

It works with explosions and particles, but not with ravens. They are not disappearing. Any clue why?

[@Gleb_Pastushenko]

Hello! At 1:00:05 - in the line 27 "... - gameSpeed" is redundant. In the line 25 it's ok, because at the moment when you move the background x1 ahead the background x2, using the x2 value as an offset, x2 keeps the value from the previous iteration, so you have to subtract one more "gameSpeed" value from the x1, because in current iteration the background x2 hasn't made "gameSpeed" step, but when you move the background x2 ahead the background x1, you concatenate it with x1 in the same iteration, specifically when the background x1 has already made a gameSpeed step to the left. This will work correctly only when both if statements are in a row, and after them both expressions for calculating the x coordinate as at 1:08:02, because in this case both x1 and x2 still contain values from the previous iteration.

[@Radu]

A really good compilation with a bunch of useful techniques. I highly recommend it :-)

[@jtimothy8481]

Coding with Radu 👍

[@Radu]

@@jtimothy8481 :-))

[@victorhugopittamoller4116]

Wonderful, I hope everyone who wants to learn how to start developing games with Javascript can watch this video I learned a lot about game development in general, a lot about javascript and I was even able to try on my own to convert the game to the javascript framework that I use in my day-to-day life. I learned a lot. Thank you for this video!!!

[@gambomaster]

Thanks for introducing Frank to us. Just visited his channel and subscribed. He has a lot of interesting content there. 👍

[@Frankslaboratory]

Nice to meet you :D

[@Ikejosh9]

Wow! 😮! Thank you so much for this. Been looking for this all my life

[@programmingwithjavascript3579]

I knew from thumbnail , it's frank's game video in js. Because no one can teach such game in js in whole KZbin community 🙏 .

[@fedechiar1]

What a beautiful journey Frank, this tutorial is awesome (maybe a bit fast sometimes) and you're a great teacher. Big up!

[@almandohafenaaje7695]

As a newbie, I learned a lot, and i wont stop.. Thank you so much!

[@web3hQ000]

keep on going my friend!! you'll actually reach dah top if ya don't give up... lol rhymes.. 😏😉

[@almandohafenaaje1420]

@@web3hQ000 Coded along with you... and i'm actually done with it now. Thank you!

[@0xChijioke]

I finished It! Thanks, Frankie! Took me weeks because I didn't want to miss anything, and I didn't!

[@roshnasanam8347]

Broo did you upload this project in Github if so will you please share your GitHub my code is not working I was struck for 3 days. Plz help me out

[@smellthel]

I’ve been working on a platformer in plain JS and I was wondering if I did a lot of stuff in the best way. Thanks for the tutorial!

[@quoiquedon7002]

I have gone through all the way to the end! It was really fun and I learned a lot. Many thanks again to Frank!

[@dsm420]

Wow, Finally finished this 9-hour-long course. There was very much to learn. IDK how much I would be able to keep and use. But excellent explanations and a very structured video. 💛

[@coolguy7160]

nice, im getting to the second part, it's a good tutoral!

[@AAA5329]

Thanks for the grate video! If you want to use the modulo operation without the jumps you can't change the way how to calculate. for example if you are by frame 244817 and your gamespeed is 2 your modulo calculation is 34 ( >> this.x = gameFrame * gamespeed % this.width; => 34 = 244817 * 2 % 2400) if you change the gamespeed to 3 the value is 51 and your Layer jumps ( >> this.x = gameFrame * gamespeed % this.width; => 51 = 244817 * 3 % 2400) So you just have to change the way your gameframe value changes. If you use this line in the update() function of your class at 1:24:20 >> this.x = gameFrame % this.width; and you calculate the gameframe with: >> gameFrame = gameFrame - (1 * gameSpeed); (maybe don't call it gameframe anymore) you can use the modulo operation without the jumps :)

[@kusmaurya3675]

Solution to last problem in second Project (Parallax Background ) Problem: on changing slider background moves at some other position. Solution: Do not use global variable gameFrame. Refactor code of update method in Layer class like below: update(){ this.speed = gameSpeed * this.speedModifier; // if(this.x

[@MrJroc21]

Finally! Scowering youtube to find help creating games, this is amazing!

[@seye69]

Just finished the first project and am enjoying this so far - thanks! Not a bug per se, but unless I'm missing something, spriteAnimations doesn't need to be an Array. When you add stuff to it using strings rather than numbers in the square brakets, you're just adding properties to an object that's an empty array, and thus its size/length would remain at zero (you can see this when you inspect it in the console)! I think an empty Object ({}) would be less misleading than Array([]) if you're using string keys instead of number indices for access. Anyway, just a small observation - I'm going to shut up now and continue to enjoy your course :)

[@roshnasanam8347]

Broo did you upload this project in Github if so will you please share your GitHub my code is not working I was struck for 3 days. Plz help me out

[@roshnasanam8347]

Will you plz help me out with project 2

[@markbrobyn]

Frank's channel is one of the best!

[@MrEmekaChris]

Love what you guys do, thank you so much, please never stop, you’re the reason I am able to do all I do now

[@aqibyaseen2122]

What a time to be alive 😍

[@guixiaojie]

really awesome. that effort, well explained. just super

[@sol0matrix]

Loving this series of pure Javascript without any frame works

[@fhajji]

Around 2:24:00 don't take the square root, as it is computationally very expensive. Just compare the squared sum of radii with (dx*dx + dy*dy).

[@Frankslaboratory]

I agree, this is a good point

[@harshilshah980]

Just finished 'CLASH FROM THE PAST' and was left wondering how are games exactly made from scratch. Well, now I know how. Today feels like my lucky day :)

[@thoughtsofapeer]

This is an amazing course. I am on project 7 now and learning so much. I have one question in terms of jumping on project 7. I can't jump while moving to the side. How do I make it jump while I am holding down left or right arrow key? I just finished the course and I learned so much - and I also figured out the question above. Its really cool to begin experimenting. By project 9 I was pausing all the time to try and do the things before you showed us. It led to a few bugs and different logic, but it really amazes me that I came so far as I did in just 3 days. Thank you so so much!

[@Alessandro_no1]

That's what I need! Love you Guys!!!

[@LifterAndy]

Thank you for your work. It's great.

[@Gleb_Pastushenko]

3:30:54 you can SIMPLIFY color comparison FROM: if (object.randomColors[0] === pc[0] && object.randomColors[1] === pc[1] && object.randomColors[2] === ps[2]) TO: if (JSON.stringify(object.randomColors) === JSON.stringify(pc.slice(0, 3))) It looks clearer and less cumbersome. And you can do even better if in line 70 you assign the '[...detectPixelColor.data].slice(0, 3)' value rather then '[...detectPixelColor.data]' to the 'pc' variable to shorten the conditional expression (JSON.stringify(object.randomColors) === JSON.stringify(pc)) which is even more readable and clear, and almost two times shorter then (object.randomColors[0] === pc[0] && object.randomColors[1] === pc[1] && object.randomColors[2] === ps[2]) so as result you'll get the next code: const pc = [...detectPixelColor.data].slice(0, 3); ravens.forEach((object) => { if (JSON.stringify(object.randomColors) === JSON.stringify(pc)) { object.markedForDeletion = true; score++; } });

[@Frankslaboratory]

Can you please go over my other videos and do these comments, haha, love it, I'm making notes :D

[@momolp9656]

Hi guys, thanks for the course, it looks great. My 9 yr-old daugther want to move from Scratch to Javascript for game development, and your course seems great but you mention that some previous knowledge is required. Can you recommend any source as an intermediate step before taking your course?

[@Marckiese]

Does she know HTML and CSS yet?

[@momolp9656]

Hi @@Marckiese , no, she doesn't know yet HTML, neither CSS. Although I think we can help her with the basiscs.

[@martinlaupola6836]

Free code camp has great courses to learn these languages!!

[@Marckiese]

FCC is a great place to get her started.

[@DmitryDaren]

@@momolp9656 Yep, there’s mostly just one html element here - Canvas, and only the basics of css (used just a few lines there, so basically not required to learn ) and then, there’s basics of JS, like variables, loops, functions, objects.. and then everything is derived from these tutorials...

[@Gleb_Pastushenko]

3:24:42 you can SIMPLIFY 'this.color' expression FROM: 'this.color = 'rgb(' + this.randomColors[0] + ',' + tihs.randomColors[1] + ',' + this.randomColors[2] + ')' TO: 'this.color = 'rgb(' + this.randomColors.join(',') + ')'

[@dylanhamada4797]

Awesome tutorial! I can see a ton of thought and effort went into making this. I had a question about Project 1. The spriteAnimations variable is an array, but you populate it with named objects. Is that possible? I thought array elements could only be accessed by their index number. If you're populating the spriteAnimations variable with named objects, shouldn't the variable itself be an object?

[@baymanvalorant]

test3

[@irfanbalahan5900]

test34

[@Nisuk_de]

test23

[@tunabeyazal3260]

test24

[@sigmalaquery831]

test

[@eliasdorigoni]

You're a godsend. I'm building a pacman clone as a practice project and as my first game (web dev here). Thank you!

[@keddybyteai]

Hi, I am still a beginner so don't kill me for saying I feel it's better to have multiple images and just loop through them instead of putting all of them in one page. But I also feel like the pictures will be too large that is why you did it like that. But all these codes to bend around having to put all the images in one picture seems unnecessarily stressful. Enlighten me. Change my mind

[@homersimpson1199]

You want to do as little http requests as possible as they always come with an overhead and TLS handshake. This is why you dont want to have many pictures

[@brangja4815]

It's because of the image load time

[@rumansharma3616]

Thankyou you and your team for your each & every video. Your videos are always helpfull to us.

[@codestack6118]

You and Frank are doing great job..... This video is just what we have been waiting for.... thanks all you guys...

[@Gleb_Pastushenko]

About code refactoring at 8:48:15 you haven't to change code over all the children classes ("this.player" to "this.game.player"). Moreover - you don't need to change even the arguments of state classes constructors, since you pass the "player" object reference to every state instance you create inside it. And your "player" object already has the "game" object reference. All you need to do - is to create a "game" field inside parental class (State class). You even can simplify the code, removing all "this.player = player" statements from inherited class constructors to parental constructor: class State { constructor(state, player) { this.state = state; this.player = player; this.game = player.game; } } class Sitting | Running | ... | Rolling extends State { constructor(player) { super("SITTING" | "RUNNING" | ... | "ROLLING", player); } } thus you can leave "this.player" inside all inherited classes as is, getting rid of "this.player = player" statement in all inherited state classes at the same time. In addition, now nothing needs to be changed in the "player" class. And a cherry on the cake - you also get rid of the errror in the "handleInput", because when calling "this.currentState.enter()" your current state will already have the "player" reference, hence "this.player.frameX = 0" will not cause an error.

[@Gleb_Pastushenko]

About keydown / keyup tracking at 4:54:50. You can check key pressing in more compact way: keyTrackingList = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"]; .... if (keyTrackingList.includes(e.key) && !this.keys.includes(e.key))

[@Frankslaboratory]

I like this technique, will try to use it

[@toddharvey4200]

This is a great course so far. I just finished project 7. I played around with it until I was able to add horizontal movement by touch on mobile.

[@kxrpcrn5880]

first, I love frank's generative art tutorials, so I'm sure this one will be great

[@dilshodiadgarov4461]

What a great tutorial, thank you!!! Learned a lot about OOP!!

[@JeremyMyers]

First lesson done ... and WOW... What a great course this will be. Best explanations I have found yet in a course.

[@Frankslaboratory]

Hi Jeremy, well done for completing the project, thank you for your feedback

[@piegangxbankroll8970]

@@Frankslaboratory please is there a link to your git hub ? for this source code thanks

[@hernangil2470]

Course completed succesfully. Thanks!

[@DragonX999]

for those who do not understand sx,sy,sw,sh,dx,dy,dw,dh in drawimage sx can be said ix (image x) sy can be said iy (image y) sw can be said iw (image width) dx can be said px(position x) dy can be said py(position y) dw idk dh idk

[@priyanshupriyam174]

Starting this course with a lot of excitement!

[@marqueeplier4949]

Thank you so much. I used this to convert the game I made in love 2d into javascript. Now, you can directly play it on the browser. :).

[@hernangil2470]

2:13:15 follow() and avoid() complete. Good course. Thanks.

[@atanas0117]

Great course!!! Had a lot of fun with it past 7 days.

[@roshnasanam8347]

Broo did you upload this project in Github if so will you please share your GitHub my code is not working I was struck for 3 days. Plz help me out with project 2

[@toomuchyee]

if you're using visual studios to code these, you can get the "live preview" extension so you don't have to keep refreshing a browser

[@ChrisTian-ej5zb]

Maaaan ang hiraaaaap, project 1 palang naiiwanan na ko

[@dovakin_09]

Amazing and detailed course! Thank you so much!

[@nolsjawline]

absolute gold content! I'm an incoming EMC student, and this seems like a great intermediate project! See you guys in a month!

[@nolsjawline]

hopefully... haha

[@HaroonCodes]

I hope to become the Best JavaScript Developer and most Important in the world of tech and programming and problem solving.

[@nimira43]

Brilliantly explained tutorials by a brilliant tutor.

[@minelabsryan4485]

Thank you soo much, I have been trying to find a good starting video to get me familiar with JS, html, and CSS and this video is both fun and educational, thank you for making this video. :)

[@bartvanpelt9627]

I loved your video. Very instructive, good to follow. Thanks a lot.

[@juandavidcastroarias7115]

Thank your for your help, this information is usefull,

[@andreranulfo-dev8607]

Dude... That's mindblowing!!!

[@Frankslaboratory]

Hi Andre, glad you think so :D

[@braveitor]

Such a great video tutorial! I followed all the steps and projects, trying to anticipate your next implementations, so I've learned a lot. Thank you very much. I already knew a lot of this concepts but I needed the "big picture", with this state machine, classes distribution, and so on. Great job!

[@Frankslaboratory]

Hi David, glad you found some value, I'm working on another series with a similar structure, there are many 2d gamedev techniques I haven't covered yet, think I will do some isometric game tutorials next :)

[@braveitor]

@@Frankslaboratory That's fantastic! I'm watching also your previous videos as there are a lot of interesting things there. What I liked most of this vídeo is that everything is explained in a simple way, using vanilla javascript, while other instructors use some kind of js engine, and that content ends outdated in a pair of versions. Keep up this great content! I'd love to see how to make that isometric game. I made a very simple one back in the day using Flash, so it'd be great learning your approach. :)

[@Justin-l2d]

I like the camera masks in old school Resident Evil games; it's basically putting layers in front of a background image that the player can walk behind to make it look like a fully 3D environment.

[@alexanderbehrens7686]

Great Job. I only missed a github, with all the source code to compare it, with my code. Video pause, forward, backward, play and so on. You did a great job. Please more of this fine video tutorial. Your english is very food to understand!

[@benja-min1588]

Late to the party, but people in late 2024 are still enjoying this. Thank you @Frankslaboratory, this was great.

[@UnathiGX]

YOU'RE GOING TO LOVE THIS COURSE!!!!! 👁👁

[@quoiquedon7002]

Great tutorial! Many thanks to Frank!

[@web3hQ000]

They helped! Really.. helped. Although i know some basics on .js, i still find it hard to understand some of what he did with dah dog sprite but as i kept watching and flowing along i came to get what he was talking about. Really great video fr someone like me who wants to work in the game industry, and i also think 2d sprite is a good start up for me. Thanks for this great video Frank, they're awesome.. 😄

[@bigman595]

I probably sound stupid but what code programme did you use?

[@lelouch7107]

Your video make my day. I wanted to improve my js skill and I did not know how I should do. After your tutorial, I know exactly what I must do.

[@richardclark700]

Frank: Q @ 2:59:15 my answer: 16.65 - great videos btw, keep them coming

[@Frankslaboratory]

Thanks for letting us know Richard