How to add new CSS objects to a collision?


I am attempting to create collision detection between an object(bouncing ball) and all squares generated, which is done by clicking on the button.

if(object1.x< object2.x+object2.width&&object1.x + object1.width>object2.x&&object1.y<object2.y+object2.height&&object1.y+object1.height>object2.y)

How, if possible, can object1 values can be from any and all object1 generated by CSS?
Press the click button to generate the object with will triiger the collision.

I was thinking adding object properties to an array every time a new square is created would be the way to go, but I am kind of at a lost at this point. Do I need to create a separate array for each: x, y, width and height of object1?

Any guidance would be welcome. I don’t know what am I making…just learning!


This is a really old article, but some of the ideas in it from the Flash world may help you out here: :slight_smile:


Thank you! I’ve done this before when I made an asteroids game.(I don’t have Adobe Flash anymore.) I have abandoned it in pursuit of recreating it with vanilla JS and CSS graphics. I have this idea that the game would slowly morph into Asteroids/Space Invaders/Yars revenge as it levels up.

Now, I feel like went in the wrong direction! I’ll get this…


I wasn’t suggesting you use Flash to implement what I suggest in the link :stuck_out_tongue:

You could try some of the ideas from it in JS itself.


Oh, I know! I was just more or less in an in elegant way saying that remember that tutorial before in making asteroids, and I am grateful you have brought the link to it my attention. I see what I am missing and I definitely share the result when I get it.