JavaScript 2D Game Tutorial

[@Frankslaboratory]

Part 2: kzbin.info/www/bejne/g6i3gqeGfNp1o9E

[@davidkoks2400]

☻

[@jadhajali2804]

Yooooooooo I'm so sneaky man hahaha, I paused the video and was so adamant on fixing the flickering / blinking issue, I was reading the different ways to remove an element from a JS array, and came across splice / pop / slice etc. I read one of the examples given, had a i - - ; after the splice, and I immediately felt that this was the reason why it's blinking. I'm assuming that since we're not reducing the i correspondingly, js is handling it on its own, and this is causing this blinking effect, I assume it's either js reconstructing the array, or the garbage collector or something... Anyways after trying it couple of times, it fixed the blinking issue, just add i - - ; after the splice. Btw thanks for the video, I am learning a lot.

[@jadhajali2804]

hmm apparently, the i- - ; created a problem with collision, it's throwing an error sometimes ( guessing it's because the bubble is disappearing, so it's returning unidentified distance ) I'll keep working on this to fix it. EDIT: fixed by simply putting the collision if statement ABOVE the if(splice) statement. Also, there is an error that may occur when using i- -; or when simply changing the position of the splices, Soo we should start the loop with i=1; not 0, that way you can ignore the possibility of calculating distance with -1, which returns identified / error etc.

[@artemkomarov9902]

@@jadhajali2804 just wrap the slicing code to setimeout with time 0

[@aleksdizhe]

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

[@shivambirla4813]

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

[@Frankslaboratory]

Hi, thank you for a nice comment, this channel is only for vanilla JavaScript :)

[@cryptostar1427]

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

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

[@Frankslaboratory]

You actually watch the video :D It makes complete sense when you explain it like that but I would never realise this. You are good, I need to learn a lot from you, next month :D Thank you.

[@Radu]

@@Frankslaboratory Sure I watch. I'm also learning many things from you :-)

[@НиколайКитаев-ъ5д]

hi, i don't think that my comment will be actual now) But if you insert this code bubblesArray.splice(i, 1); into setTimeout(func, 0); it will fix the problem

[@CWhitmer22015]

Instead of using splice() to remove the bubble item from the array right when the collision is detected, set a markedForDelete property on the bubble. Then have an array.filter() command in the animate loop that filters all bubbles that are marked for delete out. I switched to this method and it seems much cleaner and easier to understand. The method to mark the bubble for delete (set the markForDelete property) can be part of the bubble update(). This way the bubble can effectivley delete itself.

[@Radu]

@@CWhitmer22015 True, it's a cleaner way to write it and you achieve the same time complexity. But it does 2 loops through the array (one done by filter), so, slower, in general, but here, it wouldn't make a difference, really...

[@gct2023]

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

[@Frankslaboratory]

Hi Gary, thank you for your suggestion. I will think about how I could implement this and make it into a video. I think some people might not realise how much time I spend on a single video, from coming up with ideas, finding resources, researching algorithms to actual recording, editing and code cleaning process. I would have to start with a very simple project otherwise this would be a very long video. I'm still learning how to do these coding tutorials, I don't think I'm very efficient with my time yet :D I make a LOT of mistakes and I edit them out to respect peoples time. I will think about how to do this, I agree it might be interesting insight for some people.

[@bobdillan5761]

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

[@Frankslaboratory]

Thank's Bob, coding with vanilla JavaScript has a big advantage, you can watch tutorial that's 5 years old and it will still work. With React tutorials, often 6 months go by and the syntax is obsolete :D

[@leonidas14775]

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

[@santhoshraghavpidathala3701]

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

[@Frankslaboratory]

Hi Santhosh, more content like this is in the works, thank you for your comment :)

[@asaelcortez2516]

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

[@johnatteo822]

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

[@Frankslaboratory]

Hi John, this is a great point, sometimes I don't realise these things while in the heat of the battle :D thank you for sharing with us!

[@johnatteo822]

@@Frankslaboratory I soon to realize you need your code afterwards for more advanced stuff. You were right! Hehe

[@tomaslandsbergis7267]

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

[@Frankslaboratory]

Hi Tomas, glad you found some value in my tutorial. Yes games can be simpler than some websites, depending on how many features you implement, same with websites

[@limitedlifetime8443]

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.

[@Frankslaboratory]

Really? Thank you that's very nice to hear. Greetings to India ❤

[@awekeningbro1207]

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

[@Frankslaboratory]

Hi, thank you for pointing that out, I will test what happens :)

[@michaeljanicki3089]

@@Frankslaboratory Correct me if I'm wrong, but I think what causes the flicker is an element is removed in the middle of a for loop, so if bubblesArray[2] is removed, bubblesArray[3] moves into that position [2], which then misses its update() draw() cycle because i moves to 3 and skips over the new bubblesArray[2]. setTimeout would most likely fix this because it queues up the splice into the event loop which then runs after the stack is clear

[@Frankslaboratory]

