how to make an image disappear when another image touches it? html/Js

Question

Ok so i have a program that draws 3 ghosts with random positions and draws a bag \"sac.gif\" that you can move around using the arrow keys on your keyboard on a 400 by 400 canva

Answer 1

First, you need to implement a function to determine whether two objects collide, providing their x and y coordinates and their width and height. So something like this: function collide(o1, o2) {...} // returns true if they are colliding, false otherwise. To write this function, you may find this useful: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

Then, you need to call it in your update() function for each objects which collision is supposed to do something (not your ghosts between each other I suspect). Each time your update the state of the game (objects positions, etc) and redraw, you need to check if objects are colliding. Then, you need to do something if a collision if detected: life drop, explosion, gameover...

I didn't manage to make your jsfiddle work, so I used the one I made last time and updated it: https://jsfiddle.net/nmerinian/t0c3sh8f/36/

EDIT: I forgot to make the ghosts disappear. To make everything easier, I created Bag and Ghost objects: https://jsfiddle.net/nmerinian/t0c3sh8f/56/