Level 3JS: Partikkel-gravitasjon

Skrevet av: Lars Klingenberg

Kurs: Web
Tema: Tekstbasert, Nettside, Animasjon
Fag: Matematikk, Programmering
Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole

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:

  • gravitasjons-attributtet skal endres med hastighets-attributtet

  • particle sin y-posisjon blir endret med hastighets-attributtet

Hint objekt.gravitasjon += objekt.hastighet eller objekt.gravitasjon = objekt.gravitasjon + objekt.hastighet

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()

Hint Lag en variabel som holder på verdien til canvas.heigh - particle.size.

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 med knapp-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.

  • [w3school](http://www.w3schools.com/jsref/event_onkeydown.asp)
    

Dersom du står bomfast: Forlag til kode

Lisens: CC BY-SA 4.0

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!