Hi Mic, you are right, this is exactly what's happening. Viable solution seems to be what you suggest with setTimeout or to adjust i-- after every splice. I will explore the options and will do part 2 to show everyone. Thank you for your contribution, I appreciate you taking the time to leave a comment

[@sonodrome]

@@Frankslaboratory Or you can iterate backwards through the array, thus avoiding the skipped bubbles for(let i= bubblesArray.length; i >= 0; i--)

[@creepyinteractive214]

I know it's been nearly a year now... but come on guys... Just call draw() and update() methods AFTER the splice() method, and job done. Don't overcomplicate things.

[@amirrezaranjbar2853]

It was sure worth searching for an hour to find you

[@Frankslaboratory]

Hi Amirreza. Very happy you found me :)

[@philkrupacs1000]

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

[@Frankslaboratory]

Hi Phil, I am trying to make most of these videos accessible for beginners, still learning how best to do it. Thank you for taking the time to give me your feedback :)

[@shaqT09]

Amazing prologue and even more amazing content Frank! 🎉

[@johntitus3985]

Hello Frank, this is fantastic I need to work through the math more, I subscribed and am really interested to see what else you come up with. Thank you for sharing!!

[@Frankslaboratory]

Hi John, nice to meet you. I never used to like math until I realised you can do animations with it. It's easier to learn for me if I have a visual example. Good luck with your coding studies :)

[@piersonlippard2911]

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.

[@Frankslaboratory]

Hi Pierson, I don't think we spoke before. I'm happy to hear you find my videos fun. Completing tutorials like this will help you to get a better idea about important JavaScript concepts and the next time you see them somewhere else it will be more familiar. Eventually this kind of repetition will add up and you realise you are pretty good at JavaScript :) Good luck on your coding journey.

[@piersonlippard2911]

@@Frankslaboratory Thanks Frank, I have been learning web development since mid April. I have been following quite a few online courses and tutorials. But yours are my absolute favorite. I am determined to become a happy JavaScript developer, your lessons are so inspiring. Thanks again Frank.

[@Frankslaboratory]

Oh I'm your favorite 🙃🙃😍

[@piersonlippard2911]

@@Frankslaboratory Yup! Definitely my favorite Frank. Your lessons are fun, imaginative and instructional. The perfect combination....you get a massive pat on the back. Cheers man. ;-)

[@Frankslaboratory]

Thank you Pierson, happy to hear feedback like that

[@Nialyah]

This month I have exams in javascript, unity/c# and procrastinating watching this was well worth it!

[@Frankslaboratory]

Awesome. Are you building a game in Unity?

[@Nialyah]

@@Frankslaboratory Excuse my late reply, didn't notice. Yeah we made our first unity game, it came together quite well I think. The game itself is about two commanders battling eachothers castles on a planet. You can send troops (knights, archers, pikemen and cannons) against eachother and collect coins at goldmines to buy more troops.

[@Frankslaboratory]

Sounds awesome. Is it a strategy game or what genre. I also sometimes don't get notified for KZbin comments. No problem

[@Nialyah]

@@Frankslaboratory Well it was rather simplistic. The goal was to create a hotseat game, and we aimed to use as few keys as possible for control (p1: arrow keys, p2: WASD). Genrewise I think strategy comes closest, but the interesting part of it was the interaction with the buildings, units and the lot came directly from your commander and his position. While a typical RTS uses mouse inputs and you can scroll around the map, your location is all important. It creates some fun dilemmas. Thanks for taking an interest. I'll stay tuned for more of your videos! :)

[@souvikroy7673]

Hi Frank! thanks for creating these awesome tutorials, these are helping me lot to understand advanced vanilla javascript and learning new things everyday....lots of love for you

[@Frankslaboratory]

Souvik! That's great to hear, thank you so much for taking the time to leave a comment ❤

[@aadarshagrawal2197]

The best channel intro I have ever seen 😮

[@Frankslaboratory]

Thanks Aadarsh

[@odyeksamuel6504]

So glad that I landed here so far watched 10 videos in 3 days. Built my first JavaScript game thanks to your lab 2nd is along the way. The Best HTML5 , Vanilla Javascript game development tutorials. Just a kind request could you make a tutorial on a 2D skating game. I would Highly Appreciate it game master 💟💟💟💟💟💟.

[@Frankslaboratory]

Hi Odyek, sounds like you are serious about developing your skills, 10 videos in 3 days, wow, you deserve a medal. 2d skating game, interesting idea, I will make a note for future

[@nkpvg6805]

Really Great Video Frank.!! Loved it!! And Even I Develop Games Using Javascript and would love to see more videos from you and even Multi-player Games !!

[@Frankslaboratory]

Hi NKPVG, I like the multiplayer idea. I will have to look into it. At the moment I'm not sure if it's possible without back-end integration or some kind of library, but it would certainly be fun to play with friends. Thank you for taking the time to leave the comment and giving me your feedback

[@rayankhan12]

