so I have an HTML button and a JavaScript randomizer that randomizes a location for an image to 'spawn' when you click the said button. I also have a grass field image (which has a randomizer to choose from 12 different fields upon reloading the page and display one of them). Currently, it can 'spawn' an image anywhere on the page, however, I want it to only be able to spawn it onto the field.
my javascript:
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
// set the position
img.style.position = 'absolute';
img.style.top = document.body.clientHeight * Math.random() + 'px';
img.style.left = document.body.clientWidth * Math.random() + 'px';
document.body.appendChild(img);
}
document.getElementById('foo').addEventListener('click', () =>
show_image("cow-sprites/cowtest.png", 56, 54, 'foo')
);
my html:
<button id="foo">
get a cow
</button>
my css:
.cow-spawning {
z-index: 1;
}
.field-image {
position: fixed;
left: 28.25%;
top: 16%;
z-index: -1;
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
-o-transform: scale(0.85);
transform: scale(0.85);
}
what i've tried:
replacing
img.style.top = document.body.clientHeight * Math.random() + 'px';
img.style.left = document.body.clientWidth * Math.random() + 'px';
with
img.style.top = meadows.naturalHeight * Math.random() + meadows_box.top + 'px';
img.style.top = meadows.naturalHeight * Math.random() + meadows_box.left + 'px';
and creating a variable to hold the field image (meadows)
You have the coordinates for a container (the field) and another box (the image). Each has a left (x) and top (y) position, as well as a width (x) and height (y).
You want to randomize the coordinates for the image so that all 4 corners of that image are inside the outer containers bounds. It can be difficult to think about positioning all 4 corners at once, but we can simplify the problem.
Let's only think of the left,top (x,y) coordinate. If the image stays within the container, then the lowest the top can be is the same as the bottom position of the container plus the height of the image. Similarly, the furthest right the image can go is one image width from the right side of the container.
For example, let's assume the outer container left,top is 0,0, and its width,height are 100,100. The inner image width,height is 10,10. The inner image can be at 0,0 inside the container extending to 10,10, which is the leftmost and topmost position. If the image is in the furthest bottom, right corner, then the bottom right coordinate is at 100,100. Since the image is 10,10 then the top,left corner is at 90,90.
In the end, this just tells us to calculate the random position using a reduced range. Instead of being able to put the top or left coordinate anywhere from 0-100, we need to restrict them to 0-90, allowing for the image height and width padding it on the right and bottom.
img.style.top = (containerHeight - imageHeight) * Math.random() + 'px';
img.style.left = (containerWidth - imageWidth) * Math.random() + 'px';
Where containerHeight and containerWidth are the outer container height at width, assuming that the containerTop and containerLeft are both 0. If you have to account for the offset position of the outer container, then we can account for that as well.
img.style.top = ((containerHeight - containerTop - imageHeight) * Math.random() + containerTop) + 'px';
img.style.left = ((containerWidth - containerLeft - imageWidth) * Math.random() + containerLeft) + 'px';
For example:
Randomized left/X positions can range from 100 to 190 and the new top/Y position ranges can be from 200 to 280.