I am trying to create a simple project, using TypeScript and React, to be able to generate a new <div> that has random width and height (min/max 50/300px), and is randomly placed inside a wrapper (which for this example is 1920x1080).
Goal is to check if newly generated div rectangle is overlapping or not existing divs.
If not, create the element, else generate new position and size and check again, goal being to fill up the wrapper as much as possible since min/max size of div is set and have no overlapping ones.
So far I managed to write code for generating random positions and sizes, but I am stuck at checking collisions and sending message when empty space isn't left.
const [count,setCount]=useState(0)
const wrapper = document.getElementById('wrapper');
var posX:number,posY:number,divSizeH:number,divSizeW:number;
var willOverlap:boolean=false;
function createRandomRectangle(){
divSizeW = Math.round(((Math.random()*250) + 50));
divSizeH = Math.round(((Math.random()*250) + 50));
if (wrapper!=null) {
const width = wrapper.offsetWidth , height = wrapper.offsetHeight;
posX = Math.round( (Math.random() * ( width - divSizeW )) );
posY = Math.round( (Math.random() * ( height - divSizeH )) );
//checking collision
document.querySelectorAll('.Rectangle').forEach(element=>{
var r2 = element.getBoundingClientRect();
//my attempt //if(((posX>=r2.x&&posX<=r2.right)&&(posY>=r2.top&&posY<=r2.bottom))||((posX+divSizeW>=r2.x&&posX+divSizeW<=r2.right)&&(posY>=r2.top&&posY<=r2.bottom))||((posX>=r2.x&&posX<=r2.right)&&(posY+divSizeH>=r2.top//&&posY+divSizeH<=r2.bottom))||((posX+divSizeW>=r2.x&&posX+divSizeW<=r2.right)&&(posY+divSizeH>=r2.top&&posY+divSizeH<=r2.bottom))){
//copied from someone elses code for checking collisions
if((posX <= r2.x && r2.x <= posX+divSizeW) && (posY <= r2.y && r2.y <= posY+divSizeH) ||
(posX <= r2.x && r2.x <= posX+divSizeW) && (posY <= r2.bottom && r2.bottom <= posY+divSizeH) ||
(posX <= r2.x+r2.height && r2.x+r2.height <= posX+divSizeW) && (posY <= r2.y+r2.width && r2.y+r2.width <= posY+divSizeW) ||
(posX <= r2.x+r2.height && r2.x+r2.height <= posX+divSizeW) && (posY <= r2.y && r2.y <= posY+divSizeW)){
willOverlap=true;
while(willOverlap){
posX = Math.round((Math.random() * ( width- divSizeW)));
posY = Math.round((Math.random() * ( height- divSizeH)));
divSizeW = Math.round(((Math.random()*250) + 50));
divSizeH = Math.round(((Math.random()*250) + 50));
if(!(((posX>=r2.x&&posX<=r2.right)&&(posY>=r2.top&&posY<=r2.bottom))||((posX+divSizeW>=r2.x&&posX+divSizeW<=r2.right)&&(posY>=r2.top&&posY<=r2.bottom))||((posX>=r2.x&&posX<=r2.right)&&(posY+divSizeH>=r2.top&&posY+divSizeH<=r2.bottom))||((posX+divSizeW>=r2.x&&posX+divSizeW<=r2.right)&&(posY+divSizeH>=r2.top&&posY+divSizeH<=r2.bottom)))){
willOverlap=false;
}
}
}
})
}
}
//if there is no more place send message and dont create....
const newDiv = document.createElement('div');
newDiv.classList.add('Rectangle');
newDiv.style.width=divSizeW+"px";
newDiv.style.height=divSizeH+"px";
newDiv.style.left=posX+"px";
newDiv.style.top=posY+"px";
boxxy?.appendChild(newDiv);
setCount(count+1);
}
As you started to guess, you need to repeat your code (here new position & size + check collision) in case you find a collision.
But since you implement the repetition within the forEach loop of your list of already existing Rectangles, the newly generated position & size is not re-checked against the previous Rectangles (beginning of the list). Hence you may end up with still colliding elements.
Another issue, much more difficult, is to detect when your wrapper is "full", or rather when the empty space can no longer take any new of your Rectangles, given their minimum size. Because this step is so much more complex, let's leave it aside for now, and use a much more simplistic approach, by using a maximum number of repetitions.
With this simplification, your algorithm could look like:
const existingRectangles = document.querySelectorAll('.Rectangle');
let repCount = 0; // Number of repetitions
do {
var overlapping = false;
var newPositionAndSize = generateRandomPositionAndSize();
// Check for collision with any existing Rectangle.
// Use a classic for loop to be able to break it
// on the first collision (no need to check further)
for (let i = 0: i < existingRectangles.length; i += 1) {
if (checkCollision(existingRectangles[i], newPositionAndSize)) {
overlapping = true;
repCount += 1;
break; // No need to check the rest of the list
}
}
} while (overlapping && repCount < 1000);
if (overlapping) {
// If still overlapping, it means we could not find
// a new empty spot (here because of max repetitions reached)
showMessageWrapperIsFull();
} else {
// If we checked through the entire list without raising
// the overlapping flag, it means we have found
// a suitable empty spot
createNewRectangleAndInsertIt(newPositionAndSize);
}
Hello fellow programmers,
Today I have a question that's related to one of my projects I'm making kinda like Tower Defense using canvas. However, I stuck on trying to detect multiple circles in one coordinate. Here's my example:
for (var a = 0; a < buildArcherX.length; a++) {
for (var a = 0; a < buildArcherY.length; a++) {
if (Math.sqrt(Math.pow(buildArcherX[a] - this.x, 2) + Math.pow(buildArcherY[a] - this.y, 2)) <= arch.radius + 7) {
this.attackedByArcher = true;
} else {
this.attackedByArcher = false;
}
}
}
As you can see in this example, I'm using arrays to put my coordinates in for my "Defenses". The for statements runs through all the "defense" coordinates in the arrays. The if statement in the code calculates if any of the defense coordinates are within "this" coordinates. This returns a boolean if any of the defenses are in range.
However I got to this point, and then got stuck on this problem: What happens if multiple defenses are in range? Then "this" would need to take more damage. So I'm just wondering if I can show the number of defenses in range.
Thanks!
You can use an integer to store the value of how many defenses are in range and increment it whenever a defense has been found in range.
Also, you must use 2 different variables when nesting loops.
this.defensesInRange = 0;
for (var x = 0; x < buildArcherX.length; x++) {
for (var y = 0; y < buildArcherY.length; y++) {
if (Math.sqrt(Math.pow(buildArcherX[x] - this.x, 2) + Math.pow(buildArcherY[y] - this.y, 2)) <= arch.radius + 7) {
this.defensesInRange += 1;
}
}
}
I am attempting to make objects move on screen based on force on the x-axis and y-axis. It seems to work properly when a force is applied to an object, but when the force is no longer applied, instead of the object continuing at the same velocity and direction, it goes off in a different direction with a different velocity. Is the error in this section of code? This is the only part I can think would be the problem.
var update = function (modifier) {
// rock going up/down wh
if(rocks[i].y > 0 && rocks[i].y < worldSizeY){
if(rocks[i] != null){
rocks[i].accelerationy = rocks[i].forcey/rocks[i].mass;
rocks[i].velocityy += (modifier*1000)*rocks[i].accelerationy;
rocks[i].y += (modifier*1000)*rocks[i].velocityy;
}
}
// rock going right/left
if(rocks[i].x < worldSizeX && rocks[i].x > 0){
if(rocks[i] != null){
rocks[i].accelerationx = rocks[i].forcex/rocks[i].mass;
rocks[i].velocityx += (modifier*1000)*rocks[i].accelerationx;
rocks[i].x += (modifier*1000)*rocks[i].velocityx;
}
}
rocks[i].forcex = 0;
rocks[i].forcey = 0;
}
I am new to JavaScript and HTML and am working on a small game.
I have four 'enemies' whose position on the canvas is determined by the values in the arrays 'enemyX' and 'enemyY'.
Very simply, I want to detect if the enemies have 'collided', i.e have moved within 30px of each other (the enemy image is 30px by 30px).
What I want to do is subtract the value of the i th value in the array with the other values in the same array and see if this value is less than 30. The less than 30 part is an if statement, so how do I go about subtracting all the values from each other without many lines of code?
Here's what I have tried based on the answers below:
var count = 0;
var innercount = 0;
while (count <= 3) {
while (innercount<=3) {
collisionDetect(count, innercount, enemyX[count], enemyY[count], enemyX[innercount], enemyY[innercount])
innercount++
}
count++
}
var i = 0;
while (i < enemyX.length) {
if (collisionX[i] == 1) {
directionX = directionX*-1;
}
if (collisionY[i] == 1) {
direction = directionY*-1;
}
}
}
}
function collisionDetect(count, innercount, x, y, xX, yY ) {
if ((Math.abs(x-xX)) <=30) {
collisionX[count] = 1
collisionX[innercount] = 1
}
if ((Math.abs(y - yY)) <=30) {
collisionY[count] = 1
collisionY[innercount] = 1
}
return collisionX, collisionY;
}
This code gives me a blank canvas.
Detection of an intersection between two objects (assuming rectangular shape) and the position defines the center of the object.
function getRect(x, y, w, h)
{
var left = x - Math.floor(w / 2),
top = y - Math.floor(h / 2);
return {
left: left,
top: top,
right: left + w,
bottom: top + h
};
}
function intersects(A, B)
{
return A.right >= B.left &&
A.left <= B.right &&
A.bottom >= B.top &&
A.top <= B.bottom;
}
alert(intersects(getRect(12, 56, 30, 30), getRect(30, 40, 30, 30))); // true
The getRect() function can be modified to accommodate for a different anchor position, e.g. top left.
You could use a function:
function colliding(x1, y1, x2, y2){
return Math.abs(x1-x2) <= 30 && Math.abs(y1-y2) <= 30;
}
then use the function to test the different combination of enemies: (1,2), (1,3), (1,4), (2,3), (2,4), and (3,4).
So, for example, you would use: colliding(enemyX[2], enemyY[2], enemyX[3], enemyY[3]) to check if enemy 2 and 3 are colliding. Do that with all the combinations above.
EDIT: to make it more readable, you could define an additional function:
function enemiesColliding(e1, e2){
return colliding(enemyX[e1], enemyY[e1], enemyX[e2], enemyY[e2])
}
and then use it:
enemiesColliding(1,2) || enemiesColliding(1,3) || enemiesColliding(1,4) ||
enemiesColliding(2,3) || enemiesColliding(2,4) || enemiesColliding(3,4)
I am going to restate my understanding of you question, just so there is no confusion.
You have two arrays in paralleled , one for x cords, and one for y cords. Each ship has a element in both arrays.
So, for example, ship 12 could be found at xPos[12] and yPos[12], where xPos and yPos are the arrays from above.
It also stands to reason that this a communicative. If ship[a] collides with ship[b] then ship[b] has collided with ship[a]. And I think that hold for 3 + ships.
I would start by writing a distance function.
dist(x1,y1,x2,y2)
{
return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
}
Then I would write code run through the arrays.
Every element must be compared to every other element, one time.
var counter = 0;
var indexOfShipThatHaveCollided = [];
while(counter < Xpos.length)
{
var innerCounter = counter;
while(innerCounter < Xpos.length)
{
t = dist(Xpos[counter],Ypos[counter],Xpos[innerCounter],Ypos[innerCounter])
if(t < 30)
{
indexOfShipThatHaveCollided.push(counter)
indexOfShipThatHaveCollided.push(innerCounter)
}
}
}
The code above compares every ship to every other ship ONCE.
It will compare ship[1] to ship[8], but it will not compare ship[8] to ship[1].
I did not test ANY of this code, but I hope it moves you in the right direction.
If you have anymore question just give me a comment.
According my understanding of your question below is my solution:
I think you need to find distance between two points. by using distance you can apply your logic.
To find distance following is the formula:
Given the two points (x1, y1) and (x2, y2),
the distance between these points is given by the formula:
I have an element who's overflow is hidden until a function is called. I am trying to determine if the mouse is hovering over this overflow material after I set overflow: visible;, but instead, it tells me that my mouse is hovering on the overflow content even when it's still invisible.
Is there a way to check visible height in jQuery? Here is what I was trying:
off = $(curSub).offset();
xSubStart = parseInt(off.left);
ySubStart = parseInt(off.top);
xSubEnd = xSubStart + parseInt($(curSub).width());
ySubEnd = ySubStart + parseInt($(curSub).height());
if ( (x >= xStart && x <= xEnd && y >= yStart && y <= yEnd) ||
(x >= xSubStart && x <= xSubEnd && y >= ySubStart && y <= ySubEnd) ) {
// display menu
$(cur).css('overflow', 'visible');
match = true;
}
The xStart, xEnd, yStart, and yEnd variables are defined above that code and work just fine. I believe the problem is that the jQuery function width(), height(), outerWidth(), and outerHeight() don't test to see if the element is visible.
Is there anyway to achieve this? I thought about just moving it from hidden to visible physically with top and left specifications, but I think this way would be cleaner if it's possible.
Hope someone knows the answer.
The problem is that JavaScript did not complete the action before executing the next line of your code.
You could use a callback function:
var setHoverAfterOverFlowVisible = function(cur, callback) {
$(cur).css('overflow', 'visible');
match = true;
//other stuff
callback();
}
setHoverAfterOverFlowVisible(cur, /*hoverFunction*/);
More info about callbacks: http://www.impressivewebs.com/callback-functions-javascript/