OMG!! This channel should have a million subscribers 😱😍🤩

[@Frankslaboratory]

Thanks Rayan :)

[@fleckenfurz77]

I think the reason / solution for the blinking bubbles is, that you have to go backwards through the array.. In the moment u splice one bubble out of the array, the for loop jumps over at least one element with that annoying blinking effect. Just loop over the bubbles array from end (bubbles.length-1) to start( i >=0; i--). Hope that helps! Btw: Great video and inspiration! :-)

[@Frankslaboratory]

Hi, yes you are right, that's exactly what's happening. People advised me to do i-- after every splice to set the index right, but also splicing before drawing or going through the array backwards as you suggest seems to solve the issue. I will test it properly today. Thank you for participating in my debugging process. Always happy to see how other programmers approach these problems.

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

[@Frankslaboratory]

Arthur! I didn't know THIS :D Thank you I learned something new :D

[@alyxyates655]

hmmmm, I had to do place-items and place-content as they performed individually like align-items and justify-content respectively so still two lines of code

[@Frankslaboratory]

I will test it lets see, some of the new properties might be experimental still on certain browsers. Will investigate :)

[@coltonaallen]

@@alyxyates655hmmm... try "display: grid; "instead of "flex" then do "place- items: center". it works for me

[@alyxyates655]

@@coltonaallen yep, changing to grid worked! Thanks for this, it's always good to save some lines :)

[@christopher7540]

you rock bro. I've learned a lot from your channel so far your canvas videos taught me OOP which I was struggling for so long. first of all a huge thanks. secondly, I was looking for videos on youtube about three.js library and there is really no good resource for it. the projects are either outdated or extremely simple that you can't use it in real world. I would really appreciate it if you take three.js into consideration for your next videos. thanks in advance. have a great day

[@Frankslaboratory]

Hi, glad these projects help you get better clarity in OOP, more will come, but I will also try to include some functional programming in the future. I like Three.js and use it in my free time. This channel is currently focused on vanilla JavaScript, I might try to use webgl context on canvas to do some Three.js effects with vanilla or I might make a Three.js playlist in the future. Will think about it. Thank you for taking the time to leave a comment with your thoughts.

[@adedoyinemmanuel7802]

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

[@Frankslaboratory]

Hi Adedoyin, that is a brilliant solution, never thought of doing setTimeout set to 0, in part 2 I came up with a different solution to fix this but I will try to do it your way as well. Thank you for taking the time to leave a comment, I'm learning a lot from comments like this

[@elinarosato1501]

I'm trying fixing it this way but some bubbles are still blinking. Any other idea?

[@anze]

Yes this is good content. Not just a tutorial, but a great explanation that teach you a lot.

[@Frankslaboratory]

Hi Anze. Thank you for such a nice feedback. I will try to do more of that

[@bielauguet5877]

As always, everything is super. Waiting for new crack from your team

[@leroiarouf1142]

You helped me for my school project thx you

[@MusicandCoding]

Great video as always.. But where is the next video? I can't find it on your channel.

[@Frankslaboratory]

Hi. There is part 2 I released week later after this one.

[@jeremymelix1935]

Great tutorial. Really fantastic. Best tutorial on Game development I have seen on you tube as well as sites that charge monthly or per class fees in a long while. I have been learning HTML5 or JavaScript game development/design from books more recently. These are great books, but you have taken what these books teach in several chapters and crammed it into one logical tutorial, while making learning simple. I look forward to finishing this tutorial and following your channel. Thank you so much for a fantastic learning experience. Here is a solution to stop the bubble blinking while removing the second for loop in the handleBubbles function if performance is an issue, such as looping through much larger array's or systems. simply derecrement i. function handleBubbles() { // add one new bubble to the bubble array every 50 frames if(gameFrame % 50 === 0){ bubblesArray.push(new Bubble()); console.log(bubblesArray.length); } var i = 0; for(; i < bubblesArray.length; i += 1) { bubblesArray[i].update(); bubblesArray[i].draw(); // Stop all bubbles from blinking when a bubble is removed and get rid of second for loop by decrementing i if(bubblesArray[i].y < 0) { bubblesArray.splice(i, 1); // Make sure the bubbles are actually being removed and it is not a trickery of the i decrementation console.log('Bubble objects in array: ' + bubblesArray); console.log('Number of Bubble\'s in array: ' + bubblesArray.length); i--; } } }

[@Frankslaboratory]

Hi Jeremy, thank you for such a nice supportive comment. I can tell you are NOT a beginner, i -- after splice will indeed adjust particles array and prevents blinking. Brilliant solution. Thank you for taking the time to leave a comment, good luck with your JavaScript studies, looking forward to chat in the future and maybe see some of your creative coding projects as well :)

[@jeremymelix1935]

Hi Frank, Thank you so much for the kind words. I don't want to clutter your tutorials with to many comments as I know they can be time consuming to respond too. So my last thoughts. The i decrement works but throws an error when you run the if checking a collision condition after the first if condition that removes objects from the bubbles array. Running the the if containing the collision check first fixes this but then cause other issues like blinking. So for a game that doesn't contain many objects the second for loop is perfect or reasonable choice. However, as you mentioned a game with arrays containing large number of objects or particle systems a better option is running one if statement in the for loop that checks multiple conditions. Then in the body of the one if statement you only have to run bubblesArray.splice once and decrementing i-- once. I have tried this and it works. You could also port all this if code to another function and just run that function in the for loop. Thanks again, love your site. Here's your code refactored. function handleBubbles() { // add one new bubble to buubleArray every 50 frames if(gameFrame % 50 === 0){ bubblesArray.push(new Bubble()); } var i = 0; for(; i < bubblesArray.length; i += 1) { // Temporary variable to store current bubble var bubbles = bubblesArray[i]; bubbles.update(); bubbles.draw(); if(bubbles.distance < bubbles.radius + player.radius) { // Frank's nested if statement if(!bubbles.counted) { if(bubbles.sound === 'sound1') { bubblePop1.play(); } else { bubblePop2.play(); } score++; bubbles.counted = true; } } // One if statement to check multiple conditions using the OR operator so that if either condition is true // the splice method will be invoked removing the bubble if(bubbles.y < 0 - bubbles.radius * 2 || bubbles.distance < bubbles.radius + player.radius) { // Calling splice and decrementing i only once bubblesArray.splice(i, 1); // logging to verify objects are added and removed from bubbles array // and that the array length is adjusted up and down console.log('Bubble objects in array: ' + bubblesArray); console.log('Number of Bubble\'s in array: ' + bubblesArray.length); i--; } } }

[@Frankslaboratory]

Hi Jeremy, I like the way you put comments in your code, it makes it crystal clear what's happening. I need to get into habit of doing that more. People now tell me that this issue with blinking comes up a lot in canvas games, I have never encountered it before, which only shows I have a lot to learn about canvas still. Thank you for your contributions, I'm happy to see that advanced coders like you watch my channel.

[@red_onex--x808]

Awesome easy to follow, very well paced with excellent additional information 💯✅‼️

[@Frankslaboratory]

Thank you for this feedback, much appreciated

[@Leoions]

Great video! It taught me a lot I can use to make my own game

[@kiranpatel3753]

Thanks Frank It was really helpful I am a beginner and I learned a lot from your videos Thanks!!! 😄😄😄😄

[@Frankslaboratory]

Hi Kiran. Nice to meet you :) thank you for letting me know that you found some value in my tutorial

[@flemingagogo]

Hi Frank. Just getting started with your videos in my intermittent spare time and I love them. I've already completed two simple projects of yours, but I would like to know if this fish game will work on tablets.

[@Frankslaboratory]

Hi. Good luck with your coding studies. The fish game will work on tablet in Internet browser but for optimal experience you would have to replace click and mouse move event listeners with touch events. I need to do a video on touch events, it's not difficult but I always forget to show how to do it

[@amazecreations1853]

Thank you so much for making these amazing videos. Keep more coming.

[@Frankslaboratory]

Glad you like them! Thank you for letting me know your feedback, it helps me to tell what content to make more of.

[@amazecreations1853]

@@Frankslaboratory Really liked your teaching style, and the efforts you are putting it deserves lot more, keep it up.

[@Frankslaboratory]

@@amazecreations1853 thank you, it's nice to be appreciated like this, I will try to keep it up :)

[@barefacedquestions]

Your game reminds me of Feeding Frenzy. It wasn't too well received in its time due to the lack of difficulty but I loved it because I was a lousy player. Actually, your game has more variety like the inclusion of the submarine, jellyfish, and a winking starfish. I once had the idea to recreate it with Javascript, but I was stumped at the mere task of making the fish rotate to follow the mouse direciton. You make it so easy.

[@Frankslaboratory]

Nice, I was thinking to make a version with a shark that grows as it eats, maybe i will make it in the future, there are many more gameplay elements that can be added

[@funnyanimalworld7579]

i found you on tiktok ,you got really inspiring great videos

[@Frankslaboratory]

Nice, good to hear some people from TikTok also have interested in long form content

[@bhagyashreeprajapat7393]

I just loved your channel I like a lot of games but didn't know how to build them meanwhile I am learning web development but that feels boring now you gave me a reason to learn more than you so... I am waiting for more such as videos

[@B4rtN3ls0n]

Cool tutorial and very well explained. Thx for your awesome videos!

[@Frankslaboratory]

Hi Bart, nice to meet you, thank you so much. Happy New Year :)

[@andresmoge6398]

Thank you for the videos Frank. I really love to follow your channel. Looking forward to check every new episode.You aske: Why people watch game videos and not generative art videos. Speeking for my self: the reason I watch game videos more then the generative art video. Is because. I need to know the basic first. just getting objects working is enough for now. Im looking forward to the time. where I can watch your generative art videos and actually understand and handle to do some of that stuff. The polygons and connectiing dotts and all of that.. But not this year. for sure

