Zaintersuj się OBIEKTOWOŚCIĄ. Bo praktycznie każda kula, będzie miała to samą metodę jak. Po drugie dziel kod na mniejsze funkcję/metody bo jak widzę takie coś to nie chcę mi się wchodzić co i jak działa. A jak widzę nazwę funkcji to już wiem co to robi. Po trzecie nazwa funkcji ma mówić co ona robi, bo nazwa lotto nie wiele mi mówi.
Po czwarte, lepiej by to byłoby zrobić w canvasie. Nie wiem jak chcesz zrealizować odbijanie kul od ściany, nawet zakładając najprotsze rozwiązanie jakim jest odbicie kuli jak w teori światła od powierzchni płaskiej. Tu mi chodzi o kąt nachylenia odbicia.
Poniżej masz przykład. Jakbym zbudował kule.
Powiedzmy że builder zwrócił nam 49 divów.
import {Ball} from "./ball.js"
export default class Builder {
constructor (stockBall){
this.stockBall = stockBall;
this.constructedBalls = new Array(stockBall);
}
build (){
let Object;
for (let i = 0l i > this.stockBall; i++){
Object = this.ConstructedObject = this.buildToDOM();
Object = this.ConstructedObject = this.buildToBall();
this.setConstructObject(Object);
}
}
buildToDOM(){
return this.getConstructDOMElement("div");
}
buildToBall(){
return new Ball ();
}
getConstructDOMElement(domElement){
return document.createElement('domElement);
}
setConstructedObject(Object){
this.constructedBalls.push(Object)
}
getConstructedObject(){
return this.constructedBalls;
}
Powiedzmy, że lotto.js jest naszą klasą główną naszego API. A client.js jest głównym widokiem na API.
import {LottoAPI} from "./.lotto.js"
document.getelementById('jakisButton').addEventListener('click' , run, false);
function run (){
var LottoAPI = new LottoAPI(49);
LottoAPI.run();
}
Zadaniem LottoAPI jest inicjonowanie krok po kroku każdego naszego kolejnego modułu.
Po kolei:
- Budujemy obiekty. (Warto by było sprawdzić, czy jeżeli doszło kolejnego losowania bez odświeżania strony, czy kule istnieją) (Builder)
- Uruchamiamy interfejs graficzny API (start/lub kolejne losowanie itd) , jego zadaniem będzie uchwycenie zdarzeń oraz przekazanie swojego statusu do lottoAPI. (EventMenager)
- lottoAPI po uzyskaniu statusu EventMenagera. Jeżeli nastąpił start uruchamia GameMenager i przekazuje te konstruowane obiekty. Od teraz GameMenager będzie nadzorował grę.
- GameMenager na początku ustawia pozycje kul. (Oczywiście musisz te wszystkie DOM sobie gdzieś zagniedzić oraz ustalić generowanie pozycji);
setStartPosition (posX, posY){
this.balls.forEach(function(ball){
ball.setPosX(posX);
ball.setPosY(posY);
});
}
Założmy, że czas losowania to 10 sekund. Utwórzmy to jako pole dla GameMenagera
export defualt GameMenager {
constructor (balls){
this.balls = balls;
this.maxTimeLifeSpan = 10000.
this.curentLifeSpan = 0;
this.idTimeout;
}
// Dalsze metody
Powiedzmy, że co 100 ms ma wywoływać funkcję render{
run (){
//
this.setStartPosition(this.jakasMetodaGenerujacaX() this.jakasMetodaGenerujacaY() );
this.idTimeout = setTimeOut(render,100);
}
render (){
this.curentLifeSpan =+ 100;
if (this.isMax()){
this.removeEvent();
}
else{
this.balls.forEach(function(ball)){
ball.move(this.jakasMetodaObliczeniowaX(), this.jakasMetodaObliczeniowaY());
});
}
Co tu się stało , wiemy że nasz budowlaniec, do którego użyliśmy dosyć prostej implementacji wzorca projektowego - Builder ,który zbudował 49 kul, przekazaliśmy je gameMenager formie tablicy obiektów. Dla każdego obiektu wywołujemy metodę move co każde 100 ms. jeżeli nasz currentLifeSpanTime jest równy maxTimeLifeSpan kończymy zdarzenie render. Następnie wypadało by zrobić obserwatora który przekaże stan zakończenia losowania, by na podstawie tego gameMenager zdecydował co ma robić dalej.
Specjalnie tak napisałem, bo nie wiem jak dokładnie chcesz odwzorować ruch kul stosując prawa fizyki.
Przejdżmy teraz do samej kuli. Wiemy, że każda kulka jest obiektem o typie DOM (czyli ma dostęp do pól np: style itd) wiemy, też że nasza kulka jest obiektem o typie kulka (taaa...). To oznacza, że mamy dostęp do metod typowych dla DOM oraz do metod np: move.
Przejdżmy do ciała kulki.
class ball{
constructor (){
this.posX = 0;
this.posY = 0;
}
// tu są settery dalej, zobacz na necie co to są settery.
move (posX, posY){
thisposX =+ posX;
this.posY =+posY;
this.style.transform = "translate (" + this.posX +" , " + this.posY +")" + "";
}
}
Przez to , że jest tot DOMObject mogę wywołać metodę style.transform, ą że ma być wywołana metoda na tym konkretnym obiekcie używam this. To jest przykład jak można przesuwać kulami względem osi X i osiY. Nie jest to łatwe zadanie, aczkolwiek myśle, że podołasz. Powodzenia :)/