Bevægelse og animationer #2

I de sidste par opgaver har vi kun flyttet på vores figurer vha. musen. Næste spring i kompleksitet at også styre figurernes placering automatisk, så vi kan lave sådan noget som det her:

Mere om variable

Til det formål skal vi bruge variable, og vi skal ændre variablene hver gang billedet bliver tegnet.

I eksemplet med bilen kan vi starte med at sætte positionen af bilen til nul:

var xpos = 0;

Og inde i draw()-funktionen kan vi opdatere xpos hver billedet skal tegnes:

var draw = function () {
  ...
  xpos = xpos + 1;
  ...
};

Opgave 12

Brug ovenstående til at få din bil til at køre fra venstre side til højre side af skærmen.

Opgave 13

Introducer en variabel hastighed som angiver hvor meget positionen skal ændres i hvert kald til draw() og brug den i stedet for 1-tallet.

Betingelser

For at stoppe bilen når den kommer til den anden side af skærmen har vi brug for betingelser. En måde at foretage valg og træffe beslutninger. For eksempel:

"Hvis vi er nået kanten af skærmen, sæt hastighed = 0"

Sådan en betingelse skrives ved hjælp af if-erklæringer:

if (bil er ved kanten af skærmen) {
  hastighed = 0;
}

Nu kan man ikke bare skrive "bil er ved kanten af skærmen" inde i et program, så samtidig med betingelser har vi også brug for at kunne lave sammenligninger mellem forskellige tal. Så i stedet skriver vi:

if (xpos > width) {
  // Hvad du skriver her bliver kun kørt hvis
  // xpos er mindre end bredden af billedet
}

Opgave 14

Brug en if-erklæring til at stoppe bilen når den når hen til kanten.

Opgave 15

I stedet for at stoppe bilen, kan du prøve at sætte hastigheden til -1, når du når kanten.