I asked a question a while back while working on this game but I still don't get it

Question

So someone helped me out with a game project and it is working but I don't understand how the Javascript works especially the collision detection if you want to help out the code is linked below.
Thanks
https://code.sololearn.com/W5N1UQ7al0bH/?ref=app

Answer 1

mmhh...

I feel like stolen :(
You only have changed the div to an image, but you've used the code I wrote for you, without keeping the credit that should be automatically added in front of each tabs when saving another one code...

you even don't have take the time to clean the comments that I was keeping for you better could see the changes I've done ^^

did you only take the time to look at the link I've provided in my answer to your previous thread about this code? did you make your own tests?

anyway, even if you doesn't deserve it, as I guess you don't have tried to understand by yourself (because it's quite simple), here's a quick explanation of how collision detection works:

obstacle has fixed y-position, and moving x-position...

player has fixed x-position, and moving y-position...

both have (non null) fixed width and height...

collision occurs if bottom of player is less than height of obstacle during the time while obstacle x-position cross player x-position...

collision() test for that...

Answer 2

I noticed that I was using parseInt() inside map() callback function: it should be a few more accurate to use parseFloat() as px values in CSS could be floating point numbers ;P

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

Answer 3

visph it's private and is a prototype I didn't steal the code Its just another version of the original

Answer 4

visph I've been busy with exams but I still read the article about the animation properties(alice scenario and everything else) that you sent me and I'm actually really grateful as I've said already it's not the one I plan on releasing as it is just a prototype sorry if it got you upset

Answer 5

DanTheHuman[inactive For Now ]
I only said: "I feel like"...
and added that I wrote it for you (meaning I was guessing you will use it ^^)

anyway, does my quick explanation have answered your question, or should I take time to be more explicit? (probably not now in this case, but later...)

Answer 6

visph yeah I do understand the basics of the collision now but a more detailed explanation will be really great also sorry about the code stuff I definitely will give credit when I remake it have a lovely time mate

Answer 7

visph amuse-toi bien

Answer 8

DanTheHuman[inactive For Now ]

collide function is called regurlarly by using requestAnimationFrame at its end (while 'end' flag -- game over -- is not true)...

step by step explanation:

1) initialize var kx, ky, kw with computed style of ksi (player) and same for bx, by, bw, bh from bar (obstacle), by using destructuring

2) convert string css values (with px unit) as number, by using destructuring of an array map() result

3) test if collision occurs:
a) bx<kx+kw is true if left coordinate of bar box is at left of right coordinate of ksi box
b) kx<bx+bw is true if right coordinate of bar box is at right of left coordinate of ksi box
c) ky<by+bh is true if bottom coordinate of ksi is below (under) top coordinate of bar
if all three are true ('and' operator to link them) then collision occurs...

rest of code is about score / visual effect handling in case of collide or not ;)

more information on each topic/function used in mdn web site (next post will provide direct links)

Answer 9

useful related links (doesn't fit in prevoous post due to character limit)...

window.requestAnimationFrame()
https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

destructuring assignement
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

window.getComputedStyle()
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Array.prototype.map()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

methods of windows are functions available in global scope (so 'window.' prefix os optional since you doesn't declare variables and/or functions with same name)

methods of prototypes refer to method accessible through instance of related constructor/class...

Answer 10

Thanks so much for this I really needed this your the best visph