Forløb med spil og samarbejde.
Med udgangspunkt i følgende case, skal du udvikle en del af en løsning.
Dansk idrætsforbund er stærkt bekymret over en ny undersøgelse, der viser, at 3 ud af 4 børn og unge bevæger sig for lidt i hverdagen*. De mistænker at for meget stillesiddende skærmtid spiller en rolle og vil derfor gerne motivere unge mennesker til at bevæge sig mere og til at være mere sociale, når de spiller computerspil.
Derfor har de besluttet sig for at udvikle et spil i p5.js, der
I logbogen skal I
(*) http://fiibl.dk/born-og-unge-bevaeger-sig-for-lidt-trods-gode-rammer/
Eleverne skal kunne ̶ identificere basale strukturer i programmeringssprog, modellere programmer og anvende programmering til udvikling af simple it-systemer.
Oprettelse af logbog beskrives her, InformatikRysensteen
Vi skal kunne lave om i spillet og I skal kunne skabe jeres egne spil. Det betyder at I skal lære at programmere i JavaScript, js. Vi bruger det samme bibliotek som ved GCP4, P5.js, og en
Det er sjovest at arbejde i fuld skærm. I P5.js-editor kan I få fuld skærm hvis I gemmer programmet (navngiv det fornuftigt) -> File -> Share -> Present linket. I behøver ikke lukke fanen for at opdatere, når I gemmer koden skal I bare genindlæse Present siden.
helloWorld.jshelloworld og koden og kopier den ind i P5Js editoren og kør programmet.En god editor er Microsofts Visual Studio Code, Link her
Før I skal lave jeres eget skal I have styr på hvordan programmere i p5.js.
Der er få men vigtige grundelementer når man programmerer
whileeller for.True, kaldes også ìfstatements.Vi vil introducere de forskellige grundelementer ved at gennemgå programmet, mmSimpelStart.
I linje 1 defineres fire variable t1=0; t2=0; n=0; score=0;. Det er standarden at definere variablene i starten af programmet. Variable kan også indeholde tekst fx. tekst = "dette er en tekst" hvor det angives med gåseøjne.
En sekvens er en den af programmet hvor koden bliver eksekveret linje for linje. Helt generelt kan programmer læses fra toppen og ned og rækkefølgen er også fra toppen til bund. her skrives i værdien to gange i konsollen
i = 0
console.log(i)
i += 1
console.log(i)
outputtet er
0
1
Nedenstående kode skriver tallene i konsollen med console.log(), skriver dem på skærmen, 0,1,2,3.
i = 0
while (i<4){
console.log(i)
i += 1;
}
løkken kører så længe whilebetingelsen er sand, dvs. så længe i er mindre end 4. I linjen i += 1 bliver der lagt én til variablen i.
3,2,1,0I P5.js er function draw() også en løkke. Den er indbygget i programmet og kører hele tiden. Hvis man selv skal lave en løkke som bliver ved med at køre kan man skrive while (true)
Funktioner virker næsten som I kender dem fra matematik hvor en input-værdi bliver til en output-værdi. Funktionen gør lidt løst formuleret noget ved inputtet og returnerer det som output. I programmering er vores forståelse af funktioner lidt mere fleksibel.
Definition: En funktion er den del kode som udfører en opgave.
Det smarte er at funktionen kan kaldes flere gange og at man derfor undgår at skrive det samme flere gange. Det giver også overskuelighed når én funktion udfører én opgave.
Funktioner kan
Her er et eksempel på en funktion som tager to tal og lægger dem sammen og returnerer resultatet.
function addNumbers(n, m){
return n + m;
}
sum = addNumbers(10, 32);
console.log(sum);
Funktionen defineres med function og indholdet er mellem {}. Denne funktion har to input n og m og returnerer én værdi.
Input og output behøver ikke være tal. I denne funktion skrives en hilsen.
function skrivHilsen(navn){
console.log("hej med dig " + navn);
}
skrivHilsen("Mads Peter")
p5JS har indbyggede funktioner som kan kaldes
function setup()function draw()function keyPressed()function setup() kører som det første. function draw() kører hele tiden i loop og alt i funktionen gentages til programmet sluttes. function keyPressed() kører når en tast bliver trykket ned.
function timeInterval()function randomNumber()er funktioner jeg har defineret. function timeInterval() giver et tidsinterval på 1 sekund, 1000 millisekunder og function randomNumber() returnerer et heltal mellem 0-3.
if statements er en logisk betingelse hvor noget bliver udført hvis betingelsen er sand, true. Det modsatte er at betingelsen ikke er sand, false. Der sker dermed en forgrening i programmet, hvor enten det ene eller det andet sker.
n = 0;
if (n == 8){
console.log('That is my lucky number 8');
}
if (n != 8){
console.log(n + ' is not my lucky number');
}
n==8og n!=8.console.log() og en if-statement alle de lige tal.Lister eller arrays, kan være en praktisk måde at behandle data. De virker som en mere fleksibel version at de kendte vektorer fra matematik.
programmer listeSimpel.js har en simpel liste, l = ['hej','med','dig',9];
addInformatik(); oven over løkken, hvad er forskellen?
Vi sletter sidste element i listen med l.pop() og tilføjer i stedet ‘informatik’ med l.push('informatik'). Vi kan også ændre enkeltelementer fx. erstatte ‘hej’ med ‘MP’ ved at skrive l[0]='MP'Vi vil arbejde med programmet mmSimpleStart.js. Spillet indeholder funktioner som er indbygget i p5JS biblioteket.
JavaScript og p5JS har indbyggede funktioner,
setup() kører først.draw() er en løkke som kører igennem hele programmet.random(n) giver et tilfældigt tal 0 til n.int() laver et kommatal om til et heltal (integer på engelsk).millis() tæller antal millisekunder siden programmet startede.keyPressed() trigger når en tast bliver trykket.Det er også en funktion som jeg har lavet,
timeInterval()Funktionen timeInterval() indeholder også en betingelse. Den indeholder faktisk også en ny funktion, millis() som tæller millisekunder fra programmet startede. Vi bruger det til at lave intervaller med.
funktionen timeInterval() indeholder koden
t2 = millis();
if (t2 - t1 > 1000){
t1 = t2;
n = int(random(4));
}
t2 = millis() opdaterer hele tiden variablen t2 med den nyeste tid.
if (t2 - t1 > 1000) er sand hvis forskellen i tiderne t2 og t1 er større end 1000, altså der er gået et sekund.
Hvis der er gået mere end et sekund bliver t1 = t2 og der skabes et nyt tilfældigt tal, n.
keyPressed() indeholder også en betingelse.
Ved udvikling af programmer er det heldigvis ok at tage udgangspunkt i og låne fra hvad andre har gjort. Nedenfor er en samling småprogrammer som I kan tage udgangspunkt i, når I laver jeres eget program. Det er meget lettere at modificere et eksisterende program end at starte med en blank side.
Det vigtigste krav er I skal forstå og kunne forklare alt den kode I tager med, også selv om det er noget I ikke selv har skrevet. Det gælder hvis I tager udgangspunkt i eksempler, eller hvis I samarbejder om at lave programmet.
Kristian Wichmann har lavet en række videovejledninger. KWihkmann youtube. Kodestumperne ligger her, github.com/kwichmann.
P5 har et godt bibliotek med referencer, først kommmer et eksempel og nedenunder beskrivelsen.
I filen lister.js bruges en liste til at holde styr på flere billeder.
Filen JSfiler/boing.js loader en mp3-fil og afspiller den hver gang musenklappen trykkes. boing.mp3 ligger i mappen “filer”.
Vi skal bruge P5JS-biblioteket p5.sound.min.js, som indlæses i index.html-filen med linjen:
<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/addons/p5.sound.min.js"></script>
Den skal placeres under det sted, hvor vi loader
p5.js, da den skal bruges.
Reference kan findes her: p5.sound.
Små programmer, som I kan bruge i jeres egne projekter.
Har du forslag til rettelser, forbedringer eller nye øvelser? Du kan hjælpe med at gøre denne side bedre!
Tak for din hjælp!