Question

我希望创建类似虚拟森林的东西。

我有：

固定大小的div，我希望传播树木
随机数量的树木（每棵树都是PNG）
中心的小方形div应该远离树木

我怎样才能传播树木：

彼此不重叠
不要进入中央区域
计算它们的大小（css），以便所有树都适合div

由于

根据要求提供更多信息：

所有树图像都具有相同的尺寸
Container div的固定尺寸为500x300像素
小型中央div的固定尺寸为30x30像素
png原始分辨率为60x60像素

我创建了以下php脚本，但是它不处理空位置，也不准确将图像拟合到div中：

$forest1 = null;
for ($a=1; $a < 201; $a++) {

    // width * height (500*280)
    $total_area_in_pixels = 140000;
    $total_elements = 200;
    $area_per_object = $total_area_in_pixels / $total_elements;
    $element_height = round (sqrt($area_per_object) / 100 * 70);

    $random_margin = rand(0, $element_height / 5);
    $tree_type = rand(1,4);
    $style = "height: {$element_height}px; margin: {$random_margin}px;";
    $forest1 .= "<img src='images/trees/tree{$tree_type}.png' alt='{$a}' title='tree' style='{$style}'>\n";
}

Answer 1

您需要先了解如何进行定位。您可以将树绝对地设置为div父级作为容器，也可以将树绝对地基于整个页面作为容器进行定位。

要将父级用作容器，您可以这样做：将div设置为position：relative。编写javascript以创建IMG元素，然后将其位置设置为“绝对”。确保在创建元素时将它们创建为要包含它们的DIV的子元素。

要将页面用作容器，您可以这样做：编写javascript以创建IMG元素并将其位置设置为“绝对”。不要把它们作为DIV的子元素，因为它无关紧要。使用jQuery或基本的javascript测试来找出容器div的确切页面位置。每次放置树时，都需要计算相对于容器div的位置。

定位树基本上是这样的：编写一个简单的算法来生成随机x和y坐标对以定位每个元素并执行此操作。然后检查每棵树的位置，宽度和高度与您不想要覆盖的方形区域。如果您在该区域中找到了一棵树，请将其移动一段以将其从该区域中取出，或将其删除。请务必记住，如果您完全定位在整个页面中，您将始终必须添加或减去页面容器位置作为offste，以便在页面上获取所需的树。

这应该足以让你开始。

使用JavaScript在div上随机传播HTML元素

1 个答案: