Last active
August 31, 2025 12:49
-
-
Save sunmeat/5dccb8ef9f0a78e84326332b12269907 to your computer and use it in GitHub Desktop.
planets javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body style="overflow: hidden; background-color: black;"> | |
| <form name="Show"> | |
| x <input type="text" name="MouseX" value="0" size="4"><br> | |
| y <input type="text" name="MouseY" value="0" size="4"><br> | |
| </form> | |
| <!-- елементи планет --> | |
| <span id="idSunUpper" class="clsSun" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/sun_upper.gif" width="90" height="45" alt="sun upper" /> | |
| </span> | |
| <span id="idSunLower" class="clsSun" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/sun_lower.gif" width="90" height="45" alt="sun lower" /> | |
| </span> | |
| <span id="idMercury" class="clsPlanet" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/mercury.gif" width="20" height="20" alt="mercury" /> | |
| </span> | |
| <span id="idVenus" class="clsPlanet" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/venus.gif" width="48" height="48" alt="venus" /> | |
| </span> | |
| <span id="idEarthUpper" class="clsPlanet" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/earth_upper.gif" width="50" height="25" alt="earth upper" /> | |
| </span> | |
| <span id="idEarthLower" class="clsPlanet" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/earth_lower.gif" width="50" height="25" alt="earth lower" /> | |
| </span> | |
| <span id="idMoon" class="clsMoon" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/moon.gif" width="10" height="10" alt="moon" /> | |
| </span> | |
| <span id="idMarsUpper" class="clsPlanet" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/mars_upper.gif" width="30" height="15" alt="mars upper" /> | |
| </span> | |
| <span id="idMarsLower" class="clsPlanet" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/mars_lower.gif" width="30" height="15" alt="mars lower" /> | |
| </span> | |
| <span id="idPhobos" class="clsMoon" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/moon.gif" width="4" height="4" alt="phobos" /> | |
| </span> | |
| <span id="idDeimos" class="clsMoon" style="position: absolute;"> | |
| <img src="https://raw.githubusercontent.com/sunmeat/storage/refs/heads/main/images/gif/moon.gif" width="4" height="4" alt="deimos" /> | |
| </span> | |
| <script type="text/javascript"> | |
| // зірки | |
| const all_snowflakes = 100; | |
| let xS = Array(all_snowflakes), yS = Array(all_snowflakes), sS = Array(all_snowflakes); | |
| // ширина екрану | |
| function getWidth() { | |
| return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | |
| } | |
| // висота екрану | |
| function getHeight() { | |
| return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; | |
| } | |
| const h = getHeight(), w = getWidth(); | |
| // створення зірок | |
| for (let i = 0; i < all_snowflakes; i++) { | |
| xS[i] = Math.random() * w; | |
| yS[i] = Math.random() * h; | |
| sS[i] = Math.random() * 3 + 1; | |
| document.write(`<span id="sp${i}" style="font-size: ${Math.random() * 20}px; color: white; position: absolute; top: ${yS[i]}px; left: ${xS[i]}px;">.</span>`); | |
| } | |
| // рух зірок | |
| function moveS() { | |
| for (let i = 0; i < all_snowflakes; i++) { | |
| yS[i] += sS[i]; | |
| document.getElementById(`sp${i}`).style.top = `${yS[i]}px`; | |
| if (yS[i] > h) yS[i] -= h + 25; | |
| } | |
| } | |
| // запуск руху | |
| setInterval(moveS, 50); | |
| // параметри планет | |
| let a = 0; | |
| const da = 0.2 * Math.PI * 400 / 180, delay = 1; | |
| const R = 250; | |
| // радіуси орбіт планет | |
| const kEarth = 1, kMercury = 0.38, kMoon = 0.13, kPhobos = 0.08, kDeimos = 0.14, kMars = 1.55, kVenus = 0.72; | |
| // періоди обертів планет | |
| const TEarth = 365.26, TMercury = 87.97, TMoon = 29.5, TPhobos = 10, TDeimos = 15, TMars = 1.88 * 365.26, TVenus = 224.7; | |
| let x = 100, y = 100; | |
| // обробка рухів мишки | |
| document.onmousemove = getMouseXY; | |
| function getMouseXY(e) { | |
| x = e.pageX; | |
| y = e.pageY; | |
| if (x < 0) y = 0; | |
| if (y < 0) y = 0; | |
| document.Show.MouseX.value = x; | |
| document.Show.MouseY.value = y; | |
| return true; | |
| } | |
| // рух планет | |
| function movePlanet() { | |
| // сонце | |
| idSunUpper.style.left = `${x - 45}px`; | |
| idSunUpper.style.top = `${y - 45}px`; | |
| idSunLower.style.left = `${x - 45}px`; | |
| idSunLower.style.top = `${y}px`; | |
| // меркурій | |
| idMercury.style.left = `${x + R * kMercury * Math.cos(a / TMercury) - 10}px`; | |
| idMercury.style.top = `${y + R * kMercury * Math.sin(a / TMercury) - 10}px`; | |
| // венера | |
| idVenus.style.left = `${x + R * kVenus * Math.cos(a / TVenus) - 24}px`; | |
| idVenus.style.top = `${y + R * kVenus * Math.sin(a / TVenus) - 24}px`; | |
| // земля | |
| idEarthUpper.style.left = `${x + R * kEarth * Math.cos(a / TEarth) - 25}px`; | |
| idEarthUpper.style.top = `${y + R * kEarth * Math.sin(a / TEarth) - 25}px`; | |
| idEarthLower.style.left = `${x + R * kEarth * Math.cos(a / TEarth) - 25}px`; | |
| idEarthLower.style.top = `${y + R * kEarth * Math.sin(a / TEarth)}px`; | |
| // місяць | |
| idMoon.style.left = `${x + R * kEarth * Math.cos(a / TEarth) + R * kMoon * Math.cos(a / TMoon) - 5}px`; | |
| idMoon.style.top = `${y + R * kEarth * Math.sin(a / TEarth) + R * kMoon * Math.sin(a / TMoon) - 5}px`; | |
| // марс | |
| idMarsUpper.style.left = `${x + R * kMars * Math.cos(a / TMars) - 15}px`; | |
| idMarsUpper.style.top = `${y + R * kMars * Math.sin(a / TMars) - 15}px`; | |
| idMarsLower.style.left = `${x + R * kMars * Math.cos(a / TMars) - 15}px`; | |
| idMarsLower.style.top = `${y + R * kMars * Math.sin(a / TMars)}px`; | |
| // фобос | |
| idPhobos.style.left = `${x + R * kMars * Math.cos(a / TMars) + R * kPhobos * Math.cos(a / TPhobos) - 2}px`; | |
| idPhobos.style.top = `${y + R * kMars * Math.sin(a / TMars) + R * kPhobos * Math.sin(a / TPhobos) - 2}px`; | |
| // деймос | |
| idDeimos.style.left = `${x + R * kMars * Math.cos(a / TMars) + R * kDeimos * Math.cos(a / TDeimos) - 2}px`; | |
| idDeimos.style.top = `${y + R * kMars * Math.sin(a / TMars) + R * kDeimos * Math.sin(a / TDeimos) - 2}px`; | |
| // збільшення кута | |
| a += da; | |
| } | |
| // виклик руху планет | |
| setInterval(movePlanet, delay); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment