1
00:00:00,440 --> 00:00:00,840
D'ACCORD.

2
00:00:00,840 --> 00:00:01,770
Nous saluons le retour.

3
00:00:01,770 --> 00:00:07,420
Donc, comme je l'ai mentionné dans cette vidéo va effectivement commencer à travailler sur un clone d'attaque pour animaux de compagnie ici.

4
00:00:07,430 --> 00:00:23,520
Donc, la première chose que nous voulons faire est de trouver comment ajouter un cercle que nous avons effectivement déjà vu, mais nous voulons faire quelques choses à un cercle lorsque l'utilisateur touche n'importe quelle touche en fait dans mon cas je le fais seulement Pour ses enfants.

5
00:00:23,750 --> 00:00:25,730
Il fonctionne de la même manière pour toute autre clé.

6
00:00:25,800 --> 00:00:32,270
Donc, quand un utilisateur frappe la clé à un cercle, puis nous avons également besoin de comprendre l'animation de ce cercle.

7
00:00:32,610 --> 00:00:36,200
Et enfin, nous voulons ajouter ce cercle à une coordonnée aléatoire.

8
00:00:36,330 --> 00:00:41,890
Donc, pour commencer, nous allons juste frapper une clé et ajouter un cercle au milieu de l'écran.

9
00:00:42,570 --> 00:00:51,070
Donc allons-y au papier japes docs et jetez un oeil à l'interaction et regardez l'interaction du clavier.

10
00:00:51,690 --> 00:01:18,810
Et je sais qu'il semble bien que je ne savais pas où chercher ici, mais la première fois que je suis venu ici, il m'a pris beaucoup plus de temps pour trouver que je viens de passer par la plupart de ces et recherché clavier essaient essentiellement de dire que très probablement Si je faisais cela de nouveau par moi-même et je n'avais pas préparé pour cette vidéo, il aurait pris moi beaucoup plus de temps pour trouver que je pourrais avoir fait une recherche de toute façon, c'est le défilement vers le bas et juste regarder certains des exemples.

11
00:01:18,840 --> 00:01:27,910
Ce premier rapide ici pour se concentrer, puis appuyez sur certaines touches et il vous indique quelle touche a été pressé et quand il a été libéré ainsi.

12
00:01:28,350 --> 00:01:32,860
Donc, en ce moment, je presse K et puis le libérer.

13
00:01:33,150 --> 00:01:38,450
Et si vous regardez le code, il est vraiment facile juste sur la touche vers le bas et Anchia.

14
00:01:38,520 --> 00:01:46,670
Il n'y a donc pas de document sur l'auditeur de l'événement il n'y a pas d'auditeurs Jay queery événement derrière les scènes il est documenté à l'écoute des événements se passe.

15
00:01:46,920 --> 00:01:57,210
Mais pour le script papier, nous avons juste à écrire cette ligne super simple pour que nous puissions prendre en fait simplement copier cela fera la clé vers le bas pour notre application.

16
00:01:57,360 --> 00:01:59,070
Nous voulons que le son joue immédiatement.

17
00:01:59,070 --> 00:02:14,880
Alors que j'appuie sur la touche pas quand je suis sorti en pensant que c'est un peu plus lent, c'est comme un piano que lorsque vous frappez un piano ou le bruit, le son qui est généré est généré juste lorsque vous appuyez sur la touche ou juste après, pas quand Vous libérez.

18
00:02:15,240 --> 00:02:16,290
Donc Will fermer.

19
00:02:16,290 --> 00:02:21,440
J'ai copié cela et nous allons commencer par faire un nouveau cercle donc nous avons besoin de ce code.

20
00:02:21,630 --> 00:02:24,310
Mais nous voulons juste un alors nous n'avons plus besoin des boucles.

21
00:02:24,390 --> 00:02:30,870
Débarrassez-vous de cela et nous allons faire ce nouveau cercle sur clé vers le bas.

22
00:02:32,220 --> 00:02:39,360
Donc, ce processus est assez réaliste où vous prenez des morceaux différents et vous êtes juste genre de les assembler ensemble.

23
00:02:39,810 --> 00:02:42,440
Donc j'ai trouvé cela dans les documents sur la touche vers le bas.

24
00:02:42,840 --> 00:02:43,730
Vous pouvez vous en débarrasser.

25
00:02:43,860 --> 00:02:49,940
Et j'ai trouvé cela dans les documents aussi bien et nous avons besoin de changer ce X et Y ne sont pas définis.

26
00:02:50,010 --> 00:02:55,410
Alors faisons-le à 100 virgule 100 et faisons Phil couleur orange.

27
00:02:55,740 --> 00:02:58,380
Donc sur le bas exécuter ce code.

28
00:02:59,280 --> 00:03:04,410
Et encore, c'est très différent de ce que nous avons vu ou nous avons documenté un auditeur d'événement.

29
00:03:04,410 --> 00:03:07,260
Et puis nous devrions ajouter quelque élément.

