1
00:00:00,440 --> 00:00:00,840
OK.

2
00:00:00,840 --> 00:00:01,770
Welkom terug.

3
00:00:01,770 --> 00:00:07,420
Dus zoals ik in deze video genoemd ook daadwerkelijk gaan werken aan een huisdier aanval kloon hier.

4
00:00:07,430 --> 00:00:23,520
Dus het eerste wat we willen doen is erachter te komen hoe je een cirkel, die we hebben eigenlijk al gezien toe te voegen, maar we willen een paar dingen te doen in een cirkel wanneer de gebruiker een toets raakt eigenlijk in mijn geval Ik doe het alleen voor haar kinderen.

5
00:00:23,750 --> 00:00:25,730
Het werkt op dezelfde manier voor een andere toets.

6
00:00:25,800 --> 00:00:32,270
Dus wanneer een gebruiker raakt de sleutel in een cirkel en dan moeten we ook te achterhalen van de animatie van die cirkel.

7
00:00:32,610 --> 00:00:36,200
En tot slot willen we aan toevoegen dat cirkel naar een willekeurig te coördineren.

8
00:00:36,330 --> 00:00:41,890
Dus om te beginnen we gewoon raakte een sleutel en voeg een cirkel naar het midden van het scherm.

9
00:00:42,570 --> 00:00:51,070
Dus laten we naar het papier japes docs en neem een ​​kijkje op interactie en kijken naar het toetsenbord interactie.

10
00:00:51,690 --> 00:01:18,810
En ik weet dat het lijkt alsof goed wist ik niet waar u hier kijken, maar de eerste keer dat ik hier kwam het kostte me een stuk langer te vinden dat ik ging gewoon door de meeste van deze en zocht naar het toetsenbord eigenlijk probeert te zeggen dat de meest waarschijnlijke als ik dit opnieuw deed door mezelf en ik was niet voorbereid op deze video zou hebben genomen me een stuk langer te vinden dat ik een onderzoek zou hebben gedaan in ieder geval zo dat de scroll naar beneden en kijk maar naar enkele van de voorbeelden.

11
00:01:18,840 --> 00:01:27,910
Deze eerste één snelle hier om scherp te stellen en druk vervolgens op enkele toetsen en het vertelt je welke toets werd ingedrukt en wanneer het ook werd uitgebracht.

12
00:01:28,350 --> 00:01:32,860
Dus nu ben ik te drukken K en vervolgens los te laten.

13
00:01:33,150 --> 00:01:38,450
En als je kijkt naar de code het is echt gemakkelijk gewoon op de toets ingedrukt en Anchia up.

14
00:01:38,520 --> 00:01:46,670
Dus het is niet dat er geen document op ten evenement luisteraar er geen Jay queery gebeurtenis luisteraars achter de schermen zijn er gedocumenteerd op event listeners gebeurt.

15
00:01:46,920 --> 00:01:57,210
Maar voor papier script hoeven we alleen maar om deze super eenvoudige lijn te schrijven, zodat we kunnen nemen die eigenlijk alleen maar naar beneden te kopiëren zal dit doen sleutel voor onze app.

16
00:01:57,360 --> 00:01:59,070
We willen dat het geluid meteen te spelen.

17
00:01:59,070 --> 00:02:14,880
Dus als ik druk op de toets niet wanneer ik vrijgegeven denken dat is een beetje langzamer het is een beetje als een piano dat wanneer je een piano of het geluid het geluid dat wordt gegenereerd wordt direct gegenereerd wanneer u op de toets of rechts achteraf niet wanneer hit je loslaat.

18
00:02:15,240 --> 00:02:16,290
Dus Zal ik doen toets ingedrukt.

19
00:02:16,290 --> 00:02:21,440
Ik kopieerde dat en we beginnen door gewoon het maken van een nieuwe kring, zodat we deze code nodig.

20
00:02:21,630 --> 00:02:24,310
Maar we willen gewoon een, zodat we niet de lussen meer nodig.

21
00:02:24,390 --> 00:02:30,870
Te ontdoen van die en wij zullen die nieuwe cirkel op toets ingedrukt te maken.

22
00:02:32,220 --> 00:02:39,360
Dus dit proces is vrij realistisch, waar je het nemen van verschillende stukken en u ze gewoon een soort bij elkaar passend.

23
00:02:39,810 --> 00:02:42,440
Dus vond ik dit in de documentatie op de toets ingedrukt.

24
00:02:42,840 --> 00:02:43,730
U kunt zich te ontdoen van dat.

25
00:02:43,860 --> 00:02:49,940
En ik vond dit in de documentatie zo goed en we nodig hebben om dit te veranderen X en Y zijn niet gedefinieerd.

26
00:02:50,010 --> 00:02:55,410
Dus laten we het gewoon doen op 100 komma 100 en laten we Phil kleur oranje.

27
00:02:55,740 --> 00:02:58,380
Zo op run down deze Code.

28
00:02:59,280 --> 00:03:04,410
En nogmaals, het is heel anders dan wat we hebben gezien of hebben we een event listener gedocumenteerd.

29
00:03:04,410 --> 00:03:07,260
En dan zouden we moeten toe te voegen in een element.

30
00:03:07,410 --> 00:03:23,300
Dus zouden we moeten doen als document dot-query selector een element zoals een div dot toe te voegen event listener en dan zouden we moeten zeggen dat het klikken of druk op de toets of omhoog.

31
00:03:23,400 --> 00:03:25,160
Het is een stuk meer code.

32
00:03:25,290 --> 00:03:28,950
Dit wordt gedaan voor ons met Paperchase heel eenvoudig.

33
00:03:29,010 --> 00:03:32,070
Zo op toets ingedrukt laten we eens kijken wat er gebeurt.

34
00:03:32,310 --> 00:03:37,710
Ik ga op de toets en we eindigen met een cirkel en elke keer als ik druk op 1 ik krijg een andere cirkel.

35
00:03:37,710 --> 00:03:39,210
Je kan het gewoon niet zien.

36
00:03:39,690 --> 00:03:45,270
Dus nu laten we werken aan dit, zodat we het toevoegen van een cirkel naar een willekeurige plaats op het scherm.

37
00:03:45,720 --> 00:04:06,170
En de manier waarop we die eigenlijk kostte me een beetje werk te vinden dat we het zelf zouden kunnen doen waar we twee nummers te genereren in principe van nul helemaal tot aan de maximale breedte van ons scherm en dan de andere getal van nul tot tot de maximale hoogte van ons scherm.

38
00:04:06,570 --> 00:04:19,180
En dat is niet te veel werk, maar we hebben te achterhalen van de breedte en hoogte en de afmetingen die als je naar Paperchase en als we kijken waar je referentie.

39
00:04:20,010 --> 00:04:23,220
En als dat is open blik in het oog.

40
00:04:23,550 --> 00:04:27,080
En nogmaals, ik heb net dit een paar dagen geleden nam ik een beetje.

41
00:04:27,090 --> 00:04:36,390
Maar als we kijken naar je en we kijken naar de grenzen en of misschien is de grootte van de grootte van het zichtbare gebied en het project coördineert.

42
00:04:36,390 --> 00:04:56,240
Dus als we zoiets consul deed dat log view grootte die ik weer gewoon hier te vinden en vernieuw de pagina om te zien wat we krijgen we hoogte en breedte, zodat we die hoogte en breedte kan nemen.

43
00:04:56,380 --> 00:05:09,370
Dus je bent niet de grootte stip hoogte en vervolgens annuleert dat log je dat formaat te beginnen en we konden dat refresh gebruiken en ik prosequi.

44
00:05:10,020 --> 00:05:16,880
Momenteel is de opvatting dat de grootte is 692 door zevenhonderd.

45
00:05:17,100 --> 00:05:20,700
Maar als ik het formaat van dit zul je zien dat verandert de volgende keer.

46
00:05:20,730 --> 00:05:21,930
Persecutee.

47
00:05:22,240 --> 00:05:26,430
Dus we kunnen gebruiken om deze twee punten die we nodig hebben te genereren.

48
00:05:26,640 --> 00:05:38,570
Maar de andere ding dat we kunnen doen is er eigenlijk een ingebouwde methode die ik vond dat zal ons een willekeurige punten, dus ik zal je laten zien dat ook.

49
00:05:38,580 --> 00:05:50,340
Dus in plaats van om wiskunde te doen in willekeurige volgorde, die ons iets tussen 1 0 en 1 non-inclusive geeft en dan hebben we te vermenigvuldigen dat en verschuiving naar boven of naar beneden.

50
00:05:50,380 --> 00:05:51,960
Het is een soort van een soort van pijn.

51
00:05:52,170 --> 00:05:58,500
Dus wat we zullen doen in plaats daarvan is het gebruik maken van deze mooie papieren J S manier die ik vond ziet er als volgt.

52
00:05:58,500 --> 00:06:10,170
Dus ik zal een maximale punten te maken, zodat het maximale punt dat we een cirkel kan toevoegen aan gaat naar nieuw punt view dot grootte.

53
00:06:10,560 --> 00:06:15,700
En dan willen we met komma's die grootte dot hoogte.

54
00:06:15,720 --> 00:06:19,400
Dus x en y maximale X of maximum y.

55
00:06:20,160 --> 00:06:42,450
Dus dat maakt onze max punten en ik zal je laten zien als we een constante alt log Max punt daar gaan we en laten we eigenlijk onze kring toe te voegen aan max punt.

56
00:06:42,720 --> 00:06:47,720
Dus in plaats van het maken van een nieuw punt hier bij 100 Kamo 100 we zullen gewoon geef het Max punt.

57
00:06:47,940 --> 00:06:48,510
OK.

58
00:06:48,900 --> 00:06:54,350
Dus laten we proberen dat nu uit en te ontdoen van die naar de pagina te vernieuwen.

