Случайно отображать точки - PullRequest
Новая
       0

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

0 голосов
/ 20 января 2011

Я пытаюсь создать небольшую игру, используя 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++;
    }
}

Ответы [ 4 ]

2 голосов
/ 20 января 2011

Вместо использования одного элемента, содержащего несколько периодов большого размера, я бы рекомендовал использовать отдельные элементы для каждой точки. Затем (помимо необходимости использовать периоды 200px) вы можете использовать CSS для позиционирования каждого элемента так, как вам удобно. У меня есть пример здесь .

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

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

0 голосов
/ 20 января 2011

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

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

0 голосов
/ 20 января 2011

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

Смотрите здесь для деталей, здесь для учебника и здесь для демонстрации.

0 голосов
/ 20 января 2011

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

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