[@Frankslaboratory]

Hi Andre, nice to meet you. Thank you for taking the time to leave a comment, it helps me to understand better what type of content people are looking for. Good luck with your coding studies, looking forward to see some of your future projects

[@tarun7617]

Yay !! It's finally here :3 Thanks Franks !! It'll be fun to learn new skills 👍 I really wanted some more 2d game Dev , libraries are weird as there documentation changes after a while and it's really not fair , But having full control is great 😊 Really appreciate your help as always thank you :3

[@Frankslaboratory]

Hi Tarun, hope you had a nice week. Yes this week I wanted to show basics of audio in games, it's very simple. Next time I will generate the sound directly with JavaScript I think. There are many things that can be done without a library. Have a nice weekend my friend :)

[@tarun7617]

@@Frankslaboratory thanks for the kind words :3 I'll hope you , have a great week too , Stay safe and healthy 😊 and provide us great knowledge

[@Frankslaboratory]

Thank you Tarun, always nice to chat with you :)

[@ДмитрийШешков-к5ч]

I love everything you do. Infinitely grateful to you!

[@pulsechainalltheway1845]

Great motivation intro 💪💪💪💪, thank you.

[@hasansedigh1608]

this tutorial is just AWESOME!! THANK U SO MUCH

[@andreasiosifelis1691]

Great tutorials. I have learned a lot. at 26:01 (line 95) where you ask why there's a blink on the bubbles. You should loop through the array backwards in order to remove items or keep it as you have it and decrease the i. (i--).

[@Frankslaboratory]

Hi Andreas, yes you are right, it's caused by removed items, thank you for sharing this tip with us

[@lettersandpoims]

thank you frank. im just starting developing

[@Frankslaboratory]

Hi Poimen. Nice! Good luck with your project ;)

[@TheTop-rn6qz]

thanks mate, i loved the video, easy to understand

[@Frankslaboratory]

Glad to hear, thanks for letting me know

[@zathkal4004]

New to your channel... love the content along with your clear cut explanation brother (: thanks

[@Frankslaboratory]

Zath! Good to have you here, hope you find some value in my videos

[@muhammadalvinwidjajakoesom8256]

Thank you, I've been looking for a long time

[@nanolife09_82]

instead of having two for loops in the handleBubble function, if you check if (bubble.y < -bubble.radius) then everything will be fixed. Also instead of for loop, I would prefer using forEach method since it reduces the time it calculates.

[@abahiduh3246]

My suggestion would be why a set of code is preferred over another

[@JM-de2gh]

Frank, I think you would get a simple enjoyment if you could see me while I watch your videos. Maybe it's because you feel personable, but I'm constantly answering your questions out loud and saying things like "thanks Frank". Ah, I always give the screen a thumbs up whenever you thumbs up as well. Thanks for keeping my brain gears turning.

[@JM-de2gh]

Side note: at 25:50, I found that if you splice the array before you Update and Draw this will fix the blinking problem and you won't have to iterate through the array twice. I have no idea why this fixes the problem. I guess modifying the array right before you iterate to the next element can cause a hiccup. By drawing and updating, you give the clock an extra millisecond to process the array modification (?) (for viewers) Make sure before you Update and Draw, you check to make sure the instance exists :) if (bubblesArray[i].y < 0 - this.radius) { clearBubble(i) } if (bubblesArray[i].distance < bubblesArray[i].radius + player.radius){ clearBubble(i) score++ } if (bubblesArray[i]) { bubblesArray[i].update() bubblesArray[i].draw() }

[@Frankslaboratory]

Hi Jon, I think I will need to see a live reaction video from you haha. I also always smile when I read a comment from you. I'm happy to hear you find this project engaging. People seem to like game projects more than any other type of content. Thank you for participating in my debugging efforts, you are right if I splice before I draw and update it will fix the problem. The flickering is because when I splice a bubble from the array it changes index of all remaining bubbles so changing order or adjusting i-- after every splice seems to solve the issue. This was a tricky one :D

[@CoolScratcher]

you're awesome!!!!!!!!!!!!! the only problem that I find is that I can follow your tutorials and I understand the code, but I can't create games of my own :)

[@Frankslaboratory]

Hi CS, how are you. Well done for being able to follow tutorials. Are you struggling with coming up with ideas for your own games, or more that you find it hard to convert these ideas into code? It will become easier with practice, you are doing great so far.

[@CoolScratcher]

​@@Frankslaboratory I'm doing great! Yes, I have ideas - too many to be honest - but implementing them into code is difficult.

[@Frankslaboratory]

You are taking the right steps, eventually you will get there

[@gdolphy]

@@CoolScratcher : story board your game. Write in plain language what should happen and how. Ie - character scores but looses a point => object fires projectile. Projectile hits enemy. Projectile explodes. Explosion hits good guy. Get 3 points for enemy. Loose 4 points for casualties. Then - take plain language and convert to logic and so on. Coding is optimising regular language to simpler form to make into a new form the semantics of the script environment(js, php, py etc)

