随机显示点

Question

我正在尝试使用JS设计一个小游戏，我想要它做的是随机生成一个数字... 1-100，然后随机散布点（我使用字体大小为200的句点）屏幕。随机，我只是指我不希望它们按行和列排列。到目前为止，我所做的一切都实现了，但分散了点，那么我该怎么做呢？

var i=0;
var inhtml="."
var num=10
function exe(){
    i=Math.floor(Math.random()*100)
    //alert(i)
    while (i<=100){
    document.getElementById("dot").innerHTML = inhtml + "."
    inhtml = document.getElementById("dot").innerHTML
    if (inhtml.length>num){ 
        inhtml=document.getElementById("dot").innerHTML+"<br />"
        num=num+20
    }
    i++;
    }
}

Answer 1

我建议不要使用包含多个大尺寸句点的单个元素，而是建议为每个点使用单独的元素。然后，（除了不必使用 200px 句点之外），您可以使用 CSS 来根据需要定位每个元素。我有一个例子这里：

function createDot(x, y) {
  var elem = document.createElement("div");
  elem.setAttribute("class", "dot");
  elem.setAttribute("style", "left:" + x + "px;top:" + y + "px;");
  document.getElementsByTagName("body")[0].appendChild(elem);
  return elem;
}

function anotherDot() {
  createDot(Math.floor(Math.random() * 200), Math.floor(Math.random() * 200));
}

for (var i = 0; i < 100; i++) {
  anotherDot();
}

.dot {
  position: absolute;
  width: 2px;
  height: 2px;
  background: black;
}

编辑：我不知道让点不重叠的确切问题是什么，但你基本上需要这样做：

首先你选择一个位置。然后，您将该位置与所有其他位置进行比较（您可能希望使用曼哈顿距离来执行此操作）。如果该点有效，则使用该点并将其添加到已采取位置的数组中。否则，返回第一步。

Answer 2

在继续之前，您可能需要检查语法错误；我不知道您是否复制了所有代码，但您在行尾缺少分号。撇开语法问题不谈，实现您所描述的一种可能的方法是将每个点的 x 和 y 坐标分配给一个随机数。检查代码发现，只有

i

的初始值被分配给

random()

的值。递增

i

将使未来点的坐标取决于

i

的初始值，这是您可能需要考虑的因素。但在您的代码中，我没有看到您根据生成的值更改每个元素的位置。

我强烈建议您使用 HTML5 Canvas，而不是尝试移动 HTML 元素；后者会很麻烦并导致代码混乱且低效。如果您仍想坚持使用现在尝试使用的方法，请检查并确保这些元素的 CSS

display

属性设置为

block

。您正在使用

getElementById()

方法，该方法在这种情况下不是很有用，因为 ID 在 HTML 文件中是唯一的。我建议使用

getElementsByTagName()

并使用那些返回的具有特定

class

属性的元素。

Answer 3

您可能想查看 HTML 5 Canvas。它允许您以任何位置、大小和填充颜色绘制圆弧（又名圆形）。

查看此处了解详细信息，此处了解教程，以及此处了解演示。

Answer 4

为了不受浏览器文本布局限制的约束，您几乎必须绝对定位点：

<div style="position: absolute; top: {random number}; left: {random number}">.</div>