Introduction au développement de jeux Javascript

1. 1 Introduction: Vous vous êtes déjà demandé comment créer des jeux 2D simples qui fonctionnent à l'intérieur du navigateur, alors cette classe est conçue pour vous. Puisque JavaScript est intégré à tous les principaux navigateurs, il est parfait pour créer des jeux basés sur un navigateur. Ce cours vous apprendra tous les concepts que vous devez connaître lors de la construction d'un jeu de style Pong, mettre tout en pratique. Ce cours n'est pas conçu pour aller trop loin ou si vous possédez des connaissances JavaScript existantes, il vous aidera vraiment à progresser. Nous allons essayer de couvrir tous les principaux concepts dont vous avez besoin pour créer jeux 2D de base à l'intérieur du navigateur, et pour cela, nous commençons par configurer HTML Canvas. Le Canvas est un moyen idéal pour dessiner à l'intérieur du navigateur. Il est parfait pour dessiner notre zone de jeu , comme la balle, les flaques d'eau. Nous pouvons également utiliser JavaScript pour les déplacer sur le Canvas. Mais en travaillant avec un Canvas, nous avons besoin d'un peu de connaissances de base sur le système de grille. Tout cela est également couvert dans cette classe. Mais ne vous inquiétez pas, c'est vraiment facile à décrocher. Nous examinerons toutes les fonctions de dessin de base telles que la façon de dessiner du texte, comment dessiner des lignes, comment dessiner des carrés et des rectangles, des cercles et la façon dont nous pouvons également appliquer la boucle pour pouvoir répéter processus qui font un jeu vraiment fluide. Nous examinerons également comment interagir avec notre jeu et déplacer des objets à l' aide du clavier. Bien sûr, quel genre de jeu de Pong serait complet ? Nous n'avons pas géré la balle qui rebondit sur divers objets. La balle doit rebondir de tous les côtés de notre jeu. Nous devons décrocher un score s' il touche un côté particulier. Nous devons rebondir sur les pagaies en mouvement. Tout cela est couvert dans cette classe. Vous n'avez pas besoin d'outils supplémentaires ou de faire des achats pour ce cours. Tout ce dont nous avons besoin, c'est d'un navigateur Web et d'un éditeur de texte gratuit. Si cela ressemble quelque chose qui vous excite et que vous voulez en savoir plus, sautez dans la classe et je vous verrai dans la première leçon où nous commencerons par configurer le Canvas HTML. 2. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de cocher une autre conférence. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets, ce qui vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe Vous pouvez même prendre du recul une fois que vous avez terminé le cours et revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare et je suis le seul à y jeter un coup d'œil, mais il inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 3. Configurer la toile HTML: Puisque nous créons un jeu 2D, nous avons besoin d'un moyen de créer différentes formes et différents éléments et de les placer sur l'écran. Pour ce faire, nous utiliserons fortement le canevas HTML5. Canvas n'est qu'un élément HTML comme une div ou même une image. Il a une balise d'ouverture et de fermeture, et à elle seule, il ne fait rien. Mais une fois que nous l'avons mis en place, nous pouvons utiliser l'API Canvas pour dessiner des graphiques. Nous pouvons également faire beaucoup plus pour les cas de surutilisation tels que manipulation de photos en changeant les pixels et les animations, pour n'en nommer que quelques-uns. Ce cours sera plus axé sur un graphisme 2D. De nombreuses autres API et bibliothèques sont également disponibles pour gérer les fonctionnalités 3D. Pour accéder à ces fonctionnalités 2D, l'API Canvas dispose d'une interface disponible appelée CanvasRenderingContext2D. Ce n'est pas quelque chose que vous devez mémoriser. Mais sachez simplement que c'est pourquoi nous avons accès aux fonctionnalités de dessin 2D sur le canevas en utilisant JavaScript. Ici, vous pouvez voir une sélection de certaines propriétés et méthodes auxquelles nous avons accès et qui nous permettront de dessiner sur le canevas. Vous en verrez d' autres pendant le cours. Passons maintenant à l'éditeur de texte et mettons en place un nouveau projet. Tout d'abord, nous avons besoin d'un nouveau dossier de projet pour stocker tous nos fichiers à l'intérieur. Laissez-moi appeler ce jeu, tout ce que vous voulez, mais je veux appeler ce jeu et cliquer sur « Entrer ». Ouvrez Visual Studio Code. Si vous préférez, vous pouvez utiliser un autre éditeur si vous le souhaitez. Faites glisser ça. Ensuite, nous avons besoin de deux nouveaux fichiers pour commencer. Le premier que vous pouvez cliquer sur l'icône Nouveau fichier juste ici, cela créera un nouveau fichier. Je vais appeler ça le index.html. Le deuxième fichier dont nous avons besoin sera pour notre script, le script.js. Cela va gérer toutes nos fonctions de dessin dans notre code de jeu. Reprenons à zéro dans notre index.html. À l'intérieur, Visual Studio Code dispose d'un raccourci pratique appelé html:5, qui nous donnera toute notre structure HTML de base. Le titre est le même. Nous n'avons pas besoin de beaucoup de contenu à l'intérieur de la section du corps, mais la première chose dont nous avons besoin, c'est le canevas. Comme mentionné précédemment, la toile comporte les étiquettes d'ouverture et de fermeture. Si nous l'enregistrons et que nous l'ouvrons dans le navigateur, vous ne verrez pas encore de contenu à l'écran. Si nous copions la page d'index du chemin, collez-la dans, vous ne voyez aucun contenu dans le navigateur. Pour réellement voir le canevas, nous devons dessiner des objets à l'intérieur de notre fichier JavaScript ou ajouter un peu de style à l'intérieur pour rendre notre canevas plus visible. Sur le style, tout ce que nous voulons faire à l'intérieur est de saisir notre toile, définir une couleur d'arrière-plan pour rendre cela plus visible. Vous pouvez faire cela n'importe quelle couleur que vous voulez , mais je vais opter pour une valeur RVB. Le rouge de 61 et 59 pour le vert et le bleu. Cela nous donnera cette couleur de fond plus foncée. Nous pouvons maintenant voir le canevas à l'intérieur du navigateur. Vous pouvez voir par défaut qu' il s'agit d'une toile assez petite. Par défaut, le canevas sera rendu 300 pixels de large et de 150 pixels de hauteur. Nous pouvons remplacer cela à l'intérieur de notre script. Pour le faire au centre, nous pouvons le faire comme nous le ferions avec d'autres éléments HTML habituels. abord, définissez le type d'affichage sur la valeur du bloc. Ensuite, nous pouvons définir la marge sur zéro en haut et en bas, puis automatiquement à gauche et à droite. Enregistrez et actualisez, et cela apparaîtra maintenant à l'intérieur du centre car j'ai automatiquement divisé l'espace à gauche et à droite. La dernière chose à faire à l'intérieur de notre page d'index, juste en dessous du canevas, est le lien de notre fichier de script. Placement de la source qui pointe vers notre script.js. Ensuite, nous pouvons passer à ce fichier pour ajouter du contenu. La première chose que nous devons faire à l'intérieur d' ici est de saisir réellement notre élément de toile. Nous le faisons comme nous le ferions avec n'importe quel autre élément HTML. Nous avons accès à nos éléments en utilisant des éléments tels que QuerySelector, GetElementByID, GetElementByClassName, et nous pouvons stocker cela à l'intérieur d'une constante appelée canevas. Pour cet accès, le document complet, je vais utiliser QuerySelector passant dans notre élément canevas. Maintenant, cela stocke notre référence à nos éléments à l'intérieur de cette variable ou constante. Nous pouvons maintenant y accéder juste ci-dessous. Commencez par remplacer cette valeur par défaut, soit une taille de 150 x 300 pixels. Prenez notre toile. Nous pouvons définir la largeur de cet élément sur n'importe quelle valeur souhaitée. Disons 800. Ensuite, la hauteur de 400. Cela devrait maintenant être mis à jour à l'intérieur du navigateur. La dernière chose que nous devons faire à l'intérieur de ce fichier est d'accéder aux fonctions de dessin 2D des toiles avec GetContext. Nous pouvons stocker cela à l'intérieur d'une constante appelée ctx, saisir nos éléments de canevas, puis appeler une méthode appelée GetContext. Transmission d'une chaîne de 2D pour nous donner accès aux fonctions de dessin 2D. Le nom constant de ctx dépend de nous, mais il s'agit d'une convention de dénomination courante pour accéder au contexte de rendu, et cette constante peut maintenant être utilisée pour dessiner sur le canevas lorsque nécessaire. Nous l'utiliserons beaucoup tout au long de ce cours. Cette toile est maintenant prête à dessiner également. Mais juste avant de le faire, dans la vidéo à venir, nous allons examiner comment travailler avec les grilles et les coordonnées, ce qui nous aidera vraiment à comprendre l'emplacement de nos objets sur la toile. 4. Grilles et codes: Nous n'allons pas trop loin vers le Canvas, si nous ne comprenons pas d'abord certaines coordonnées de base. Vous comprenez peut-être déjà certains de ces éléments, et nous n'avons pas besoin d' aller trop loin, mais sinon, nous allons maintenant faire un récapitulatif rapide. Lorsque nous le dessinons sur le Canvas, ou en fait, la plupart des systèmes de grille 2D, nous avons deux directions que nous devons connaître. Il s'agit de l'axe X et de l'axe Y, x est horizontal de gauche à droite, et y est vertical de haut en bas. qui signifie que si vous vouliez localiser le coin supérieur gauche de cette grille, x et y, seront tous les deux zéro, mais qu'en est-il de quelque chose comme ce carré de nombreuses formes comme celle-ci ? Bien qu'il occupe plusieurs espaces de grille, l'emplacement de départ est en haut à gauche. C'est ici que nous avons ce point rouge. Encore une fois en haut à gauche de cette grille, nous traverserons trois espaces sur l'axe des X et deux espaces sur l'axe Y, ce qui nous donne notre position de départ. Après cela, une fois que nous avons notre position de départ dans le coin, nous pouvons définir la hauteur et la largeur de n'importe quelle forme que vous souhaitez. C'est tout ce que vous devez vraiment savoir pour commencer. Nous pouvons ensuite définir la taille des graphiques et faire d'autres choses lorsque nous les créons également. C'est ce que nous allons faire à venir. 5. Dessiner la toile: Pour vous aider à dessiner sur le canevas, j'ai créé un téléchargement que vous pourrez utiliser pendant ce cours et également à l'avenir. Il vous suffit d' accéder à ce lien que vous pouvez voir à l'écran, télécharger le PDF et de le conserver en lieu sûr. Jetons maintenant œil à notre script et un coup d'œil à notre script et voyons comment nous pouvons utiliser certains d'entre eux. Dans la vidéo des coordonnées précédemment, nous avons examiné un exemple de dessin d'un carré. Commençons par ça. Notez également que les carrés et les rectangles utilisent la même méthode de dessin. Nous venons de modifier les valeurs de largeur ou de hauteur Pour dessiner un rectangle ou un carré à l'aide du canevas, nous devons d'abord accéder à notre variable de contexte, donc ctx, et ceci a une méthode. disponible appelé FillRect. Cela remplira un rectangle d' une couleur unie ou même d'un dégradé. Nous allons analyser les différentes valeurs de l' année 4. Tout comme nous l'avons vu avec la vidéo des coordonnées précédemment, les deux premières valeurs sont l'emplacement où nous voulons placer ce rectangle. Puisque cela est basé sur le coin supérieur gauche du rectangle ou du carré, je veux commencer cet exemple en montrant cela en haut à gauche. La partie supérieure gauche sera x, 0 et y, 0. Ensuite, nous analysons la largeur et la hauteur que nous voulons que la forme soit. Pour en faire un carré, nous pouvons analyser certaines valeurs égales comme 100. Cela placera un carré de 100 x 100 pixels en haut à gauche de notre toile. Nous pouvons également faire passer cela sur l'axe des X ou l'axe Y, n'importe quelle valeur souhaitée. Si nous modifions l' axe des Y pour qu'il soit 50, cela le poussera plus loin dans le canevas. En plus de la méthode FillRect, nous pouvons également modifier cette méthode pour être un trait, donc StrokeRect. Plutôt que de remplir une couleur unie comme nous le voyons, trait placera un contour autour de la forme. Cela nous donnera le contour d'un rectangle ou d'un carré. Pour la plupart des choses que nous dessinons sur la toile, aurons un trait ou une alternative de remplissage. Je vais juste changer ça pour être rempli. Nous pouvons également créer un rectangle en modifiant la hauteur ou la largeur. Si nous changeons cette valeur par 200, par exemple, cela nous donnera un rectangle. Par défaut, nous aurons cette couleur noire unie. Nous pouvons modifier cela en accédant à une propriété dans ce contexte appelée FillStyle, juste au-dessus de FillRect, encore une fois, accédez à notre contexte comme nous le ferons avec toutes ces entités de dessin. Nous pouvons accéder à la propriété FillStyle. FillStyle va être égal à une chaîne et la définir à une couleur telle que le rouge. Si nous actualisons le navigateur, couleur d'arrière-plan sera désormais mise à jour. Si nous utilisions le StrokeRect au lieu de remplir comme nous l'avons vu auparavant, pour faire le contour, nous devrions également mettre à jour pour qu' il corresponde à StrokeStyle. Cela modifiera la couleur du contour pour qu'elle soit rouge. Il suffit d'annuler ces deux modifications et de partir comme remplissage. Comme vous pouvez vous y attendre, ces rectangles seront utiles à l'intérieur de notre jeu. Nous pourrions les utiliser pour dessiner le joueur et aussi la pagaie de l'ordinateur, qui sera utilisée pour frapper la balle. Allons y aller en commençant par les joueurs qui pagaient sur la gauche. Pour commencer, comme nous avons un canevas de 400 pixels de hauteur, nous pouvons commencer par le placer au centre en modifiant la valeur Y à 200. La largeur de la toile, définissons la valeur de huit et la hauteur de 80. Actualisez. Vous vous attendez à ce que la pagaie soit au milieu puisque nous avons défini cette valeur Y à 200, soit la moitié de la hauteur. Mais comme nous l'avons déjà appris, la position de départ des coordonnées x et y se trouve dans la position supérieure gauche de notre forme, ce qui signifie que le haut de la forme se trouve au centre de la toile plutôt que dans le au centre de notre rectangle. C'est ici que nous devons commencer à réfléchir plus attentivement aux choses. Pour que la pagaie soit correctement au centre de la toile, il faut maintenant déduire la moitié de la hauteur de la pagaie. Comme nous savons que la hauteur de la pagaie est de 80 pixels, nous pourrions en déduire 40 de la position de départ. Cela fonctionne, mais une meilleure option serait de modifier ces valeurs pour utiliser des variables. Les variables seraient alors utilisées pour effectuer ce calcul pour nous, et il serait également utile à l'avenir de modifier l'une ou l'autre de ces valeurs. Juste les deux, nous pouvons créer des variables. La première est la largeur de la palette utilisant les mêmes valeurs, donc la largeur de huit pixels. Ensuite, le second concerne la hauteur de la pagaie. La hauteur de la palette est de 80 pixels, comme nous l'avons déjà fait. Nous pouvons ensuite les utiliser dans notre méthode FillRect. La largeur de la pagaie, également la hauteur, et cela devrait toujours fonctionner exactement de la même manière. Mais maintenant, au lieu de coder en dur cette valeur de 160, ce que nous allons maintenant faire est de calculer cela à l'aide de JavaScript. Nous pouvons saisir la hauteur du canevas, qui est actuellement de 400 pixels, diviser celle-ci par deux pour obtenir le centre qui nous donne actuellement la valeur de 200. Mais comme nous le savons, 200 ne le placeront pas au centre de la toile. Nous devons également déduire la moitié de la hauteur de la pagaie, donc toile.hauteur divisée par 2. Je retirerai également la hauteur de la pagaie divisée par deux. Ce que nous avons ici est exactement le même qu'avant. Nous avons la valeur de 200, à emporter 40. C'est exactement la même chose qu'avant, mais en utilisant des variables. Enregistrez et rafraîchissez. Maintenant, pour la pagaie de l'ordinateur, qui va être terminée sur la droite, et tout cela devrait ressembler, il suffit de changer la position x pour être sur la droite. Nous pouvons également modifier le FillStyle pour qu'il soit une couleur différente. En descendant, tout le code aura désormais une couleur différente en changeant le FillStyle. Allons-y pour le bleu. Ensuite, nous utilisons CTX.FillRect. Comme mentionné précédemment, la seule différence entre la pagaie des joueurs et la pagaie de l'ordinateur est que nous voulons pousser sur le côté droit. La pagaie des joueurs a l'emplacement de départ x de zéro, qui est terminé sur la gauche. Ce que nous voulons faire pour la version de l'ordinateur, c' est placer cela sur la droite en accédant au canvas.width, qui est actuellement égal à 800. Mais comme cette position de départ est basée sur le haut à gauche du rectangle, cela pousserait cette position hors du bord de la toile. Ce que nous devons faire, c'est de ramener cela en déduisant la largeur de la pagaie. Les trois dernières valeurs sont exactement les mêmes que ci-dessus. Cela va commencer au centre. Nous pouvons l'utiliser, et la largeur et la hauteur de la pagaie ont également été définies. Prenez les trois, ajoutez-les juste après la virgule, en nous laissant deux pagaies maintenant en place à l'écran. La prochaine chose que nous devons dessiner, c'est une balle. Vous vous attendez peut-être à une méthode appelée FillCircle ou quelque chose du genre. Mais pour les cercles, nous utilisons une méthode appelée arc. Encore une fois, dans le contexte, appelez la méthode arc. Il est utilisé pour créer un arc ou une courbe. Nous pouvons former un cercle en faisant pivoter cette courbe tout autour de la position de départ. Contrairement à un rectangle, étant donné qu'un arc est courbé, la forme ne possède pas d'angle supérieur pour le localiser. Au lieu de cela, nous le localisons près du centre. Pour le placer au milieu de la toile, nous pourrions faire quelque chose comme ça. Nous pourrions accéder au canvas.width diviser par 2. Ceci est placé au centre de l'axe X. Ensuite, la même chose pour la hauteur. Mais nous n'avons pas encore fini. Vient ensuite le rayon du cercle, qui correspond à la dimension du centre du cercle jusqu'au bord très extérieur. Fondamentalement, la moitié de la largeur du cercle. Mettons-le en 50, séparé par une virgule. La valeur suivante dans sens des aiguilles d'une montre est le début et l'angle de fin. Pour commencer cela verticalement à 12h00, nous commençons par la position zéro. Pour que la position de fin le fasse pivoter tout autour et créer un cercle, nous devons le faire pivoter de 360 degrés. Mais lors de l'utilisation de la méthode de l'arc, cette rotation se fait en radians et non en degrés. L'équivalent de 360 degrés en radians est 2 fois math.pi. C'est ainsi que nous pouvons le faire en utilisant JavaScript. Maintenant, si nous sauvegardons cela et actualisons le navigateur, nous ne voyons actuellement aucun cercle sur le canevas. Nous ne voyons pas encore notre cercle sur la toile, car nous devons d'abord déclarer si nous voulons que ce cercle soit un remplissage ou un trait. Nous pouvons le faire avec ctx.fill. C'est une méthode, donc nous avons besoin des supports juste après. Actualisez. Cela va maintenant remplir notre cercle d'une couleur de fond unie. Comme on peut s'y attendre, nous pourrions également utiliser la méthode du trait pour nous donner le contour de notre cercle. Je vais garder ça plein. Changez également la couleur de remplissage juste au-dessus à l'aide FillStyle et définissez cette couleur sur gris. Puisque 2 fois Math.pi est un cercle complet, vous pouvez probablement deviner que la moitié de cette valeur est un demi-cercle, donc plutôt que de la chronométrer par deux, on peut simplement dire math.pi. Ce sera un demi-cercle. Encore une fois, si vous voulez qu' il s'agisse d'une ligne, vous pouvez modifier cette ligne en un trait. Vous pouvez également réduire ou augmenter la valeur de Math.pi. Si nous divisons la valeur de Math.pi par 2, cela nous donnera alors un quart de cercle. Comme vous pouvez l'imaginer, cet arc est une méthode assez polyvalente. Mais comme nous avons besoin d'une balle, je vais rétablir pour être deux fois Math.PI, comme nous l'avions fait auparavant. Nous pouvons également modifier cette couleur pour obtenir une couleur de remplissage, ainsi qu'un rayon de boule plus petit de 10 pixels. Ce n'est qu'un premier regard de base sur le dessin sur la toile. Comme on peut s'y attendre, il y a beaucoup plus à apprendre et beaucoup d'autres choses que vous pouvez faire. Nous commencerons à regarder quelques-uns de ces éléments dans la vidéo à venir. 6. Texte, lignes et chemins: suite de la vidéo précédente, nous allons maintenant découvrir d' autres techniques que nous pouvons utiliser pour dessiner sur la toile, dessiner des lignes et aussi du texte. Cela va être très pratique pour notre jeu. Je vais commencer par dessiner des textes sur le Canvas qui servira à dessiner le score de l'utilisateur et à inviter l'utilisateur à commencer le jeu. Les textes de dessin sur le Canvas nous ont à la fois un contour, mais un contour, et le FillText, ou une couleur unie. Commençons par le bas de notre script. Accédez au contexte et nous commencerons par FillText. Pour FillText, la première chose que nous devons ajouter est une chaîne, c' est-à-dire le texte que nous voulons afficher, donc hé, suivi des positions x et y où nous voulons le placer. Allons-y pour 150. Enregistrez et rafraîchissez. Nous pouvons à peu près voir ce petit texte sur la toile, mais c'est vraiment difficile à voir car la taille par défaut est 10 pixels avec une police sans empattement. Mais nous pouvons bien sûr changer cela dans notre JavaScript. Tout d'abord, modifions le FillStyle pour qu'il soit égal à n'importe quelle couleur telle que rouge et aussi pour modifier la taille ainsi que la famille de polices. Nous pouvons accéder à ctx ou à la police. Définissez cette valeur égale à une chaîne. Cela prend exactement la même syntaxe que celle que nous ferions avec la propriété CSS on afin que nous puissions transmettre une chaîne de la taille du pixel. Allons pour 30 et ensuite la famille de polices Helvetica. Rafraîchissez et cela prend effet. Ce qui serait bien d'avoir, c'est le score du joueur affiché des deux côtés de la toile. Si nous avions le score du joueur au milieu de la moitié gauche et le score de l'ordinateur au milieu de la moitié droite. Pour simuler cela pour le score du joueur, nous devons effectivement nous pousser dans un quart de la largeur de la toile. Pour simuler un score, nous pouvons simplement placer n'importe quelle valeur à l'intérieur d'ici, par exemple trois, puis pousser plus d'un quart de la largeur. Nous pouvons d'abord saisir la toile, cette largeur et la diviser par 4. Le score informatique doit être aux trois quarts du chemin à travers le Canvas et nous pouvons dupliquer cela. Changez le score pour l'instant. Mais plutôt que de diviser le Canvas par 4, nous allons multiplier cela par 0,75, poussant notre texte aux trois quarts du chemin travers le Canvas. Enfin, nous pouvons également stocker ces deux valeurs dans des variables afin de pouvoir y accéder et les utiliser plus tard dans le cours. Retour en haut, en utilisant LET pour que nous puissions les mettre à jour au fur et à mesure que le jeu progresse. La première variable est le score du joueur. Nous avons une valeur initiale de 0, suivie du score de notre ordinateur. Ces variables peuvent désormais être utilisées dans notre méthode FillText. Supprimez la valeur codée en dur, et c'est le score du joueur. Le second est le score de l'ordinateur. Une autre chose que Canvas nous donne est la possibilité de dessiner à l'aide de lignes. Nous avons deux méthodes utiles disponibles, appelées outil de déplacement et outil de ligne. Jetons un coup d'œil à ces questions. CTX.MoveTo et CTX.LineTo. Le premier de Move to est utilisé pour passer à la position de départ, puis ligne vers est ce qui permet de tracer une ligne sur la toile jusqu'à la position finale que nous avons définie. Se déplacer vers, c' est comme retirer le stylo papier et le déplacer vers une certaine position. ligne vers est utilisée pour dessiner la ligne. Ce que je vais utiliser, c'est de dessiner une ligne centrale verticalement sur la toile et aussi le cercle central. abord, commençons par cette ligne verticale et nous devons d'abord déplacer la position du stylo pour être au centre de la toile et en haut. Les valeurs pour cela, tout d'abord, pour x sont la moitié de la largeur de la toile et la position y est 0, car nous voulons garder cela tout en haut. Déplacez-vous dépendant pour être dans cette position juste ici. Maintenant, nous devons utiliser la méthode line to. Tracez en fait une ligne jusqu'à l'emplacement final, qui est en bas, en passant à l' emplacement final, ce qui est toujours au centre de la toile afin que nous puissions saisir la largeur de la toile divisée par 2 et la position Y finale est en bas. C'est la toile. Hauteur. Cela définira ensuite l'endroit où nous voulons dessiner notre ligne mais se place réellement sur le Canvas, nous devons utiliser la méthode du trait, donc ctx.stroke et il y a une ligne du haut vers le bas. C'est vraiment bien, mais si nous regardons de près, nous avons également une ligne indésirable supplémentaire autour de cette balle. Cela se produit parce qu' à l'heure actuelle, nous n' avons aucune séparation entre tous ces chemins Canvas et les graphiques que nous avons créés. Par exemple, juste au-dessus, nous avons dessiné un cercle à l'aide de la méthode du film. Nous avons dessiné ceci, comme vous vous y attendiez avec cette couleur grise, mais le code continue de fonctionner jusqu'au bas et il dessine également le même cercle en utilisant la méthode du contour. C'est pourquoi la balle a un remplissage et un contour du trait jusqu'à. Lorsque cela se produit, nous pouvons séparer chacune de ces sections à l'aide d'une méthode appelée chemin de début. Nous appellerons cela juste au-dessus notre ligne avec ctx.beginpath. chemin de début effacera efficacement tous les Le chemin de début effacera efficacement tous les chemins existants au-dessus et commencera à partir de cette ligne. Enregistrez et actualisez et maintenant notre ligne a été retirée du cercle, ne laissant que la ligne verticale que nous voulions ainsi que cette ligne solide. Nous pouvons également modifier cette ligne en pointillés. Nous pouvons le faire juste avant de tracer notre ligne avec ctx.setlinedash. Set line dash est une méthode qui prend en compte un tableau à l'intérieur de ce tableau JavaScript, nous définissons la taille de telle sorte que les tirets et les espaces entre chacun d'entre eux. Si nous avons fait quelque chose comme ça, 10 , 20, 20 et 30, cela définira toutes les valeurs de nos tirets et espaces afin que nous ayons la taille du premier tiret, la taille du premier espace, le la taille du deuxième tiret, la taille du deuxième espace, puis la taille du troisième tiret puis elle se répète jusqu'à la fin de la ligne. Dix pixels pour la première ligne, puis 10 pixels pour le premier écart, puis nous passons à 20, puis 30. Pour que cela reste simple, je vais juste passer une seule valeur de 6, ce permettra de s'assurer que chacun de nos espaces ainsi que nos tirets sont en valeur égale. La dernière chose à dessiner, c'est un cercle central. Nous savons dessiner un cercle en utilisant la méthode de l'arc. Mais cette fois, nous allons également définir une ligne pointillée tout en bas et nous commencerons une nouvelle section avec ctx.beginpath. Pour notre cercle, ctx.arc. Tout comme notre position de balle de départ, nous devons placer cela au milieu de la toile avec toile. Largeur divisée par 2 et également la même hauteur pour la hauteur. Prends ça, colle-les dedans. La troisième valeur est le rayon et puisque nous avons une boule de 10, faisons de cette valeur une valeur de 20. Pour le cercle, la position de départ est 0 et un cercle complet est 2 fois math.pi. Dessinez le cercle dont vous avez besoin pour appeler la méthode du trait en laissant notre cercle central maintenant en place sur la toile. C'est la plupart de ce dont nous avons besoin pour nos jeux lors fonctions de dessin, et la grande partie de l'utilisation variables comme celle-ci est que nous pourrons mettre à jour ces valeurs pour déplacer nos objets sur le Canvas. 7. Looping: bouclage va être un élément très important déplacer les choses à l'intérieur de notre jeu. Si vous y réfléchissez actuellement, nous dessinons actuellement des choses comme une balle et les pédales sur l'écran. Mais ce que nous devons faire, c'est de mettre à jour ces valeurs pour les déplacer dans une autre direction, puis nous devons continuellement redessiner et répéter cela à l'aide d'une boucle. C'est ce que nous allons examiner maintenant. Au bas de notre script, la première chose à faire est de créer une fonction que vous souhaitez répéter en boucle. Vous pouvez donner n'importe quel nom de votre choix, je vais m'en tenir à la boucle celui-là. Le but de cette fonction est de dessiner à plusieurs reprises autographies telles que la balle et les pagaies après avoir bougé leur position. Pour l'appeler, nous pouvons utiliser une méthode JavaScript appelée SetInterval. SetInterval répétera notre fonction de boucle après quelques millisecondes. Nous appelons cela tout en bas, cela va prendre en compte deux choses, la première chose est la chose que nous voulons répéter, et dans notre cas, c'est notre fonction de boucle. Nous le transmettrons, suivis d'un délai en millisecondes. Définissons actuellement cette valeur sur 15, et vous pouvez l'augmenter pour le jeu le plus lent et le réduire pour une partie plus rapide. Cette fonction de boucle finira par répéter plusieurs parties de notre code que nous avons ci-dessus, mais pour l'instant, placons dans un simple journal de console pour que nous puissions vérifier que cela fonctionne. Donc, n'importe quel texte à l'intérieur d' ici, enregistrez-le, et maintenant nous pouvons aller dans la console et vérifier notre SetInterval appelle notre fonction, inspecte, saute dans la console, et maintenant si nous actualisons, on peut voir que c'est ce qu'on appelle toutes les 15 millisecondes. Commençons par remplacer ce journal de console par notre balle. Pour dessiner notre balle, nous pourrions couper et coller le code que nous utilisons pour dessiner notre balle, qui est la méthode ctx.arc. Ou plutôt, nous pourrions envelopper cela dans une fonction et l'appeler directement. Juste au-dessus de cela va créer une nouvelle fonction appelée DrawBall. Cela va emballer tout notre code juste en dessous. Ouvrez les supports bouclés comme ceci, puis nous pouvons couper et coller et déplacer cela directement à l'intérieur de notre fonction. Maintenant, nous pouvons appeler notre fonction DrawBall depuis l'intérieur de notre boucle, remplacer le journal de la console, passer notre fonction DrawBall, et nous l'appellerons toutes les 15 millisecondes et actualiserons le navigateur. Quelques choses à noter ici, la première chose que vous remarquerez, c' est que notre balle est maintenant trop grosse. Nous semblons avoir un conflit entre les chemins que nous dessinons à nouveau, qui peut être corrigé avec CTX.BeginPath. Je vais ajouter cela à l'intérieur de notre fonction DrawBall, actualiser et cela corrige maintenant notre premier problème. Le prochain problème est que le ballon ne bouge pas encore. On peut s'y attendre car même si nous avons tiré cette balle à plusieurs reprises toutes les 15 millisecondes, nous l'avons toujours dessinée au même endroit. Dans la fonction DrawBall, nous avons toujours dessiné cela au centre, et nous pouvons modifier ces deux valeurs avec des variables que nous pouvons mettre à jour. Pour la largeur, qui est l'exposition, nous le remplacons par BallX et Bally pour la position Y. Nous voulons toujours que ces deux variables soient initialement au centre du canevas. Tout d'abord, BallX, il sera égal à la largeur du canevas divisée par 2. Placez-le d'abord au centre, puis pour Bally juste en dessous, nous diviserons la hauteur de la toile par 2. Comme nous nous y attendions si nous sauvegardons et actualisons, nous ne voyons pas encore de mises à jour car nous devons réellement mettre à jour les valeurs de BallX et Bally chaque fois que la trame a été répétée. Nous pouvons le refaire dans notre fonction DrawBall une fois que cela a été dessiné. Dès que nous passerons à la boucle suivante, nous mettrons à jour la valeur de ces deux variables , plus 2. De plus, nous ajouterons la valeur de deux à notre variable BallX, puis mettrons à jour la variable, Bally est égale. Nous allons rester court car nous n'avons pas autant de problèmes sur l'axe des Y, donc la valeur de un est correcte. Rafraîchissez ça. Nous allons maintenant voir le ballon voyager sur la toile. Ceci est en cours de mise à jour, mais nous avons toujours cette piste solide sur la toile puisque la position précédente du ballon doit être retirée. Nous pouvons résoudre ce problème avec une méthode de canevas appelée ClearRect, qui effacera tous les dessins existants de la toile avant de redessiner notre boule jusqu'à notre boucle, la placer au début, juste avant que nous répété pour appeler notre fonction, en passant ClearRect, qui est disponible dans le contexte. Si nous voulons avoir la possibilité de supprimer uniquement de petites pièces ou une section particulière du canevas, dans notre cas, nous effacerons le canevas complet. abord, nous passons à l'emplacement de départ situé en haut à gauche, qui correspond à la coordonnée 0, 0, puis nous effacons toute la largeur et la hauteur totale. Tout d'abord, en passant canvas.width, séparé par une virgule, canvas.height, et remplacez-le à nouveau par de petites valeurs. Si vous voulez simplement retirer une petite partie du canevas sur le navigateur, la balle se déplace désormais comme prévu sans quitter cette piste solide. Allez au ballon, bougez maintenant comme prévu, et nous ne voyons rien d'autre sur la toile depuis que nous l'avons effacé avec ClearRect. Nous effacons le canevas à chaque fois, nous appelons cette fonction de boucle. Ce que nous devons faire, c'est saisir nos fonctions de dessin haut et les déplacer dans notre boucle. De plus, l'avantage supplémentaire de toutes ces fonctions de dessin étant dans la boucle est que très bientôt nous allons mettre à jour la position de la palette avec un clavier, ce qui mettra également à jour la position sur la toile de chaque boucle. Mais pour l'instant, nous allons aller à l' endroit où nous dessinons nos formes, et nous ferons la même chose qu'avec la balle, qui consiste à envelopper tout le code pertinent dans une fonction autonome. On peut donc l'appeler de l'intérieur de notre boucle. abord, la fonction de dessin était la pagaie du joueur, qui se trouve juste en dessous de nos variables. Découpez cela et créez une nouvelle fonction appelée DrawPlayerPaddle, collez-la à nouveau dans notre fonction. Le second est de dessiner une pagaie d'ordinateur, et c'est pour toute la section bleue. Découpez cela et créez notre nouvelle fonction appelée DrawComputerPaddle. Encore une fois, collez notre code, fonction DrawBall est toujours en place. Le suivant était FiltText, et il s'agit de dessiner la partition sur le canevas. Découpez cela, créez une nouvelle fonction appelée DrawScore, puis collez-la dans le corps. Les deux sections suivantes servent à dessiner nos lignes sur le canevas. Celui-ci était destiné à la ligne médiane et aussi au cercle au milieu. Nous allons les placer dans une seule fonction appelée DrawCanvas. Collez ça dans. Maintenant, nous pouvons appeler toutes ces nouvelles fonctions depuis notre boucle : DrawPlayerPaddle qui était la première, suivi de DrawComputerPaddle, DrawScore et enfin DrawCanvas. Essayons cela, voyons le navigateur. Maintenant que nous avons effacé notre rectangle avec la balle, toutes les autres fonctions de dessin fonctionnent maintenant. Comme on peut s'y attendre, il s'agit d'une partie très importante de notre jeu et d'un grand pas dans la bonne direction. À la prochaine leçon, nous examinerons comment utiliser le clavier pour déplacer les joueurs vers le haut et vers le ballon. 8. Déplacer des objets avec le clavier: Nous arrivons maintenant à la partie amusante où nous pouvons réellement faire bouger les choses sur le Canevas à l'aide de commandes telles que la souris ou le clavier. Le but de cette vidéo est d' écouter lorsque l'utilisateur appuie sur le bouton haut ou bas du clavier, puis nous allons déplacer les utilisateurs à la pagaie. Nous pouvons faire tout cela avec JavaScript normal. Pour le moment, nous avons ce joueur pagayer sur la gauche. Si nous allons à la fonction Draw Player Paddle , qui contrôle cela, juste ici, nous pouvons voir avec l'emplacement des coordonnées x et y. Bien que cela soit terminé sur la gauche car nous avons la valeur x à 0 et que la valeur y est définie pour être au centre. Pour mettre à jour notre palette avec le clavier, nous devons remplacer cette valeur Y par une variable. Pour le maintenir positionné au centre plutôt qu'en haut à gauche, nous pouvons toujours maintenir cette hauteur de collage divisée par 2. Mais la hauteur de la toile divisée par 2 peut être remplacée par une variable appelée position du joueur. Une position devra être créée en haut avec le reste de nos variables. Nous utilisons let car cela doit être mis à jour. Position de jeu et définissez cette valeur égale à la hauteur de la toile divisée par 2. Pour commencer, cela laissera notre joueur au centre de la toile, comme avant. Mais maintenant, nous avons une variable que nous pouvons mettre à jour. Cela sera également vérifié sur chaque boucle puisque nous appelons notre fonction à partir de notre boucle. Avec cette variable maintenant configurée, nous pouvons commencer à écouter les événements d'un clavier, déplacer la position de notre joueur. Juste en dessous, ce que nous devons faire est d'écouter un événement clavier avec AddEventListener. Il s'agit simplement d'un document JavaScript normal . AddEventListener. Nous allons écouter l'événement d'un utilisateur. L'événement que nous voulons écouter est une touche enfoncée, qui déclenchera ensuite une fonction que j' appellerai MovePaddle. Fonction MovePaddle. Comme il ne s'agit pas d'un événement, nous devons accéder aux informations de l' événement pour savoir exactement sur quelle touche l'utilisateur a pressée, nous devons transmettre les informations sur l'événement dans notre fonction. abord, nous allons commencer par un journal de console qui transmet la valeur de e. Nous pouvons voir exactement quelles informations d'événement nous avons pour notre événement clé. Plongez dans la console, rafraîchissez-vous. Cela ne fera rien pour commencer tant que l'utilisateur n'aura pas appuyé sur la touche. Commençons par la touche levée, qui imprimera ensuite toutes les informations de nos événements clavier. Il y a beaucoup d' informations ici dont nous n'avons pas besoin. Mais la principale chose dont vous avez besoin pour ce projet est cette propriété de code. Vous pouvez voir qu'il s'agit d'une chaîne de flèche vers le haut. Si nous le fermons maintenant et que nous appuyons sur la flèche vers le bas, le code dont vous avez besoin pour celui-ci est Flèche vers le bas. Nous pouvons accéder à e.code et vérifier si chacun d' eux est égal à la flèche vers le haut ou la flèche vers le bas, puis nous pouvons définir la valeur de la position du joueur. Supprimons le journal de la console car nous savons ce que nous recherchons maintenant et remplacons celui-ci par une instruction de commutateur JavaScript. La valeur que nous voulons vérifier, comme nous venons de le voir, est e.code. Puisque nous ne sommes que la liste actuelle pour la flèche vers le haut ou la flèche vers le bas, cela pourrait remplacer cela par une instruction if else si vous préférez. Mais je veux utiliser une instruction switch pour que nous puissions étendre cela plus tard pour utiliser le clavier pour démarrer le jeu. Pour commencer, le premier cas que nous devons écouter est Arrow Up. Assurez-vous que cela correspond exactement à la chaîne comme nous le voyons à l'intérieur de la console. Chaque mot commence par une majuscule. Si la flèche vers le haut a été pressée, il est nécessaire de mettre à jour la position du joueur en déduisant une valeur. Parce que rappelez-vous, la valeur de y en haut est 0. Cela se met à jour lorsque la position du joueur se déplace en passant par notre variable de position du joueur. Pour cela, nous utiliserons l'opérateur d' affectation de soustraction, qui soustrait nos valeurs particulières telles que 15 de notre valeur actuelle, puis réactualisera 15 de notre valeur actuelle cette variable. Chacun de nos cas doit être suivi d'une clause de rupture. Sortez de notre instruction switch si cette affaire est appariée. Il suffit également de le placer dans un côlon à l'intérieur d'ici. Notre deuxième cas se trouve juste en dessous. Celle-ci sera pour le cas de Flèche vers le bas : Cette fois, nous mettrons à jour la position du joueur avec l'opérateur d'affectation d'ajout, qui ajoutera 15, puis réaffecterons notre nouveau avec la valeur mise à jour. Nous allons sortir de ça si celui-ci est vrai. Puisque notre position de joueur est utilisée à l'intérieur de notre fonction lorsque nous dessinons la pagaie, nous devrions maintenant pouvoir le mettre à jour lorsque nous appuyons sur les touches haut et bas. Nous pouvons également déplacer n'importe quoi d'autre sur la toile en utilisant la même technique. Dans une prochaine vidéo, nous allons voir comment déplacer la pagaie de l'ordinateur vers le haut ou vers le bas, mais celle-ci doit être effectuée automatiquement. Ensuite, nous allons voir comment gérer la balle qui rebondit sur nos objets. 9. Détenir les collisions et les rebondissements: Quel genre de jeu aurait-on si la balle ne rebondissait sur les côtés ou aussi sur les pagaies ? Eh bien, c'est délicat car cela implique un peu de travail parce que toutes nos coordonnées actuelles sont basées sur les lignes centrales de choses comme la balle et aussi la pagaie. Mais nous ferons de notre mieux pour comprendre les choses et nous allons y passer maintenant. Si nous localisons cette fonction de balle de tirage, nous savons que ces deux lignes de code à la toute fin sont responsables du déplacement de notre balle. Chaque fois que la balle est attirée sur la toile, nous allons déplacer la valeur de balle X et aussi la valeur de la boule Y. De plus, nous savons comment changer la direction. Si nous les actualisons maintenant, cela ira dans une direction positive. Nous pouvons également changer de direction en changeant n'importe laquelle de ces valeurs en nombre négatif. Ce sera la base du rebondissement de nos murs et aussi de la pagaie. Pour ce faire, plutôt que d'avoir nos valeurs codées en dur comme celle-ci, mettons à jour cette fonction pour utiliser plutôt des variables. Déplacez x vers l'emplacement x et déplacez y dans la direction y. Cela facilitera la mise à jour dynamique de ces valeurs dynamique de ces valeurs afin que nous puissions inverser la direction en cas de collision. En haut, configurons ces variables. Tout d'abord, déplacez x et, pour l'instant, gardons les mêmes valeurs codées en dur que celles que nous avions auparavant. Ce mouvement était égal à un. Mais vous pouvez les mettre à jour pour qu'il s' agisse de valeurs différentes si vous le souhaitez. Également une variable supplémentaire pour le rayon de la balle, qui est une valeur initiale de 10. Nous en aurons beaucoup besoin lorsque nous calculerons les collisions. Cela est dû au fait que la balle est positionnée à partir du centre du cercle, mais lorsqu'elle monte vers le haut, par exemple, faut également prendre en compte le rayon de la balle. Nous pouvons également mettre à jour nos fonctions pour utiliser le rayon de la balle juste en dessous. Redescendez pour dessiner la balle. Ici, nous définissons le rayon de la balle sur quelques pixels, ou nous pouvons le mettre à jour pour utiliser notre variable. Maintenant, passez à la fonction pour vérifier s'il y a collision. Mettons en place une fonction en bas juste au-dessus de notre boucle. Je vais appeler ma fonction en collision. Cette fonction sera alors chargée de vérifier quatre choses différentes. La première chose à faire est de rebondir en haut et en bas. Nous voulons également vérifier s'il y a contact à gauche ou à droite de notre jeu Nous devons donc vérifier le score sur l'axe X. Cela vaut pour les deux côtés. Nous voulons également vérifier s'il y a contact avec les joueurs de pagaie. Il en va de même pour la pagaie de l' ordinateur. Bien. Nous savons maintenant ce que nous voulons faire dans cette fonction, et nous pouvons l'appeler juste en dessous de notre boucle. Cela signifie que nous allons vérifier tous les points de collision à n'importe quelle trame donnée de notre boucle. Nous vérifierons le contact chaque fois que quelque chose bouge. Nous avons maintenant un peu de travail à faire à l'intérieur de cette fonction de collision. Juste avant de commencer à définir nos quatre points de contact, je vais dessiner une balle temporaire sur la toile. Nous pouvons déplacer cela et nous assurer que nous avons les bons points de contact. Tout d'abord, nous commencerons une nouvelle voie. Il n'interfère pas avec les autres dessins. Le style de remplissage. Tu peux faire ça n'importe quelle couleur que tu veux juste pour qu'elle se démarque, je vais opter pour le violet. Puis ctx.arc pour dessiner notre balle sur la toile. N'importe quel emplacement pour l'instant, n'importe quel emplacement aléatoire est correct, 10 pixels sur les x et y comme dans le rayon de la balle. Pour faire notre cercle, l'angle de départ peut être zéro, puis 2 fois math.pi. Dessinez ceci, la dernière chose que nous devons faire est ctx.fill, save, et il y a une balle dans le coin supérieur de notre écran. OK. Les premiers points de contact que nous voulons vérifier sont le haut et le bas de la toile. En commençant par le bas. Déplacons notre balle temporaire vers le bas de la toile et veillons à ce que nous ayons le bon point de collision. L'axe des X n'a pas d' importance pour l'instant, mais nous devons changer la direction Y. Mais tout d'abord, nous allons passer dans la toile.hauteur, sauvegarder ça. Comme vous pouvez le voir, cela poussera cela du bord de la toile, donc nous devons tirer cette moitié arrière du rayon de la balle. Nous l'avons déjà stocké sous forme de variable, sorte que nous pouvons le déduire de la hauteur de notre toile. On y va. C'est le point de collision au bas de la toile que nous voulons surveiller. Maintenant, nous pouvons utiliser cela dans une déclaration if. Nous voulons vérifier si quelque chose est vrai. La vérification que vous voulez faire est si la balle y, qui est l'emplacement au centre de la balle, est supérieure à l' est supérieure emplacement de la balle que nous venons de dessiner ; si la balle est allée plus loin plus bas que ce point actuel, il est alors considéré comme hors du canevas, et nous devons ensuite faire pivoter la direction. Juste avant de faire cela, nous allons tester cela fonctionne correctement avec le journal de la console de hit bottom. Accédez à la console et actualisez le navigateur. Dès que le point de contact arrive au bas du canevas ou s'éteint, nous voulons que notre journal de console soit exécuté ici. Rebondir cette balle est assez simple. Actuellement, lorsque le jeu commence, la balle va dans une direction positive ou descendante, mais nous pouvons inverser cela en changeant ce chiffre par un nombre négatif, comme nous l'avons vu au début de cette vidéo. Maintenant, dans ce contexte et puisque nous travaillons sur la direction Y, nous pouvons remplacer notre journal de console en mettant à jour la variable. déplacement y, qui est l'emplacement actuel, est égal à une version négative du mouvement y. Ce qui inversera effectivement le positif négatif et négatif en positif. Gardons ça et essayons ça. Rafraîchissez-vous, et nous devrions voir un rebond tout en bas. Bien sûr, il sort toujours du coin du côté droit de la toile, mais c'est très bien. Nous pouvons maintenant voir que notre rebond fonctionne. Bien. Nous devons maintenant tenir compte de la collision sur le dessus de la toile. À l'intérieur de l'instruction if, nous ajouterons une condition or. Cette fois, nous voulons vérifier si l'emplacement de la balle y touche simplement le haut de la toile. Nous ne voulons pas vérifier si cela est égal à zéro, car si c'était le cas, cause du rayon de la balle, cela serait moitié sur la toile. Nous voulons également déduire le rayon de la balle. Nous vérifions si c'est inférieur ou égal à zéro. Si c'est le cas, il devrait rebondir sur le dessus de la toile. Actuellement, lorsque nous rechargeons le navigateur, la balle se déplace vers le bas. Mais pour les tests, nous pouvons déplacer la direction Y du pour devenir un nombre négatif, ce qui entraînera le déplacement de la balle vers le haut. C'est la base de la façon dont nous pouvons faire rebondir une balle. Il s' agit surtout de vérifier que nos points de contact sont corrects et de s'assurer que nous prenons également en compte le rayon de la balle. Nous allons maintenant ajouter une condition pour vérifier si la balle frappe le côté gauche ou droit de notre canevas, et plus tard, cela augmentera les scores. Celui-ci sera basé sur l' emplacement de la balle x du côté gauche et droit de notre jeu. Revenez à notre fonction, qui est en collision. Ensuite, juste en dessous de nos commentaires, nous voulons également placer dans une déclaration if. Tout d'abord, vérifier si le ballon est entré en collision sur le côté gauche. Actuellement, notre balle temporaire est exactement là où nous voulons que le point de contact soit, qui est défini sur une valeur de 10. Tout cela fonctionne bien car notre rayon de balle est fixé à 10. Nous voulons vérifier si l'emplacement stocké à l'intérieur de la variable de la boule x est inférieur ou égal au rayon de la balle. fait, si la balle se trouve à gauche là où elle se trouve maintenant, nous voulons ensuite passer un score à l'ordinateur. Nous vous fournirons un moyen de le faire plus tard, mais pour l'instant, il suffit de coller dans un journal de console de partition informatique. Ensuite, en dessous, une section autre. Ce sera pour notre vérification pour voir si le joueur a marqué en déplaçant le ballon vers la droite. Pour celui-ci, nous passons à l'emplacement de la balle x. Nous voulons nous assurer que la balle touche le côté droit de la toile. Encore une fois, la position x verticalement se trouve au centre de la balle. Nous voulons également vérifier si la boule x plus le rayon de la balle est supérieur à la largeur totale de notre toile. Nous pouvons saisir cela avec la largeur de la toile. Ensuite, en plaçant un journal de console pour le score du joueur, testez-le dans la console. C'est un peu plus gros. Vous avez une faute de frappe sur la ligne 85. Cela veut juste être ensemble, sans espace entre les deux. Essayons ça maintenant. Si le ballon se déplace vers la droite, nous voyons qu'il y a un score de joueur. Si nous montons à notre emplacement x tout en haut, il peut s'agir d'un nombre négatif. Nous pouvons ensuite tester le score de l'ordinateur. On y va. Tout cela fonctionne maintenant comme prévu. Les choses commencent vraiment à prendre forme maintenant avec notre jeu. Ensuite, nous allons jeter un coup d'œil à une autre section importante, qui consiste à faire rebondir la balle sur les pagaies en mouvement. 10. Contact de paddle: De la même manière pour rebondir sur les côtés de notre toile, nous devons également tenir compte que la balle frappe également nos pagaies mobiles. Cela implique un peu plus de travail car nous devons tenir compte non seulement de la balle qui frappe l'avant de la pagaie, mais nous devons également vérifier que l'emplacement de la balle se situe entre le haut et le bas du pagaie aussi. En commençant par la pagaie de notre joueur, pour vérifier que nous travaillons correctement, nous pouvons utiliser cette balle temporaire, placer sur le devant de la pagaie et vérifier que nous avons le bon point de contact. Sautez dans la fonction collide et en haut, nous avons cet arc qui crée cette balle temporaire. Supprimez cette valeur et placez-la sur la face de la pagaie, nous devons la déplacer sur l'axe X, le rayon de la balle, plus la largeur de la pagaie qui est stockée dans la variable largeur de la palette. Rafraîchissez et tout d'abord, nous pouvons voir ce mouvement, et pour confirmer cela, nous pouvons le déplacer au centre en ajustant l'axe Y égal à la hauteur du canevas divisée par 2. On y va. Nous avons maintenant le bon point de contact pour notre pagaie. Nous pouvons utiliser ce point de contact maintenant pour vérifier si la balle est inférieure ou égale à cette valeur X. Encore une fois, nous avons mis en place une déclaration if comme celle-ci. Aller à notre commentaire, qui est vérifier le contact du joueur paddle. L'instruction if va vérifier si la position X de la balle est inférieure ou égale à la position X que nous venons de définir, c' est-à-dire le rayon de la balle plus la largeur de la palette à cette extrémité. En gros, vérifier si cette position de balle est là où elle est maintenant ou inférieure à. À l'aide de notre variable Move X, nous pouvons ensuite inverser cela en définissant cette valeur égale à l'équivalent négatif. Rappelez-vous ici, même si nous ne faisons que vérifier l'emplacement X, la balle doit donc rebondir verticalement du haut vers le bas tant qu'elle est en ligne avec la face de la pagaie. Rafraîchissons cela et testons cela. Nous devrions maintenant voir un rebond avant qu'il ne touche l'arrière de la toile. Bien, donc tout fonctionne bien maintenant. Ensuite, nous voulons limiter ce rebond à se produire uniquement lorsque la balle se trouve entre le haut et le bas de la pagaie. Nous avons déjà une variable dans notre jeu appelée position du joueur, qui doit être initialement au centre de la toile qui, pour nous, serait maintenant 200. Lorsque les touches haut et bas sont enfoncées, le point central de la pagaie met à jour la variable de position du joueur afin que nous sachions toujours où c'est. Par exemple, disons qu' il est actuellement à 100, nous devons ensuite vérifier où se trouve la balle par rapport à la pagaie. Maintenant, nous pouvons utiliser 70 comme position de balle. Retirez cette valeur de la pagaie et nous pouvons voir que la différence est de 30 pixels, et c'est un nombre positif. Dans un autre exemple, on peut voir ici que la position de la balle est 125. Encore une fois, retirez cela de la position du joueur, mais cette fois, le résultat est négatif de 25. Mais pourquoi ce calcul est-il important ? Eh bien, c'est important parce que si ce numéro est à la hauteur de la pagaie, il devrait y avoir un contact. Nous aurions la moitié de la hauteur de la pagaie puisque nous travaillons à partir de la ligne médiane et nous devons également tenir compte du rayon de la balle. C'est là que les choses peuvent devenir un peu plus complexes. Ici, nous avons ajouté le rayon ou les valeurs déduites, selon le côté de la balle, les valeurs positives et négatives. Dans la diapositive précédente, nous avions également les mêmes chiffres positifs et négatifs à prendre en compte. Cela signifie que nous pourrions écrire un code complexe pour rendre compte de cela, ou nous pourrions rendre notre vie beaucoup plus facile en changeant chaque comparaison pour qu'elle soit positive ou que nous pouvons le faire avec une méthode mathématique appelée absolue. Pour voir comment fonctionne math. absolus, sautons dans la console et essayons cela. Placer un journal de console avec la valeur mathématique, delta abs en passant un nombre positif tel que deux. Maintenant, si nous nous actualisons et allons dans la console, nous pouvons voir que nous avons la valeur de deux , comme prévu dans la console. Cependant, si nous changeons cette valeur par une valeur négative, je le retirerai simplement de la boucle pour qu'elle ne se répète pas. Rafraîchir, nous pouvons également voir la valeur est toujours un nombre positif de deux. Peu importe si nous transmettons un nombre positif ou négatif, nous obtenons toujours l' équivalent positif affiché. Le fait est que nous pouvons utiliser ces méthodes absolues pour nous assurer que le calcul entre la balle et la pagaie est toujours positif, qui signifie que nous pouvons toujours comparer cette valeur à une valeur positive. action consistant à ajouter le rayon de la balle plutôt que de devoir travailler si nous voulons ajouter ou déduire cela. au code et voyons à quoi cela ressemble. Nous pouvons supprimer notre journal de console, puis sauter dans notre instruction if en haut. Actuellement, nous ne vérifions que l'exposition, mais nous devons maintenant vérifier la position Y avec l'opérateur « AND ». Nous allons maintenant vérifier si la balle se situe entre le haut et le bas. Passer en maths aux abdos. Nous obtenons toujours un chiffre positif. Ce que nous voulons faire, c'est vérifier si la position du ballon Y enlève la position du joueur. Rappelez-vous que cela va nous donner cette valeur entre la balle et la pagaie, mais ce sera toujours un nombre positif contrairement aux diapositives. Ensuite, nous vérifions si cette valeur est inférieure ou égale à la hauteur de la pagaie, divisée par 2 plus le rayon de la balle. La raison pour laquelle nous pouvons ajouter le rayon de la balle, et nous n'avons pas à nous soucier de l' emporter en fonction du côté où il est parce que nous convertissons toujours ce chiffre en plus, par conséquent, nous ajoutons toujours le rayon de la balle. Faisons une sauvegarde et essayons cela à l'intérieur du navigateur. Tout d'abord, la balle peut jouer automatiquement, et si nous déplacons maintenant la pagaie en place, elle devrait maintenant créer un point de contact entre la balle et la pagaie. Je sais que cela peut sembler difficile, mais sans cette conversion positive, nous n'aurions pas besoin de dupliquer cela pour que la balle soit au-dessus ou au-dessous de la ligne médiane de la pagaie. Maintenant que cela fonctionne, la prochaine chose à faire est de vérifier le point de contact de la pagaie de l'ordinateur. Celui-ci va être assez similaire, donc nous pouvons copier l'instruction if complète dans la section lecteur et la coller juste en dessous du commentaire de l'ordinateur. abord, l'exposition doit être terminée à droite. Nous devons maintenant vérifier si la position de la balle est maintenant plus grande, ajouter le rayon de la balle pour en tenir compte. À droite du plus grand ou de l'égal, nous devons vérifier si la balle dépasse la face de la pagaie de l' ordinateur. Nous pouvons le faire en vérifiant la toile, largeur, l'emporter la largeur de la pagaie. Il devrait s'agir de la position X prise en charge et pour la position y, cela va être assez similaire. Nous voulons également vérifier si cela se situe entre le haut et le bas de la pagaie plutôt que de la vérifier par rapport à la position du joueur, nous voulons le vérifier par rapport à la position de l'ordinateur. Bien sûr, celle-ci n'a pas encore été créée alors passons au sommet où nous avons créé nos variables et nous pouvons dupliquer position de notre joueur et modifier pour qu'elle devienne la position de l' ordinateur. Encore une fois, le placer au centre de la toile est tout à fait parfait pour le début de notre jeu. La position de l'ordinateur sera également mise à jour dans une prochaine vidéo. Pour nettoyer cela, nous pouvons maintenant revenir à la fonction collide et retirer notre balle temporaire, nous n'en avons plus besoin. Il va être assez difficile de vérifier si la pagaie de l'ordinateur fonctionne car nous ne pouvons pas déplacer cela vers la balle. Mais une chose que nous pouvons faire juste pour vérifier les choses et vérifier que nous avons un rebond, c'est de changer la position Y du déplacement pour qu'elle soit égale à zéro. Cela déplacera la balle horizontalement dans notre jeu, hors de la pagaie des joueurs. Excellent, donc le rebond fonctionne maintenant sur nos deux pagaies. Maintenant, il change en arrière, négatif 1 puisque nous savons que cela fonctionne. Nous avons traversé l' une des parties les plus difficiles de notre jeu. C'est peut-être un peu difficile à prendre en compte, mais c'est vraiment un élément essentiel pour que notre jeu fonctionne correctement. Ce n'est pas parfait. Nous n'avons pas pris en compte certains cas de bord, exemple si la balle frappe tout le haut ou le bas de la pagaie, mais nous ne voulons pas aller trop loin dans ce parcours. Ensuite, dans la vidéo à venir, nous examinerons comment suivre les scores, tant pour le joueur que pour l'ordinateur. 11. Les résultats du suivi: Nous utilisons déjà la méthode FiltText pour dessiner notre partition sur le Canvas et nos scores sont également stockés dans des variables. Nous savons également quand le joueur ou l'ordinateur marque en frappant la balle sur le côté gauche ou droit de notre Canvas. La prochaine étape logique consisterait à mettre à jour ces variables lorsque cela se produit, puis à mettre à jour le score à l'écran, ces variables où le joueur marque ainsi que le score de l'ordinateur dans le Cloud. Fonction, localisons cela à l'intérieur de notre script. Juste ici. Nous sommes actuellement connectés à la console lorsqu'un joueur ou l'ordinateur a marqué. À l'intérieur de notre déclaration if else if, nous pourrions directement mettre à jour nos variables de score à l'intérieur, mais au lieu de cela, je vais appeler une fonction. Cette fonction vérifiera également d'autres choses comme si le jeu est terminé et replacera la balle au centre. Nous allons remplacer ces deux journaux de console par une fonction que nous allons créer bientôt appelée partition. La fonction de score devra également être informée de l'un de nos joueurs qui a marqué. Pour notre premier, nous passerons dans l'ordinateur sous forme de chaîne, et pour notre deuxième, si le joueur a marqué, nous passerons le joueur à cette fonction. Bien sûr, nous devons créer cela et simplement faire sauter notre fonction Cloud, créer notre fonction appelée score. Ici, nous allons prendre le joueur. N'oubliez pas que cette variable de joueur sera égale à notre ordinateur ou à notre lecteur. Nous pouvons vérifier lequel d'entre eux a été transmis avec une déclaration if. Si la variable de lecteur est égale à l'ordinateur, nous ferons quelque chose à l'intérieur, c' est-à-dire mettre à jour nos variables. N'oubliez pas qu'au début, nous avons examiné le score du joueur et le score de l'ordinateur, et ici, nous mettrons à jour ces deux variables en fonction de la valeur d'une. Celui-ci est destiné à la partition informatique. Augmente avec plus-plus. Sinon, nous mettons à jour le score du joueur. au navigateur et testons celui-ci. Nous laisserons la balle s'évanouir et la pagaie. Nous pouvons voir que le score de l'ordinateur augmente très vite. Cela se produit parce que chaque fois la balle bouge ou chaque fois nous avons un nouveau cadre à l'intérieur de notre boucle, nous vérifions si la balle est derrière le joueur ou la pagaie de l'ordinateur. Puisque nous sommes continuellement derrière la pagaie, le score ne cessera d'augmenter. Pour résoudre ce problème, nous pouvons remettre la balle au centre de notre jeu afin de pouvoir recommencer. La façon dont nous pouvons le faire à l'intérieur de notre fonction de score est de réinitialiser l'emplacement de la balle avec BallX est égal à la toile. Largeur divisée par 2, placez cela au centre. Nous ferons également de même pour l'emplacement de Bally. Cette fois, cela est basé sur la hauteur de la toile, également divisée par 2. Essayons ça. Rafraîchissez, laissez la balle passer derrière la pagaie, celle-ci est réglée sur une, puis la balle est replacée au centre pour que notre jeu continue. Il s'agit d'un moyen simple de suivre les scores de notre jeu. Dans la prochaine section, nous allons examiner comment ajouter un score maximal afin de savoir quand le jeu est terminé et que le gagnant apparaîtra sur la toile. 12. Mettre le jeu: La première étape vers la fin notre jeu consiste à définir nombre de points que nous voulons atteindre au maximum. Pour cela, nous avons besoin d'une variable au sommet appelée total gagnant. Const WinningTotal et ma valeur sera égale à trois, donc le premier joueur à atteindre trois sera le gagnant et nous pourrons mettre à gagnant et nous pourrons jour cela à l'intérieur de notre fonction de score. Revenons à notre fonction. Ici, nous devons vérifier si le score de notre ordinateur ou le score joueurs est égal à ce total de victoires. En plaçant une instruction if pour commencer, vérifiez si le score de l'ordinateur est égal à notre nouvelle variable qui est gagnante. Si c'est le cas, nous allons faire quelque chose, sinon, nous passerons une clause d'autre chose et cette fois, nous vérifierons si le score du joueur est également égal à notre total de victoires. Ce que nous voulons faire ici, nous allons mettre fin au jeu en créant une fonction EndGame. De toute évidence, nous n'avons pas encore créé cela, mais il s'appelle EndGame. Tout comme lorsque nous avons créé notre fonction de score, qui a accueilli le joueur, nous allons également faire de même pour la fonction EndGame. C'est la gauche, cette fonction sait laquelle a été gagnante. Celui-ci, c'était l' ordinateur, puis nous transmettrons également le mot-clé retour pour sortir des instructions. De la même manière, l' instruction else-if appellera également notre fonction EndGame mais passe au joueur. Si c'est vrai et la raison pour laquelle la fonction EndGame a besoin de savoir lequel de ces joueurs a été le gagnant, c'est parce que nous allons changer les couleurs selon lequel a été le gagnant. Comme vous pouvez le constater, nous avons la couleur rouge pour le lecteur et la couleur bleue de l'ordinateur. Cela sera reflété à l'intérieur de notre texte de fin de jeu. Créons cette fonction juste en dessous. N'oubliez pas que cela est passé soit par l'ordinateur, soit le joueur, qui sera stocké à l'intérieur d'un gagnant , puis transmet une déclaration if else. La section if nous permet de vérifier si le gagnant est égal à l'ordinateur. Il suffit de retirer ces crochets, nous ne les avons pas dans la section autre. Si le gagnant est égal à l'ordinateur, qui est la couleur bleue, nous allons alors modifier la couleur du texte pour afficher les résultats en bleu. CTX.FillStyle est égal au bleu, puis dans la section autre, nous modifions FillStyle pour qu'il soit égal à la couleur rouge pour correspondre à notre joueur. Maintenant, la raison pour laquelle nous changeons cette couleur de texte est que nous allons afficher du texte sur le canevas une fois le jeu terminé. Cela va simplement indiquer au joueur s'il a gagné ou s'il a gagné l'ordinateur. Juste avant le texte, nous allons définir la ligne de texte pour qu'elle soit égale au centre. Placez-le au milieu du canevas, puis nous créons nos textes avec une fonction appelée FillText. Ouvrez le backtick pour que nous puissions insérer une variable, car nous devons également insérer la variable du gagnant selon que l'ordinateur ou le joueur a gagné. Disons que le gagnant est, un deux-points, puis utilisant le symbole dollar et les accolades en JavaScript, nous pouvons insérer la variable du gagnant. Ce sera le gagnant est le joueur ou le gagnant est un ordinateur. Après les backticks, ajoutez une virgule puis nous pouvons la placer au centre du canevas. Tout d'abord, l'exposition, qui est la toile.largeur divisée par deux. Sur la position Y est le toile.hauteur divisée par deux. Navigateur automatique et nous pouvons essayer cela. Rafraîchissez et écartons cela pour atteindre la valeur de trois. C'est un, deux et trois. Vous pouvez tout de suite voir que nous voyons notre texte au départ, mais il disparaît rapidement et le jeu continue. La raison pour laquelle cela se produit est que notre boucle est toujours en cours d'exécution. Nous n'avons rien fait pour arrêter notre intervalle de réglage. Une fois que le joueur ou l'ordinateur atteint le score de trois, nous dessinons toujours le texte très brièvement sur le canevas, mais lors de la prochaine itération de notre boucle, nous exécutons cette méthode de texte clair, qui efface tous les textes de l'écran , puis redessiné toutes nos fonctions de jeu. Comment empêcher cette boucle de fonctionner ? Eh bien, l'intervalle défini peut être arrêté par une méthode appelée intervalle clair. Cela implique de stocker une référence à cet intervalle lorsque nous le créons , puis d'utiliser cette référence pour l'arrêter ultérieurement avec un intervalle clair. Cette référence peut être stockée à l'intérieur d'une variable et, comme toutes les autres variables, elle sera tout en haut. Appelez ce GameLoop puis, en bas, définissez cette variable pour qu'elle soit égale à notre intervalle afin que GameLoop soit égal à notre SetInterval. Ici, nous appelons toujours SetInterval comme avant, mais cela va renvoyer un identifiant unique stocké à l'intérieur de cette variable. Nous pouvons le voir si nous le connectons à la console, sautons dans le navigateur et actualisons dans la console et que nous voyons la valeur d'un. Si plusieurs intervalles étaient exécutés, chacun de ces identifiants renvoyés sera unique. De retour à notre fonction EndGame, cette variable peut maintenant être transmise à ClearInterval pour arrêter l'exécution de la boucle. Nous allons le faire dès le début de notre fonction. Transmettez n'importe quelle méthode qui est ClearInterval, qui prend notre ID, intervalle de notre magasin de référence appelé GameLoop. Maintenant, nous pouvons tester cela, actualiser, attendre que cela atteigne une valeur de trois. Bien. Nous pouvons voir tout de suite le jeu se bloque et nous avons toujours le texte à l'écran. Pour améliorer cela, il serait préférable de dégager la balle, dégager les pagaies, ainsi que ces lignes pointillées en arrière-plan. Même le score sur le vainqueur sur la toile. C'est quelque chose que nous savons déjà faire à partir de notre boucle où nous nettoyons notre toile, nous effacerons Rect. Copions ceci et placons cela à l'intérieur de notre fonction EndGame. Cela ne fera que la méthode ClearInterval, elle effacera tout le reste du Canvas. Comme cela se produit avant de dessiner notre texte, nous devrions toujours le voir à l'écran mais il serait utile voir la partition en haut. Eh bien, c'est assez simple. Nous savons également comment dessiner la partition avec cette fonction juste ici. Après avoir effacé notre toile, rafraîchissez-vous et nous essaierons encore une fois. Super, la toile a été effacée nous voyons toujours le texte. Nous voyons toujours le score final au sommet. que tout cela fonctionne maintenant, nous allons maintenant commencer et redémarrer notre jeu. 13. Démarrer et recommencer le jeu: Au lieu que notre jeu commence immédiatement dès le chargement du navigateur, il serait plutôt agréable de déclencher cette action avec le clavier en utilisant quelque chose comme la barre d'espace. Nous allons maintenant examiner comment procéder et comment redémarrer notre jeu une fois terminé. J'utiliserai la barre d'espace pour commencer le jeu, mais vous pouvez passer à une autre touche si vous préférez. Regardez à l'intérieur de nos instructions de commutation. nous allons écouter la flèche vers le haut et la flèche vers le bas. Nous pouvons créer un nouveau boîtier pour écouter la clé que nous avons choisie pour commencer le jeu. Donc, cette fois sous forme de chaîne. La clé que je vais écouter est la barre d' espace, mettre un deux-points, puis nous allons appeler une fonction pour démarrer le jeu appelée démarrage du jeu. À la clause break, si c'est vrai, et juste avant de créer cette fonction, il serait également plus logique maintenant renommer cette nouvelle partie de la fonction pour qu'elle soit autre chose, car elle fait d'autres choses. plutôt que de simplement déplacer notre joueur vers le haut ou vers le bas. Je veux aller chercher une touche manipulée enfoncée. N'oubliez pas que nous devons également changer cela dans notre auditeur clé juste au-dessus. Bien sûr, nous devons créer cette fonction de démarrage du jeu. Configurez cela juste en dessous. Si nous y réfléchissons, que voulez-vous que ce jeu fasse ? Eh bien, puisque nous sommes actuellement incapables rafraîchir le jeu et qu'il commence actuellement sans rien faire, nous voulons maintenant déplacer cette boucle, que nous appelons en bas dans notre fonction. Plutôt que ce jeu commence tout de suite, nous pouvons le découper et placer dans notre fonction de démarrage du jeu, sorte que cela ne se produira que lorsque la barre d'espace est pressée. Essayons ça. Si nous nous actualisons, nous ne voyons pas encore le début du jeu. Appuyez sur la « barre d'espace » ou la clé que vous avez choisie et nous y allons. Au lieu de cet écran vide, il devrait y avoir quelques instructions au début. Informez l'utilisateur qu'il doit appuyer sur la barre d'espace pour commencer. Cela n'a pas besoin d'entrer dans une fonction ou autre chose, nous pouvons simplement l'ajouter en haut de notre script. Mais ce ne sera quelques textes et nous utiliserons FillText, mais nous allons d'abord définir la couleur avec FillStyle égale au rouge. Vous pouvez changer cela si vous préférez. CTX.Font définira cette chaîne comme une chaîne ou 30 pixels pour la taille de police avec un style Helvetica. Placez-le au centre avec une ligne de texte, puis dessinez notre texte avec la méthode FiltText et transmettez une chaîne. Nous n'avons pas besoin d' insérer de variables, donc les guillemets réguliers sont corrects , puis le texte de l'espace presse à lire. Pour les positions x et y, il s'agit de la largeur de la toile divisée par deux, et divisez également la hauteur par deux. Essayons ça. Il y a notre texte. Appuyez sur « Espace » et notre texte est également effacé car si vous vous souvenez en bas, le canevas est effacé avant chacune de nos boucles. De retour à notre fonction de démarrage du jeu, il y a aussi quelques autres choses qui doivent aller à l'intérieur d'ici. La première étape au sommet consiste à réinitialiser tous les scores. Le score du joueur est égal à 0 et le score de l'ordinateur est également égal à 0. L'utilisation d'intervalles clairs effacera également tous les minuteurs existants stockés dans notre variable de boucle de jeu . Essayons ça. Rafraîchissez, appuyez sur « Espace » pour commencer, et tout semble bien. Tous les scores sont mis à jour, mais il y a un petit problème si nous continuons appuyer sur la barre d'espace pendant le jeu. Vous pouvez voir en haut, si nous appuyons sur la barre d'espace maintenant, le score est réinitialisé chaque fois que nous commençons la partie. Ce n'est pas un problème si nous voulons réellement commencer la partie, mais si le joueur appuie accidentellement dessus pendant la partie, il va redémarrer. Nous pouvons y contribuer en gardant trace de cela avec une variable. Laissez le jeu s'exécuter initialement comme une valeur fausse, donc nous allons changer cela pour qu'il soit vrai pendant que le jeu est en cours d'exécution, ce qui empêchera la barre d'espace de redémarrer notre jeu. Nous devons coller cela dans quelques endroits différents. Tout d'abord, nous recherchons notre fonction, qui est la fin du jeu. Comme vous l'imaginez, puisque c'est la fin du jeu, nous pouvons également définir cette variable en cours d' exécution de jeu comme égale à false dans la fonction de démarrage du jeu. Maintenant, tout en haut, nous voulons vérifier si cette variable de jeu est égale à true. Passez ceci à l'intérieur d'un énoncé if, si le jeu est en cours d'exécution. Nous n'avons pas besoin de dire égal à vrai ou quoi que ce soit de ce genre. Si la valeur du jeu en cours d'exécution est égale à true, le code à l'intérieur de ces accolades s'exécutera. Ou nous pouvons également le placer sur une seule ligne et retirer les accolades bouclées, puis revenir hors de cette fonction. Fondamentalement, si le jeu est égal à vrai, nous sauterons ensuite vers cette fonction sans exécuter le reste du code ci-dessous. Cela empêchera le jeu de redémarrer. Si ce n'est pas le cas, s'il est égal à faux, nous voulons ensuite lancer le code ci-dessous. Nous dirions également dans notre jeu en cours d'exécution la variable être maintenant égale à true. Par conséquent, cela empêchera cette fonction de s'exécuter une deuxième fois, si la barre d'espace est pressée pendant le jeu. Nous pouvons essayer cela, rafraîchir, appuyer sur « Espace », laisser le ballon passer derrière pour le score et si nous essayons maintenant d'appuyer sur l'espace, le jeu n'est pas réinitialisé. Mais nous avons un autre problème à résoudre et à voir cela, si nous redémarrons le jeu et attendons d'atteindre le score de trois, passons trois fois derrière. Tout va bien, nous avons le texte du gagnant est ordinateur, le score de 3-0. Mais maintenant, si nous redémarrons le jeu avec la barre d'espace, le jeu redémarre, mais nous avons toujours un score initial de 1. Mais vous vous attendez à ce que ce soit zéro puisque nous avons mis cela à l'intérieur de notre fonction. Pourquoi pensez-vous que cela se produit ? Eh bien, pour en savoir plus, passons à notre fonction de score. La fonction de score est le seul endroit où nous mettons à jour l'une de ces variables. La fonction de partition est appelée juste au-dessus de notre fonction collide. Plongez dans la fonction collide et nous appelons cela avec notre section « if else ». C'est la seule fonction ou la seule pièce de code appelée dans notre jeu, qui est responsable de la mise à jour de ces variables. Nous savons que c'est une raison laquelle notre score est initialement fixé à un. Pourquoi pensez-vous que cette fonction de score est appelée au début d'une nouvelle partie ? Eh bien, la raison pour laquelle cela se produit est parce que dès que le match est terminé, notre balle est soit finie sur le côté gauche pour un score, soit sur le côté droit. Nous avons cela contrôlé par la variable BallX. Oui, dans notre fonction de démarrage du jeu, nous réinitialisons initialement ces deux scores, mais dès le début d'une nouvelle partie, l'emplacement de BallX touche toujours l'un des côtés, ce qui entraîne la fonction de score à courir à nouveau. Corriger ce problème est assez simple, il suffit de réinitialiser l'emplacement de BallX au centre lorsque le jeu démarre. Le jeu commence juste après une partie en cours et avant de réinitialiser nos scores, nous pouvons également réinitialiser la valeur de BallX pour qu'elle soit au centre de l'écran. Essayons ça. Nous arrivons à la fin de notre match, qui est un score de trois. Jeu terminé, nos deux scores sont maintenant réinitialisés comme prévu. Lorsque vous construisez des jeux comme celui-ci, vous trouverez souvent des cas de pointe comme celui-ci sur lesquels travailler et il s'agit généralement d'essayer différentes choses et de voir laquelle fonctionne. Ensuite, nous allons examiner comment appliquer un mouvement aléatoire à la balle lorsqu'elle rebondit. 14. Direction aléatoire: d'avoir ces variables MoveX et MoVey prédéfinies rend le début du jeu beaucoup plus prévisible. Nous savons parce que nos valeurs négatives 2 et nos valeurs négatives 1 vont diriger la balle. Nous pouvons améliorer cela en rendant cela beaucoup plus aléatoire à l'intérieur d'une fonction. Créons une fonction juste en dessous nos textes, appelée mouvement aléatoire. Le but de cette fonction est de définir ces deux variables avec des valeurs aléatoires, ce qui signifie que nous pouvons maintenant supprimer ces valeurs initiales. Pour définir ces variables, nous devons appeler cette fonction RandomMovement dans GameStart. Localisez cette fonction, appelez notre nouvelle fonction, qui réinitialisera nos deux variables avec une nouvelle valeur chaque fois que notre jeu démarre. Revenez à notre fonction RandomMovement qui génère nos deux valeurs x et y, tout en déclenchant la balle dans des directions imprévisibles. Cela ralentira et accélérera un peu le jeu en raison des valeurs et des mouvements aléatoires, c'est-à-dire que le mouvement x peut être plus élevé ou plus bas, ce qui le ralentit ou plus vite. Encore une fois, créez deux variables ou deux constantes. Il s'agit d'un x aléatoire, qui sera un nombre aléatoire compris entre deux et quatre. Fondamentalement, nous allons définir notre valeur x sur 2 ou 4, ainsi qu'une direction positive ou négative. Nous pouvons le faire en accédant à une fonction mathématique JavaScript appelée aléatoire. Math.Random générera un nombre aléatoire compris entre 0 et 1. Mais nous allons multiplier cette valeur par 3. Cela nous permettra de générer un numéro à partir d'un. Nous pouvons également arrondir cela en réduisant cette valeur. Dans la méthode math.ceil, collez-le dans. Maintenant que nous arrondissons notre valeur, cela nous donnera une valeur de 1, 2 ou 3. Puisque nous voulons la valeur de 2-4, nous pouvons en ajouter une autre pour nous donner notre nombre aléatoire. Essayons ça. En plaçant un journal de console de RandomX, enregistrez et actualisez le navigateur, accédez à la console. Pour cela, nous devrons également appeler notre fonction GameStart. Appuyez sur Espace, la valeur de 2, la valeur de 4, 2, 3, 2. Tout cela semble fonctionner correctement. Pour notre emplacement RandomY, nous pouvons dupliquer cette ligne, changer le nom de la variable par RandomY. RandOMy va être un nombre compris entre 0 et 2. Nous n'avons pas besoin de l'ajouter plus 1. Nous pouvons utiliser math.round pour arrondir ce nombre, qui nous laisse une valeur comprise entre zéro et deux. Nous devons également créer deux autres variables. Cela va décider si nous avons une direction positive ou négative. Actuellement, nous avons juste une valeur x et y positive, mais cela va également augmenter l'imprévisibilité. Const Plus ou Minusx. Encore une fois, nous allons accéder à la fonction JavaScript aléatoire, qui nous donnera un nombre compris entre 0 et 1. En utilisant l'opérateur conditionnel JavaScript, nous pouvons vérifier si cette valeur est inférieure à 0,5, ce qui devrait être à peu près 50/50. Si c'est le cas, nous retournerons ou stockerons à l'intérieur de cette variable une chaîne de caractères négatifs. Si ce n'est pas le cas, ce sera positif. Puisqu'il s'agit d'un nombre compris entre 0 et 1, il y a environ la moitié ou 50/50 de chances que cette valeur soit négative ou positive. Nous ajouterons également cela à nos chiffres prochainement. Dupliquez ceci et la seule différence cette fois-ci est le nom de variable y. Ensuite, nous pouvons utiliser ces variables pour fusionner et créer nos nouvelles valeurs de variables MoveX et MoVey. Tout d'abord, la variable de MoveX. Puisque nous renvoyons également une valeur de chaîne pour le positif ou le négatif, nous allons l'envelopper dans une fonction numérique pour nous assurer que nous obtenons toujours un nombre plutôt qu'une chaîne. En commençant par x, PlusorMinusX, ajoutez ceci à notre numéro aléatoire. Par exemple, il peut s'agir d'une valeur négative puis d'une valeur de deux ou d'une valeur positive, ou de n'importe quel nombre compris entre cette plage. Dupliquer. Nous allons le faire pour MoVey. Il change également pour être un plus ou moins y et la valeur de yaléatoire. Il s'agit d'un nombre positif ou négatif aléatoire dans les deux directions, mais je vais ajouter un petit morceau de hasard de plus. Créez une constante pour stocker cela dans un nombre appelé aléatoire. Il suffit de définir cette valeur égale à math.random. La raison pour laquelle nous procédons est d'ajouter une petite valeur aléatoire à ces deux variables. Ajoutez-le à notre premier numéro, puis à notre deuxième numéro, cela devrait être tout ce dont nous avons besoin. Actualisez le navigateur. Chaque fois que nous commençons la partie, nous devrions voir le ballon se déplacer dans une direction légèrement différente. Nous l'avons à gauche, nous l'avons droit, nous l'avons en train de monter, de descendre. Vous pouvez également constater que nous avons différentes vitesses en fonction des valeurs réelles de ces deux variables. Ce n'est pas fini pour notre caractère aléatoire. Un peu plus tard , nous verrons comment ajouter un mouvement aléatoire à la direction de la balle lorsqu'elle rebondit sur les murs et aussi sur la pagaie. En parlant de pagaies, c'est ce que nous allons couvrir dans la vidéo à venir, où nous allons voir comment déplacer automatiquement la pagaie de l'ordinateur. 15. Mouvement informatique: En haut de nos scripts, nous avons le lecteur et l' ordinateur positionnés à l'intérieur de ces variables. Ces deux valeurs définissent les positions des pagaies au début de nos jeux, être au centre verticalement. La position du joueur que nous avons déjà prise en charge avec les mouvements à l'intérieur de notre poignée Fonction Touche pressée. Nous pouvons maintenant ajouter un peu de mouvement à l'ordinateur pour rendre le jeu un peu plus jouable. Faisons cela dans une fonction de pagaie d' ordinateur de dessin, qui est juste ici. Tout ce que nous faisons actuellement est de définir la toile.hauteur divisée par 2, places au centre. De toute évidence, nous ne voulons pas faire cela comme ci-dessus. Nous voulons également remplacer cette option par une variable. Nous enlevons la hauteur de la toile et la remplacons par la position de l'ordinateur. Cela signifie que tout comme la position du joueur ci-dessus, chaque fois que cette variable est mise à jour et que nous appelons ensuite la boucle, la nouvelle position de la pagaie de l'ordinateur sera également reflétée. La prochaine étape consiste à mettre à jour cela. Mais comment pouvons-nous décider comment déplacer cela ? Eh bien, nous pourrions devenir très complexes et inclure des choses comme une intelligence artificielle, mais nous ne voulons pas que ce cours soit trop complexe. Au lieu de cela, nous allons remplacer cela par un simple mouvement suivi. Pour cela, en bas juste au-dessus de notre boucle, je vais créer une nouvelle fonction qui est appelée à chaque intervalle. Le nom de la fonction est déplacer l'ordinateur. Cela doit également être appelé à chaque intervalle, afin que nous puissions saisir le nom de notre fonction et l'ajouter à notre boucle. Le suivi le plus basique peut se faire quelque chose comme ça. Nous pouvons mettre à jour notre variable de position de l' ordinateur pour qu'elle soit égale à l'emplacement de la balle Y. Cela permettra de suivre efficacement l'emplacement verticalement de notre balle, déplacer la pagaie de l'ordinateur pour suivre cela, nous pouvons voir Ça ? Si nous revenons à notre navigateur, rafraîchissez-vous et vous pouvez maintenant voir la pagaie de l'ordinateur monter et descendre en fonction de l' emplacement de la balle. Super, tout fonctionne bien, mais comme vous pouvez le constater, cela crée un jeu impossible pour le joueur de gagner. Encore une fois, nous pourrions devenir aussi complexes que nous le voulons avec un mouvement informatique. Mais pour rester simple, je vais simplement ajouter une déclaration if-else. Cette déclaration if-else mettra progressivement à jour la position de l'ordinateur selon que la balle est au-dessus ou au-dessous de la pagaie. Nous pouvons supprimer cela, ajouter une déclaration if. Où nous vérifions si la position de l' ordinateur est actuellement en dessous de l'emplacement actuel de la boule Y. N'oubliez pas que l' axe Y commence à 0 en haut et descend dans une direction positive. La balle est sous la pagaie. Nous pouvons ensuite mettre à jour la variable de position de l'ordinateur pour se déplacer vers la balle. Cela peut être fait en ajoutant plus, plus, sinon si c'est la direction opposée, nous voulons déplacer la pagaie de l' ordinateur dans le sens inverse. Nous pouvons le faire à l'intérieur d'ici. Essayons ça. Rafraîchissez et testez cela. Rebondissez le ballon. Vous pouvez voir que l'ordinateur est en mouvement. C'est maintenant un jeu gagnable. Vous pouvez également le faire si vous voulez accélérer ou ralentir les pas que la pagaie de l'ordinateur prend pour aller vers la balle. Mais cela est complètement facultatif, et cela peut également devoir être réglé en fonction de la vitesse d'exécution de la boucle. Super. Il s'agit d'un mouvement informatique très basique et ensuite, il améliorera encore plus le jeu en ajoutant un peu de hasard supplémentaire au mouvement de la balle. 16. Rebondissement aléatoire: Le ballon rebondit actuellement sur tous les murs et les pagaies est un peu prévisible. Actuellement, chaque rebond est à 90 degrés, qui nous laisse souvent dans une situation où la balle peut parfois tourner en carré, et elle rebondit sur les pagaies sans même avoir besoin de bouger eux. Pour améliorer cela, nous ajouterons un peu de hasard à notre rebond de pagaie pour rendre notre jeu un peu meilleur. Pour cela, nous avons besoin d'une fonction. Créons une fonction n'importe où dans notre code avec le nom de générer un rebond aléatoire. Ajoutez un peu de hasard. Nous n'avons pas besoin de faire quoi que ce soit de trop fou ou de complexe. Si nous passons d'abord à notre fonction collide, les deux dernières instructions if vérifient le contact de la pagaie pour le joueur et aussi pour la pagaie de l'ordinateur. Actuellement, lorsqu'il y a contact entre la balle et la pagaie, tout ce que nous faisons avec ces deux lignes de code ici, c'est inverser la direction. Pour ce faire, nous définissons une direction positive sur un négatif et aussi l' inverse. Pour ajouter un peu de hasard, il suffit d'ajouter une petite valeur positive ou négative à l'une de ces lignes, que nous pouvons revenir de notre nouvelle fonction. À l'intérieur de cette fonction, nous allons d'abord générer un nombre compris entre zéro et un. Zéro et un nous donne deux options, que nous pouvons ensuite utiliser pour décider si nous allons créer un nombre positif ou négatif. Encore une fois, nous utilisons Math.Floor pour arrondir notre numéro. Le nombre que vous souhaitez arrondir va être généré avec Math.Random pour nous donner un nombre compris entre zéro et un. Rappelez-vous tout Math.Random génère un nombre aléatoire compris entre zéro et un. Il n'en inclut pas réellement un. Par exemple, il ira jusqu'à 0,999. nombre aléatoire baissé nous donnera toujours une valeur de zéro. Pour obtenir une valeur comprise entre zéro et un, nous pouvons multiplier cette valeur par deux, installer à l'intérieur d'une constante appelée nombre zéro à un. Ces deux options peuvent désormais être utilisées pour créer un symbole positif ou négatif, comme nous l'avons vu plus tôt. Stockez-le à l'intérieur d'une constante, positive ou négative. Ensuite, nous allons saisir notre variable d'en haut, soit zéro, soit un. Nous disons que si cela est égal à l'une des options nulles, en utilisant les instructions conditionnelles JavaScript, la première option retournera une valeur négative. S'il n'est pas séparé par un deux-points, un symbole positif sera renvoyé. Si cela renvoie un zéro, nous obtiendrons un symbole négatif. S'il en retourne un, nous obtiendrons un symbole positif. N'oubliez pas que puisque nous retournons une chaîne, nous devons également envelopper les résultats à l'intérieur de la fonction numérique. Assurez-vous que nous récupérons toujours un nombre plutôt qu'une chaîne. Nous retournons le symbole positif ou négatif, et nous ajoutons ce symbole égal à une petite valeur. Encore une fois, nous utilisons Math.Random pour nous donner un nombre compris entre zéro et un et aussi pour en faire un peu plus d' une valeur plus petite, nous allons diviser cela par deux. Si nous retournons cette valeur à partir de notre fonction, cela retournera un nombre positif ou négatif compris entre la valeur zéro et 0,5. Étant donné que cette valeur est si petite que nous revenons maintenant, comment savoir si cela est ajouté à notre rebond ou non ? Eh bien, nous pouvons d'abord le voir avec un journal de console. Si nous examinons notre fonction Cloud et dans nos deux dernières sections que nous avons examinées précédemment, nous pouvons ajouter cela au contact de la pagaie du joueur juste au-dessus de l'endroit où nous effectuons le changement de direction à un journal de console avec la valeur mu de x. Copiez ceci et faites exactement la même chose juste après. Chaque fois que la balle rebondit sur la pagaie du joueur, nous devrions voir deux journaux de console avec la valeur mu de x. N'oubliez pas que nous n'avons ajouté aucune valeur aléatoire différente à l'un de nos changements de direction. encore. Ces deux valeurs doivent être exactement identiques ou opposées en termes de positif ou de négatif. Essayons ça. Rafraîchissez-vous et sautez dans la console. Commencez notre jeu et établissez maintenant un contact entre la flaque d'eau, et nous pouvons voir que nous avons un négatif 2,49 et aussi l'équivalent positif. Comme ces chiffres sont exactement les mêmes, cela prouve que tout ce que nous faisons est inverser la direction de 90 degrés. Mais si nous continuons maintenant à ajouter notre petite valeur aléatoire, nous devrions voir deux valeurs différentes à l'intérieur de la console. Maintenant, nous allons ajouter notre petit volume qui est renvoyé par notre fonction appelée générer des limites aléatoires. Il en va de même pour la pagaie de l' ordinateur. Maintenant, si nous testons cela, nous devrions voir la petite valeur être renvoyée et ajoutée à partir de notre fonction, ce qui devrait être légèrement différent nous donner un changement de direction différent avec notre ballon. Rafraîchir Maintenant, si nous prenons des contacts, nous y allons. Super. Il se passe beaucoup de choses ici, mais si on y jette un coup d' œil par deux. Les deux premières paires, il y a un négatif de 3,55, qui s'inverse pour être une valeur positive de 3,22. Ces deux valeurs étant légèrement différentes, cela signifie que notre valeur de rebond est maintenant entrée en vigueur. Si nous examinons la deuxième paire, encore une fois, nous ne changeons pas seulement la valeur de positive à négative, nous modifierons également légèrement n'importe quelle valeur limite. Cela vaut également pour toutes les paires qui suivent. petit changement peut faire une grande différence et rendre notre jeu beaucoup moins prévisible. Empêchez également le ballon de se déplacer dans un carré sur la toile. Ensuite, nous allons jeter un coup d'œil à la façon dont nous pouvons restreindre notre pagaie afin qu'elle ne disparaisse pas de la toile. 17. Maintenir la palette sur la toile: Alors que nous approchons de la fin de notre jeu, l' une des touches finales que vous souhaitez ajouter est de restreindre les pagaies des joueurs afin qu'elles ne sortent pas du haut ou du bas de la toile, lorsque nous appuyons sur le bouton touches haut et bas. Pour cela, nous allons passer la fonction HandleKeyPressed pour ajouter notre code nécessaire pour restreindre cela. Cette fonction HandleKeyPressed est la zone de notre code qui détecte si nous appuyons sur la flèche vers le haut ou la flèche vers le bas. L'énoncé d'interrupteur est responsable du déplacement des joueurs pagayés vers le haut ou vers le bas. À l'intérieur, en commençant par le boîtier flèche vers le haut, nous allons ajouter du code pour empêcher les pétales des joueurs de sortir du haut de la toile. Pour ce faire, avant de déplacer notre position de joueur par une valeur particulière, nous ajouterons une instruction if pour vérifier cela. Si quelque chose est vrai, nous voulons revenir hors de cette section sans bouger la position du joueur. Il y a quelque chose que nous voulons vérifier , c'est la position du joueur. N'oubliez pas que lorsque nous parlons la variable de position du joueur, il s' agit de la ligne centrale de la pagaie. Pour trouver le haut de la pagaie, il faut déduire la moitié de la hauteur de la pagaie et trouver le bas de la pagaie pour s'assurer qu'elle ne descend pas du bas de la toile. Nous devons également ajouter la moitié de la hauteur de la pagaie. Nous pouvons utiliser cela à l'intérieur de notre déclaration if. sortant du premier emplacement à l'intérieur de notre déclaration if. Tout d'abord, nous allons saisir la position actuelle du joueur. Comme nous l'avons vu dans les diapositives, nous déduirons la hauteur de la pagaie divisée par 2. Cela nous donnera le point le plus haut de notre pagaie. Nous devons vérifier si c'est inférieur ou égal à 0, ce qui constitue le haut de notre toile. Si c'est le cas, nous y reviendrons sans déplacer la position du joueur. Ensuite, dans la section flèche vers le bas, nous ferons une déclaration similaire si nous vérifions la position du joueur, cette fois nous allons ajouter la moitié de la hauteur de la pagaie, puisque nous avons affaire au bas de la pagaie. Ici, nous vérifions si le bas de la pédale est égal ou supérieur au bas de la toile, que l'on peut trouver avec toile.height. Plus grand ou égal, sur le canvas.height, si c'est vrai, il reviendra de nouveau hors de cela sans déplacer la position du joueur, sorte qu'il n'ira pas plus loin que le bas de la toile. Testez cela, appuyez sur la barre d'espace et nous irons tout en haut. La pagaie de place ne va pas plus loin que le haut. Déplacez cela vers le bas. Il est maintenant limité aux joueurs de pagayer pour rester dans la zone de toile. 18. Réflexions finales: [MUSIQUE] C'est maintenant pour la fin de notre jeu et félicitations d' avoir atteint ce stade. Nous avons maintenant appris quelques concepts fondamentaux et même si notre jeu n'est pas parfait, il est jouable, nous avons appris tous les concepts dont nous avons besoin pour commencer le développement de jeux JavaScript. J'espère que ça vous a plu. J'espère que vous avez acquis de nouvelles compétences et que vous avez hâte de vous plonger dans la création d'autres jeux basés sur JavaScript. Merci d'avoir pris ce cours, et je vous verrai dans le prochain.