How to add new CSS objects to a collision?

Hi,
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?

http://muskiecoding.com/testhitmove3.html
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: https://www.kirupa.com/developer/actionscript/multiple_collision.htm :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.
http://kvapster.com/asteroids/stardustbeta.html

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.
http://muskiecoding.com/dynosquares.html

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.

Hi,
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: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

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 = squares.top;
width = squares.width;
height = squares.height;
squaret.push(x,y,width,height);

So I need to push the values in something like this?
squaret.push( {x: squares.left, y: squares.top, 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
ball.style.backgroundColor=“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];

  collidedItem.style.backgroundColor = "blue";
}

:slight_smile: