Случайно отображать точки

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.

Edit: Я не знаю, что точная проблема с получением точки, чтобы не перекрывать вы испытываете это, но вы в принципе нужно сделать, это:

Сначала вы выбираете позицию. Затем вы проверяете эту позицию по отношению ко всем другим позициям (которые вы, вероятно, захотите сделать, используя Manhattan distance). Если точка действительна, вы используете эту точку и добавляете ее в массив занятых позиций. В противном случае вернитесь к первому шагу.

Answer 2

Чтобы не быть связанным ограничениями для размещения текста браузера, вы в значительной степени должны абсолютно расположить точки:

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

Answer 3

Возможно, вы захотите посмотреть холст HTML 5. Это позволяет вам рисовать дуги (aka круги) в любом положении, размере и цвете заливки.

Подробнее см. here, here для учебника и here для демонстрации.

Answer 4

Возможно, вы захотите проверить свои синтаксические ошибки перед прогрессированием; Я не знаю, скопировал ли вы весь свой код, но в конце ваших строк не хватает точек с запятой. Синтаксические проблемы в стороне, одним из возможных способов достижения того, что вы описали, было бы присвоение x- и y-координаты каждой точки случайному числу. Рассмотрение кода показывает, что только начальное значение i присваивается значению random(). Приращение i сделает координаты будущих точек зависимыми от начального значения i, что вы можете принять во внимание. Но нигде в вашем коде я не вижу, как вы меняете позицию каждого элемента на основе генерируемых вами значений.

Я настоятельно рекомендую использовать холст HTML5 вместо попытки перемещения элементов HTML; последний будет громоздким и приведет к беспорядочному и неэффективному коду. Если вы все еще хотите придерживаться метода, который вы пытаетесь использовать сейчас, убедитесь, что для свойства CSS display установлено значение block. Вы используете метод getElementById(), что не очень полезно в этом случае, поскольку идентификаторы уникальны в файлах HTML. Я бы предложил использовать getElementsByTagName() и использовать эти возвращенные элементы с определенным атрибутом class.