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根据需要定位每个元素。我有一个例子here。

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

首先你选择一个位置。然后，您针对所有其他位置（使用Manhattan distance可能想要执行的操作）检查该位置。如果该点有效，则使用该点并将其添加到采取的位置数组中。否则，请返回第一步。

Answer 2

您可能希望查看HTML 5 Canvas。它允许您以任何位置，大小和填充颜色绘制弧（也称为圆圈）。

查看here了解详情，here查看教程，here查看演示。

Answer 3

您可能希望在进行之前检查语法错误;我不知道你是否复制了所有的代码，但是在你的行末你缺少分号。除了语法问题之外，实现所描述内容的一种可能方法是将每个点的x坐标和y坐标分配给随机数。对代码的检查表明只有i的初始值被赋值给random()的值。增加i会使未来点的坐标取决于i的初始值，这是您可能需要考虑的因素。但是在代码中没有任何地方我会看到您根据生成的值更改每个元素的位置。

我强烈建议您使用HTML5 Canvas而不是尝试移动HTML元素;后者会很麻烦，导致代码混乱和低效。如果您仍想坚持使用现在尝试使用的方法，请检查以确保这些元素的CSS display属性设置为block。您正在使用getElementById()方法，这在这种情况下不是很有用，因为ID在HTML文件中是唯一的。我建议使用getElementsByTagName()并使用具有特定class属性的返回元素。

Answer 4

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

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

随机显示点

4 个答案: