script.js

const espaco = document.querySelector(".espaco");
const mercurio = document.querySelector(".mercurio");
const venus = document.querySelector(".venus");
const terra = document.querySelector(".terra");
const marte = document.querySelector(".marte");
const jupiter = document.querySelector(".jupiter");
const saturno = document.querySelector(".saturno");
const urano = document.querySelector(".urano");
const netuno = document.querySelector(".netuno");
const luaTerra = document.querySelector(".lua-terra");
const fobos = document.querySelector(".fobos");
const deimos = document.querySelector(".deimos");
const io = document.querySelector(".io");
const europa = document.querySelector(".europa");
const ganimedes = document.querySelector(".ganimedes");
const calisto = document.querySelector(".calisto");
const tita = document.querySelector(".tita");
const encelado = document.querySelector(".encelado");
const tritao = document.querySelector(".tritao");


let anguloMercurio = 0; //ângulo da órbita Mercurio
let anguloVenus = 0; //ângulo da órbita Venus
let anguloTerra = 0; //ângulo da órbita Terra
let anguloMarte = 0; //ângulo da órbita Marte
let anguloJupiter = 0; //ângulo da órbita Jupiter
let anguloSaturno = 0; //ângulo da órbita Saturno
let anguloUrano = 0; //ângulo da órbita Urano
let anguloNetuno = 0; // ângulo da órbita Netuno
let anguloLuaTerra = 0; //ângulo da órbita Lua

let anguloFobos = 0; //ângulo da órbita Fobos
let anguloDeimos = 0; //ângulo da órbita Deimos
let anguloIo = 0;  //ângulo da órbita Io
let anguloEuropa = 0; //ângulo da órbita Europa
let anguloGanimedes = 0; //ângulo da órbita Ganimedes
let anguloCalisto = 0;  
let anguloTita = 0; //ângulo da órbita Tita
let anguloEncelado = 0; //ângulo da órbita Encelado
let anguloTritao = 0; //ângulo da órbita Tritão


function criarEstrelas(qtd){
    for(let i = 0; i < qtd; i++){
        const estrela = document.createElement("div");
        estrela.classList.add("estrela");
        estrela.style.top = Math.random() * window.innerHeight + "px";
        estrela.style.left = Math.random() * window.innerWidth + "px";
        const tamanho = Math.random() * 3;
        estrela.style.width = tamanho + "px";
        estrela.style.height = tamanho + "px";
        espaco.appendChild(estrela);
    }
}
criarEstrelas(300);

function orbitar(elemento, centroX, centroY, raio, angulo, tamanho) {
    const x = centroX + raio * Math.cos(angulo);
    const y = centroY + raio * Math.sin(angulo);
    elemento.style.left = `${x - tamanho/2}px`;
    elemento.style.top = `${y - tamanho/2}px`;
}


