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.
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.
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.
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.
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
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.
@@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...
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
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.
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
@@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
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
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.
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
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
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
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
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.
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
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.
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.
@@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 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. ;-)
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 💟💟💟💟💟💟.
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
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.
@@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 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! :)
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 :)
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.
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
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! :-)
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.
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
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--;
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 :)
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--; } } }
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.
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 !!
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
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--).
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!!
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 :)
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
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.
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.
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
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.
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
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
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 :)
hello 41:47 , I have problem with ctx.restore(); .. keeps saying SyntaxError: Unexpected token '.'. Expected a ';' following a class field. however can not see what I've done wrong. please help
@@kayleighthomas4018 Awesome, you found it. Syntax issues are the worst, I also struggle with it, but it's all good exercise. I'm surprised VS code didn't underline that extra bracket for you as an error, it usually does it for me
@@Frankslaboratory I use dreamweaver on my iMac however, was following your tutorial on my little chrome book so was just using basic editor software doesn't give any clues, or errors. That will teach me haha. Excellent tutorial anyway love the game.
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
Can somebody help please? after i write playerLeft and playerRight at 37:00 and continue from that the game stops working and bubbles disappear completely :/
@@Frankslaboratory Thank you so much for the reply! I managed to fix that but now somehow spritesheet is not showing up :/ i guess i have a loooot to learn :D
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
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
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.)
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
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.
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.
@@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.
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.
@@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.
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
Hi Austin. I can't help you without seeing your code. It could be 100 different reasons why it's not working. If you need more help you can message me on Twitter
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.
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() }
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
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.
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 ;)
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.
@@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 :)
@@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
Why you don't call continue after the first splice? This jumps directly to the next for-iteration, or do I miss some reason for that!? Guess your bubbles are blinking by changing it's index caused by splice. As I could see not all bubbles we're blinking, that's why I think this could be the reason! But to be honest I can't guarantee!
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 :)
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 : 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)
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";
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.
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
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.
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
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
@@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!
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
wow, I lerned so much from those tutorials! Thank you so much. Now i am coding my own games with the things that I lerned. But I struggled with a good mouse-movementsystem, so I used the system from minute 15:56. There is a problem, because it gets slower at the end. How can I fix this?
Hi Jacob, I'm not sure what you mean when you say it gets slower at the end, it's hard to help you to fix it without seeing your code based on this brief description
I have already fixed it with some trigonometri! The Problem with the dx/20,dy/20 systhem is, that it always moves the 20.Part of a decreasing nuber, so it slows down...
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
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.
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
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
If I understood it correctly, the requestanimationframe function will most of the times match your screens refresh rate and for example if bubbles spawn every 50 frames, wouldn't there be way more bubbles on a screen with a higher refresh rate? And wouldn't the whole game just be faster? Would it be better to use a setinterval function with 200ms like the fixedupdate methode in unity? Or is there something like time.deltatime (unity) where you can get the time passed since last frame to calculate the amount to move an object so that it's equally fast in all frame rates?
Hi. You are absolutely right about game and everything running faster on high refresh rates screens. Set interval is not ideal. The best thing to do is to calculate delta time and time events that way. I discuss this technique in detail in multiple newer videos. For example the raven shooter game
Hi this is a good point. Can you give me an example of new fewture that doesn't work on mobile? Mobile browsers are slower to catch up but they usually do catch up eventually
Hiii :) So glad I found this channel. I have a dumb question which is that at 9:59, why is the x coordinate of the mouse canvas.width/2? Would be great if anyone can answer.
Hi Minh, these are just random values, it is just the starting coordinate for mouse, it will change and update immediately as user starts moving mouse around.
Part 2: ua-cam.com/video/MwTQtPGuBmo/v-deo.html
☻
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.
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.
@@jadhajali2804 just wrap the slicing code to setimeout with time 0
This channel is exactly what I NEEDED. Please continue videos on vanillaa javascript!!! Thank you!
This channel is golden.
Please keep creating videos in vanilla javascript .
Hi, thank you for a nice comment, this channel is only for vanilla JavaScript :)
I'm impressed by this ma. He's like a star : confident, knowledgable, articulate. Amazing video man keep up with content
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.
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.
@@Frankslaboratory Sure I watch. I'm also learning many things from you :-)
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
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.
@@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...
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
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.
One of the better coding tutorial I've seen. Easy to follow, clear instructions, and more importantly it works in 2021!
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
In order to prevent that flickering, just use setTimeout function to remove a particular bubble from the array.
Hi, thank you for pointing that out, I will test what happens :)
@@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
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
@@Frankslaboratory Or you can iterate backwards through the array, thus avoiding the skipped bubbles for(let i= bubblesArray.length; i >= 0; i--)
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.
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
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!
@@Frankslaboratory I soon to realize you need your code afterwards for more advanced stuff. You were right! Hehe
I am a Javascript beginner but not new to programming. This example helps me understand a lot about how the language is used :)
No way! I just graduated Front-end Intermediate course and creating games look much easier than some websites! Thanks alot and perfect video man!
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
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
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
I'm trying fixing it this way but some bubbles are still blinking. Any other idea?
25:50 to stop flickering just try to put if statement first then call update and draw function.
Sameeksha, this is really good solution and it works, yes!
Expecting a lot of content like this. I will share with my colleagues
Hi Santhosh, more content like this is in the works, thank you for your comment :)
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.
Really? Thank you that's very nice to hear. Greetings to India ❤
25:50 To stop the flickering have you tried looping through the array backwards:
for (let i = bubblesArray.length - 1; i >= 0; i--) {
...
}
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
It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.
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.
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.
@@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.
Oh I'm your favorite 🙃🙃😍
@@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. ;-)
Thank you Pierson, happy to hear feedback like that
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 💟💟💟💟💟💟.
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
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.
My suggestion would be why a set of code is preferred over another
This month I have exams in javascript, unity/c# and procrastinating watching this was well worth it!
Awesome. Are you building a game in Unity?
@@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.
Sounds awesome. Is it a strategy game or what genre. I also sometimes don't get notified for UA-cam comments. No problem
@@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! :)
I think you're doing an amazing job moving at a pace that works for beginners. Thank you!
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 :)
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.
Arthur! I didn't know THIS :D Thank you I learned something new :D
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
I will test it lets see, some of the new properties might be experimental still on certain browsers. Will investigate :)
@@alyxyates655hmmm... try "display: grid; "instead of "flex" then do "place- items: center". it works for me
@@coltonaallen yep, changing to grid worked! Thanks for this, it's always good to save some lines :)
It was sure worth searching for an hour to find you
Hi Amirreza. Very happy you found me :)
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! :-)
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.
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
Souvik! That's great to hear, thank you so much for taking the time to leave a comment ❤
Amazing prologue and even more amazing content Frank! 🎉
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--;
}
}
}
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 :)
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--;
}
}
}
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.
The best channel intro I have ever seen 😮
Thanks Aadarsh
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 !!
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
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--).
Hi Andreas, yes you are right, it's caused by removed items, thank you for sharing this tip with us
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!!
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 :)
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
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.
Great video as always.. But where is the next video? I can't find it on your channel.
Hi. There is part 2 I released week later after this one.
Thank you so much for making these amazing videos. Keep more coming.
Glad you like them! Thank you for letting me know your feedback, it helps me to tell what content to make more of.
@@Frankslaboratory Really liked your teaching style, and the efforts you are putting it deserves lot more, keep it up.
@@amazecreations1853 thank you, it's nice to be appreciated like this, I will try to keep it up :)
Yes this is good content.
Not just a tutorial, but a great explanation that teach you a lot.
Hi Anze. Thank you for such a nice feedback. I will try to do more of that
I love everything you do. Infinitely grateful to you!
As always, everything is super. Waiting for new crack from your team
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.
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
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.
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
OMG!! This channel should have a million subscribers 😱😍🤩
Thanks Rayan :)
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
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 :)
@@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
Thank you Tarun, always nice to chat with you :)
Thank you, I've been looking for a long time
How do I see the white screen with the box and inspect element on the right hand side of his screen
hello 41:47 , I have problem with ctx.restore(); .. keeps saying SyntaxError: Unexpected token '.'. Expected a ';' following a class field. however can not see what I've done wrong. please help
Hi Kayleigh. I would need to see your code, otherwise its hard to help you debug. Message me on Twitter if you can't resolve it
@@Frankslaboratory thank you for reply I managed to solve it after hours of just looking at it haha had a extra } closing bracket in the way
@@kayleighthomas4018 Awesome, you found it. Syntax issues are the worst, I also struggle with it, but it's all good exercise. I'm surprised VS code didn't underline that extra bracket for you as an error, it usually does it for me
@@Frankslaboratory I use dreamweaver on my iMac however, was following your tutorial on my little chrome book so was just using basic editor software doesn't give any clues, or errors. That will teach me haha. Excellent tutorial anyway love the game.
this tutorial is just AWESOME!!
THANK U SO MUCH
Great video! It taught me a lot I can use to make my own game
Cool tutorial and very well explained. Thx for your awesome videos!
Hi Bart, nice to meet you, thank you so much. Happy New Year :)
Awesome easy to follow, very well paced with excellent additional information 💯✅‼️
Thank you for this feedback, much appreciated
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
Thanks Frank
It was really helpful
I am a beginner and I learned a lot from your videos
Thanks!!!
😄😄😄😄
Hi Kiran. Nice to meet you :) thank you for letting me know that you found some value in my tutorial
Can somebody help please? after i write playerLeft and playerRight at 37:00 and continue from that the game stops working and bubbles disappear completely :/
Your console will have an error at that point, which should give you a better idea where you made a typo
@@Frankslaboratory Thank you so much for the reply! I managed to fix that but now somehow spritesheet is not showing up :/ i guess i have a loooot to learn :D
thanks mate, i loved the video, easy to understand
Glad to hear, thanks for letting me know
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
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
You helped me for my school project thx you
Marvelous, super fun, and professional!
I'm always happy when someone finds my video useful, thanks for letting me know
New to your channel... love the content along with your clear cut explanation brother (: thanks
Zath! Good to have you here, hope you find some value in my videos
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.)
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
Thank you. TNice tutorials is really helpful. Much respect
Have you uploaded its part 2 yet?
I did
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.
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.
@@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.
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.
@@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.
@@TheCodingOdyssey You seem to be doing great, good luck with your channel, I am subscribed to you and will watch you grow
Great tut man, really easy to understacd and follow
Hello Franks. What is the reason for looping the same array twice?
Great motivation intro 💪💪💪💪, thank you.
This was very helpfull I was able to follow through the entire project thanks to you
Nice thanks for letting me know yoy found this useful Ahmed
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 :)
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
Excuse me, I am experiencing some technical difficulties from 19:31 . It is not working as it should be. The HTML5 that is.
Hi Austin. I can't help you without seeing your code. It could be 100 different reasons why it's not working. If you need more help you can message me on Twitter
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.
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()
}
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
thank you frank. im just starting developing
Hi Poimen. Nice! Good luck with your project ;)
This is just amazing, thank you much!
Great tutorial. Where's level 2 tutorial?
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.
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 ;)
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.
@@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 :)
@@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
i think its better to preview immediately after adding or changing code, so beginner like me can easily spot the differences
I agree, I try to do that if I rememeber, thank you for your feedback, will keep that in mind for future
Wonderful tutorial, this was super fun and I enjoyed working on it!
Nice, glad you think it was fun
thanks a lot!!! so nice reverb
i found you on tiktok ,you got really inspiring great videos
Nice, good to hear some people from TikTok also have interested in long form content
Why you don't call continue after the first splice? This jumps directly to the next for-iteration, or do I miss some reason for that!?
Guess your bubbles are blinking by changing it's index caused by splice. As I could see not all bubbles we're blinking, that's why I think this could be the reason! But to be honest I can't guarantee!
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 :)
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.
@@Frankslaboratory I'm doing great! Yes, I have ideas - too many to be honest - but implementing them into code is difficult.
You are taking the right steps, eventually you will get there
@@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)
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";
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.
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
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.
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
Just great! By the way, you can check that slider for audio player what we were talking about.
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
@@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!
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
@@Frankslaboratory We all are learning, and this all is endless ) On your job, are you working with some framework?
@@OlehBiblyi I mostly just extend our custom CMS with vanilla JS code now. My job is easy :D
wow, I lerned so much from those tutorials! Thank you so much. Now i am coding my own games with the things that I lerned. But I struggled with a good mouse-movementsystem, so I used the system from minute 15:56. There is a problem, because it gets slower at the end. How can I fix this?
Hi Jacob, I'm not sure what you mean when you say it gets slower at the end, it's hard to help you to fix it without seeing your code based on this brief description
I have already fixed it with some trigonometri!
The Problem with the dx/20,dy/20 systhem is, that it always moves the 20.Part of a decreasing nuber, so it slows down...
I understand now. Yes that was on purpose to make the movement non linear. Glad to hear you fixed it.
How do you type so fast?
it worked! thank you so much!!
This is very helpful, thank you!
Hi RC, thank you for your comment, also you have impressive guitar skills on your channel !
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
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.
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
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
good job. that what beginners are looking for.
Hey Powder, thank you, very happy to hear that
If I understood it correctly, the requestanimationframe function will most of the times match your screens refresh rate and for example if bubbles spawn every 50 frames, wouldn't there be way more bubbles on a screen with a higher refresh rate? And wouldn't the whole game just be faster? Would it be better to use a setinterval function with 200ms like the fixedupdate methode in unity? Or is there something like time.deltatime (unity) where you can get the time passed since last frame to calculate the amount to move an object so that it's equally fast in all frame rates?
Hi. You are absolutely right about game and everything running faster on high refresh rates screens. Set interval is not ideal. The best thing to do is to calculate delta time and time events that way. I discuss this technique in detail in multiple newer videos. For example the raven shooter game
Thank you very much, I'm really surprised that I got an answer that fast! I'll watch your newer videos :)
You are the boss bro!!! Thank you a lot!
Hi Fakhri, I'm here to help :)
I love this tutorial. How can we make this game mobile responsive?
Very nice vid + great advice!!!
Hi Nienke. Thank you very kind of you to say ❤
"pop the bubble" would make a good name imo
I like it
latest js ecma standard doesn't work on mobile, keep that in mind, use functions that are old but reliable
Hi this is a good point. Can you give me an example of new fewture that doesn't work on mobile? Mobile browsers are slower to catch up but they usually do catch up eventually
the top, when I installed soft soft (restart didn't help). I have a creative softblaster z softcard. I'm assuming it has sotNice tutorialng to do
Hiii :) So glad I found this channel. I have a dumb question which is that at 9:59, why is the x coordinate of the mouse canvas.width/2? Would be great if anyone can answer.
oh wait nvm I think what is for :P
Hi Minh, these are just random values, it is just the starting coordinate for mouse, it will change and update immediately as user starts moving mouse around.
@@Frankslaboratory thanks :)))) great work
ITS REALLY WORKED LOL THANK YOU DUDE
Nice work
Your stuff is soo awesome!!! Please don't stop making!!
Hi Aaron, thank you for letting me know, I will make more
Very nicely explained
Thanks u changed my life
this priest knows how to program!!!