30
00:03:07,410 --> 00:03:23,300
Donc, nous devrions faire comme le document point de sélecteur de requête un élément comme un point div ajouter l'écouteur d'événement et puis nous aurions à lui dire cliquez ou appuyez sur les touches ou clé.

31
00:03:23,400 --> 00:03:25,160
C'est beaucoup plus de code.

32
00:03:25,290 --> 00:03:28,950
Ceci est fait pour nous avec Paperchase vraiment simple.

33
00:03:29,010 --> 00:03:32,070
Alors, à la clé, voyons ce qui se passe.

34
00:03:32,310 --> 00:03:37,710
Je vais appuyer sur la touche et nous finissons avec un cercle et chaque fois que j'appuie sur 1, je reçois un autre cercle.

35
00:03:37,710 --> 00:03:39,210
Vous ne pouvez pas le voir.

36
00:03:39,690 --> 00:03:45,270
Maintenant, nous allons travailler sur ceci afin que nous ajoutons un cercle à un endroit aléatoire sur l'écran.

37
00:03:45,720 --> 00:04:06,170
Et la façon dont nous faisons cela m'a pris un peu de travail pour trouver que nous pourrions le faire nous-mêmes où nous générons deux nombres essentiellement de zéro jusqu'à la largeur maximale de notre écran, puis l'autre nombre de zéro jusqu'à Jusqu'à la hauteur maximale de notre écran.

38
00:04:06,570 --> 00:04:19,180
Et ce n'est pas trop de travail, mais nous devons trouver la largeur et la hauteur et les dimensions que si vous allez à Paperchase et si nous regardons où vous faites référence.

39
00:04:20,010 --> 00:04:23,220
Et puis quand c'est ouvert regardez en vue.

40
00:04:23,550 --> 00:04:27,080
Et encore une fois, je viens de trouver cela il ya quelques jours, j'ai pris un peu.

41
00:04:27,090 --> 00:04:36,390
Mais si nous vous regardons et nous regardons les limites et peut-être que c'est la taille de la zone visible et les coordonnées du projet.

42
00:04:36,390 --> 00:04:56,240
Donc, si nous avons fait quelque chose comme consul que la taille de la vue du journal que je viens de trouver ici et rafraîchir la page et de voir ce que nous obtenons, nous obtenons la hauteur et la largeur de sorte que nous pouvons prendre cette hauteur et la largeur.

43
00:04:56,380 --> 00:05:09,370
Donc, vous n'êtes pas la hauteur de point de taille et puis annuler que vous connecter que la taille commence avec et nous pourrions utiliser cette actualisation et je prosequi.

44
00:05:10,020 --> 00:05:16,880
Actuellement la vue que la taille est six cent quatre-vingt-douze par sept cents.

45
00:05:17,100 --> 00:05:20,700
Mais si je redimensionner, vous verrez que les changements la prochaine fois.

46
00:05:20,730 --> 00:05:21,930
Persécuteurs.

47
00:05:22,240 --> 00:05:26,430
Donc nous pouvons utiliser cela pour générer les deux points dont nous avons besoin.

48
00:05:26,640 --> 00:05:38,570
Mais l'autre chose que nous pouvons faire est qu'il ya effectivement une méthode intégrée que j'ai trouvé qui va nous faire des points aléatoires, donc je vais vous montrer que aussi.

49
00:05:38,580 --> 00:05:50,340
Donc plutôt que d'avoir à faire des mathématiques au hasard qui nous donne quelque chose entre 1 0 et 1 non inclusif et puis nous devons multiplier cela et le déplacer vers le haut ou vers le bas.

50
00:05:50,380 --> 00:05:51,960
C'est une sorte de douleur.

51
00:05:52,170 --> 00:05:58,500
Alors ce que nous allons faire à la place est d'utiliser ce joli papier J S chemin que j'ai trouvé ressemble à ceci.

52
00:05:58,500 --> 00:06:10,170
Donc, je vais faire un maximum de points de sorte que le point maximum que nous pouvons ajouter un cercle à va être nouveau point de vue taille de point.

53
00:06:10,560 --> 00:06:15,700
Et puis nous voulons avec une virgule que la hauteur de point de taille.

54
00:06:15,720 --> 00:06:19,400
Alors x et y sont maximum X ou maximum y.

55
00:06:20,160 --> 00:06:42,450
Donc, cela fait que nos points max et je vais vous montrer si nous faisons un constant alt log Max point là, nous allons et nous allons réellement ajouter notre cercle au point max.

56
00:06:42,720 --> 00:06:47,720
Donc au lieu de faire un nouveau point ici à 100 Kamo 100, nous allons juste lui donner le point Max.

57
00:06:47,940 --> 00:06:48,510
D'ACCORD.

58
00:06:48,900 --> 00:06:54,350
Alors essayons-le maintenant et débarrassez-vous de ceux pour rafraîchir la page.