[@daviddelgado2551]

Thank you. TNice tutorials is really helpful. Much respect

[@amcd2431]

Great tut man, really easy to understacd and follow

[@ahmedragib1333]

This was very helpfull I was able to follow through the entire project thanks to you

[@Frankslaboratory]

Nice thanks for letting me know yoy found this useful Ahmed

[@sciencefordreamers2115]

Marvelous, super fun, and professional!

[@Frankslaboratory]

I'm always happy when someone finds my video useful, thanks for letting me know

[@Nukebob3]

Wonderful tutorial, this was super fun and I enjoyed working on it!

[@Frankslaboratory]

Nice, glad you think it was fun

[@anwerjivani1547]

Very nicely explained

[@vicktorManuel]

this priest knows how to program!!!

[@imheretosleep]

Frank you never fail to put a smile on my face :). Also I was wondering if I could use the concept of your game since I'll be creating a game with different characters that pops things, relative to the environment. Much love and support from Philippines❤️🇵🇭 keep it up with javacript lessons💯👍

[@Frankslaboratory]

Hi, my code is free to use for anyone so feel free to use it in your game. Good luck with your project :)

[@saintlidia8021]

thanks a lot!!! so nice reverb

[@TheCodingOdyssey]

Hey Frank! I loved the speech at the beginning. I was working in a warehouse and started learning coding at 31, last year in august..in febaruary I got an internship as a developer for a company and then got offered the job there. Everything is possible if you put your mind to it. Going to be going though this video and the next to start lerning about the HTML canvas.

[@Frankslaboratory]

Hi, so you got first internship only 6 months after you started learning? That's impressive. Took me much longer :D I like what you're doing on your channel, it takes a while to start growing, but once you get couple of videos ranking in search it becomes easier.

[@TheCodingOdyssey]

@@Frankslaboratory Hey Frank thanks a lot for the support. Yeah lucky for me I had a brother that was a programmer and after I built a few websites with html and css and javascript and then started learning React as well he showed his boss what I built and recommended me for an internship position. Due to him being very good at what he does his boss trusted him and gave me the internship on the recommandation. Then I was thrown there in the middle of 5 huge projects so I had to learn even faster. In the last year we have migrated one project from Rails to React and completely re-did another project backend and front-end all that with a small team. So there was a huge amount of learning being done. Now his boss has the same impression of me that he had of him. But it was quite stressful at time. All worth it though. My life is so much better now.

[@Frankslaboratory]

I can imagine the situation. It was a bit overwhelming for me to come from my simple portfolio projects into a huge React codebase. Good thing is that most companies understand this challenge and will support us to succeed. I find coding jobs much more relaxed once I get comfortable with workflow and people there. I still remember what it's like to have hard minimum wage job, it makes me appreciate it more and work hard.

[@TheCodingOdyssey]

@@Frankslaboratory Same here. Having had jobs where I had to wake up at 4am and go biking in the morning to get there, makes me appreciate so much what I have now. And I agree it does take time to get used to the people and the codebase, but once you do it gets much easier.

[@Frankslaboratory]

@@TheCodingOdyssey You seem to be doing great, good luck with your channel, I am subscribed to you and will watch you grow

[@kingundfaker]

Wow! I wish you made this stuff 2 years ago when I started creating canvas games. Good explanations and good pace!! I know how to do this on my own but I subcribed anyway. But you really should apply clean code concepts to your code, like stop spaghetti code madness, redundant code and shifting classes into serparate files ;)

[@Frankslaboratory]

Hi Nudel, thank you for such a nice feedback, very kind. Do you remeber what game you built as your first project? I tried making the code more DRY and put stuff in separate files, I got many emails from beginners being confused and getting lost. I notice spaghetti code is very beginner friendly. I'm still trying to work out how to do these tutorials, I agree with your feedback, just not sure how to do it so that beginners don't get lost.

[@kingundfaker]

​@@Frankslaboratory Hi Frank, I first started out with snake and flappy bird. Okay you are right Spaghetti Code is beginner friendly. Than maybe make a Clean Up Code Video where you just describe why you are refactoring it. This would probably be even better for the skill development of the viewers. Your videos have already a very high quality. Keep it going :)

[@Frankslaboratory]

@@kingundfaker I like your idea, make additional episode for refactoring, that is not mandatory for beginners, they will still have working game from the previous part. I will try to include something like that next time. I might do snake as well, with sprites, its a good beginner project. Thank you, I appreciate your feedback

[@RCOA24]

This is very helpful, thank you!

[@Frankslaboratory]

Hi RC, thank you for your comment, also you have impressive guitar skills on your channel !

[@traumwelt1975]

"pop the bubble" would make a good name imo

[@Frankslaboratory]

I like it

[@wpontog]

Great tutorial. Where's level 2 tutorial?

[@Frankslaboratory]

