[JS] Домашно Advanced-Functions - 2 задача


13
Create a module that works with moving div elements. Implement functionality for:
  • Add new moving div element to the DOM
    • The module should generate random background, font and border colors
    • All the div elements are with the same width and height
  • The movements of the div elements can be either circular or rectangular
  • The elements should be moving all the time

Demo

Source

Създал съм два типа - Circle и Rectangle. Създавам по една инстанция от всеки тип, на които добавям елементите. За по-плавна анимация ползвам requestAnimationFrame




Отговори



1

Благодаря на всички за решенията :)

Има някои, които много ми харесаха! Искам да благодаря и на tankovski за функциите за движението на дивовете - така и не съм научил още добре как да използвам синус и косинус, за да определям позицията на елемент в даден момент. :(

Иначе задачката е забавна :) Опитах се да не използвам много код, за да постигна ефекта, и съм сравнително доволен!

Demo

Source

 


от simeons (5 точки)


0

Ето едно демо и от мен:

Демо - Движещите частици съм ги кръстил кванти и атоми :Р

Сорс - кода не е най-късия но и не съм целял това. Според мен съм постигнал сравнителна чистота и гъвкавост. 

Интересното при моето решение според мен е че за всеки елемент си имам обект които пазя в масив и ги изциклям за да им задам новите позиции. Ето как ги инициализирам за да стане по ясно: 

        atom.push({
            element: document.querySelectorAll(".atom")[0],
            angle: 0
        });
        quant.push({
            element: document.querySelectorAll(".quant")[0],
            posX: RectX,
            posY: RectY,
            direction: "up",
        });
 
Както се вижда за атома имам "ъгъл" който ми е достатъчен за изчисляване на новата му позиция. За кварка имам позиции по Х и Y и посока на движение.
 
Друго което ми беше полезно е че си изнесох генерирането на нов цвят във функци и сетването на рандом цвят продоби следния вид: 
            newElement.style.backgroundColor = randomCssColor();
            newElement.style.borderColor = randomCssColor();
 

Ето едно много добро видео в което за 10 минути се разбира формулата за кръгово движение: Видео


от m4r71n (0 точки)


0

Срокът за тази задача изтече и заради празниците не можах да я предам,  но все пак, беше интересна и се получи добре, затова я поствам.

Това е опит за ООП решение. Използвам един бутон, който генерира по случаен начин движещ се по правоъгълна или кръгова траектория обект. Началната позиция и размерите на траекторията също са рандом. Използвам (нещо като) базов клас MovingShape, който се наследява според въведения тип движения. Методът MoveShape е полиморфен и също се имплементира според типа. Съответно модулът връща единствен метод .add. Ще се радвам на коментари и забележки.

Поздрави.

P.S. С всяко добавяне на нов елемент, скоростта (при мен) се увеличава, вместо да се забавя?! Това не мога да разбера на какво се дължи. Идеи?

Source, Demo

 


от AntonPetrov (654 точки)


2

Решение

Правя си функция за генериране на рандом div. Не съм ползвал анимации или обекти .. добавям си по 1 div и в зависимост от 'rect' или 'ellipse' подадената стойност на movingShapes.Add() викам различна функция, която определя как да се движи елемента. Задал съм атрибут movement който се сменя от 0 до 360 и в зависимост от него сменям позицията на елемента, като при всяко обновяване сменям и този атрибут - така всеки елемент сам следи движението си. Другото е математика :) 
P.S. ако сте направили 2ра задача от миналото домашно, просто умножете цялата стойност на X или Y по 2 и имате движение в елипса :))

от dzhenko (3893 точки)