59
00:06:54,510 --> 00:06:55,870
J'ai frappé une clé.

60
00:06:55,950 --> 00:06:58,580
Voyons, on en a un ici en bas à droite.

61
00:06:58,590 --> 00:07:06,390
Et si je redimensionner et de le faire à nouveau et j'ai frappé une clé, nous obtenons maintenant notre point maximum ici.

62
00:07:06,390 --> 00:07:29,940
Donc c'est bien parce que comme cette fenêtre change comme la zone visible sur cette toile change nos changements de points maximum, nous ne sommes pas toujours générer un nombre aléatoire entre vous connaissez nos dimensions d'écran ou même la taille de la fenêtre parce que dès que la zone visible Ce n'est pas même la fenêtre entière mais seulement la zone visible sur la toile change nos changements de point maximum.

63
00:07:30,250 --> 00:07:32,740
OK, nous avons cela.

64
00:07:33,150 --> 00:07:39,540
Maintenant, ce que nous voulons faire est de prendre ce point maximum et nous allons générer un point aléatoire.

65
00:07:39,660 --> 00:07:53,090
Donc, nous allons juste appeler le point aléatoire et il ya un point méthode point aléatoire et qui nous donnera un point aléatoire entre 0 et 1 non inclusif tout comme la mascotte Rande sauf avec une ligne.

66
00:07:53,130 --> 00:07:54,960
Nous obtenons un objet point.

67
00:07:55,480 --> 00:07:56,520
C'est donc essentiellement le cas.

68
00:07:56,520 --> 00:08:19,060
De nouveaux points maths point aléatoire virgule mathématique aléatoire de point et alors nous voulons prendre que font une autre variable que nous appelerons juste le point et elle est égale à des points max points le point aléatoire juste comme cela.

69
00:08:19,120 --> 00:08:21,970
Nous multiplions ces deux points ensemble.

70
00:08:22,650 --> 00:08:36,770
C'est une sorte de calculs bizarres, mais nous sommes en train de générer un point entre 0 0 et 1 1 mais techniquement ce serait 9 9 9 9 et ainsi de suite.

71
00:08:36,880 --> 00:08:50,500
Alors disons que nous générons un point comme point cinq point cinq, puis la prochaine chose que nous faisons est que nous avons notre point max qui sera toujours le maximum que nous pourrions faire.

72
00:08:50,550 --> 00:09:08,980
Donc quelque chose comme 12 80 par 720 ou quelle que soit notre taille de fenêtre est de 600 par 300 et ensuite nous les multiplier ensemble et nous finissons avec un nouveau point qui est dans ce cas 300 virgule 150.

73
00:09:09,000 --> 00:09:15,000
C'est ainsi que nous pouvons générer un maximum ou un point aléatoire qui existe sur la zone visible.

74
00:09:15,010 --> 00:09:17,550
Sont-ils actuellement zone visible de la toile.

75
00:09:17,830 --> 00:09:23,660
OK, maintenant, nous allons juste changer cela pour qu'il va à des points.

76
00:09:24,900 --> 00:09:26,960
Jetons un coup d'oeil maintenant rafraîchir.

77
00:09:26,980 --> 00:09:29,780
Frappez n'importe quelle touche et nous nous retrouvons avec des cercles aléatoires.

78
00:09:29,790 --> 00:09:31,750
Chaque fois que vous appuyez sur une touche.

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

80
00:09:34,140 --> 00:09:38,650
Et si je redimensionne la fenêtre, faisons-la à mi-chemin.

81
00:09:39,720 --> 00:09:42,970
Chaque fois que j'appuie sur la touche, nous la voyons toujours.

82
00:09:43,000 --> 00:09:47,730
Donc ce n'est pas générer des points ici plus ce qui est agréable.

83
00:09:47,760 --> 00:09:59,030
De sorte que si la fenêtre se produit pour redimensionner l'utilisateur n'a pas à rafraîchir pour obtenir une nouvelle zone visible pour obtenir une sorte de nombres calculés.

84
00:09:59,350 --> 00:09:59,850
D'accord! Super.

85
00:09:59,860 --> 00:10:06,870
C'est ainsi que nous générons un cercle que vous voyez déjà, mais c'est la façon dont nous générons un cercle lorsque l'utilisateur touche une touche n'importe quelle touche.

86
00:10:07,200 --> 00:10:11,000
Et nous avons parlé de comment faire un point aléatoire dans la prochaine vidéo.

87
00:10:11,080 --> 00:10:19,060
Nous allons voir comment nous pouvons faire des animations simples en changeant d'abord les couleurs de ces points et en les faisant fondre à différentes teintes de différentes couleurs.

88
00:10:19,170 --> 00:10:21,450
Et puis aussi en les rétrécissant.

89
00:10:21,580 --> 00:10:25,220
Donc, nous allons voir que la prochaine vidéo, puis nous allons revenir en arrière et ajouter dans le son.