Повторяйте фигуры с определением границ - html5, canvas, javascript - PullRequest
Новая
       29

Повторяйте фигуры с определением границ - html5, canvas, javascript

1 голос
/ 24 декабря 2010

Я хочу создать простой абстрактный шаблон, используя тег html5 canvas и javascript. Я понял, чего я хочу, используя некоторые переменные, функции и объекты, но с обнаружением границ, которое я использовал, я хочу, чтобы каждая конкретная фигура возвращалась в исходное положение, когда она выходит из экрана (и, таким образом, цикл анимации).

Итак, это мой вопрос, вот мой код. Также приветствуются любые другие советы по структуре, так как я новичок в OO в Javascript.

Смотрите мой прогресс здесь: http://helloauan.com/apps/test/

Ура!

1 Ответ

0 голосов
/ 31 июля 2011

Я не совсем уверен, что именно то, что вы имеете в виду, когда большие белые диагностические линии полностью выходят за верхний правый угол страницы, тогда вы хотите, чтобы они начинались с нижнего левого угла? право

Что вам нужно сделать, это проверить, находится ли линия за пределами ширины и высоты холста, а в вашем случае - самого окна, поскольку холст заполняет окно браузера. Так что вам нужно сделать ряд условий. Вы проверяете, равна ли строка x + ширина линии> ширине холста, а line.y + высота строки> высоте холста. Если оба являются истинными, тогда установите x и y строки в - то, что это в то время. Так что-то вроде: 

if( line.x + line.width > canvas.width && line.y + line.height < 0) {
  line.x = -0;
  line.y = canvasHeight + line.height;
}

Так я перерабатываю круги, которые появляются с правой стороны экрана, и как только они выходят с левой стороны, они начинаются с правой. 

if( d.x + d.radius < 0 ) {
    d.radius = 5+(Math.random()*10);
    d.x = cwidth + d.radius;
    d.y = Math.floor(Math.random()*cheight);
    d.vX = -5-(Math.random()*5);
}

Первым делом просто псевдо, вы должны взглянуть на то, что я сделал, чтобы использовать в качестве отправной точки для таких вещей. Структура вашего кода может использовать больше организации, холст очень быстро становится действительно сложным. Используя клавиши со стрелками, сдвиньте квадрат с любой из четырех сторон и увидите, что он входит с противоположной стороны. http://anti -code.com / игры / зависть / envy.html

Вилка, если хотите: https://github.com/jaredwilli/envy

...