WEBVTT
00:00:00.289 --> 00:00:03.797
Du har allerede lært at
definere og bruge dine egne variable.
00:00:03.797 --> 00:00:06.657
Nu skal vi lære om to specielle variable:
00:00:06.657 --> 00:00:09.353
mouseX og mouseY.
00:00:10.222 --> 00:00:12.671
Du behøver ikke selv at
definere disse to variable,
00:00:12.671 --> 00:00:15.980
og faktisk skal du aldrig gøre det,
for de eksisterer allerede.
00:00:15.980 --> 00:00:19.599
Ser du, programmet sætter automatisk
værdien af disse variable i baggrunden,
00:00:19.599 --> 00:00:23.758
og sørger for at værdien af mouseX
er altid x positionen af din musemarkør,
00:00:23.758 --> 00:00:27.548
og at værdien af mouseY
er altid y positionen af din musemarkør.
00:00:27.548 --> 00:00:30.864
Det gør det rigtig nemt at lave
seje, interaktive ting
00:00:30.864 --> 00:00:32.559
baseret på musen's position.
00:00:33.430 --> 00:00:35.868
Lad os se på den ellipse
jeg tegner her.
00:00:35.868 --> 00:00:39.366
Lige nu, tegner jeg den
altid ved 200, 200.
00:00:40.612 --> 00:00:43.827
Hvis jeg bruger mouseX og mouseY,
disse specielle variable,
00:00:44.439 --> 00:00:48.286
så kan jeg faktisk tegne den
ved mouseX og mouseY.
00:00:49.337 --> 00:00:52.359
Hvis jeg så nu forsøger at bevæge musen
over tegneområdet, kan du se
00:00:52.359 --> 00:00:55.291
at ellipsen altid bliver tegnet hvor
min musemarkør er --
00:00:55.291 --> 00:00:57.193
så den følger min muse rundt.
00:00:57.193 --> 00:01:00.000
Det er ret sejt; kan du se
hvad jeg tegner? Juhuuu!
00:01:00.468 --> 00:01:04.125
Hvis du bruger mouseX og mouseY,
skal du sørge for at
00:01:04.125 --> 00:01:06.365
du bruger dem inde i
draw-funktionen
00:01:06.365 --> 00:01:08.135
for se hvad der sker
00:01:09.575 --> 00:01:12.700
hvis vi flytter disse to linjer kode
uden for draw = function ().
00:01:13.289 --> 00:01:14.436
Kan du se?
00:01:14.871 --> 00:01:19.206
Nu vil koden her kun blive kørt én gang,
00:01:19.206 --> 00:01:21.811
så den her ellipse bliver kun tegnet en gang,
00:01:21.811 --> 00:01:24.036
og den bliver tegnet der hvor musen
nu lige var
00:01:24.036 --> 00:01:26.140
helt, helt i starten af programmet
00:01:26.725 --> 00:01:30.337
Det er derfor vi bliver nødt til
bruge dem inde i draw = function ().
00:01:30.337 --> 00:01:32.459
fordi draw = function ()
er den funktion
00:01:32.459 --> 00:01:35.784
der bliver kaldt igen og igen
mens vores program kører.
00:01:35.784 --> 00:01:39.149
Så vi vil have at når den bliver kaldt,
så ser den på den nuværende værdi
00:01:39.149 --> 00:01:43.246
af mouseX og mouseY, og derefter
tegnet den ellipsen på den position.
00:01:43.246 --> 00:01:46.063
Hvis du tænker over det, så
er det lidt ligesom en animation --
00:01:46.063 --> 00:01:48.561
det ændrer sig over tid,
bare på en anden måde.
00:01:49.191 --> 00:01:52.065
Okay, nu kan vi gøre alle mulige sjove ting.
00:01:52.567 --> 00:01:55.724
Hvad hvis, i stedet for at tegne den
ved mouseX og mouseY,
00:01:56.353 --> 00:02:02.591
så tegne vi den stadig ved mouseX,
men holdt mouseY fast ved 300?
00:02:03.231 --> 00:02:07.369
Nu kan du se at ellipsen
kun følger mit x koordinat,
00:02:07.369 --> 00:02:09.204
og ignorer hvad jeg gør i y-retningen.
00:02:10.991 --> 00:02:16.873
Hvad nu hvis jeg går tilbage, og
tegner ved mouseX og mouseY*,
00:02:16.873 --> 00:02:19.756
men fjerner baggrunden,
bare ved at udkommentere det?
00:02:20.547 --> 00:02:25.234
Woo! Se nu, jeg har fået en funky malerpensel!
00:02:25.234 --> 00:02:27.031
Det er ret sejt.
00:02:27.031 --> 00:02:30.470
Eller, jeg kunne endda ændre
disse variable.
00:02:31.029 --> 00:02:32.894
Lad os få baggrunden tilbage.
00:02:32.894 --> 00:02:37.703
Jeg ændrer de variable her,
mouseX og mouseY,
00:02:37.703 --> 00:02:39.202
og ser hvad der sker.
00:02:39.202 --> 00:02:41.232
Nu føles det hele rigtig, rigtig mærkeligt.
00:02:41.232 --> 00:02:43.853
Jeg kan styre med musen,
men der sker det modsatte
00:02:43.854 --> 00:02:45.576
af hvad jeg forventer den gør.
00:02:45.576 --> 00:02:48.321
Men det er sejt, du kunne måske forestille
dig et helt spil
00:02:48.321 --> 00:02:50.950
der handler om at tegne noget
eller gøre noget
00:02:50.950 --> 00:02:52.940
mens man bruger inverteret musestyring
00:02:53.040 --> 00:02:58.908
Det var alt om mouseX og mouseY --
faktisk ret sjovt. Hav det godt!