Hi Wilson, I'm gonna release a video how to make a game with infinite levels soon. It will need a bit more advanced technique so I'm working my way towards it, while explaining more basic things in these beginner tutorials.

[@31337flamer]

good job. that what beginners are looking for.

[@Frankslaboratory]

Hey Powder, thank you, very happy to hear that

[@e-sportsorganization8082]

This is just amazing, thank you much!

[@blueworm99]

25:50 To stop the flickering have you tried looping through the array backwards: for (let i = bubblesArray.length - 1; i >= 0; i--) { ... }

[@Frankslaboratory]

Hi Marcus, going through the array backwards, interesting approach. Thank you for sharing, I will test it. I have already released a follow up video where I went for solution i--; after every splice, adjusting index after removing element from an array seems to do the trick as well. Thanks for sharing your solution with us

[@andriifedorov4146]

Thanks u changed my life

[@OlehBiblyi]

Just great! By the way, you can check that slider for audio player what we were talking about.

[@Frankslaboratory]

Hi, if you have any resources on sliders to share let me know, I didnt have time yet to do some more research but will look into it soon, it's on my list

[@OlehBiblyi]

​@@Frankslaboratory This is the best I found, www.iamrohit.in/javascript-range-slider/ , I've been watching many of this examples and many more. But many of these don't have ability to move thumb when you press on progress bar itself, or if slider is customized from input-range - there is a bug when thumb is in the end of track. In any way, you can use my one if you want. Have a great weekend!

[@Frankslaboratory]

Hi, thank you for this resource, I'm having my morning coffee so it's a good time to go though all of them. I'm still learning things myself so at this point I don't feel competent to do slider tutorial, I need to learn more about it. UX is not my strong side but I am learning :D

[@OlehBiblyi]

​@@Frankslaboratory We all are learning, and this all is endless ) On your job, are you working with some framework?

[@Frankslaboratory]

@@OlehBiblyi I mostly just extend our custom CMS with vanilla JS code now. My job is easy :D

[@andymoore1415]

Dude every video you put out i learn something new and then as you say you have to practice every day to remember that skill or new tool, one thing i have wanted to get to grips with is sound fx so thanks, great vids....I would like to learn platform and array maps :-)...I do like the star wars orientated games

[@Frankslaboratory]

Hi Andy, how are you. Practice makes perfect. I recently learned there is build in audio API in all browsers that allows to play music with vanilla JavaScript. I might do JavaScript generated Star Wars theme song one day, since you like that topic :D Tile maps, platformer games and array maps are coming.

[@andymoore1415]

Good dude, I try and fit 1.5 hrs at the end of a working day to keep repeating the skills i learnt and todays tutorial was great since one thing i was struggling from a javascript games dev book was sound and adding fx , since the example i had in a book written several years ago didnt work, since i tried to do a version of space invaders but with actual star wars ships coming down from the top of the screen with the star wars musi music playing in the background but the browser didnt like....but your example today solved that.....oh and also the collision of circles was explained really well.....I just need to nail some of these skills down and then 5hink about the animation of sprites...but brill vids

[@Frankslaboratory]

Thanks Andy, I'm happy to see some people find my video useful. 1.5 hours a day is much more than most people give it, this way you will start seeing improvements fast. Good luck with your studies, looking forward to hear more about your progress

[@BitCloud047]

Your stuff is soo awesome!!! Please don't stop making!!

[@Frankslaboratory]

Hi Aaron, thank you for letting me know, I will make more

[@gianpaulemersondj6275]

it worked! thank you so much!!

[@abahiduh3246]

I have CHECKED over and over... this are beautiful tutorials BUT a VERY important part is missing. LEARNERS are not just interested FOLLOWING PROJECTS. We are interested in 1.To Understand the game playing expectations when mouse move, when Bubbles collide, when game starts or end. 1. To understand the logics; they syntax e.g -why u have to use JavaScript class instead of JavaScript function constructor to list characters - why u include properties in object literal then u target it with dot notations. CODE LOGIC and REAL LIFE reasons for using a set of code IS THE MAJOR THING

[@jakssanota437]

ITS REALLY WORKED LOL THANK YOU DUDE

[@Frankslaboratory]

Nice work

[@ytmaxsiat9224]

i think its better to preview immediately after adding or changing code, so beginner like me can easily spot the differences

[@Frankslaboratory]

I agree, I try to do that if I rememeber, thank you for your feedback, will keep that in mind for future

[@elchupapi5398]

Henceforth Michael shall be known as Michael One point Two Five

[@daynegonsalves9438]

Hi Frank, the blinking in your bubbles is not a cause of the loop. try putting your if statement before the update and draw method :)

[@Frankslaboratory]

Hi Dayne, thank you for the input. As you say it has to do with order how the bubbles are drawn updated and removed so there are multiple solutions. this is an old video, recently i solve this by using filter method to remove old objects once per animation loop

[@jgarale]

thank you very much for teaching us

[@nagenderrajput5406]

Have you uploaded its part 2 yet?

