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!
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…
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.
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.
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})
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";
}
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.
if(collide.length>0)
for(var j=0;j<collide.length;j++)
{
var blueit = document.getElementById(collide[j]);
blueit.style.backgroundColor = "blue";
ball.style.backgroundColor="lightblue";
}
else{
var orangeit = document.getElementById(newrc[i]);//issue is here?
orangeit.style.backgroundColor ="orange";
ball.style.backgroundColor="red";
}
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) collidedItem.style.background = “blue”;
This is supported in all modern browsers except IE.
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.
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.
