JS: Partikkel-gravitasjon
Skrevet av: Lars Klingenberg
Introduksjon
I denne oppgaven skal vi ta utgangspunkt i animasjone vi lagde i oppgaven Partikkel-animasjon. Dersom du ikke har gjort denne oppgaven anbefaler vi deg om å gå tilbake å gjøre den før du fortsetter her.
Oppgaven her går ut på å legge til gravitasjon på Partikkel
-objektet. Du vil få presentert hva du skal gjøre, så du må selv finne ut hvordan man skriver kode for å få det til. Til slutt kommer det til å se noe slik ut:
Steg 1: Få partikkelen til å falle
Det første vi skal gjøre er å få partikkelen til å falle, for å få det til å skje må du programmere følgende:
For hver gang draw()
kjører, skal følgende skje:
-
hastighets
-attributtet skal endres medgravitasjons
-attributtet -
particle
siny
-posisjon blir endret medhastighets
-attributtet
Faller partikkelen nå? Nå som partikkelen faller ser du kanskje også at det faller igjennom skjermen, derfor må vi legge til en sjekk om gjør at den stopper nederst.
Steg 2: Stopp nederst på skjermen
For at partikkelen vårt skal stoppe nederst på skjermen trenger vi enkelt og greit en sjekk hver gang vi kjører draw()
Nå har du et fallende objekt!
Utfordringer
Steg 3: Få partikkelen til å fly!
Nå som vi har fått gravitasjon på partikkelen vårt kan vi legge til styring på partikkelen ved hjelp av knapper. Vi skal nå programmere slik at når du trykker pil opp
så gir vi partikkelen negativ akselerasjon og når vi slipper så blir den påvirket av gravitasjonen. Får å gjøre dette bruker vi noe som heter onkeyup
, onkeydown
og keyCode
.
For å kunne utføre en operasjon når vi trykker på en knapp må vi ha denne koden:
window.onkeydown = function(inputKey) {
var key = inputKey.keyCode ? inputKey.keyCode : inputKey.which;
if (key == //knapp-koden) {
// Kode som skal utføres
}
}
Forklaring
-
window.onkeydown
er en funksjon som sjekker om en knapp trykkes ned, dersom den gjør det, så kjøres funksjonen medknapp-kode
inputKey
. -
var key = inputKey.keyCode ? inputKey.keyCode : inputKey.which;
er en enklere måte å skrive dette på:
if(inputKey.keyCode) {
var key = inputKey.keyCode;
} else {
var key = inputKey.which;
}
Grunnen til at du må bruke keyCode
og which
er fordi ikke alle nettlesere støtter keyCode
, men bruker which
istedet.
- I
if (key == //knapp-kode)
må du skrive kode for at gravitasjonen skal være negativ, prøv med forskjellige tall.
Dersom du står bomfast: Forslag til kode
Forbedre denne siden
Funnet en feil? Kunne noe vært bedre?
Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!