[@Frankslaboratory]

I did

[@RifqiDwiMC]

In The setup thank you so much!

[@nienkedalstra3656]

Very nice vid + great advice!!!

[@Frankslaboratory]

Hi Nienke. Thank you very kind of you to say ❤

[@DrewNorman]

I love this tutorial. How can we make this game mobile responsive?

[@muhamadluthfia2580]

Thank you very much for your key......1000% work :)

[@fakhrioficial8061]

You are the boss bro!!! Thank you a lot!

[@Frankslaboratory]

Hi Fakhri, I'm here to help :)

[@all-eter-4289]

I Love it 💕🤩 I really appreciate it your videos thanks you so much

[@fikusnagibator7747]

thanks man you are great. you got a new subscriber :)

[@Frankslaboratory]

Good to have you here

[@sameeksharaghuwanshi3905]

25:50 to stop flickering just try to put if statement first then call update and draw function.

[@Frankslaboratory]

Sameeksha, this is really good solution and it works, yes!

[@roamingcelt]

Your code blinks because you're killing bubbles in the wrong direction. Your original code would have worked fine if you instead used "let (I=bubbleArray.length-1;I>=0;i--)”. The easy way to think about how you had it is, you have a stack of 10 plates and you removed the 5th plate. Now plate 6 is in 5th the spot. Your code then went to the 6th spot finding plate 7. But if you reverse your order, you already handled 6th when you remove 5th and then go to 4th.

[@alisandogan5885]

Hello Franks. What is the reason for looping the same array twice?

[@santisisterna9326]

Thank you, this is indeed helpful

[@Frankslaboratory]

Hi Santi, glad you found some value

[@icyvfireball]

How do I see the white screen with the box and inspect element on the right hand side of his screen

[@CraigShrivesGrammarMonster]

Great tutorial, Frank! Really good stuff. I have a question: Why does the if statement on line 131 work? (44:01). After bubblesArray.splice(i,1), won't the if statement find what was previously bubblesArray[i+1] when it checks bubblesArray[i]? (Please go easy on me. I'm a learner.)

[@Frankslaboratory]

Hi Craig, you say you are a learner but you seem to be pretty good with JavaScript if you noticed this. Yes you are right, splicing causes many problems with index and this is one of them. I made a follow up video where I address this. I have to remember to always adjust index when splicing something from an array. I'm a learner as well :D

[@jeremymelix1935]

Not the best solution for responsive design, but one way to scale the canvas when the browser is scaled is to set canvas width to 52.5% and the canvas height to auto. Why 52.5% and not 100%. I scaled it to 52.5% this allows the canvas to remain around 800px initially. Scaling to 100% will set the canvas to 100% of the browser before the browser is resize. Thus, making the game canvas bigger than the initial 800px; 52.5% seems to keep it the same size initially and then the canvas can be scaled up to 52.5% and down to what ever the minimum size is when the browser is resized. I chose to scale the the canvas's CSS canvas values dynamically in javaScript, hence the use of the style tag. I could have just changed the canvas width to 52.5% and the canvas height to auto in the CSS file and it would have done the same thing. canvas.style.width = "52.5%"; canvas.style.height = ''auto";

[@jeremymelix1935]

Not a good solution. Good for response but has negative impact on var canvasPosition = Canvas2D.canvas.getBoundingClientRect(); resulting in inaccuracy with the mouse pointer, line being drawn, etc.

[@Frankslaboratory]

Hi Jeremy, you like to experiment with code and solutions, it's a great way to learn. You made a great point here, mouse pointer position can be fixed by using getBoundingClientRectangle() to recalculate offset every time window resize event occurs. I will test this

[@jeremymelix1935]

I 'd like to collaborate more at at least to show the code I wrote with your game but this is not the place for a lot of code. I like your website. I could comment the code there, but I didn't see this tutorial on it so it doesn't make sense. I added a Canvas2D factory function, a One-off GameEngine constructor Object, a SpriteObject constructor that's a member or property of the GameEngine object. The SpriteObject constructor also has methods on it's prototype for inherititance. It's not currently used. I think it's suited for enemy object that will share the same functionality. Decided not to use the SpriteObject constructor to replace the PLAYER or BUBBLE class because their update and draw methods are so different. A HUD object literal with methods, a player object, and fishWorld object. Game state object. I also added a boundaries method to the Player class. I never really use the ES6 classes before your tutorial. I am going to start replacing all my old school constructor function with these classes. They look much nicer and cleaner. I started getting out of the bad habit of using var and replacing it with const or let. I looked at all this awhile back but old habits die hard and usually just use the convention of all caps for constants or define local or private members or methods.

[@SPARK9026ONLINE]

Hi Franks!, I learnt from your video as much ever before. So Thank you for All videos, which I learnt OR will learn. But I'm lazy about to write code due to weak eyes or age factor. Will u pls c my written code on basis of 'BASICS' at my site in the head "BB Game" OR provide prewritten code to do more develop the game. thanks