59
00:06:54,510 --> 00:06:55,870
Ik raakte een sleutel.

60
00:06:55,950 --> 00:06:58,580
Zien we krijgen een recht naar beneden hier in de rechter benedenhoek.

61
00:06:58,590 --> 00:07:06,390
En als ik het formaat en het opnieuw doen en ik raakte een sleutel krijgen we nu onze hoogste punt hier.

62
00:07:06,390 --> 00:07:29,940
Dus dit is mooi, want als die venster verandert als het zichtbare gebied op dit doek verandert ons maximale punt verandert dus we zijn niet altijd het genereren van een willekeurig getal tussen jij ons scherm dimensies of zelfs het raam grootte want zodra het zichtbare gebied het is zelfs niet de hele raam, maar slechts het zichtbare gebied op het doek verandert ons maximale punt verandert.

63
00:07:30,250 --> 00:07:32,740
OK dus hebben we dat.

64
00:07:33,150 --> 00:07:39,540
Nu wat we willen doen is dat de maximale punt en we gaan naar een willekeurig punt te genereren.

65
00:07:39,660 --> 00:07:53,090
Dus we noemen het willekeurig punt en er is een methode punt dot willekeurige en dat zal ons een willekeurig punt te geven tussen 0 en 1 non-inclusive net als mascotte Rande, behalve met één lijn.

66
00:07:53,130 --> 00:07:54,960
We krijgen een punt object.

67
00:07:55,480 --> 00:07:56,520
Dus het is eigenlijk om dit te doen.

68
00:07:56,520 --> 00:08:19,060
Nieuwe punten math dot willekeurige komma wiskunde dot willekeurig en dan willen we nemen dat een andere variabele die we gewoon punt bel te maken en het is gelijk aan max wijst keer willekeurig punt, net als dat.

69
00:08:19,120 --> 00:08:21,970
Dus we deze twee punten met elkaar te vermenigvuldigen.

70
00:08:22,650 --> 00:08:36,770
Het is een soort van een heleboel rare wiskunde maar in principe zijn we het genereren van een punt tussen 0 0 en 1 1, maar technisch gezien zou zijn punt 9 9 9 9 en ga zo maar door.

71
00:08:36,880 --> 00:08:50,500
Dus laten we zeggen dat we het genereren van een punt als uitgangspunt vijf komma vijf dan het volgende ding dat we doen is dat we onze max punt dat altijd de maximum dat we konden maken zal zijn.

72
00:08:50,550 --> 00:09:08,980
Dus zoiets als 12 80 720 of wat ons raam grootte is 600 bij 300 en dan vermenigvuldigen we ze bij elkaar en we eindigen met een nieuw punt, dat is in dit geval 300 komma 150.

73
00:09:09,000 --> 00:09:15,000
Dus dit is hoe we een max of een willekeurig punt dat bestaat op het zichtbare gebied kan genereren.

74
00:09:15,010 --> 00:09:17,550
Zijn ze op dit moment zichtbare gedeelte van het doek.

75
00:09:17,830 --> 00:09:23,660
OK dus nu laten we dit gewoon te veranderen, zodat het gaat om punten.

76
00:09:24,900 --> 00:09:26,960
Laten we nu eens een kijkje nemen vernieuwen.

77
00:09:26,980 --> 00:09:29,780
Hit een willekeurige toets en we eindigen met willekeurige cirkels.

78
00:09:29,790 --> 00:09:31,750
Elke keer dat u een toets indrukt.

79
00:09:32,340 --> 00:09:33,670
Whoops.

80
00:09:34,140 --> 00:09:38,650
En als ik het formaat van het venster laten we het halverwege over.

81
00:09:39,720 --> 00:09:42,970
Elke keer als ik druk op de toets we nog steeds zien.

82
00:09:43,000 --> 00:09:47,730
Dus het is geen punten meer dan hier het genereren van meer wat leuk is.

83
00:09:47,760 --> 00:09:59,030
Zodat als het venster gebeurt met de gebruiker formaat niet hoeft te vernieuwen nieuwe nieuwe zichtbare gebied naar soort berekende getallen.

84
00:09:59,350 --> 00:09:59,850
Oke geweldig.

85
00:09:59,860 --> 00:10:06,870
Dus dat is hoe we het genereren van een cirkel, die je al zien, maar het is hoe we het genereren van een cirkel, wanneer de gebruiker een toets een toets raakt.

86
00:10:07,200 --> 00:10:11,000
En we spraken over hoe je een willekeurig punt te maken in de volgende video.

87
00:10:11,080 --> 00:10:19,060
We zullen zien hoe we enkele eenvoudige animaties kunnen doen door eerst de kleuren van deze punten en het hebben van hen verdwijnen om verschillende tinten verschillende kleuren.

88
00:10:19,170 --> 00:10:21,450
En dan ook nog door het krimpen ze naar beneden.

89
00:10:21,580 --> 00:10:25,220
Dus we zullen zien dat de volgende video en dan gaan we terug te gaan en toe te voegen aan het geluid.