Avaruusalus
Kuvat
Raahaa osat ja taustakuva kansioon. Voit myös suunnitella ja muokata osia.
Tehtävä: Suunnittele ja kokoa avaruusalus
HTML
- tee index.html ja style.css
- alusta index.html peruspohjalla
- linkitä style.css headiin
- lataa ship.js ja linkitä se headiin
- lisää title ja favicon
- lisää bodyyn main
- lisää mainin sisälle div jolla on seuraava id ja inline-tyyli:
- id=”ship” style="transform: rotate(0deg);"
- koska osat ovat neliöitä ja samankokoisia, aluksen kokoamiseen voi käyttää taulukkoa
- tee ship-divin sisälle esim. 5x5 taulukko ja laita osat kuvina (img) taulukon soluihin
CSS
-
:root
- määritä root muuttujiin:
- taustan eli tähtitaivaslaatan koko bg_size
- aluksen osan koko tile_size
- aluksen suhteellinen koko tile_scale
- tiilen oikea koko --tile: calc(var(--tile_scale)*var(--tile_size));
- nollaa marginaalit
- aseta tähtitaivas taustakuvaksi
- aseta taustakuvatiilen koko muuttujasta
- toista animaatiota loputtomasti
- poista kiihtyvyys animaation alusta ja lopusta
(toisin sanoen toista lineaarisella nopeudella) - määritä animaation kesto sekunteina (aluksen nopeus)
- kun tausta liikkuu alaspäin, niin näyttää kun alus liikkuisi ylöspäin
body
@keyframes move_w {…}
CSS
-
#ship
- transition: all 1s;
- transition asettaa siirtymäanimaation ja hidastaa kääntymistä
- aseta leveys 100vw
- aseta korkeus 100vh
- tee mainista flex elementti
- keskitä sisältö vaaka- ja pystysuunnassa
- Säädä tiilen koko muuttujalla main img{ width: var(--tile); }
- Poista CSS:llä tyhjä tila taulukon solujen välistä
- Poista tyhä tila kuvien välistä:
- Kierrä tai peilaa osia inline-CSS:llä tai niille antamiesi id:n perusteella
- Tallenna GitHubiin
main
main img
table
Ohjaa avaruusalusta
- lisää bodylle inline-style:
<body style="animation-name: move_w;"> - kutsu starttaus-funktiota ennen bodyn sulkeutumista
<script>init()</script> - Tarkista, että selainikkuna on fokuksessa klikkaamalla kerran alusta
- WASD, 123