Thanks for this. Got to the end and the red red block has disappeared... Grrrr... I've done loads in python, this HTML seems so awkward... but slowly slowly.

The only reason I can think of for needing more than 4 touches is if you make a mini Guitar Hero with strumming 😅

Thank you 🙏

Atlast i found the answer to my question

you are a real king I have been trying to create an https server for weeks. I actually want to make a web proxy on my own

I don't really understand the old and new position. I am trying to re-create it in my code but both values read the same

You're the man!

I think you are missing the point of putImageData. If youve got for example 10,000 instances per frame, you need to use 10,000 drawImage but only one putImageData as you can draw the entire canvas in one show.

I understand the code but have no idea how to implement it

The switch statement in your routing function seems unnecessarily complex. What would be the difference of having all solid tiles check for all 4 faces instead of only the necessary ones? I know it would be more efficient, but I didn’t see any changes when I got rid of the switch statement and replaced it with an if statement to check if the tile isn’t 0 (if it isn’t an air block). If that was true, I just called collidePlatformTop, collidePlatformLeft collidePlatformRight, collidePlatformBottom. Edit: reading back, I realized this may seem overly pushy/rude. I hope this didn’t insult you, I just wanted to get straight to the point as this is already a really long comment. 😅

libraries are for toxic. this is very good👍

you just ended days of frustration trying to figure out collisions in Flutter Flame Game. Thank you.

What I came here today for was to see how you constructed your polygon and how the rotate worked. I had a lot of trouble with the rotate. I was trying the atan approach with an angle (deltaR) to rotate the object which rotated the polygon but also moved the polygon around the 0,0 axis. The other try it just collapsed the poly to a line. This looks like the way to go. I recommend some videos just on the rotation part for games with the applied vector math as well. Please don't skip any steps as the math blends with the code. I had to watch 10 videos before I caught on to the projection technique for collision detection. Came down to the unit vector which we say here again with rotation. Thanks, great video!!!

can u make territory war game?

It's the person who recommended that! I'm now a second year computer science student. 💀 Time flies. This channel definitely helped me a lot back then!

I have a Problem, my Rect cant Jump and I dont know Why? LOOK my Code window.onload = function(){ let canvas = document.querySelector("#canvas"), ctx = canvas.getContext("2d"), ancho = window.innerWidth, alto = window.innerHeight; let control, rectangulo, loop; //Tamaño Canvas canvas.width = 320; canvas.height = 180; canvas.style.background = "white"; canvas.style.display = "block"; canvas.style.margin = "0 auto"; canvas.style.marginTop = "10px"; canvas.style.boxShadow = " 1px 4px 8px 3px rgba(0, 0, 0, 0.4)"; rectangulo = { alto: 32, ancho: 32, saltando: true, x:144, x_velocidad: 0, y: 0, y_velocidad: 0 }; //Funcion Control control={ left:false, up:false, right:false, keyListener:function(event){ let key_state = (event.type=="keydown")?true:false; switch(event.keyCode){ case 37://izquierda control.left = key_state; console.log("Izquierda"); break; case 38://arriba control.up = key_state; console.log("Salta"); break; case 39://derecha control.right = key_state; console.log("Derecha"); break; } } }; //Funcion Loop loop = function(){ if(control.up && control.saltando == false){ rectangulo.y_velocidad -= 20; rectangulo.saltando = true; } if(control.left){ rectangulo.x_velocidad -=0.5; } if(control.right){ rectangulo.x_velocidad +=0.5; } rectangulo.y_velocidad += 1.5;//gravedad rectangulo.x += rectangulo.x_velocidad; rectangulo.y += rectangulo.y_velocidad; rectangulo.x_velocidad *= 0.9;//Friccion rectangulo.y_velocidad *= 0.9;//Friccion //si el rectangulo esta callendo por debajo del Suelo if(rectangulo.y > 180-16-32){ rectangulo.saltando = false; rectangulo.y = 180-16-32; rectangulo.y_velocidad = 0; } //si el rectangulo va fuera de la pantalla if(rectangulo.x < -32){ rectangulo.x = 320; } else if(rectangulo.x > 320){ rectangulo.x = -32; } //Dibuja Rectangulo y Suelo ctx.fillStyle = "#322824"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle = "#f00"; ctx.beginPath(); ctx.rect(rectangulo.x,rectangulo.y,rectangulo.ancho,rectangulo.alto); ctx.fill(); //Linea ctx.strokeStyle = "#a6a6a6 "; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(0,164); ctx.lineTo(320,164); ctx.stroke(); //llamar cuando el Navegador este listo para dibujar de nuevo window.requestAnimationFrame(loop); }; window.addEventListener("keydown",control.keyListener); window.addEventListener("keyup",control.keyListener); window.requestAnimationFrame(loop); }

I never thought to invert this to check for not collisions why did I never think to invert this that's so much more efficient

I really like this tutorial. I tend to like the ones that code along with the explanation better but this is great stuff. I'm really new to all this but I'm going to try to edit this code to allow me to create a map with numbers and use sections of a spritesheet to draw a real map and not just black and white tiles. It's going to be fun. My code will reference you for thanks and link to this video. Thanks again for this tutorial!

perfect explanation

Why to use prototype and constructors instead to put the function directly inside the object ? I really don understand the difference, making console tests here and, seeing the function call isn't change. Someonde knows ? thanks.

I'm know is too late (5 years, long time bro) but i really don't understand why to use that " Human.call" , If an " this.name = name" is (if i understand the explanation) the same thing. Why to use this so nosense invokation format ? If i got it, when u use Human.call(this) , u are pointing to Worker instead Human, and the name call parameter is just another parameter to call the name from Worker context (the name inside Worker parameter). I'm just staying with the idea of this.name and Human.call(this,name) are the same thing, and ignoring this call method , it's ok ? ... Btw thanks for sharing.

I got everything working, but I wrote mine in c. Thank you so much for this tutorial.

This only works for a pair of rectangles. Try to add more whites 😅

Thanks man. : - )

Great vid man, was having trouble understand timesteps 👍

Thanks a bunch for sharing, finally got my cube rotating in C++ (without any odds or distortions). Edit: And the rest of my polygon models aswell, cheers.

these videos are so great. i started doing the odin project last year, learning web dev, then sort of stumbled upon game dev and it has totally up-ended where i thought i wanted to go with programming. notice you havent uploaded in a while, hope all is well! thanks for making this series

nice. i ll try tomorrow

¿Texture?

Your example was invaluable years ago, when I was trying to write a competent 2D engine. In 2018, I slapped together a perfect port of this to C++/SDL2 to learn how the pieces worked. Even though I quickly ended up with entirely original source code after however many rewires since then, your guide is the very best I've seen for tile-based slopes from scratch. It ultimately opened my eyes to separation of X/Y steps for accurate collide-and-slide. Thank you!

Thank you so much, I didn't even watch the whole thing, And it helped me out a ton! I am currently working on a raycaster, And the minimap always caused so much lag, It took me some time, But, Now I can debug with 2d visualization! LET'S GOOOOOO!!!!!!

Sweeping wont work if either of the cubes rotate during the journey, will it? I mean, if the cubes can be rectangles.

hi my images (individual frames) are too large and to many to put into a spritesheet. I therefore need to animate through the png sequence inside the canvas. do you have a tutorial on doing so as well?

Help! I can't figure out how to download the source code!

Thank you for the video! How would you make this cube rotate 4 different DIVs which include images and text?

Note: the "y" axis in this example is reversed (points down) compared to the traditional mathematical orientation, this flips the sign of the cross-product compared to text-book examples.

Hey, this Video was very helpful - I've watched it multiple times over the last few years - keep up your great work! I've a Question: I render the World on the whole Screen. I get less than 60 FPS if the World is larger than 50x50 Tiles & I'm completely zoomed out (to be able to see the whole World). This is probably because the loop function is not fast enough. Do you have any Idea on how I could make it more performant/efficient? I already tried to first draw everything on a not visible canvas (buffer) and then at the end draw the buffer onto the real canvas, but that didn't do anything to the FPS.

pog

I have no idea how this is supposed to work... I used the second method and the result I get just gets larger the further away the vectors are from each other.

Would i be able to make a 3d car game without any library? I'm actually making a self driving car using reinforcement learning in JavaScript without using any library.

THIS IS AMAZING CONTENT !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU FROM EASTERN EUROPE

I LOVE YOU !!!!!!

I think it would be better to run with Image object ready to drawImage and ImageData object ready for putImageData. Having getImageData running in the calls does not provide an accurate measurement of the speed of putImageData.

I love you. :)

wdy didnt u use circle1's radius and circle2's radius together and check if value between circles's centers is greater than sum of their radiuses

I actually laughed when you just said "I just copy and paste the code", 'cause yess that's true for us XD.. then try to identify the code if you can get the logic then if not.. search another code LOL.

I've had this video sitting in a playlist for a couple of years, and I *FINALLY* had some time to look into it and start playing around. Thanks to your video and another similar one, I've created a working (well, limping ;) ) scrolling map class that might help me make an old game idea into a reality. Thank you so much for taking the time to put something like this out in the world!

Hey, I've been searching for a JS tutorial guru who presents at the same speed I ingest. And I believe I have found you. Thank you for your first two videos in this series. I see it's been out for a while, so I will be hanging around for a bit. Thanks again....going over to Poth Programming to see what else ya got.

hi sir, please make a video tutorial for a fluid simulation

bruh, i spent hours tryna figure it out myself