function animar() {
    //centro da tela(onde o sol está)
    const centroX = window.innerWidth / 2;
    const centroY = window.innerHeight / 2;

    anguloMercurio += 0.04; //velocidade da órbita Mercurio
    //posição da Mercúrio e movimento ceircular
    const mercurioX = centroX + 75 * Math.cos(anguloMercurio);
    const mercurioY = centroY + 75 * Math.sin(anguloMercurio);
    mercurio.style.left = `${mercurioX - 7.5}px`;
    mercurio.style.top = `${mercurioY - 7.5}px`;

    anguloVenus += 0.02; //velocidade da órbita Venus
    //posição da Vênus e movimento ceircular
    const venusX = centroX + 125 * Math.cos(anguloVenus);
    const venusY = centroY + 125 * Math.sin(anguloVenus);
    venus.style.left = `${venusX - 12.5}px`;
    venus.style.top = `${venusY - 12.5}px`;  

    anguloTerra += 0.01; //velocidade da órbita Terra
    //posição da terra e movimento ceircular
    const terraX = centroX + 200 * Math.cos(anguloTerra);
    const terraY = centroY + 200 * Math.sin(anguloTerra);
    terra.style.left = `${terraX - 20}px`;
    terra.style.top = `${terraY - 20}px`;

    anguloMarte += 0.008; //velocidade da órbita Marte
    // posição de marte e movimento circular
    const marteX = centroX + 275 * Math.cos(anguloMarte);
    const marteY = centroY + 275 * Math.sin(anguloMarte);
    marte.style.left = `${marteX - 15}px`;
    marte.style.top = `${marteY - 15}px`;

    anguloJupiter += 0.004; //velocidade da órbita Jupiter
    // posição de jupiter e movimento circular
    const jupiterX = centroX + 375 * Math.cos(anguloJupiter);
    const jupiterY = centroY + 375 * Math.sin(anguloJupiter);
    jupiter.style.left = `${jupiterX - 35}px`;
    jupiter.style.top = `${jupiterY - 35}px`;

    anguloSaturno += 0.003; //velocidade da órbita Saturno
    // posição de saturno e movimento circular
    const saturnoX = centroX + 475 * Math.cos(anguloSaturno);
    const saturnoY = centroY + 475 * Math.sin(anguloSaturno);
    saturno.style.left = `${saturnoX - 30}px`;
    saturno.style.top = `${saturnoY - 30}px`;

    anguloUrano += 0.002; //velocidade da órbita Urano
    // posição de urano e movimento circular
    const uranoX = centroX + 575 * Math.cos(anguloUrano);
    const uranoY = centroY + 575 * Math.sin(anguloUrano);
    urano.style.left = `${uranoX - 22.5}px`;
    urano.style.top = `${uranoY - 22.5}px`;

    anguloNetuno += 0.001; //velocidade da órbita Netuno
    // posição de netuno e movimento circular
    const netunoX = centroX + 675 * Math.cos(anguloNetuno);
    const netunoY = centroY + 675 * Math.sin(anguloNetuno);
    netuno.style.left = `${netunoX - 22.5}px`;
    netuno.style.top = `${netunoY - 22.5}px`;

    anguloLuaTerra += 0.05; //velocidade da órbita Lua
    // posição da lua e movimento circular
    const luaTerraX = terraX + 50 * Math.cos(anguloLuaTerra);
    const luaTerraY = terraY + 50 * Math.sin(anguloLuaTerra);
    luaTerra.style.left = `${luaTerraX- 7.5}px`;
    luaTerra.style.top = `${luaTerraY - 7.5}px`;

    //órbitas das luas de marte
    anguloFobos += 0.08; //velocidade da órbita Fobos
    anguloDeimos += 0.05; //velocidade da órbita Deimos
    orbitar(fobos, marteX, marteY, 25, anguloFobos, 8); //orbita de Fobos
    orbitar(deimos, marteX, marteY, 40, anguloDeimos, 8); //orbita de Deimos

    //órbitas das luas de júpiter
    anguloIo += 0.07;
    anguloEuropa += 0.05;
    anguloGanimedes += 0.03;
    anguloCalisto += 0.02;
    orbitar(io, jupiterX, jupiterY, 60, anguloIo, 12);
    orbitar(europa, jupiterX, jupiterY, 80, anguloEuropa, 12);
    orbitar(ganimedes, jupiterX, jupiterY, 100, anguloGanimedes, 16);
    orbitar(calisto, jupiterX, jupiterY, 120, anguloCalisto, 12);

    // órbitas das luas de saturno
    anguloTita += 0.02;
    anguloEncelado += 0.06;
    orbitar(tita, saturnoX, saturnoY, 70, anguloTita, 16);
    orbitar(encelado, saturnoX, saturnoY, 40, anguloEncelado, 8);

    // órbita da lua de netuno
    anguloTritao += 0.015;
    orbitar(tritao, netunoX, netunoY, 60, anguloTritao, 12);



    requestAnimationFrame(animar); //chama a função de animação novamente
}
animar();