JavaScript 2D Game Tutorial

Who says learning JavaScript cannot be fun. Let's take another step towards Front End Web Development mastery and practice fundamental programming principles and techniques in this vanilla JavaScript 2D game tutorial.

Some people skip my generative art and HTML canvas animation videos and just focus on game tutorials, but I want to show you that all canvas techniques I teach can improve your games, if you get creative with it.

Relevant links:

The main reason that people don't succeed in becoming a self-taught Front End Web Developer is because they loose motivation. My tutorials focus on teaching you everything you need to know about HTML, CSS, JavaScript and HTML5 canvas element, while at the same time building fun, visual and memorable projects.

In today's vanilla JavaScript 2D game tutorial I will show you how to add sound to your games, how to make player character follow the mouse whenever we click somewhere, how to handle simple collision detection that triggers sprite animation and how to rotate our fish sprite correctly to face the direction the player is moving. We will also cover repeating backgrounds, how to handle score and couple of other things. First we will build a solid good quality game skeleton that can be used for more than just this particular fish game. Then we will start adding graphics with sprites, particle effects and make the game look polished and clean.

To become a professional Front End Web Developer, you need to practice and work on your skills, these are some of my favourite well structured courses that cover everything you need to know:

#javascript #htmlcanvas #frankslaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney, World Map - Jason Farnham

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!

[aleksdizhe]

This channel is exactly what I NEEDED. Please continue videos on vanillaa javascript!!! Thank you!

[shivambirla]

This channel is golden.
Please keep creating videos in vanilla javascript .

[gct]

Frank, you know what could be a nice video to do? The process unedited that you followed to develop the game and your thinking to achieve the functionality of it, instead of the finished edited polished process. I think it would help us alot to understand the process a lot better and how to go about actually developing a game from the start and the raw process with mistakes and how you go about fixing those mistakes. just a thought . Thanks for the hard work

[Radu]

Great Job! The reason why you get the blinking at 25:37 is that when you do bubblesArray.splice(i, 1) all following values in the array move back one position. So, what was (i+1) becomes (i). Your update() and draw() methods will not be called for that new item (i), and you see a blink. Not all bubbles blink. Just the one after the one that was removed. To fix, add i--; after you call splice. That will make your for loop will go back a step and draw the item that just got moved into this (i) position.

[cryptostar]

I'm impressed by this ma. He's like a star : confident, knowledgable, articulate. Amazing video man keep up with content

[leonidas]

I am a Javascript beginner but not new to programming. This example helps me understand a lot about how the language is used :)

[santhoshraghavpidathala]

Expecting a lot of content like this. I will share with my colleagues

[bobdillan]

One of the better coding tutorial I've seen. Easy to follow, clear instructions, and more importantly it works in 2021!

[awekeningbro]

In order to prevent that flickering, just use setTimeout function to remove a particular bubble from the array.

[aadarshagrawal]

The best channel intro I have ever seen 😮

[limitedlifetime]

Truly valuable ❤️ - Thanks for your great efforts to provide us such awesome tutorials on Game development. I'm so much enjoying and learning with you. Love from India.

[johnatteo]

Just to note at 31:35, you don't need to add the this.counted = false; all you need to do is add bubblesArray.splice(i, 1); underneath score++; and it will only count 1 bubble towards the score, because it removes the bubble as soon as collision detection occurs. Other then that great video Frank!! Thanks

[leroiarouf]

You helped me for my school project thx you

[adedoyinemmanuel]

The blinking occurs because we are removing an object from the array which kinda cause holes to other array object during the animation the way to remove this is placing the splice function that is the area of code where we are removing the bubbles, place it in a setTimeout function and set the parameter which is when the function is to be executed to zero
Like this
for(let I=0; I<bubbles.length; I++){
if(bubbles[I].y<0){
setTimeout( ()=>{
bubbles.splice(I, 1);
}, 0)

}
}

[amirrezaranjbar]

It was sure worth searching for an hour to find you

[tomaslandsbergis]

No way! I just graduated Front-end Intermediate course and creating games look much easier than some websites! Thanks alot and perfect video man!

[asaelcortez]

It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.

[piersonlippard]

Thanks for another fantastic tutorial Frank. I have been avidly following your incredibly fun and create lessons every day this month. I really appreciate the effort you make to produce these lessons and todays intro chat is very encouraging. I just wanted to say a massive thank you.

[philkrupacs]

I think you're doing an amazing job moving at a pace that works for beginners. Thank you!

[coltonaallen]

Super fun tutorial, thank you once again for another hit! Also, 7:47 A little tip I discovered useful for centering elements in the middle instead of doing "justify-content" and "align-items" is simply "place-items: center;" and it performs both tasks at once.