[ad_1]
Process: to develop a perform that effectively locations rectangular blocks in
rectangular 2D container. The placement of the blocks within the container needs to be
as dense as attainable to be able to rationally use the area of the container.
I’m virtually achieved however I’ve some issues with my code gadgets
overlap one another
Right here is my code however I do not need use some libraries:
<!DOCTYPE html>
<html>
<head>
<title>Block Placement Algorithm</title>
<fashion>
.container {
width: 500px;
peak: 500px;
place: relative;
border: 1px stable #ccc;
}
.block {
place: absolute;
border: 1px stable #000;
}
</fashion>
</head>
<physique>
<div class="container" id="container"></div>
<script>
perform checkOverlap(newBlock, existingBlocks) {
for (const block of existingBlocks) {
if (
newBlock.proper >= block.left - blockMargin &&
newBlock.left <= block.proper + blockMargin &&
newBlock.backside >= block.high - blockMargin &&
newBlock.high <= block.backside + blockMargin
) {
return true; // Якщо є перекриття з існуючим блоком
}
}
return false; // Якщо немає перекриття з існуючими блоками
}
perform calculateBlockArea(blockCoordinates) {
let totalBlockArea = 0;
for (const block of blockCoordinates) {
totalBlockArea += block.width * block.peak;
}
return totalBlockArea;
}
// Generate block coordinates
const blockCoordinates = [];
const containerWidth = 500;
const containerHeight = 500;
const maxAttempts = 100;
const blockMargin = 0;
for (let i = 0; i < 10; i++) {
const width = Math.flooring(Math.random() * 100) + 50;
const peak = Math.flooring(Math.random() * 100) + 50;
let newBlock;
let makes an attempt = 0;
do {
newBlock = {
high: Math.flooring(Math.random() * (containerHeight - peak)),
left: Math.flooring(Math.random() * (containerWidth - width)),
proper: 0,
backside: 0,
initialOrder: i + 1,
width: width,
peak: peak
};
newBlock.proper = newBlock.left + width;
newBlock.backside = newBlock.high + peak;
makes an attempt++;
} whereas (checkOverlap(newBlock, blockCoordinates) && makes an attempt < maxAttempts);
blockCoordinates.push(newBlock);
}
// Kind blocks by initialOrder
blockCoordinates.kind((a, b) => a.initialOrder - b.initialOrder);
// Render blocks on the web page
const container = doc.getElementById('container');
let currentTop = 0;
let currentLeft = 0;
blockCoordinates.forEach(block => {
const div = doc.createElement('div');
div.className="block";
div.fashion.width = block.width + 'px';
div.fashion.peak = block.peak + 'px';
// Set place primarily based on the order with margin
div.fashion.high = currentTop + 'px';
div.fashion.left = currentLeft + 'px';
div.textContent = block.initialOrder;
const randomColor = "#" + ((1 << 24) * Math.random() | 0).toString(16);
div.fashion.backgroundColor = randomColor;
container.appendChild(div);
currentLeft += block.width + blockMargin;
if (currentLeft + block.width > containerWidth) {
currentTop += block.peak + blockMargin;
currentLeft = 0;
}
});
</script>
</physique>
</html>
[ad_2]
