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.

1 Like

I’m finally done with school! I just started working on this again. And this is what I have so far.

The collision detection occurs only with the last object added into the array. Do I need separate arrays for x,y,width and height?

You could get away with just one array that contains objects. Each object will contain what you need for x, y, width, and height for the visual object it represents.

I currently have one array, but I am sort of at a lost on how to loop through the the individual properties of the getBoundingClientRect of each object so that the color of the circle changes with all the squares in its motion path.

Take a look at one approach outlined here:

I wouldn’t use getBoundingClientRect, for it causes a full layout/redraw every time it gets called. It can be a major performance bottleneck.

Would I still be able to use the detection method with objects of CSS animation without getBoundingClientRect?
In any case, I did this and was able to see all the values of all of the squares but wasn’t sure how to get those values in the condition:
x = squares.left;
y =;
width = squares.width;
height = squares.height;

So I need to push the values in something like this?
squaret.push( {x: squares.left, y:, width: squares.width, height: squares.height})

Solution found!
Ball changes color when overlaps squares

Now I am struggling with having the squares change colors in addition to ball.
I can see the variables names that I want to modify so that the background color of the element being hit would change. (rc1, rc2 etc.)

Instead of“blue”;
I am trying figure how to:
[loop through collide rc1, rc2 rc3].style.backgroundColor=“blue”;

By the way the I am experiencing the bottleneck. I promise to start over once I can get this stuff figured out!

Here is one way you can do that, provided the items in the collidedItems array are actually elements and not class/id values pointing to elements:

var collidedItems = [rc1, rc2, rc3, rc4];

for (var i = 0; i < collidedItems.length; i++) {
  var collidedItem = collidedItem[i]; = "blue";


1 Like

I am getting so CLOSE.

It works, except when I move the ball over the squares going left or up.The squares will not change back. It is Ok when I move the ball right or down. I am trying to use the a different array to change colors back but I don’t think it’s quite doing that.

    for(var j=0;j<collide.length;j++)
    var blueit = document.getElementById(collide[j]); = "blue";"lightblue";
    var orangeit = document.getElementById(newrc[i]);//issue is here? ="orange";"red";

Success! Now I doing some more messing around. Learned alot from doing this.
And with some more messing around:

1 Like

That’s really awesome! Great job :partying_face:

1 Like

Why don’t you make use of the new features that were introduced in ES6?
var collidedItems = [rc1, rc2, rc3, rc4];
for (const collidedItem of collidedItems) = “blue”;

This is supported in all modern browsers except IE.

Excellent, I will try that! I am always trying learn the newest stuff.

Another thing you might want to look into are “arrow” functions which are great for very short, mainly one line functions. Also there are strings enclosed in back ticks, which have been used before in some of the articles by Kirupa. The thing I like about them is that they can contain line breaks in them.

1 Like

My only reason for not using t is because of browser support. I guess I’ve been so used to working in enterprise-focused companies, that IE support is always in the back of my mind haha.