TH-cam is auto deleting some comments and it deleted most replies I made to your comments on this video, can't do anything about it :( I just bought a new electric sits/stand desk, anyone else using one of those? That's why this video is delayed, took me a while to assemble it :D Click the LIKE please if you want more gamedev!
This was a perfect tutorial to help me dive into Vanilla JS game dev! I was struggling to figure out how to work between classes and objects. . . Then I find this gem. Thank you for making an easy to follow / understand tutorial :)
Hi Johnathan, thank you for taking the time to let me know, makes me happy to hear you find my tutorial easy to follow. Have fun with your vanilla JS game dev projects
Probability for two ravens to have the same color is 1/(256*256*256) = 1/(2^24) = 1/16,777,216. If you have three ravens, the probability doubles... You can think about it as a lottery example. If there are two 'winning numbers' you have double the chance to 'win' = get the same color as one of the other two ravens. It triples for 4 and so on... For 7 ravens you get 6/16,777,216 = 1/2,796,202. Still a pretty low number. Of course... you can check for duplicates if you really want to avoid this issue. There is still a small issue though... due to antialiasing, pixels on the border of the shape will have different color than that specified. It could trigger another raven by mistake. But also unlikely. Thank you, Frank, for linking to my course :-)
This actually isn’t completely correct. If you use this logic then that means if we spawn 16,777,216 ravens on screen then there is a 100% chance that one raven matches another one. This is not the case because there are going to be many ravens that have the same color code in this scenario and many that have a unique color… what’s actually happening here is an example of binomial cumulative distribution function (binomial CDF) where we take the number of events that occur (6 events since the first raven doesn’t have any significance) and sum up the probabilities of the number of successes: p(1 raven matches) + p(2 ravens match) + … + p(all 6 ravens match). In this case because the probability is so small and we had such a small number of events, the number actually works out to be almost exactly 6/16,777,216 but this behavior diverges as we increase the number of events. For example if we have a 1/100 probability of success and have 3 events then our final probability is almost exactly 3/100. But if we increase to 50 events, then the final probability of success is closest to 39/100. We would see this same behavior if we had, say 8 million ravens on screen for our scenario as the probability would be significantly less than 0.5
@@daddychan7 yes, you are completely right. I gave the simpler answer because the number of possible color choices is so huge and the number of birds is so small that (as you said) it doesn't make a difference. This discussion reminds me of the case with Newton and Einstein. First one works just fine until you take a closer look at big / fast moving objects.
@@Radu Nice! I was worried I would come across as an obnoxious know it all but I figured if you were interested in stats in the first place then maybe you’d either enjoy learning something new or wouldn’t be offended by the correction if you already knew. But yeah I like your comparison to quantum and relativity. What a cool realm of physics.
This was a great tutorial!! Helped me so much to understand the basic concepts of game design and animation. Perfect pace to learn at and not be bored. I am very grateful!
When I clicked notification that shows nothing though i got bug. Maybe it's TH-cam's new algorithm :)) , i never been london before just dreaming about all of that :D
This channel is by far the most educational and entertaining, i love the way you make tutorials without using libraries. I hope you make a series in making a 2d horror game just like the "Gnarled Hag" or any other 2d flat/sideways games, I bet that would be really interesting! Anyways, please keep uploading this type of content coz I always keep refreshing your channel hoping to find new videos🙏
Thank you for the feedback, I appreciate it :) Just checked what Gnarled Hag game was, I really like that kind of gameplay, reminds me of games from 90s, Halloween theme is my favourite for games btw.
Frank, just a note, great videos.... At 13:57, instead of using animate(0), you could just set a default value in your animate function like this... function animate(timestamp=0){ This will give timestamp a value of 0 as default if timestamp is a falsy value. Then animate() will work.
thx for pure vanilla & pretty good advices. started me own project here, coding a HTML5 rogue like to lad in my son into javascript ^^. ur speading just rox.
@@Frankslaboratory sure, it's ambitious. atm am forking a flash game i know, dumped every images assets. thoses arent animated but spells like lightning or fireball or torch on walls, somes like chest/traps/shelves/pits have 2 assets, but that's not really animated. so now am good for thoses to be animated :D. practicing some more to explore before diving into code & finalize json stuctures & classes (the whole things, something like 1k cell assets, from tiles to sword, 100+ enemies types, 9 players classes). UI & game logic have to be the smartest i can, i dont really calculate about proc & server charges & hope i wont have to i made an editor so the ppl (me 1st) can draw their own map by draging assets on cell or cell selection (with one asset or an asset selection it will be randomised in a cell selection), with json inspector for every properties. here u may use any tileset sheet u have by ur side or downloaded. 1st u create assets, after u applied them to me structures as objects with their property (with json inspector for each cell u click). then u can drag & drop theses. map-pack are supposed to chain, u finish a lvl by entering a deeper one, the game am forking is 20 map to complete a dungeon. My really 1st goal is creativity for users & when possible, lad in users into code by making their own new game objects as a begining (todo.txt) i have a first client connected to nodejs, map is served thrue iosocket, & every interactive is handled by the server (every = chests/shelves/pits atm), player travels the map, takes dmg on traps & loot chests, with fog of war & pathfinding, centered char on a scrolling map (any direction & when the player moves). later i will want a home for each player, like a lobby where he can lad friends to play with & start a dungeon. a chat for sure, & why not some audio vocal for the group. nothing will stop me ^^
@@boristherin4104 Boris this is really impressive, I wouldn't know how to implement some of these features. How long have you been programming? You sound like someone with a lot of experience
@@Frankslaboratory with ? :D I started to learn javascript on a windows95 systeme ^^. am an amateur, never worked in developement. am a creative, and dont stop at computers. i starded to learn coding with basic at 11 (1980), am just a fan with such an amazing artefact computer is. was most coding with php/css/mysql/cgi at first & was using js for some client communication (making callbacks in 1999 by brute force innerHTML script injection ^^, and worked pretty fine). But since canvas are here, power is here (like ur particle images, so powerfull), i wanted for long to try me firsts games. am self graduate, php, css, sql, js, java, some python (but am noob at) & shell (linux prompt for cgi & what ever blow in ur mind) so i like opening a blank page & begin anything i want or need. for exemple made a streamPage for me videos on me HDD, to be browsable in local network at home. (had to recompil chrome with ffmep to read divx) i made a cabinet with joysticks,screen & MAME emulator, wich was piloted thrue browser (choose game, launch game, save, restore, pause game) for events competition, broadcasting game screen on network. Made a whole gameserver auto pilot syteme (reading logs to know, & using rcon to command) for competiton again, piloting every servers, for matchs, connected to intranet in LAN events, with dedicated portal, where users register & get their link to launch their game on the right server, providing the right password. writing live score in database, then rendered thrue the portal. last event we made, 32 teams of 5 ppl, 2 days, no any bug, didnt have to stand off my chair (not like the 1st time lol) last one thing i was just happy with, was a js polyfill (to compare starcraft II units property), filtering weak VS & strong VS, with graphics assets for unit & every props & some compare functions. am used to have localhost in my favorite for years so, reading docs & never listen ppl they tell it aint possible, 'cause it is. i really appreciate ur contents, 9th tuto done here in those few days
@@Frankslaboratory I’m doing good Frank! A lot better now that I found your channel haha (been watching you for a couple weeks now). I love to code on the weekends because I feel like that’s when I can work on the fun stuff more :D
Thank you for sharing your knowledge in this awesome instructional tutorial. Your detailed explanation and logic taught me a great deal about the refined use of JS arrays and classes. I will be revisiting my current button array microcontroller interface with some new found refinements.
@@Frankslaboratory using JS created buttons as addressable input / display devices. Bidirectional comm to an esp8266 / 32 backend Each resizable row of buttons sits on a parent, col buttons are children. 5 Colours of button determines logic state, input from browser or output from processor. 10 rows with 8 buttons per row. Message passing architecture. I’m an old ‘C’ guy, learning JS. Trying to conserve memory so spread method might help, also the layered Canvas got me thinking .I very much enjoyed your gaming tutorial, style and logic. Excellent Job Frank.
@@carltone Carl you sound like an experienced developer. I hope one day I will get to your level of knowledge. Can I ask how long have you been coding? I only know JavaScript, used little Java and PHP but I'm not proficient in these. I like reading about projects like this, it's interesting to see what other people can come up with. I'm still mostly at the stage where I spend most time trying to get things to work and optimisations are not a massive part of my workflow. I hope that eventually I can move on to the final stage of developer cycle where I understand code well enough to optimise my code effectively. Thank you for sharing btw
@@Frankslaboratory retired test engineer, writing code on and off for 40+ yrs. started to learn JS in March of this year to use a browser as an interface to wifi connected microcontrollers. Just a fun time consuming hobby!
Frank I did change the microcontroller button array to a canvas button array. The buttons are arranged in a matrix of filled rectangles. I convert the mouse x,y coordinates to row and columns relative to the size of the rectangles. I then read the colour of the button at a specific location inside the button where I know there is no text. Button colour toggles on select, but can also change based on a message from the controller, so functions as input based on logic -> colour , and as an indicator based on different colours from a message from the processor. Further. I stack 4 canvases ( like a deck of cards) presently buttons, chart, gauges and text ( more to come). I use canvas.style.display = “ hide” / “ unhide” the selected canvas via some UI buttons. The beauty of this the canvases are live and update in the background. Perfect for the microcontroller interface. A big THANKS for this video ( and other Frank’s videos) for the inspiration to use the canvas techniques.
Seems like the Frametime (ms/Frame) is always the limit of display refreshrate. Meaning V-Sync or something like this defaulty enabled. Getting arround 6,94ms each Frame -> 144 FPS Capping my Screen to 60fps -> 16,6 ms/Frame Very nice to play around with this. PS: I love this series and will watch them all, thank you keep it up!
Hi, you are right, it's because requestAnimationFrame caps at maximum screen refresh rate, you could still get higher delta time values if you run the code on slow PC or if you add too many particle effects that slow the game down.
instead of randomising the flapInterval you can make it inversely proportional to directionX Like this flapInterval = 400/directionX It will make it such that the birds which are flying fast will flap fast.
@@Frankslaboratory I'm glad that you took a minute of your time just to answer me 🙂 I'm a fan of this channel from the very beginning and we all appreciate what you are doing here. Keep the good work and good luck
Nice video.. I've always calculated my deltaTime as let t1 = new Date().getTime(); then, inside RAF function... let current = new Date().getTime(); let deltaTime = (current - t1) * 0.001; t1 = current; if(deltaTime > 0.2) deltaTime = 0;
Hi, nice technique, using Date.now() is alternative way to do it, it also works well. I wonder which technique is more performant, probably will be very similar.
@@Frankslaboratory I would say your approach has more performance for some reasons... Although the difference is very small and negligible at a frequent exclusive interval [1E-20, 1E-19.5] on most computers for small scale games and animations.
Hi Emanuael, math like this can be scary for me sometimes ahaha. So you are into mathematics and coding? Great combination, you will be a great programmer
Frank, regarding the chance of another raven having the same random color as the selected raven, this is a special case of the more general birthday problem (en.wikipedia.org/wiki/Birthday_problem), except here we only consider the selected raven - as opposed to all possible matches among the set of active ravens. Let c = 256^3 be the number of possible colors. For other ravens, the chance of not matching the selected raven is (c-1)/c. If there are n other active ravens in the scene, the probability of no matches is p = ((c-1)/c)^n. You need at least 17 other ravens in the scene before you get the chance of a match (1-p) to be around one in a million.
Thank you for doing the math for us, I might quote you next time I use this technique if I remember to talk about this again. I think based on these number this technique is pretty safe to use
I will not agree with "optimisation" done at 23:00. Yes, usually division is slower than multiplication. Unless it's 2-based. Division by 2 as well as multiplication by 2 are the same because it's just bit shifting to the left or to the right. I'm not sure if it is used in browser engine though. Should be, I suppose.
Thank you for putting this together Frank! Can you please consider making a video on how to create a game menu and allow users to have the ability to select a different game mode from that menu? For example, I was interested in developing a game where there are two modes: (1) the user has a minute to complete a task without being hit by any projectiles & (2) the user has to survive for as long as possible without being hit by any projectiles. I would like to be able to choose to play either of those two modes from a single game menu.
Hi Aravinth! This is a great idea and it goes well with my future plans. I want to start introducing state management and multiple levels to my future game tutorials, and selecting modes from the menu will fit to that same code structure. The code structure like that is a bit more complex, I'm looking into a good way how to explain it for beginners so we can eventually use it for all the games, thank you for sharing your creative ideas with me
37:42 i think the answer is about 1/10trillion kind of colors = (2^8)^3 = 2^24 there are 7 objects and 2 object have same color = (2^24) / (7*6/2*1) = 1.34*10^-13 there are possibility of 3 or more object have the same color, but it is too low so ignorable. am i right?
Awesome tutorial, i made a complex code to automatic parse the update method to the main method of game using class and extends methods so i just need to append the class to my game update and inside each extended scene class a manager the draw and logic, i made this 100% focused on import files with cjs, i'm finish my project but i'm get stucked on animation, and this tutorials help-me some much - Sorry bad english, i'm Brazillian
I messaged too soon. I think it would be divided by max number of ravens - 1. And that would only be the chances of two ravens having the same color and being on the screen at the same time. 256 * 256 * 256 / (6-1) or 1:3,355,443. The chances of them being +/- x pixels from one another would be much less.
hey frank at 40:20 my code is not ignoring the ravens when I click on the ravens instead of giving the value of colors in collision canvas it gives 0:0:0 for colors
when at 18:20 you remove the out-of-screen objects from the array using filter ravens = ravens.filter(object => !object.markedForDeletion); is this sufficient to free the memory of them? The objects not included into the array by the filter - perhaps they will remain in the memory and need to be dstroyed expressly? This certainly be the case is the array contains not the objects but just pointers to them. PS. You were asking about framerate - on my HP Pavilion Intel(R) Pentium(R) Gold G5400 CPU @ 3.70GHz 3.70 GHz, 8Gb Win10 Home I have the same number 16. I.e. 62 fps
Hi Андреич , this is a really good question. I haven't done much research how memory efficient this technique is. It would certainly be better to use object pooling and have a static number of ravens and just reset their position back to start when they fly across screen. I will look into it and report my findings in future videos, thank you for taking the time to comment
@@Frankslaboratory :::: just reset their position back to start ======================= I did exacly that, but also changed the Y of the strarting position as well as the speed using random() to ensure randomness of targets. Actually I replaced the raven with a sport shooting target (the one with concentric circles) and wanted a picture of bullet hole to appear on the target exactly in the place where the mouse clicked it. The target should not explode, but keep moving. I guess that for bullet holes the target object should have an array as an attribute. And x and y coordinates of every bullet hole should be pushed into this array. Coordinates need to be local with (0,0) at the center of the target. This will allow to determine which of theose concentric circles of the target "the bullet" hitted But so far I cannot figure out how to achieve this in practice. Collision detection by color would not work for this
After hitting several ravens the whole scene (ravens and scoreboard) except the background image gets transparent. I guess this is because in the class Particle the draw() method uses ctx.globalAlpha = 1 - this.radius/this.maxRadius; If I understand correctly ctx.globalAlpha is applied to all the objects, not just to the particles. Instead I tried to use this.alpha = 1 - this.radius/this.maxRadius; this.opacity = 1 - this.radius/this.maxRadius; this.setAlpha(1 - this.radius/this.maxRadius;); nothing works. How shall I set transparency to the particles without affecting transparency of other objects?
Thank you for your tutorials I am developing my own website using these concepts. For some reason have to click multiple times on a bird to get it deleted. Any thoughts?
Hey Frankie, I have done everything you say in this video, but when I click on a raven (i. e. a rectangle( killing it in the process the number of ravens keeps growing and growing, and eventually there are too many of them on my screen, which in turns slows my computer and makes it impossible to do anything. What could go wrong, Frankie. By the way, you are doing an amazing job. I have been watching you for a week. And I have learned something from you. I am no programmer at all. But I wish I were. Maybe you can help me on with that one. :D
Thanks teacher for this tuto, i have some issues about drawImage , in your exemple you don't wait image to load using onload function , i try it but not working
Thanks for this! Great video. I was curious if you / other game devs used React when building HTML5/Javascript games or is that not really common? Would love to see more examples using that. :)
Hi Lefani, on my channel I focus on vanilla JavaScript, React is a great tool and all JavaScript projects can be converted into React code. React has one big disadvantage, it changes very fast. Last time I used React was 1.5 year ago and I suspect my knowledge is now outdated. Releasing videos on React is hard work, because these videos are outdated so fast.
Hi Suma. It is. Timestamp is passed automatically as an argument on function you pass to request animation frame. Any function you pass to request animation frame has automatic timestamp argument. You can test it yourself. You can also read docs on requestAnimationFrame method to learn more about it
I need help Frank. Suddenly when i starten on creating particles the hole game changed. My ravens god alot smaller, and my score got alot smaller. What do i do????
The 16.6666 ist the result of requesting the animationFrame. In this case I think you have a 60Hz monitor... means 60 Hz = 60 Updates per second. Now devide 1000ms by 60 Updates and you get round about 16.66666... ;) Sorry for my english... it's not my native language :)
Hi, I use parallax background in my 2 recent big tutorials and I have a separate video on it, would be very easy to combine with this code, I might do it for a new class, probably will do a space game now
During the How to animate bouncing movement part I have ravens that I cant fully see because stay at the top of the page and go in a straight line, all other birds work, I used your exact code. Any tips on what to do? also love your vids!
my was also 16 :D, great tut any ways, i follow all of them .. with thi one i have one problem, when game is full screen, i must shoot 2 cm in a front of raven, when window is small then its ok, is it browser problem ?? or css ??
I have a question regarding sprite sheets. Is there any recommended dimension for them? Since they are usually PNGs, not scalable like SVG, I assume a designer needs to create the largest image possible?
I would ask the artist to provide as large images as possible but then I would size them down to the smallest possible size, to speed up loading, if we are talking about web games. Also unnecessarily large images will affect performance. In a polished game you size images to very specific sizes so that it looks as good as possible but are as small as possible at the same time.
Is there going to be a 3rd part to the fish game tutorial? First two videos were awesome and I want to see how to get the final product you previewed in part 2.😃
Hi Bonzo, thank you. I was gonna do part 3 but people voted they prefer a new game project, I will still get back to this eventually, maybe just as a speed coding video or something. There are couple of things I did there I want to talk about, if you watch some of my other game videos you might see me explain some of the techniques there as well. I use similar set of techniques for most of my games so far. Moving on to more complex code structure soon, but before that I want to cover couple more 2d genres in a simple way for beginners
Franks laboratory Sounds good, I will challenge myself to create a finished version using some of your other videos. Keep up the content it’s awesome man!
I noticed that everything works fine as long as one does not change the size of the browser. Then the hitbox and ravens don't align anymore. Seems like an advanced problem. I don't know how to solve that. Maybe with eventlisteners for change.
You can still call a global variable from a class in a different file. I don't really like that approach, so I would pass the ctx2d in the draw function, since you only need the canvas context in the draw function, In my oppinion that's a cleaner solution than passing it in the constructor
Hi Felipe and Danny, I agree, classes will still see global variables even from separate files, JavaScript will just go line by line though all the files in the order you include them. It's not the cleanest approach.If you are using 'export' 'import' ES6 syntax it a bit cleaner and easier to keep track of order you include your classes/variables in. This will only work when run it though a (local) server. Classes are not hoisted, so they are not available in code before they are declared, so the order is important here. I would go with Dannys solution to pass context to draw method directly, I will do that in a future video to show other people as well how it works.
In your game I replaced the ravens with a cartoon of aircraft ww1 and wanted this tale of particles appear only when the aircraft is hit. But cannot figure out how to activate the particle generator. Could you suggest an idea?
The simples way would be a simple if statement. Give your plane a flag, when hit set that to true. If plane is hit create a new particle. That doesn't work?
@@Frankslaboratory Thank you. That is what I did: in class Raven I added this.hit = false; and in update(deltatime) added: if(this.hit) particles.push(new Particle(this.x, this.y, this.width, this.color)); in window.addEventListener('click', function(e) commented out explosions.push(new Explosion(object.x, object.y, object.width)); and added object.hit = true; It works fine yet with a wierd glitch: after some time all the ravens and the scoreboard becomes almost transparent and hardly seen. Clicking on a raven restores opacity but after sometime they disappear completely and I have to reload the page. I noticed that if I shoot down all the ravens, the glitch does not happen (though I did not play long enough to say this for sure). So it looks like the missed ravens accumulate and cause the glitch
When using the spread operator, I got a Syntax Error: Unrecognized token '...'. The ravens variable is definitely an array. I was working on Replit. When I add a semicolon at the end of the spread operator line, the error went away. Do you think this is a Replit-specific bug?
Hi, if your syntax was the same as mine then it must be Replit specific. Spread operator was released in 2015 so it's well supported by most platforms now
I had the same problem because I didn't use ; at the end of the statements. So whenever you use [] in the beginning of a command make sure it is preceeded by a ; For example before [...ravens] the drawScore() ends with a ";": drawScore(); [...ravens].forEach(object => object.update(deltaTime));
Hi Bishow, I do it for my local projects, but haven't used it for tutorials yet. The reason is that for ES6 'export' keyword to work you need to run a local server, so I would have to explain how to set up a local server in every tutorial. My tutorials have a very quick 3 file setup and work locally. I need to think about it and I might do it, thank you for letting me know you would prefer that.
Hey man I just want to let you know that the fact that you didnt use {} in your if / else statements caused me a lot of trouble finding out where the problem is a few times. Pretty cool aside from that i guess.
Hi, using brackets is not always necessary in if/else statement, can you give me a timestamp where I don't use them and let me know how it caused you a problem? I'm not sure what exactly you mean
@@Frankslaboratory Yeah I'm just pretty new to JS so for example 23:53 update methode. I did use curly brackets so it ended up being tangled up a little, and I also had trouble at first deciding when exactly the IF statement ends (inside each other, separate etc). I guess I could have copied the code exactly like that as well. What happaned is that I didn't have any animation so I had to spend some time until I tried to read through it and put them in the right order.
Hey Frank can you please make javascript 2021 tutorial series your code explanation tells that you have really good hold on javascript concepts So please
Hi Chaitany, I want to make JavaScript series, I will make it maybe next year, I am very busy with my other job so building a full complete course won't fit into my diary. I will still be releasing regular TH-cam tutorials though as usual
Hi Zyrobs, I use VS code editor with live server extension plugin which reloads browser window automatically anytime I save any project file. The part on the right is just browser window cropped by my video editing software
Clean up you code a little and you don't need an if statement. currentFrame++; currentFrame %= totalFrames; Just set totalFrames to the frame count and this code will always keep it from 0 to totalFrames - 1. (It takes care of the 'off by one too.)
Hi RIfan, this is a really good game idea, gameplay is quite simple. I did something similar in my fish game tutorial last year, but this has more features, hmm, thanks for your suggestion
Why not just: ravens.forEach((raven) => { raven.update(deltaTime); raven.draw(); }); instead of [...ravens].whatever... ? Why the awkward and pointless array spreading?
I I think this particular case is personal preference. I did it this way because in a game I released back then around the same time I was spreading multiple game object arrays into one array to call update and draw on everything in a unified way. Because of that I didn't think the array spreading was pointless, nor do I think the syntax is awkward. This is an old video, I changed many things how I do these tutorials since then.
Similar game, improved code, mobile compatible: th-cam.com/video/6qcw5gJrLTE/w-d-xo.html
this is the coolest vanilla js course i've seen on youtube. so cool, so much inspiration! thanks
I feel like a pirate on an island and found a treasure chest containing awesome game dev videos! This guy's play list is just awesome!
TH-cam is auto deleting some comments and it deleted most replies I made to your comments on this video, can't do anything about it :( I just bought a new electric sits/stand desk, anyone else using one of those? That's why this video is delayed, took me a while to assemble it :D Click the LIKE please if you want more gamedev!
Hearing about it for first time 😯
This was a perfect tutorial to help me dive into Vanilla JS game dev! I was struggling to figure out how to work between classes and objects. . . Then I find this gem. Thank you for making an easy to follow / understand tutorial :)
Hi Johnathan, thank you for taking the time to let me know, makes me happy to hear you find my tutorial easy to follow. Have fun with your vanilla JS game dev projects
Probability for two ravens to have the same color is 1/(256*256*256) = 1/(2^24) = 1/16,777,216. If you have three ravens, the probability doubles... You can think about it as a lottery example. If there are two 'winning numbers' you have double the chance to 'win' = get the same color as one of the other two ravens. It triples for 4 and so on... For 7 ravens you get 6/16,777,216 = 1/2,796,202. Still a pretty low number. Of course... you can check for duplicates if you really want to avoid this issue. There is still a small issue though... due to antialiasing, pixels on the border of the shape will have different color than that specified. It could trigger another raven by mistake. But also unlikely.
Thank you, Frank, for linking to my course :-)
This actually isn’t completely correct. If you use this logic then that means if we spawn 16,777,216 ravens on screen then there is a 100% chance that one raven matches another one. This is not the case because there are going to be many ravens that have the same color code in this scenario and many that have a unique color… what’s actually happening here is an example of binomial cumulative distribution function (binomial CDF) where we take the number of events that occur (6 events since the first raven doesn’t have any significance) and sum up the probabilities of the number of successes: p(1 raven matches) + p(2 ravens match) + … + p(all 6 ravens match). In this case because the probability is so small and we had such a small number of events, the number actually works out to be almost exactly 6/16,777,216 but this behavior diverges as we increase the number of events. For example if we have a 1/100 probability of success and have 3 events then our final probability is almost exactly 3/100. But if we increase to 50 events, then the final probability of success is closest to 39/100. We would see this same behavior if we had, say 8 million ravens on screen for our scenario as the probability would be significantly less than 0.5
@@daddychan7 yes, you are completely right. I gave the simpler answer because the number of possible color choices is so huge and the number of birds is so small that (as you said) it doesn't make a difference.
This discussion reminds me of the case with Newton and Einstein. First one works just fine until you take a closer look at big / fast moving objects.
@@Radu
Nice! I was worried I would come across as an obnoxious know it all but I figured if you were interested in stats in the first place then maybe you’d either enjoy learning something new or wouldn’t be offended by the correction if you already knew. But yeah I like your comparison to quantum and relativity. What a cool realm of physics.
@@daddychan7 Great that you commented, I think! It's important to point out mistakes like this :-)
Snap! Looking at the intro it looks like you go full boss-mode on this one. I hope I can watch it later today! Thanks Frank!
Frank labo brings you the best of content for JavaScript , learn, each, use, enjoy.
Really? Glad you find it useful, thank you for letting me know :)
That array literal is something new for me and... Very helpful... Thanks frank
Thank you for this. I’m going through an intense bootcamp right now, and this put a lot of concepts I struggle with all together 👍🏼
This was a great tutorial!! Helped me so much to understand the basic concepts of game design and animation. Perfect pace to learn at and not be bored. I am very grateful!
Hey there Frank, I hope you're well. Thanks for this fantastic in-depth tutorial.
Finally after long time
Feels like time travel to london and joined your class 🎊
When I clicked notification that shows nothing though i got bug. Maybe it's TH-cam's new algorithm :)) , i never been london before just dreaming about all of that :D
Amazing content, as always!
@@Frankslaboratory
couldnt say it better than that - simple amazing and for free :-*
But pleeeeease: Tell me the name of the intro song!
As usual, great video!!! You never stop surpising!!! and I never stop learning new things thanks to you!!!
just what i needed.
thank you so much for this professional course.
and again frank, thank you for building this incredible content
I like your way of speaking it's so adorable
Hahaha, thanks Pranay, nobody ever told me this before :D
You really are a magician 🤩
This channel is by far the most educational and entertaining, i love the way you make tutorials without using libraries. I hope you make a series in making a 2d horror game just like the "Gnarled Hag" or any other 2d flat/sideways games, I bet that would be really interesting! Anyways, please keep uploading this type of content coz I always keep refreshing your channel hoping to find new videos🙏
Thank you for the feedback, I appreciate it :) Just checked what Gnarled Hag game was, I really like that kind of gameplay, reminds me of games from 90s, Halloween theme is my favourite for games btw.
This is great, i really love your video. Big THANKS to you Franks.
Frank, just a note, great videos.... At 13:57, instead of using animate(0), you could just set a default value in your animate function like this...
function animate(timestamp=0){
This will give timestamp a value of 0 as default if timestamp is a falsy value. Then animate() will work.
thx for pure vanilla & pretty good advices. started me own project here, coding a HTML5 rogue like to lad in my son into javascript ^^.
ur speading just rox.
Rogue like in JavaScript, that's ambitious, what are you using for graphics, sprite sheets?
@@Frankslaboratory sure, it's ambitious.
atm am forking a flash game i know, dumped every images assets.
thoses arent animated but spells like lightning or fireball or torch on walls, somes like chest/traps/shelves/pits have 2 assets, but that's not really animated.
so now am good for thoses to be animated :D.
practicing some more to explore before diving into code & finalize json stuctures & classes (the whole things, something like 1k cell assets, from tiles to sword, 100+ enemies types, 9 players classes).
UI & game logic have to be the smartest i can, i dont really calculate about proc & server charges & hope i wont have to
i made an editor so the ppl (me 1st) can draw their own map by draging assets on cell or cell selection (with one asset or an asset selection it will be randomised in a cell selection), with json inspector for every properties.
here u may use any tileset sheet u have by ur side or downloaded.
1st u create assets, after u applied them to me structures as objects with their property (with json inspector for each cell u click). then u can drag & drop theses.
map-pack are supposed to chain, u finish a lvl by entering a deeper one, the game am forking is 20 map to complete a dungeon.
My really 1st goal is creativity for users & when possible, lad in users into code by making their own new game objects as a begining (todo.txt)
i have a first client connected to nodejs, map is served thrue iosocket, & every interactive is handled by the server (every = chests/shelves/pits atm), player travels the map, takes dmg on traps & loot chests, with fog of war & pathfinding, centered char on a scrolling map (any direction & when the player moves).
later i will want a home for each player, like a lobby where he can lad friends to play with & start a dungeon.
a chat for sure, & why not some audio vocal for the group. nothing will stop me ^^
@@boristherin4104 Boris this is really impressive, I wouldn't know how to implement some of these features. How long have you been programming? You sound like someone with a lot of experience
@@Frankslaboratory with ? :D
I started to learn javascript on a windows95 systeme ^^.
am an amateur, never worked in developement. am a creative, and dont stop at computers.
i starded to learn coding with basic at 11 (1980), am just a fan with such an amazing artefact computer is.
was most coding with php/css/mysql/cgi at first & was using js for some client communication (making callbacks in 1999 by brute force innerHTML script injection ^^, and worked pretty fine).
But since canvas are here, power is here (like ur particle images, so powerfull), i wanted for long to try me firsts games.
am self graduate, php, css, sql, js, java, some python (but am noob at) & shell (linux prompt for cgi & what ever blow in ur mind)
so i like opening a blank page & begin anything i want or need.
for exemple made a streamPage for me videos on me HDD, to be browsable in local network at home. (had to recompil chrome with ffmep to read divx)
i made a cabinet with joysticks,screen & MAME emulator, wich was piloted thrue browser (choose game, launch game, save, restore, pause game) for events competition, broadcasting game screen on network.
Made a whole gameserver auto pilot syteme (reading logs to know, & using rcon to command) for competiton again, piloting every servers, for matchs, connected to intranet in LAN events, with dedicated portal, where users register & get their link to launch their game on the right server, providing the right password. writing live score in database, then rendered thrue the portal.
last event we made, 32 teams of 5 ppl, 2 days, no any bug, didnt have to stand off my chair (not like the 1st time lol)
last one thing i was just happy with, was a js polyfill (to compare starcraft II units property), filtering weak VS & strong VS, with graphics assets for unit & every props & some compare functions.
am used to have localhost in my favorite for years
so, reading docs & never listen ppl they tell it aint possible, 'cause it is.
i really appreciate ur contents, 9th tuto done here in those few days
this is AWESOME!!
Great,,,, sir
My deltaTime is the same! Great lesson, you have cool game ideas!
Thank you Emanuel
Looks like I’m coding JavaScript games today :D
Jullien! How are you? Good to hear I'm not the only one who codes on weekends haha
@@Frankslaboratory I’m doing good Frank! A lot better now that I found your channel haha (been watching you for a couple weeks now). I love to code on the weekends because I feel like that’s when I can work on the fun stuff more :D
I really like your content
Really? thank you ❤
Ahhh man thank you gooosh so exiting 😄😍🤩 I really love your videos
Thank you so much to be here and make these wonderful tutorials about js game dev 😭
Hi Red Pie, nice to meet you, thank you for your kind feedback, I hope you found some value, good luck with your coding studies :)
@@Frankslaboratory Thank you 😊 I very enjoying to study your tutorials thank you
Using TH-cam after few weeks , first video 🎉🎉🤩
@@Frankslaboratory yess, I have so many pending goals, so trying to spend time on them 😀
Amazing video! I didn't know spread operator!
Thanks Evaristo, I'm glad I showed you something new, usually it's the other way around :D
Thank you for sharing your knowledge in this awesome instructional tutorial. Your detailed explanation and logic taught me a great deal about the refined use of JS arrays and classes. I will be revisiting my current button array microcontroller interface with some new found refinements.
Hi Carl, nice to meet you and thank you for your kind feedback. Button array microcontroller? Hmm, sounds like an exciting project you're working on
@@Frankslaboratory using JS created buttons as addressable input / display devices. Bidirectional comm to an esp8266 / 32 backend Each resizable row of buttons sits on a parent, col buttons are children. 5 Colours of button determines logic state, input from browser or output from processor. 10 rows with 8 buttons per row. Message passing architecture. I’m an old ‘C’ guy, learning JS. Trying to conserve memory so spread method might help, also the layered Canvas got me thinking .I very much enjoyed your gaming tutorial, style and logic. Excellent Job Frank.
@@carltone Carl you sound like an experienced developer. I hope one day I will get to your level of knowledge. Can I ask how long have you been coding? I only know JavaScript, used little Java and PHP but I'm not proficient in these. I like reading about projects like this, it's interesting to see what other people can come up with. I'm still mostly at the stage where I spend most time trying to get things to work and optimisations are not a massive part of my workflow. I hope that eventually I can move on to the final stage of developer cycle where I understand code well enough to optimise my code effectively. Thank you for sharing btw
@@Frankslaboratory retired test engineer, writing code on and off for 40+ yrs. started to learn JS in March of this year to use a browser as an interface to wifi connected microcontrollers. Just a fun time consuming hobby!
Frank I did change the microcontroller button array to a canvas button array. The buttons are arranged in a matrix of filled rectangles. I convert the mouse x,y coordinates to row and columns relative to the size of the rectangles. I then read the colour of the button at a specific location inside the button where I know there is no text. Button colour toggles on select, but can also change based on a message from the controller, so functions as input based on logic -> colour , and as an indicator based on different colours from a message from the processor. Further. I stack 4 canvases ( like a deck of cards) presently buttons, chart, gauges and text ( more to come). I use canvas.style.display = “ hide” / “ unhide” the selected canvas via some UI buttons. The beauty of this the canvases are live and update in the background. Perfect for the microcontroller interface. A big THANKS for this video ( and other Frank’s videos) for the inspiration to use the canvas techniques.
Seems like the Frametime (ms/Frame) is always the limit of display refreshrate. Meaning V-Sync or something like this defaulty enabled.
Getting arround 6,94ms each Frame -> 144 FPS
Capping my Screen to 60fps -> 16,6 ms/Frame
Very nice to play around with this.
PS: I love this series and will watch them all, thank you keep it up!
Hi, you are right, it's because requestAnimationFrame caps at maximum screen refresh rate, you could still get higher delta time values if you run the code on slow PC or if you add too many particle effects that slow the game down.
Antoher great video. Thank you so much!!
Glad you liked it :)
instead of randomising the flapInterval you can make it inversely proportional to directionX
Like this
flapInterval = 400/directionX
It will make it such that the birds which are flying fast will flap fast.
FRANK YOU ARE EPIC THANK YOU
BY the way, I very much appreciate you explaining the code as you go
I was looking for a method to detect a color in some coordinates in canvas element and I end up watching the whole video wich is awesome.
Hi, glad you found something useful here :)
@@Frankslaboratory I'm glad that you took a minute of your time just to answer me 🙂 I'm a fan of this channel from the very beginning and we all appreciate what you are doing here. Keep the good work and good luck
Nice video.. I've always calculated my deltaTime as
let t1 = new Date().getTime();
then, inside RAF function...
let current = new Date().getTime();
let deltaTime = (current - t1) * 0.001;
t1 = current;
if(deltaTime > 0.2) deltaTime = 0;
Hi, nice technique, using Date.now() is alternative way to do it, it also works well. I wonder which technique is more performant, probably will be very similar.
@@Frankslaboratory I would say your approach has more performance for some reasons... Although the difference is very small and negligible at a frequent exclusive interval [1E-20, 1E-19.5] on most computers for small scale games and animations.
@@Frankslaboratory however, I wonder if you'll ever make a video on 3D graphics with canvas ?
You're the bes m8! I'd love to learn how to make a proper game shader from you :D
I might look into shaders when I cover all 2D gamedev techniques, thanks for reminding me
Thanks for this Amazing tutorial 😎
Glad you liked it :D
Wow! I should calculate that probability, I am into mathematics!
Hi Emanuael, math like this can be scary for me sometimes ahaha. So you are into mathematics and coding? Great combination, you will be a great programmer
Frank, regarding the chance of another raven having the same random color as the selected raven, this is a special case of the more general birthday problem (en.wikipedia.org/wiki/Birthday_problem), except here we only consider the selected raven - as opposed to all possible matches among the set of active ravens. Let c = 256^3 be the number of possible colors. For other ravens, the chance of not matching the selected raven is (c-1)/c. If there are n other active ravens in the scene, the probability of no matches is p = ((c-1)/c)^n. You need at least 17 other ravens in the scene before you get the chance of a match (1-p) to be around one in a million.
Thank you for doing the math for us, I might quote you next time I use this technique if I remember to talk about this again. I think based on these number this technique is pretty safe to use
I will not agree with "optimisation" done at 23:00. Yes, usually division is slower than multiplication. Unless it's 2-based. Division by 2 as well as multiplication by 2 are the same because it's just bit shifting to the left or to the right.
I'm not sure if it is used in browser engine though. Should be, I suppose.
Thank you for putting this together Frank! Can you please consider making a video on how to create a game menu and allow users to have the ability to select a different game mode from that menu? For example, I was interested in developing a game where there are two modes: (1) the user has a minute to complete a task without being hit by any projectiles & (2) the user has to survive for as long as possible without being hit by any projectiles. I would like to be able to choose to play either of those two modes from a single game menu.
Hi Aravinth! This is a great idea and it goes well with my future plans. I want to start introducing state management and multiple levels to my future game tutorials, and selecting modes from the menu will fit to that same code structure. The code structure like that is a bit more complex, I'm looking into a good way how to explain it for beginners so we can eventually use it for all the games, thank you for sharing your creative ideas with me
37:42 i think the answer is about 1/10trillion
kind of colors = (2^8)^3 = 2^24
there are 7 objects and 2 object have same color = (2^24) / (7*6/2*1) = 1.34*10^-13
there are possibility of 3 or more object have the same color, but it is too low so ignorable.
am i right?
Awesome tutorial, i made a complex code to automatic parse the update method to the main method of game using class and extends methods so i just need to append the class to my game update and inside each extended scene class a manager the draw and logic, i made this 100% focused on import files with cjs, i'm finish my project but i'm get stucked on animation, and this tutorials help-me some much - Sorry bad english, i'm Brazillian
Sounds like you are quite advanced coder yourself, glad you found my course useful, greetings to Brazil :)
37:38 I am NOT a math expert, but I think it would be 256 cubed divided by the max number of ravens. 256 * 256 * 256 / (say) 6 or 1:2,796,203
I messaged too soon. I think it would be divided by max number of ravens - 1. And that would only be the chances of two ravens having the same color and being on the screen at the same time. 256 * 256 * 256 / (6-1) or 1:3,355,443. The chances of them being +/- x pixels from one another would be much less.
Hi Brian, thank you for sharing, I wasnt sure about the exact math so I didn't put it in the video, I think you are right with your calculation
Don’t reset timeToNextRaven to 0, set it to timeToNextRaven - ravenInterval. That results in better parity between different systems
Excelente aporte muchas gracias;
Gracias Sebastian
hey frank at 40:20 my code is not ignoring the ravens when I click on the ravens instead of giving the value of colors in collision canvas it gives 0:0:0 for colors
Hard to tell, I can give you the code if you want
when at 18:20 you remove the out-of-screen objects from the array using filter
ravens = ravens.filter(object => !object.markedForDeletion);
is this sufficient to free the memory of them? The objects not included into the array by the filter - perhaps they will remain in the memory and need to be dstroyed expressly? This certainly be the case is the array contains not the objects but just pointers to them.
PS. You were asking about framerate - on my HP Pavilion Intel(R) Pentium(R) Gold G5400 CPU @ 3.70GHz 3.70 GHz, 8Gb Win10 Home I have the same number 16. I.e. 62 fps
Hi Андреич , this is a really good question. I haven't done much research how memory efficient this technique is. It would certainly be better to use object pooling and have a static number of ravens and just reset their position back to start when they fly across screen. I will look into it and report my findings in future videos, thank you for taking the time to comment
@@Frankslaboratory :::: just reset their position back to start
=======================
I did exacly that, but also changed the Y of the strarting position as well as the speed using random() to ensure randomness of targets.
Actually I replaced the raven with a sport shooting target (the one with concentric circles) and wanted a picture of bullet hole to appear on the target exactly in the place where the mouse clicked it. The target should not explode, but keep moving. I guess that for bullet holes the target object should have an array as an attribute. And x and y coordinates of every bullet hole should be pushed into this array. Coordinates need to be local with (0,0) at the center of the target. This will allow to determine which of theose concentric circles of the target "the bullet" hitted
But so far I cannot figure out how to achieve this in practice. Collision detection by color would not work for this
After hitting several ravens the whole scene (ravens and scoreboard) except the background image gets transparent. I guess this is because in the class Particle the draw() method uses
ctx.globalAlpha = 1 - this.radius/this.maxRadius;
If I understand correctly ctx.globalAlpha is applied to all the objects, not just to the particles.
Instead I tried to use
this.alpha = 1 - this.radius/this.maxRadius;
this.opacity = 1 - this.radius/this.maxRadius;
this.setAlpha(1 - this.radius/this.maxRadius;);
nothing works.
How shall I set transparency to the particles without affecting transparency of other objects?
Hi frank love your channel
would you consider making old game like sobokan for example ?
@@Frankslaboratory Yes you can see it here : th-cam.com/video/xvu6r5_4_T4/w-d-xo.html
@@soniamaklouf1178 I used to love to play this, I wonder how much code would it need with vanilla JS, I will try :)
Instead of using a collision canvas, you could also check if click x and y are inside the boundaries of your targets
Yea there are ways to make that work even with this color collision technique. I should revisit this topic. Thank you for your suggestion
On second thought, when checking the boundaries, you may also hit birds in the background.
Thanks for the video!
nice trick at 12:08
Thank you for your tutorials I am developing my own website using these concepts. For some reason have to click multiple times on a bird to get it deleted. Any thoughts?
Hey Frankie, I have done everything you say in this video, but when I click on a raven (i. e. a rectangle( killing it in the process the number of ravens keeps growing and growing, and eventually there are too many of them on my screen, which in turns slows my computer and makes it impossible to do anything. What could go wrong, Frankie. By the way, you are doing an amazing job. I have been watching you for a week. And I have learned something from you. I am no programmer at all. But I wish I were. Maybe you can help me on with that one. :D
Thanks teacher for this tuto, i have some issues about drawImage , in your exemple you don't wait image to load using onload function , i try it but not working
No meu Pc está ficando lento quando eu clico no objeto, acredito que seja por causa da detecção de pixels, pode ajudar?
Thanks for this! Great video. I was curious if you / other game devs used React when building HTML5/Javascript games or is that not really common? Would love to see more examples using that. :)
Hi Lefani, on my channel I focus on vanilla JavaScript, React is a great tool and all JavaScript projects can be converted into React code. React has one big disadvantage, it changes very fast. Last time I used React was 1.5 year ago and I suspect my knowledge is now outdated. Releasing videos on React is hard work, because these videos are outdated so fast.
@@Frankslaboratory That's fair. Thanks for replying!
I can't understand how console.log print timeStamp at 9:12 . How code knew it's time? Or timestamp it's built-in in JavaScript?
Hi Suma. It is. Timestamp is passed automatically as an argument on function you pass to request animation frame. Any function you pass to request animation frame has automatic timestamp argument. You can test it yourself. You can also read docs on requestAnimationFrame method to learn more about it
@@Frankslaboratory thank you Frank . I get it now . So it's something come with requestanimationframe . Now i get it
Could someone please tell me the name of the song at the beginning? i desperately want to hear the whole song :/
@@Frankslaboratory Perfect music for perfect tutorials! Thank you so much m8!! :-)
Thank you. Very kind. Happy to help :)
I need help Frank. Suddenly when i starten on creating particles the hole game changed. My ravens god alot smaller, and my score got alot smaller. What do i do????
Any ideas about getting the tap event to work on mobile devices safari
The 16.6666 ist the result of requesting the animationFrame. In this case I think you have a 60Hz monitor... means 60 Hz = 60 Updates per second. Now devide 1000ms by 60 Updates and you get round about 16.66666... ;) Sorry for my english... it's not my native language :)
Yes, thank you for sharing this is a great explanation. And your English is better than mine :D
Yes great explanation...got ~8.3 on 120Hz monitor :)
@@frankw645 Thank you for sharing with us
can you provide us that shooter game but in a parallax background?
Hi, I use parallax background in my 2 recent big tutorials and I have a separate video on it, would be very easy to combine with this code, I might do it for a new class, probably will do a space game now
During the How to animate bouncing movement part I have ravens that I cant fully see because stay at the top of the page and go in a straight line, all other birds work, I used your exact code. Any tips on what to do? also love your vids!
Nevermind i figured it out , i forgot the parenthesis on line 19
my was also 16 :D, great tut any ways, i follow all of them .. with thi one i have one problem, when game is full screen, i must shoot 2 cm in a front of raven, when window is small then its ok, is it browser problem ?? or css ??
I have a question regarding sprite sheets. Is there any recommended dimension for them? Since they are usually PNGs, not scalable like SVG, I assume a designer needs to create the largest image possible?
I would ask the artist to provide as large images as possible but then I would size them down to the smallest possible size, to speed up loading, if we are talking about web games. Also unnecessarily large images will affect performance. In a polished game you size images to very specific sizes so that it looks as good as possible but are as small as possible at the same time.
no meu PC está ficando lento, quando eu clico, e só funciona quando clico na cor. pelo que saiba fiz tudo direito.
Is there going to be a 3rd part to the fish game tutorial? First two videos were awesome and I want to see how to get the final product you previewed in part 2.😃
Hi Bonzo, thank you. I was gonna do part 3 but people voted they prefer a new game project, I will still get back to this eventually, maybe just as a speed coding video or something. There are couple of things I did there I want to talk about, if you watch some of my other game videos you might see me explain some of the techniques there as well. I use similar set of techniques for most of my games so far. Moving on to more complex code structure soon, but before that I want to cover couple more 2d genres in a simple way for beginners
Franks laboratory Sounds good, I will challenge myself to create a finished version using some of your other videos. Keep up the content it’s awesome man!
I noticed that everything works fine as long as one does not change the size of the browser. Then the hitbox and ravens don't align anymore. Seems like an advanced problem. I don't know how to solve that. Maybe with eventlisteners for change.
How would you deal with the classes in different files? Would pass the context in the draw method, in the constructor, another method ?
You can still call a global variable from a class in a different file. I don't really like that approach, so I would pass the ctx2d in the draw function, since you only need the canvas context in the draw function, In my oppinion that's a cleaner solution than passing it in the constructor
Hi Felipe and Danny, I agree, classes will still see global variables even from separate files, JavaScript will just go line by line though all the files in the order you include them. It's not the cleanest approach.If you are using 'export' 'import' ES6 syntax it a bit cleaner and easier to keep track of order you include your classes/variables in. This will only work when run it though a (local) server. Classes are not hoisted, so they are not available in code before they are declared, so the order is important here. I would go with Dannys solution to pass context to draw method directly, I will do that in a future video to show other people as well how it works.
In your game I replaced the ravens with a cartoon of aircraft ww1 and wanted this tale of particles appear only when the aircraft is hit. But cannot figure out how to activate the particle generator. Could you suggest an idea?
The simples way would be a simple if statement. Give your plane a flag, when hit set that to true. If plane is hit create a new particle. That doesn't work?
@@Frankslaboratory Thank you. That is what I did: in class Raven I added
this.hit = false;
and in update(deltatime) added:
if(this.hit)
particles.push(new Particle(this.x, this.y, this.width, this.color));
in window.addEventListener('click', function(e) commented out explosions.push(new Explosion(object.x, object.y, object.width));
and added
object.hit = true;
It works fine yet with a wierd glitch: after some time all the ravens and the scoreboard becomes almost transparent and hardly seen. Clicking on a raven restores opacity but after sometime they disappear completely and I have to reload the page. I noticed that if I shoot down all the ravens, the glitch does not happen (though I did not play long enough to say this for sure). So it looks like the missed ravens accumulate and cause the glitch
Any specific pc requirements for this development?
Code editor and internet browser
I think it seems to be 16 for deltatime... keeps resetting to that anyway.
When using the spread operator, I got a Syntax Error: Unrecognized token '...'. The ravens variable is definitely an array. I was working on Replit. When I add a semicolon at the end of the spread operator line, the error went away. Do you think this is a Replit-specific bug?
Hi, if your syntax was the same as mine then it must be Replit specific. Spread operator was released in 2015 so it's well supported by most platforms now
I had the same problem because I didn't use ; at the end of the statements. So whenever you use [] in the beginning of a command make sure it is preceeded by a ;
For example before [...ravens] the drawScore() ends with a ";":
drawScore();
[...ravens].forEach(object => object.update(deltaTime));
would be great if you use es6 and structure project with multiple files.
Hi Bishow, I do it for my local projects, but haven't used it for tutorials yet. The reason is that for ES6 'export' keyword to work you need to run a local server, so I would have to explain how to set up a local server in every tutorial. My tutorials have a very quick 3 file setup and work locally. I need to think about it and I might do it, thank you for letting me know you would prefer that.
Hey man I just want to let you know that the fact that you didnt use {} in your if / else statements caused me a lot of trouble finding out where the problem is a few times. Pretty cool aside from that i guess.
Hi, using brackets is not always necessary in if/else statement, can you give me a timestamp where I don't use them and let me know how it caused you a problem? I'm not sure what exactly you mean
@@Frankslaboratory Yeah I'm just pretty new to JS so for example 23:53 update methode. I did use curly brackets so it ended up being tangled up a little, and I also had trouble at first deciding when exactly the IF statement ends (inside each other, separate etc). I guess I could have copied the code exactly like that as well.
What happaned is that I didn't have any animation so I had to spend some time until I tried to read through it and put them in the right order.
16:00: You are living in the minds of your students....
Hi Jason, i try my best hahaha
6.9 is my average number for the deltatime console log..... (nice)
Do you have high refresh screen? Thats a very fast delta time
Same number for the deltaTime coach
Thanks for letting me know Yan
Hey Frank
can you please make javascript 2021 tutorial series your code explanation tells that you have really good hold on javascript concepts
So please
Hi Chaitany, I want to make JavaScript series, I will make it maybe next year, I am very busy with my other job so building a full complete course won't fit into my diary. I will still be releasing regular TH-cam tutorials though as usual
which editor is that?
Hi Zyrobs, I use VS code editor with live server extension plugin which reloads browser window automatically anytime I save any project file. The part on the right is just browser window cropped by my video editing software
Clean up you code a little and you don't need an if statement.
currentFrame++;
currentFrame %= totalFrames;
Just set totalFrames to the frame count and this code will always keep it from 0 to totalFrames - 1. (It takes care of the 'off by one too.)
First
Congratulations Anand, you win this week! :)
@@Frankslaboratory
Such a coincident 😂
I finished my studies and turned on internet and got the notification. I'm Lucky 😊
deltatime also 16 for me
Thanks for letting us know. And have fun coding
~4.2ms for deltatime. I'm using visual studio and have a screen refresh rate of 240hz which agrees with some of the other comments
Hi Joe, I think this is the first comment from someone with high refresh screen. Thank you for sharing and confirming the code works as intended :)
51:09
53:01
54:30
56:12
56:52
58:00
58:38
My deltatime is 8 haha =/ it's so bad?
i have the same delta time 16.766
var fps = 1000/deltaTime;
i calculate fps and i am getting 59.5 frames per second.
Thank you for letting me know
brother can you create game like insaniquarium in js
Hi RIfan, this is a really good game idea, gameplay is quite simple. I did something similar in my fish game tutorial last year, but this has more features, hmm, thanks for your suggestion
Why not just:
ravens.forEach((raven) => {
raven.update(deltaTime);
raven.draw();
});
instead of
[...ravens].whatever...
?
Why the awkward and pointless array spreading?
I I think this particular case is personal preference.
I did it this way because in a game I released back then around the same time I was spreading multiple game object arrays into one array to call update and draw on everything in a unified way.
Because of that I didn't think the array spreading was pointless, nor do I think the syntax is awkward. This is an old video, I changed many things how I do these tutorials since then.
16.6 in timer for me
My deltaTime varies between 20, and 13
Interesting, thank you for sharing Jakub
my delta time is about the same as yours
Hi Levi, thank you for letting me know and participating in my experiments :D
my delta is also 16..something
💪
JavaScript Game ⤵️
😂😅