[ad_1]
Activity: to develop a perform that effectively locations rectangular blocks in
rectangular 2D container. The situation of the blocks within the container ought to be
as dense as attainable as a way to rationally use the house of the container.
I’m nearly 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);
}
// Type 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 based mostly 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]