Lad os fortsætte med at se, hvad vi kan gøre med objekter.
Vi er tilbage med det program vi brugte i modulet om funktioner.
Dette program har funktionen 'drawWinston'
som kan tegne Winston ved visse x'er og y'er.
Her kalder vi 'drawWinston' fire gange.
Hver gange med et forskelligt sæt af x- og y-koordinater.
Du kender mig jo.
Når jeg ser disse fire kald på 'drawWinston',
der ser så ens ud, så tænker jeg straks på,
hvor meget bedre det ville være at bruge en løkke
og kalde den én gang inde i løkken
og ændre x og y i hvert af løkkens gennemløb.
For at gøre det skal vi gemme disse x- og y-positioner i et array,
som kan gennemløbes.
Vi har to sæt af værdier, så vi kan lave to arrays.
Et for x-positionerne og et for y-positionerne.
Vi taster >var xPositions = [99, 294, 101, 294];< og
>var yPositions = [117, 117, 316, 316];<
Nu kan vi gennemløbe disse ved at bruge en for-løkke.
>for (var i = 0; i < xPositions.length; i++)<
som gennemløber hvert element i xPositions
og vi tegner Winston med
>drawWinston(xPositions[i], yPositions[i]);<
Okay, lad os se om det virker, når vi sletter dette.
Okay, det virker.
Nu har vi denne ene linje med kode, der tegner Winston
og gør det i hver position i arrayet xPositions.
Vi kan tilføje flere positioner ved at skrive 10 og 1
og 1 og 1
og 100 og 1.
Det begynder at se lidt rodet ud,
og det kan jeg ikke lide,
da det er svært at se, hvilket x der hører til hvilket y.
Det skal være nemt at se mine x og y par
uden jeg skal forsøge at skrive dem under hinanden på denne måde.
Jeg vil gerne gemme disse positioner på en anden måde.
En ide er i stedet at gemme dem i objekter
da hver position består af to informationer, x og y.
Vi kan lave et objekt med egenskaberne x og y.
Og dernæst kan vi have et array af objekter med disse x- og y-positioner.
Lad os gøre det.
Vi taster >var positions = [];<
da det skal være et array,
men i stedet for at hvert element er et tal,
så skal det være et objekt.
Vi bruger derfor {} og indsætter x: 99, y: 117.
Nu har vi en af vores positioner.
Vi kan tilføje endnu en
>{x: 294, y: 117},<
hvor x er 294 og y er 117.
Den tredje er>{x: 101, y: 316},<
og den sidste er >{x: 294, y: 316},<.
Nu har vi et array af objekter,
hvor hvert objekt har egenskaberne x og y.
Hernede i vores for-løkke ændrer vi den til at gennemløbe positions.length
og så indsætter vi objektet.
Lige nu er det hele objektet, men vi skal bruge x og y,
så vi skal ændrer det til position[i].x og positions[i].y
Sådan!!!
Nu kan vi fjerne disse gamle kludrede arrays.
Flot.
Dette ser, for mig, meget pænere ud og gør koden meget nemmere at læse.
Og når vi har mere læsbar kode, så er det godt.
Det gør det også nemmere at tilføje noget.
Jeg tilføjer x y parret samlet.
Lad os sige >{x: 200, y: 200},<
og jeg får en Winston i midten.
Sejt.
Nu vil jeg vise dig noget, der er endnu mere smart.
Bemærk at vores funktion lige nu accepterer to tal
og dernæst bruger disse to tal.
Vi kan ændre vores funktion, så den forventer et objekt
og får x og y fra dette objekt.
Hernede skal vi blot have objektet positions[i]
Lad os prøve det.
Vi bruger vores objekt, men nu virker det ikke.
Det er fordi vores funktion stadig forventer to argumenter,
og den får kun ét.
Så vi ændrer funktionen til kun at få 'facePosition'.
Nu får vi fejlen faceX er ikke defineret,
fordi vi før brugte faceX som et argument, men nu eksisterer det ikke.
i stedet har vi et objekt.
Det vi gør er, at gemme x positionen fra objektet i variablen faceX.
Vi har dette objekt og objektet har egenskaben x,
så vi gemmer den i variablen faceX.
Og så gør vi det samme for y,
og taster >faceY = facePosition.y<.
Sådan.
I resten af funktionen bruges faceX og faceY.
Vi skal sikre os, at de er stavet korrekt,
hvis vi brugte xx, så virker det ikke,
da det ikke er det, der står hernede i vores array af objekter.
Det skal passe sammen.
Men det er ret smart.
Du kan have et array af objekter.
Du kan have funktioner, der bruger objekter.
Du vil opdage at dine programmer bliver ret smarte på grund af den måde
de strukturer deres data.
Da du så tit har x og y, der hører sammen,
så vil du opdage, at de især er nyttige i dine grafik og animationsprogrammer.
Så kom bare i gang og ha' det sjovt.