Einführung in die Entwicklung von Javascript – Teil 1

1. 1 Einführung: Sie haben sich jemals gefragt wie Sie einfache 2D-Spiele erstellen die im Browser funktionieren, dann ist diese Klasse für Sie konzipiert. Da JavaScript in alle gängigen Browser integriert ist, eignet es sich perfekt zum Erstellen browserbasierter Spiele. Dieser Kurs bringt Ihnen alle Konzepte bei , die Sie beim Aufbau eines Pong-Stil-Spiels kennen müssen , alles in die Praxis umsetzen. Dieser Kurs ist nicht darauf ausgelegt , zu tief zu gehen, oder wenn Sie über vorhandenes JavaScript-Wissen verfügen, wird es Ihnen wirklich helfen, wenn Sie Fortschritte machen. Wir werden versuchen, alle wichtigen Konzepte abzudecken , die Sie benötigen, um grundlegende 2D-Spiele im Browser zu erstellen , und dazu richten wir zunächst den HTML Canvas ein. Der Canvas ist eine ideale Möglichkeit, innerhalb des Browsers zu zeichnen. Es ist perfekt, um unseren Spielbereich zu zeichnen, Dinge wie den Ball, die Pfützen. Wir können auch JavaScript verwenden, um diese auch auf der Canvas zu verschieben. Aber wenn wir mit einem Canvas arbeiten, benötigen wir ein wenig Hintergrundwissen über das Rastersystem. Das ist alles auch in dieser Klasse abgedeckt. Aber keine Sorge, es ist wirklich einfach abzuholen. Wir werfen einen Blick auf alle grundlegenden Zeichnungsfunktionen wie das Zeichnen von Text, das Zeichnen Linien, Zeichnen von Quadraten und Rechtecken, Kreisen und wie wir auch Looping anwenden können, damit wir es wiederholen können Prozesse, die ein wirklich reibungsloses Spiel machen. Wir werden uns auch ansehen, wie wir mit unserem Spiel interagieren und Objekte über die Tastatur bewegen können . Natürlich, welche Art von Pong Spiel wäre komplett? Wir haben nicht damit fertig, dass der Ball von verschiedenen Gegenständen abprallte. Der Ball muss von allen Seiten unseres Spiels abprallen. Wir müssen eine Punktzahl knacken, wenn es auf eine bestimmte Seite trifft. Wir müssen von den beweglichen Paddeln abprallen. All dies wird in dieser Klasse abgedeckt. Sie benötigen keine zusätzlichen Tools oder um Einkäufe für diese Klasse zu tätigen. Alles was wir brauchen ist ein Webbrowser und einen Freitexteditor. Wenn das nach etwas klingt , das Sie begeistert und Sie etwas darüber lernen möchten, springen Sie in die Klasse und wir sehen uns in der ersten Lektion, in der wir mit der Einrichtung des HTML Canvas beginnen . 2. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen diesen Kurs zu verfolgen , nur um eine weitere Vorlesung abzuhaken. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den Code, den Sie schreiben, zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Du musst dich nicht zu sehr verirren und vom Unterricht ablenken, und du kannst sogar einen Schritt zurücktreten , wenn du den Kurs beendet hast und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . Denken Sie auch daran, Ihr Projekt auch hier auf Skillshare zu teilen und nur ich werde es mir ansehen, aber es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, der Registerkarte Projekt und Ressourcen wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 3. Das HTML Canvas einrichten: Da wir ein 2D-Spiel erstellen, brauchen wir eine Möglichkeit, verschiedene Formen und verschiedene Elemente zu erstellen und diese auf den Bildschirm zu platzieren. Um dies zu tun, werden wir die HTML5-Canvas intensiv nutzen . Canvas ist nur ein HTML-Element wie ein div oder sogar ein Bild. Es hat ein öffnendes und schließendes Tag und allein macht es eigentlich nichts. Aber sobald wir dies haben, können wir die Canvas-API verwenden, um Grafiken zu zeichnen. Wir können auch viel mehr für Fälle von Überbeanspruchung wie Foto-Manipulation tun , indem wir die Pixel und Animationen ändern , um nur einige zu nennen. Dieser Kurs wird sich mehr auf eine 2D-Grafik konzentrieren. Viele andere APIs und Bibliotheken stehen ebenfalls zur Verfügung, um 3D-Funktionen zu handhaben. Um auf diese 2D-Funktionen zuzugreifen, verfügt die Canvas-API über eine Schnittstelle namens CanvasRenderingContext2D. Das ist nicht etwas, was Sie sich merken müssen. Aber wissen Sie nur, dass wir aus diesem Grund mit JavaScript Zugriff auf die 2D-Zeichnungsfunktionen auf der Leinwand haben. Hier sehen Sie eine Auswahl einiger Eigenschaften und Methoden, auf die wir zugreifen , die es uns ermöglichen, auf die Leinwand zu zeichnen. Sie werden noch ein paar davon während des Kurses sehen. Gehen wir nun in den Texteditor und richten Sie Dinge mit einem neuen Projekt ein. Zuerst brauchen wir einen neuen Projektordner , um alle unsere Dateien darin zu speichern. Lass mich dieses Spiel nennen, alles, was du willst, aber ich möchte dieses eine Spiel nennen und „Enter“ drücken. Öffnen Sie Visual Studio-Code. Wenn Sie möchten, können Sie einen anderen Editor verwenden , wenn Sie möchten. Zieh das rüber. Dann brauchen wir zwei neue Dateien , um loszulegen. Der erste, den Sie entweder hier auf das Symbol Neue Datei klicken können, wird eine neue Datei erstellt. Ich nenne das die index.html. Die zweite Datei, die wir brauchen, wird für unser Skript sein , die script.js. Dies wird alle unsere Zeichenfunktionen in unserem Spielcode erledigen . Fangen wir in unserer index.html von vorne an. Hier hat Visual Studio Code eine praktische Verknüpfung namens html:5, die uns alle unsere grundlegende HTML-Struktur liefert. Der Titel ist derselbe. Wir brauchen nicht viel Inhalt innerhalb des Körperabschnitts, aber das erste, was wir brauchen, ist die Leinwand. Wie bereits erwähnt, hat die Leinwand die öffnenden und schließenden Tags. Wenn wir dies speichern und im Browser öffnen , sehen Sie noch keine Inhalte auf dem Bildschirm. Wenn wir die Pfadindexseite kopieren, fügen Sie diese ein, Sie sehen keinen Inhalt im Browser. Um die Leinwand tatsächlich zu sehen, müssen wir Dinge in unsere JavaScript-Datei zeichnen oder wir können auch etwas Styling hinzufügen hier auch etwas Styling hinzufügen, um unsere Leinwand sichtbarer zu machen. Bezug auf den Stil In Bezug auf den Stil möchten wir hier nur unsere Leinwand greifen und eine Hintergrundfarbe festlegen, um dies sichtbarer zu machen. Sie können dies in einer beliebigen Farbe machen , aber ich werde mich für einen rgb-Wert entscheiden. Das Rot von 61 und 59 für das Grün und das Blau. Dies wird uns diese dunklere Hintergrundfarbe geben. Wir können jetzt die Leinwand im Browser sehen. Sie können standardmäßig sehen, dass es sich um eine ziemlich kleine Leinwand handelt. Standardmäßig wird die Leinwand als 300 Pixel breit und 150 Pixel hoch gerendert . Wir können dies innerhalb unseres Skripts überschreiben. Um dies in der Mitte zu schaffen, können wir dies genauso tun, wie wir es mit anderen regulären HTML-Elementen tun würden . Stellen Sie zunächst den Anzeigetyp auf den Wert des Blocks ein. Dann können wir den Rand oben und unten auf Null setzen und dann links und rechts automatisch . Speichern und aktualisieren, und dies wird jetzt in der Mitte angezeigt, da ich den Platz links und rechts automatisch aufgeteilt habe. Das letzte, was Sie innerhalb unserer Indexseite direkt unter der Leinwand tun müssen, ist der Link unserer Skriptdatei. Platzieren Sie die Quelle, die auf unsere script.js verweist. Dann können wir in diese Datei wechseln, um etwas Inhalt hinzuzufügen. Das erste, was wir drinnen tun müssen ist, unser Canvas-Element tatsächlich zu greifen. Wir machen das genau wie bei jedem anderen HTML-Element. Wir haben Zugriff auf unsere Elemente mit Dingen wie QuerySelector, getElementById, getElementByClassName, und wir können dies innerhalb einer Konstante namens Canvas speichern . Für diesen Zugriff, das vollständige Dokument, verwende ich QuerySelector in unserem Canvas-Element übergeben wird. Jetzt speichert dies unseren Verweis auf unsere Elemente innerhalb dieser Variablen oder Konstante. Wir können jetzt direkt unten darauf zugreifen. Beginnend mit dem Überschreiben dieser Standardeinstellung Größe von 150 mal 300 Pixel. Schnapp dir unsere Leinwand. Wir können die Breite dieses Elements auf einen beliebigen Wert festlegen , den Sie möchten. Sagen wir 800. Als nächstes die Höhe von 400. Dies sollte jetzt im Browser aktualisiert werden. Das letzte, was wir innerhalb dieser Datei tun müssen , ist der Zugriff auf die 2D-Zeichnungsfunktionen der Leinwände mit GetContext. Wir können dies innerhalb einer Konstante namens ctx speichern, unsere Canvas-Elemente greifen und dann eine Methode namens getContext aufrufen. Übergeben Sie eine Reihe von 2D, um uns Zugriff auf die 2D-Zeichnungs-Features zu ermöglichen. Der konstante Name von ctx liegt bei uns, aber dies ist eine übliche Namenskonvention den Zugriff auf den Renderkontext, und diese Konstante kann jetzt verwendet werden um bei Bedarf auf die Leinwand zu zeichnen. Wir werden dies während dieses Kurses reichlich nutzen. Diese Leinwand ist jetzt auch für uns bereit zu zeichnen. Aber kurz bevor wir dies tun, werden wir im kommenden Video einen Blick darauf werfen, wie wir mit Rastern und Koordinaten arbeiten können, was uns wirklich helfen wird die Platzierungen unserer Objekte auf die Leinwand. 4. Raster und Co-Ordinates: Wir werden uns nicht zu weit vom Canvas zurückziehen, wenn wir zuerst einige grundlegende Koordinaten nicht verstehen. Einige davon verstehen Sie vielleicht schon, und wir müssen nicht zu tief gehen, aber wenn nicht, werden wir jetzt eine kurze Zusammenfassung machen. Wenn wir es auf den Canvas oder in die meisten 2D-Gittersysteme zeichnen , haben wir zwei Richtungen, die wir kennen müssen. Dies ist die X- und die Y-Achse, x ist horizontal von links nach rechts und y ist von oben nach unten vertikal. heißt, wenn Sie die obere linke Ecke dieses Gitters, x und y, suchen möchten , werden beide Null sein, aber was ist mit so etwas wie diesem Quadrat mit vielen Formen wie diesem? Obwohl es mehrere Rasterräume beansprucht, ist die Startposition oben links. Hier haben wir diesen roten Punkt. Von Anfang an oben links in diesem Raster werden wir über drei Leerzeichen auf der X-Achse und zwei Leerzeichen auf der Y-Achse hinunter gehen , was uns unsere Ausgangsposition gibt. Sobald wir unsere Ausgangsposition in der Ecke haben , können wir dann die Höhe und Breite jeder gewünschten Form einstellen . Das ist alles, was Sie wirklich wissen müssen, um loszulegen. Wir können dann die Größe der Grafik festlegen und andere Dinge tun, wenn wir sie erstellen. Das ist es, was wir als Nächstes haben werden. 5. Zeichnen von der Leinwand: Um beim Zeichnen auf die Leinwand zu helfen, habe ich einen Download erstellt, den Sie während dieses Kurses und auch in Zukunft verwenden können. Alles, was Sie tun müssen, ist zu diesem Link zu gehen, den Sie auf dem Bildschirm sehen, die PDF-Datei herunterladen und diese an einem sicheren Ort aufbewahren können. Lasst uns nun in unser Drehbuch einsteigen und einen Blick darauf werfen, wie wir einige davon nutzen können. Im Koordinatenvideo haben wir uns ein Beispiel für das Zeichnen eines Quadrats angesehen. Fangen wir damit an. Beachten Sie auch, dass die Quadrate und Rechtecke dieselbe Zeichnungsmethode verwenden. Wir haben gerade die Breite oder die Höhenwerte geändert Um ein Rechteck oder ein Quadrat mit der Leinwand zu zeichnen, müssen wir zuerst auf unsere Kontextvariable zugreifen, also ctx, und dies hat eine Methode verfügbar mit dem Namen FillRect. Dies füllt ein Rechteck mit einer Volltonfarbe oder sogar so etwas wie einem Farbverlauf. Wir werden verschiedene Werte für das 4. Jahr analysieren. Genau wie wir es zuvor mit dem Koordinatenvideo angesehen haben , die ersten beiden Werte der Ort, an dem wir dieses Rechteck platzieren möchten. Da dies auf der linken oberen Seite des Rechtecks oder Quadrats basiert , möchte ich dieses Beispiel beginnen indem ich dies oben links zeige. Die linke oben wird x, 0 und y, 0 sein. Dann analysieren wir die Breite und die Höhe, die die Form haben soll. Um dies zu einem Quadrat zu machen, können wir einige gleichmäßige Werte wie 100 analysieren. Dies wird oben links auf unserer Leinwand ein Quadrat von 100 mal 100 Pixel platzieren . Wir können dies auch über die X-Achse oder die Y-Achse schieben, jeden Wert, den wir wollen. Wenn wir die Y-Achse auf 50 ändern, wird dies die Leinwand weiter nach unten schieben. Neben der FillRect-Methode können wir dies auch als Strich ändern, also strokeRect. Anstatt eine einfarbige Farbe zu füllen , wie wir es sehen, wird der Strich einen Umriss um die Form legen. Dies gibt uns einen Umriss eines Rechtecks oder eines Quadrats. Für die meisten Dinge, die wir auf die Leinwand zeichnen, haben wir eine Strich- oder eine Fülle-Alternative. Ich werde das einfach ändern , um voll zu sein. Wir können auch ein Rechteck erstellen, indem wir entweder die Höhe oder die Breite ändern. Wenn wir dies zum Beispiel auf 200 ändern, wird uns dies ein Rechteck geben. Standardmäßig haben wir diese einfarbige schwarze Farbe. Wir können dies ändern, indem wir auf eine Eigenschaft in diesem Kontext namens FillStyle direkt über FillRect zugreifen diesem Kontext namens FillStyle und erneut auf unseren Kontext zugreifen, wie wir es mit all diesen Zeichnungs-Features tun werden . Wir können auf die Eigenschaft namens FillStyle zugreifen. FillStyle wird gleich einer Zeichenfolge sein und diese auf eine Farbe wie Rot setzen. Wenn wir den Browser aktualisieren, wird nun die Hintergrundfarbe aktualisiert. Wenn wir StrokeRect anstelle von fill verwenden würden , genau wie wir es zuvor gesehen haben , müssten wir dies auch aktualisieren, um StrokeStyle zu entsprechen. Dies ändert die Umrissfarbe in Rot. Machen wir diese beiden Änderungen einfach rückgängig und lassen Sie es als Füllung. Wie zu erwarten, werden diese Rechtecke innerhalb unseres Spiels nützlich sein . Wir könnten sie benutzen , um den Spieler und auch das Paddel des Computers zu zeichnen , das verwendet wird, um den Ball zu schlagen. Lass uns das mal ausprobieren, beginnend damit die Spieler auf der linken Seite rüber paddeln. Da wir eine Leinwand mit einer Höhe von 400 Pixel haben, können wir zunächst diese in die Mitte stellen, indem den Y-Wert auf 200 ändern. die Breite der Leinwand Lassen Sie uns die Breite der Leinwand auf einen Wert von acht und die Höhe von 80 einstellen . Aktualisieren. Man würde erwarten, dass das Paddel in der Mitte liegt, da wir diesen Y-Wert auf 200 eingestellt haben, was der Hälfte der Höhe entspricht. Aber wie wir bereits erfahren haben, die Ausgangsposition der X- und Y-Koordinaten befindet sich die Ausgangsposition der X- und Y-Koordinaten in der oberen linken Position unserer Form, was bedeutet, dass sich die Oberseite der Form in der Mitte der Leinwand und nicht in der Mitte unseres Rechtecks. Hier müssen wir anfangen, genauer über Dinge nachzudenken . Damit sich das Paddel korrekt in der Mitte der Leinwand befindet, müssen wir nun die Hälfte der Höhe des Paddels abziehen. Da wir wissen, dass die Höhe des Paddels 80 Pixel beträgt, könnten wir 40 von der Ausgangsposition abziehen. Dies funktioniert, aber eine bessere Option wäre es, diese Werte zu ändern , um Variablen zu verwenden. Die Variablen würden dann verwendet, um diese Berechnung für uns durchzuführen, und es wäre auch in Zukunft nützlich , wenn wir einen dieser Werte ändern würden. Nur beides können wir einige Variablen erstellen. Die erste ist die Paddelbreite, die dieselben Werte verwendet, also die Breite von acht Pixeln. Dann ist der zweite für die Paddelhöhe. Die Paddelhöhe beträgt 80 Pixel, genau wie wir es bereits getan haben. Dann können wir diese in unserer FillRect-Methode nutzen. Die Paddelbreite, auch die Höhe, und das sollte immer noch genau gleich funktionieren. Aber anstatt diesen Wert von 160 fest zu codieren, werden wir dies jetzt mit JavaScript berechnen. Wir können die Leinwandhöhe, die derzeit 400 Pixel beträgt, greifen und diese durch zwei teilen, um das Zentrum zu erhalten , das uns derzeit den Wert von 200 gibt. Aber wie wir wissen, werden 200 dies nicht in die Mitte der Leinwand legen. Wir müssen auch die Hälfte der Paddelhöhe abziehen, also canvas.height geteilt durch 2. Ich nehme auch die Paddelhöhe geteilt durch zwei weg. Was wir hier haben, ist genau das Gleiche wie zuvor. Wir haben den Wert von 200, zum Mitnehmen 40. Dies ist genau das Gleiche wie zuvor, verwendet jedoch Variablen. Speichern und aktualisieren. Nun, für das Paddel des Computers, das rechts vorbei sein wird, und das sollte alles ziemlich ähnlich aussehen, müssen wir nur die x-Position ändern , um rechts vorbei zu sein. Wir können den FillStyle auch in eine andere Farbe ändern. Wenn Sie nach unten gehen, wird der gesamte Code von nun an eine andere Farbe haben, indem Sie den FillStyle ändern. Lass uns blau gehen. Dann benutzen wir Ctx.FillRect. Wie bereits erwähnt, besteht der einzige Unterschied zwischen dem Paddel der Spieler und dem Paddel des Computers darin, dass wir dies auf die rechte Seite schieben wollen . Das Spieler-Paddel hat die x-Startposition von Null, die auf der linken Seite vorbei ist. Was wir für die Version des Computers tun möchten , ist, dies auf der rechten Seite zu platzieren , indem wir auf die canvas.width zugreifen, die derzeit 800 entspricht. Da diese Ausgangsposition jedoch oben links vom Rechteck basiert , würde dies tatsächlich vom Rand der Leinwand abschieben. Was wir tun müssen, ist, dies wieder zu erhöhen, indem wir die Paddelbreite abziehen. Die letzten drei Werte sind genau die gleichen wie oben. Das wird in der Mitte beginnen. Wir können dies verwenden, und die Breite und die Höhe des Paddels wurden ebenfalls eingestellt. Schnappen Sie sich alle drei, fügen Sie diese kurz nach dem Komma lassen Sie uns zwei Paddel auf dem Bildschirm liegen. Das nächste, was wir zeichnen müssen, ist ein Ball. Möglicherweise erwarten Sie eine Methode namens FillCircle oder etwas in dieser Richtung. Für Kreise verwenden wir jedoch eine Methode namens arc. erneut im Kontext Rufen Sie erneut im Kontext die Arc-Methode auf. Dies wird zum Erstellen eines Bogens oder einer Kurve verwendet. Wir können einen Kreis bilden, indem wir diese Kurve rundum zurück in die Ausgangsposition drehen diese Kurve rundum zurück . Im Gegensatz zu einem Rechteck hat die Form, da ein Bogen gekrümmt ist , keine obere Ecke, um ihn zu lokalisieren. Stattdessen lokalisieren wir es im Zentrum. Um es in die Mitte der Leinwand zu legen, könnten wir so etwas tun. Wir könnten auf die canvas.width dividiert durch 2 zugreifen. Dies platziert dies in die Mitte der X-Achse. Dann auch das Gleiche für die Höhe. Wir sind jedoch noch nicht fertig. Als nächstes kommt der Kreisradius, der die Bemaßung von der Mitte des Kreises bis zur äußersten Kante ist . Grundsätzlich die halbe Breite des Kreises. Platzieren wir es in 50, getrennt durch ein Komma. Der nächste Wert im Uhrzeigersinn ist der Start- und Endwinkel. Um dies effektiv senkrecht um 12:00 Uhr zu starten, beginnen wir mit der Position von Null. Damit die Endposition dies rundum drehen und einen Kreis erstellen kann, müssen wir diesen um 360 Grad drehen. Bei Verwendung der Bogenmethode erfolgt diese Rotation jedoch im Bogenmaß und nicht in Grad. Das Äquivalent von 360 Grad im Bogenmaß beträgt das 2-fache Math.PI. So können wir dies mit JavaScript tun. Wenn wir dies speichern und den Browser aktualisieren, sehen wir derzeit keinen Kreis auf der Leinwand. Wir sehen unseren Kreis noch nicht auf der Leinwand, denn zuerst müssen wir erklären, ob dieser Kreis eine Füllung oder ein Strich sein soll. Wir können das mit ctx.fill machen. Dies ist eine Methode, also brauchen wir die Klammern kurz danach. Aktualisieren. Dies wird unseren Kreis nun mit einer festen Hintergrundfarbe füllen. Wie zu erwarten, könnten wir die Strichmethode auch verwenden , um uns den Umriss unseres Kreises zu geben. Ich behalte das als Füllung. Ändern Sie auch die Füllfarbe direkt oben mit FillStyle und legen Sie diese auf Grau fest. Da Math.PI 2 mal ein voller Kreis ist, können Sie wahrscheinlich vermuten, dass die Hälfte dieses Wertes ein Halbkreis ist, also können wir einfach Math.PI sagen, anstatt ihn um zwei mal zu messen. Dies wird ein Halbkreis sein. Wenn Sie möchten, dass dies eine Linie ist, können Sie dies in einen Strich ändern. Sie könnten auch den Wert von Math.PI reduzieren oder erhöhen. Wenn wir den Wert von Math.Pi durch 2 teilen, wird uns dies einen Viertelkreis geben. Wie Sie sich vorstellen können, ist dieser Bogen eine ziemlich vielseitige Methode. Aber da wir einen Ball brauchen, werde ich dies wieder einstellen, um 2 mal Math.Pi zu sein , genau wie wir es zuvor hatten. Wir können dies auch in eine Füllfarbe und auch einen kleineren Kugelradius von 10 Pixeln ändern . Dies ist nur ein erster grundlegender Blick auf das Zeichnen auf die Leinwand. Wie zu erwarten, gibt es noch viel mehr zu lernen und viele weitere Dinge, die Sie tun können. Wir werden uns einige davon im kommenden Video ansehen. 6. Text, Linien und Pfade: dem vorherigen Video fortfahren, werden wir nun einige weitere Techniken entdecken , mit denen wir auf den Canvas zeichnen, um einige Linien und auch etwas Text zu zeichnen. Das wird sehr praktisch für unser Spiel sein. Ich beginne damit, Texte auf die Leinwand zu zeichnen , die verwendet werden, um Punktzahl des Benutzers zu zeichnen und den Benutzer dazu aufzufordern, das Spiel zu beginnen. Die Zeichnungstexte auf der Leinwand haben wir sowohl einen Strichtext, auch einen Umriss und den FillText oder eine Volltonfarbe. Fangen wir ganz unten in unserem Drehbuch an. Greifen Sie auf den Kontext zu und wir beginnen mit FillText. Für FillText müssen wir als erstes eine Zeichenfolge hinzufügen, die der Text ist, den wir anzeigen möchten, also hey, gefolgt von den X- und Y-Positionen, an denen wir dies platzieren möchten. Lass uns 150 gehen. Speichern und aktualisieren. Wir können diesen kleinen Text fast auf der Leinwand sehen , aber er ist wirklich schwer zu erkennen, da die Standardgröße 10 Pixel mit einer serifenlosen Schriftart beträgt . Aber das können wir natürlich in unserem JavaScript ändern . Lassen Sie uns zunächst den FillStyle so ändern, dass er einer beliebigen Farbe wie Rot entspricht und auch die Größe und auch die Schriftfamilie ändern. Wir können auf ctx oder font zugreifen. Stellen Sie dies auf eine Zeichenfolge ein. Dies nimmt genau die gleiche Syntax wie mit der CSS on -Eigenschaft an, damit wir eine Zeichenfolge der Pixelgröße übergeben können. Lass uns für 30 gehen und dann die Schriftfamilie von Helvetica. Aktualisieren und dies wird wirksam. Was schön wäre, ist die Punktzahl des Spielers auf beiden Seiten des Canvas angezeigt wird. Wenn wir die Punktzahl des Spielers in der Mitte der linken Hälfte und den Computerwert in der Mitte der rechten Hälfte hätten der linken Hälfte und . Um dies für die Punktzahl des Spielers zu simulieren, müssen wir uns effektiv in ein Viertel der Breite des Canvas drängen . Um eine Punktzahl zu simulieren, können wir einfach einen beliebigen Wert darin platzieren , z. B. drei, und schieben dann über ein Viertel der Breite. Wir können zuerst die Canvas, diese Breite, greifen und diese durch 4 teilen. Der Computer-Score, das muss drei Viertel des Weges über den Canvas sein, und wir können dies duplizieren . Ändere den Punktestand vorerst. Aber anstatt den Canvas durch 4 zu teilen, multiplizieren wir dies mit 0,75 schieben unseren Text drei Viertel des Weges über die Leinwand. Schließlich können wir diese beiden Werte auch in Variablen speichern , damit wir darauf zugreifen und später im Kurs verwenden können . Zurück an die Spitze, indem wir LET verwenden, damit wir diese im Laufe des Spiels aktualisieren können. Die erste Variable ist die Punktzahl des Spielers. Wir haben einen Anfangswert von 0, gefolgt von unserem Computer-Score. Diese Variablen können jetzt innerhalb unserer FillText-Methode verwendet werden . Entferne den fest codierten Wert, und dies ist die Punktzahl des Spielers. Der zweite ist der Computer-Score. Etwas anderes, das Canvas uns gibt, ist die Fähigkeit, mit Linien zu zeichnen. Es stehen zwei nützliche Methoden zur Verfügung, die als Verschiebewerkzeug und Linienwerkzeug bezeichnet werden. Werfen wir einen Blick auf die. Ctx.moveTo und Ctx.LineTo. Der erste von move to wird verwendet, um die Ausgangsposition zu wechseln und dann die Linie zu ziehen, ist das, was tatsächlich eine Linie auf dem Canvas zu der Endposition zeichnet, die wir gesetzt haben. Bewegen Sie sich zu, als würde man den Stift von etwas Papier abheben und an eine bestimmte Position bewegen. Line to wird verwendet, um die Linie tatsächlich zu zeichnen. Wofür ich das verwenden werde, ist, eine Mittellinie vertikal auf dem Canvas und auch auf den Mittelkreis zu zeichnen . Beginnen wir zuerst mit dieser vertikalen Linie und wir müssen zuerst die Position des Stiftes bewegen , um sich in der Mitte der Leinwand und oben zu befinden. Die Werte dafür sind zuallererst für x die Hälfte der Breite des Canvas und die y-Position ist 0, da wir dies ganz oben behalten möchten. Bewegen Sie sich abhängig, um gerade hier in dieser Position zu sein. Jetzt müssen wir die Line-to-Methode verwenden. Zeichnen Sie tatsächlich eine Linie zur Endposition, die sich unten befindet und an der Endposition verläuft, so dass diese immer noch in der Mitte des Canvas liegt , sodass wir die Canvas-Breite geteilt durch 2 und Die endgültige Y-Position ist unten unten. Dies ist die Canvas.Height. Dies wird dann festlegen, wohin wir unsere Linie ziehen möchten aber tatsächlich Orte auf dem Canvas, wir müssen die Strichmethode verwenden, also ctx.stroke und es gibt eine Linie von oben nach unten. Das ist wirklich gut, aber wenn wir genau hinschauen, haben wir auch eine zusätzliche unerwünschte Linie um diesen Ball herum. Dies geschieht, weil wir derzeit keine Trennung zwischen all diesen Canvas-Pfaden und den von uns erstellten Grafiken haben. Zum Beispiel haben wir direkt oben einen Kreis mit der Filmmethode gezeichnet. Wir haben dies gezeichnet, wie Sie es bei dieser grauen Farbe erwarten würden, aber dann läuft der Code weiter aber dann läuft der Code weiter nach unten und er zeichnet auch denselben Kreis mit der Strichmethode. Deshalb hat der Ball eine Füllung und auch einen Umriss vom Schlag bis. In diesem Fall können wir jeden dieser Abschnitte mit einer Methode namens begin path trennen . Wir nennen das direkt oberhalb unseres Zeilenabschnitts mit ctx.beginpath. Der Begin-Pfad wird alle oben vorhandenen Pfade effektiv löschen oben vorhandenen Pfade und von dieser Linie aus neu beginnen. Speichern und aktualisieren und jetzt wurde unsere Linie aus dem Kreis entfernt, wobei nur die vertikale Linie übrig bleibt, die wir beabsichtigt haben, sowie diese durchgezogene Linie. Wir können dies auch ändern , um eine gestrichelte Linie zu sein. Wir können dies tun, kurz bevor wir unsere Linie mit ctx.setlinedash ziehen. Set line dash ist eine Methode, die ein Array innerhalb dieses JavaScript-Arrays aufnimmt . Wir legen die Größe so fest, dass sowohl die Bindestriche als auch die Lücken zwischen jedem einzelnen von ihnen liegen. Wenn wir so etwas gemacht haben, 10, 20, 20 und 30, werden alle Werte für unsere Bindestriche und Leerzeichen festgelegt , sodass wir die Größe des ersten Bindestrichs, die Größe des ersten Leerzeichenraums, den Größe des zweiten Bindestrichs, die Größe des zweiten Leerzeichens und dann die Größe des dritten Bindestrichs und dann wird er bis zum Ende der Zeile wiederholt. Zehn Pixel für die erste Zeile und dann 10 Pixel für die erste Lücke und dann gehen wir weiter zu 20 und dann 30. Um dies einfach zu halten, gebe ich nur einen einzelnen Wert von 6 ein und dies wird sicherstellen, dass jedes unserer Leerzeichen und auch unsere Bindestriche gleich groß ist . Das letzte, was zu zeichnen ist, wird ein Mittelkreis sein. Wir wissen, wie man einen Kreis mit der Bogenmethode zeichnet. Aber dieses Mal setzen wir auch eine gestrichelte Linie ganz nach unten und beginnen einen neuen Abschnitt mit ctx.beginpath. Für unseren Kreis, ctx.arc. Genau wie unsere Startkugelposition müssen wir diese mit Leinwand in die Mitte der Leinwand platzieren Breite geteilt durch 2 und auch für die Höhe gleich. Schnapp dir das, füge sie ein. Der dritte Wert ist der Radius und da wir einen Ball von 10 haben, lassen Sie uns dies zu einem Wert von 20 machen. Für den Kreis ist die Ausgangsposition 0 und ein voller Kreis ist das 2-fache math.pi. Zeichnen Sie tatsächlich den Kreis, den Sie benötigen, um die Strichmethode aufzurufen und unseren Mittelkreis jetzt auf der Leinwand zu belassen . Dies ist das meiste, was wir für unsere Spiele bei Zeichnungsfunktionen benötigen , und der große Teil bei der Verwendung solcher Variablen ist, dass wir diese Werte in Zukunft aktualisieren können , um unsere Objekte auf dem Canvas zu verschieben. 7. Schleife: Looping wird ein wirklich wichtiger Teil sein, um Dinge in unser Spiel zu bewegen. Wenn Sie derzeit darüber nachdenken, werden wir derzeit Dinge wie einen Ball und auch die Pedale auf den Bildschirm gezogen . Aber was wir tun müssen, ist, diese Werte zu aktualisieren , um diese in eine andere Richtung zu bewegen, und dann müssen wir dies mit einer Schleife kontinuierlich neu zeichnen und wiederholen. Das werden wir uns jetzt mal ansehen. Unten in unserem Skript müssen Sie zunächst eine Funktion erstellen , die Sie wiederholt aufrufen möchten. Du kannst dem einen beliebigen Namen deiner Wahl geben, ich bleibe bei der Schleife. Der Zweck dieser Funktion besteht darin, wiederholt Autografiken wie Ball und Paddel zu zeichnen Autografiken wie Ball und , nachdem sie sich bewegt haben. Um es aufzurufen, können wir eine JavaScript-Methode namens setInterval verwenden . setInterval wiederholt unsere Loop-Funktion nach einer Reihe von Millisekunden. Wir nennen das ganz unten, das wird zwei Dinge aufnehmen, das erste ist das, was wir wiederholen wollen, und in unserem Fall ist es unsere Loop-Funktion. Wir werden dies weitergeben, gefolgt von einer Zeitverzögerung in Millisekunden. Lassen Sie uns dies derzeit auf 15 setzen, und Sie können dies für das langsamere Spiel erhöhen und dies für ein schnelleres Spiel reduzieren. Diese Loop-Funktion wird schließlich viele Teile unseres Codes wiederholen , die wir oben haben, aber jetzt legen wir uns in ein einfaches Konsolenprotokoll, damit wir überprüfen können, dass dies funktioniert. Also jeder Text, der hier drin ist, speichern Sie dies, und jetzt können wir in die Konsole gehen und überprüfen, ob und jetzt können wir in die Konsole gehen und überprüfen, ob unser setInterval unsere Funktion aufruft, inspizieren, in die Konsole springen und jetzt, wenn wir aktualisieren, wir können sehen, dass dies alle 15 Millisekunden aufgerufen wird. Lassen Sie uns damit beginnen, dieses Konsolenprotokoll durch unseren Ball zu ersetzen . Um unseren Ball zu zeichnen, könnten wir den Code schneiden und einfügen, mit dem wir unseren Ball zeichnen, der die ctx.arc-Methode ist. Oder stattdessen könnten wir dies in eine Funktion umwickeln und diese direkt aufrufen. Gleich darüber wird eine neue Funktion namens DrawBall erstellt. Dies wird unseren gesamten Code direkt unten umhüllen. Öffnen Sie die geschweiften Klammern genau so, und dann können wir diese ausschneiden und einfügen und direkt in unsere Funktion verschieben . Jetzt können wir unsere DrawBall-Funktion von innerhalb unserer Schleife aufrufen , das Konsolenprotokoll ersetzen , unsere DrawBall-Funktion übergeben und diese alle 15 Millisekunden aufrufen und den Browser aktualisieren. Ein paar Dinge, die Sie hier beachten sollten, das erste, was Sie bemerken werden, ist, dass unser Ball jetzt zu groß ist. Wir scheinen einen Konflikt zwischen den Pfaden zu haben , die wir erneut zeichnen, der mit CTX.BeginPath behoben werden kann. Ich werde dies innerhalb unserer DrawBall-Funktion hinzufügen, aktualisieren und dies behebt jetzt unser erstes Problem. Die nächste Ausgabe ist, dass sich der Ball tatsächlich noch nicht bewegt. Dies ist zu erwarten, denn obwohl wir diesen Ball wiederholt alle 15 Millisekunden gezogen haben, haben wir ihn immer an derselben Stelle gezeichnet. In der DrawBall-Funktion haben wir dies immer in die Mitte gezogen, und wir können diese beiden Werte mit einigen Variablen ändern , die wir aktualisieren können. Für die Breite, die die Exposition ist, ersetzen wir diese durch BallX und BallY für die Y-Position. Wir möchten immer noch, dass sich diese beiden Variablen zunächst in der Mitte der Leinwand befinden. Zuallererst, BallX, ist es gleich der Canvas-Breite geteilt durch 2. Platzieren Sie dies zunächst in die Mitte, und dann teilen wir für Bally direkt darunter die Höhe der Leinwand durch 2. Wie wir erwarten würden, wenn wir speichern und aktualisieren, sehen wir noch keine Updates , da wir die Werte von BallX und Bally jedes Mal aktualisieren müssen die Werte von BallX und Bally jedes Mal aktualisieren , wenn der Frame wiederholt wurde. Wir können dies in unserer DrawBall-Funktion wieder tun, nachdem dies gezeichnet wurde. Sobald wir zur nächsten Schleife übergehen, aktualisieren wir den Wert dieser beiden Variablen plus 2. Außerdem addieren wir den Wert von zwei zu unserer BallX-Variablen und aktualisieren dann die Variable, Bally ist gleich. Wir werden das kurz halten, da wir nicht so viele Probleme auf der Y-Achse haben , also ist der Wert von einer in Ordnung. Aktualisieren Sie das. Wir werden jetzt sehen, wie der Ball auf der Leinwand unterwegs ist. Dies wird jetzt aktualisiert, aber wir haben immer noch diese solide Spur auf der Leinwand, da die vorherige Ballposition entfernt werden muss. Wir können dies mit einer Canvas-Methode namens ClearRect beheben, die alle vorhandenen Zeichnungen von der Leinwand löscht , bevor wir unseren Ball in unsere Schleife neu zeichnen, und dies am Anfang platzieren, kurz bevor wir wiederholt, um unsere Funktion aufzurufen ClearRect zu übergeben, das im Kontext verfügbar ist. Wenn wir die Möglichkeit haben möchten, nur Kleinteile oder einen bestimmten Bereich der Leinwand zu löschen , löschen wir in unserem Fall die gesamte Leinwand. Zuerst gehen wir an der Startposition ein, die oben links ist, was die Koordinate von 0, 0 ist , und dann löschen wir die volle Breite und die volle Höhe. Zunächst einmal, indem Sie canvas.width, getrennt durch ein Komma, canvas.height, übergeben und diese erneut durch kleine Werte ersetzen. Wenn Sie nur einen kleinen Teil der Leinwand zum Browser entfernen möchten , bewegt sich der Ball nun wie erwartet, ohne diese solide Spur zu verlassen. Geh zum Ball, bewegt sich jetzt wie erwartet, und wir sehen jetzt nichts anderes auf der Leinwand, da wir es mit ClearRect gelöscht haben. Wir löschen die Leinwand jedes Mal, wir rufen diese Loop-Funktion auf. Was wir tun müssen, ist, unsere Zeichnungsfunktionen von oben zu greifen und diese auch in unsere Schleife zu verschieben. Der zusätzliche Vorteil all dieser Zeichnungsfunktionen, die in der Schleife sind, besteht darin, dass wir sehr bald die Paddelposition mit einer Tastatur aktualisieren werden, und dies wird auch die Position aktualisieren auf der Leinwand auf jeder Schleife. Aber im Moment gehen wir dorthin, wo wir unsere Formen zeichnen, und wir werden dasselbe tun wie mit dem Ball, nämlich den gesamten relevanten Code in eine eigenständige Funktion zu wickeln . Es kann also von innerhalb unserer Schleife aufgerufen werden. Erstens war die Zeichnungsfunktion das Spieler-Paddel, das sich hier direkt unter unseren Variablen befindet. Schneiden Sie dies aus und erstellen Sie eine neue Funktion namens DrawPlayerPaddle, fügen Sie diese wieder in unsere Funktion ein. Der zweite ist das Zeichnen eines Computer-Paddels, und das ist für alle blauen Bereiche. Schneiden Sie dies aus und erstellen Sie unsere neue Funktion namens DrawComputerPaddle. Fügen Sie wieder unseren Code ein, DrawBall-Funktion ist immer noch vorhanden. Der nächste war FiltText, und dies ist, um die Punktzahl auf die Leinwand zu zeichnen. Schneiden Sie dies also aus, erstellen Sie eine neue Funktion namens DrawScore und fügen Sie diese dann wieder in den Körper ein. Die nächsten beiden Abschnitte dienen zum Zeichnen unserer Linien auf die Leinwand. Dieser war für die Mittellinie und auch für den Kreis in der Mitte. Wir werden beide in eine einzige Funktion namens DrawCanvas einfügen. Füge das ein. Jetzt können wir all diese neuen Funktionen aus unserer Schleife aufrufen : DrawPlayerPaddle, das war die erste, gefolgt von DrawComputerPaddle, DrawScore und schließlich DrawCanvas. Probieren wir das aus, sehen wir uns den Browser an. Nachdem wir unser Rechteck zusammen mit dem Ball gelöscht haben, funktionieren jetzt alle übrigen Zeichnungsfunktionen. Wie zu erwarten, ist dies ein wirklich wichtiger Teil unseres Spiels und ein großer Schritt in die richtige Richtung. Als nächstes in der kommenden Lektion werden wir uns ansehen, wie wir die Tastatur benutzen können , um die Spieler auf und ab zum Ball zu bewegen . 8. Moving Objekte mit der Tastatur: Wir kommen jetzt zu dem lustigen Teil, in dem wir Dinge auf der Leinwand mit Steuerelementen wie der Maus oder der Tastatur tatsächlich bewegen können der Leinwand mit Steuerelementen . Ziel dieses Videos ist es, zu hören, wenn der Benutzer die - oder Abwärtstaste auf der Tastatur drückt, dann bewegen wir das Benutzerpaddel. All dies können wir mit regulärem JavaScript machen. Im Moment haben wir diesen Spieler auf der linken Seite rüber paddeln. Wenn wir zur Drawplayer-Paddle-Funktion gehen , die dies steuert, können wir genau hier mit der Position der X- und Y-Koordinaten sehen . Obwohl dies auf der linken Seite vorbei ist weil wir den x-Wert auf 0 haben und der Y-Wert in der Mitte liegt . Um unser Paddel mit der Tastatur zu aktualisieren, müssen wir diesen Y-Wert durch eine Variable ersetzen. Um es in der Mitte und nicht oben links positioniert zu halten, können wir diese Haushöhe trotzdem geteilt durch 2 beibehalten. Die Canvas-Höhe geteilt durch 2 kann jedoch durch eine Variable ersetzt werden, die als Spielerposition bezeichnet wird. Eine Position muss ganz oben mit den restlichen Variablen erstellt werden . Wir verwenden let, da dies aktualisiert werden muss. Spiele die Position und setze diese gleich der Canvas-Höhe geteilt durch 2 ein. Zu Beginn lässt dies unseren Spieler wie zuvor in der Mitte des Canvas. Aber jetzt haben wir eine Variable , die wir aktualisieren können. Dies wird auch in jeder Schleife überprüft da wir unsere Funktion von unserer Schleife aus aufrufen. Mit dieser Variablen jetzt einrichten, können wir beginnen, nach Tastaturereignissen zu hören unsere Spielerposition zu verschieben. Unmittelbar darunter müssen wir mit addEventListener auf ein Tastaturereignis hören . Dies ist nur reguläres JavaScript Document.addEventListener. Wir werden uns die Veranstaltung eines Nutzers anhören . Das Ereignis, auf das wir hören möchten, ist eine Taste, die nach unten gedrückt wird, die dann eine Funktion auslöst , die ich MovePaddle aufrufe. Funktion movePaddle. Da dies kein Ereignis ist, müssen wir auf die Ereignisinformationen zugreifen, um genau herauszufinden, welche Taste der Benutzer gedrückt hat Wir müssen die Ereignisinformationen an unsere Funktion übergeben . , wir beginnen mit einem Konsolenprotokoll das den Wert von e übergibt. Wir können genau sehen, welche Ereignisinformationen wir für unser Key Down Event haben. Springe in die Konsole, aktualisiere es. Dies wird zunächst nichts tun , bis der Benutzer die Taste gedrückt hat. Beginnen wir mit der Taste nach oben, die dann alle Informationen von unseren Tastaturereignissen ausgibt . gibt es viele Informationen Hier gibt es viele Informationen, die wir nicht brauchen. Aber die Hauptsache , die Sie für dieses Projekt benötigen , ist diese Code-Eigenschaft. Sie können sehen, dass dies eine Reihe von Arrow Up ist. Wenn wir das jetzt schließen und den Pfeil nach unten drücken, ist der Code, den Sie für diesen benötigen, Pfeil nach unten. Wir können auf e.code zugreifen und prüfen, ob jeder davon dem Pfeil nach oben oder dem Pfeil nach unten entspricht, dann können wir den Wert der Spielerposition festlegen. Lassen Sie uns das Konsolenprotokoll entfernen da wir wissen, wonach wir jetzt suchen und ersetzen Sie dies durch eine JavaScript-Switch-Anweisung. Der Wert, mit dem wir prüfen möchten, wie wir gerade gesehen haben, ist e.code. Da wir jetzt nur die aktuelle Liste für den Pfeil nach oben oder den Pfeil nach unten sind, könnte dies durch eine if-else -Anweisung ersetzen , wenn Sie dies bevorzugen. Aber ich möchte eine Switch-Anweisung verwenden , damit wir diese später erweitern können , um das Spiel mit der Tastatur zu starten. Zu Beginn ist der erste Fall, auf den wir achten müssen, Arrow Up. Stellen Sie sicher, dass dies genau mit der Zeichenfolge übereinstimmt , wie wir es in der Konsole sehen. Jedes Wort beginnt mit einem Kapital. Wenn der Pfeil nach oben gedrückt wurde, muss die Spielerposition durch Abzug eines Wertes aktualisiert werden. Denn denken Sie daran, dass der Wert von y ganz oben 0 ist. Dies wird aktualisiert, wenn sich die Spielerposition nach unten bewegt und unsere Variable der Spielerposition übersteigt. Dafür verwenden wir den Subtraktionszuweisungsoperator , der unsere speziellen Werte wie 15 von unserem aktuellen Wert subtrahiert 15 von unserem aktuellen Wert und diese Variable dann erneut aktualisiert. Jeder unserer Fälle muss mit einer Break-Klausel befolgt werden . Brechen Sie aus unserer Switch-Anweisung wenn dieser Fall abgeglichen wird. Wir müssen auch nur einen Doppelpunkt hier drin platzieren. Unser zweiter Fall ist knapp unten. Dieser wird für den Fall von Arrow Down sein : Dieses Mal aktualisieren wir die Spielerposition mit dem Additionszuweisungsoperator , der 15 hinzufügt, und weisen dann unsere neue neu zu Variable mit dem aktualisierten Wert. Wir brechen das aus, wenn das stimmt. Da unsere Spielerposition innerhalb unserer Funktion verwendet wird , wenn wir das Paddel zeichnen, sollten wir dies jetzt aktualisieren können , wenn wir die Auf- und Abwärtstasten drücken. Wir können auch alles andere auf der Leinwand mit der gleichen Technik bewegen . In einem zukünftigen Video werden wir uns ansehen, wie das Paddel des Computers nach oben oder unten bewegt werden kann, aber dieses muss automatisch erfolgen. Als Nächstes werden wir behandeln, wie mit dem Ball umzugehen ist, der von unseren Objekten abprallt. 9. Kollisionen erfassen und sprunghaft: Welche Art von Spiel hätten wir wenn der Ball nicht von den Seiten oder auch von den Paddeln abprallen würde? Nun, das ist schwierig , weil es etwas zu trainieren beinhaltet , da alle unsere aktuellen Koordinaten auf den Mittellinien von Dingen wie dem Ball und auch dem Paddel basieren den Mittellinien von Dingen wie . Aber wir werden unser Bestes tun , um die Dinge herauszufinden , und wir werden jetzt damit fortfahren . Wenn wir diese Draw-Ball-Funktion finden, wissen wir, dass diese beiden Codezeilen ganz am Ende dafür verantwortlich sind, unseren Ball zu bewegen. Jedes Mal, wenn der Ball auf die Leinwand gezogen wird, bewegen wir den Wert von Ball X und auch den Wert von Ball Y. Außerdem wissen wir, wie man die Richtung ändert. Wenn wir dies jetzt aktualisieren, wird dies in eine positive Richtung gehen. Wir können die Richtung auch ändern, indem wir einen dieser Werte in eine negative Zahl ändern. Dies wird die Grundlage sein, um von unseren Wänden und auch vom Paddel abzuprallen. Um dies zu tun, anstatt unsere fest codierten Werte genau so zu haben, aktualisieren wir diese Funktion, um stattdessen Variablen zu verwenden. Bewegen Sie x an die x-Position und bewegen Sie y in die y-Richtung. Dies wird die dynamische Aktualisierung dieser Werte wesentlich einfacher machen dynamische Aktualisierung dieser Werte wesentlich einfacher , sodass wir die Richtung bei einer Kollision umkehren können . Lassen Sie uns diese oben als Variablen einrichten. Bewegen Sie zuerst x, und behalten wir vorerst die gleichen fest codierten Werte , die wir zuvor hatten. Bewegen Sie y das war gleich eins. Sie können diese jedoch aktualisieren, um andere Werte zu haben, wenn Sie möchten. Auch eine weitere Variable für den Kugelradius , der ein Anfangswert von 10 ist. Wir werden das sehr brauchen, wenn wir die Kollisionen berechnen. Dies liegt daran, dass der Ball vom Mittelpunkt des Kreises aus positioniert ist , aber wenn er zum Beispiel nach oben kommt, müssen wir auch den Radius des Balls berücksichtigen. Wir können unsere Funktionen auch aktualisieren, um den Kugelradius direkt darunter zu nutzen. Zurück runter, um Ball zu zeichnen. Hier stellen wir den Kugelradius auf einige Pixel ein, oder wir können dies aktualisieren, um unsere Variable zu verwenden. Nun, weiter zur Funktion, um zu prüfen, ob eine Kollision vorliegt. Lassen Sie uns ganz unten direkt über unserer Schleife eine Funktion einrichten. Ich rufe meine Funktion collide auf. Dann wird diese Funktion dafür verantwortlich sein, vier verschiedene Dinge zu überprüfen. Das erste, was ist, oben und unten abzuprallen. Wir möchten auch überprüfen, ob links oder rechts von unserem Spiel Kontakt vorhanden ist , also müssen wir nach dem Ergebnis auf der X-Achse suchen. Dies gilt für beide Seiten. Wir möchten auch prüfen, ob es Kontakt mit dem Spieler-Paddel gibt. Das Gleiche gilt auch für das Paddel des Computers. Gut. Wir wissen jetzt, was wir innerhalb dieser Funktion tun wollen , und wir können dies direkt unter unserer Schleife aufrufen. Dies bedeutet, dass wir alle Kollisionspunkte an einem bestimmten Frame unserer Schleife überprüfen werden. Wir werden jedes Mal nach Kontakt suchen, wenn sich irgendetwas bewegt. Jetzt müssen wir innerhalb dieser Kollisionsfunktion etwas arbeiten . Kurz bevor wir anfangen, unsere vier Kontaktpunkte auszuarbeiten , ziehe ich einen temporären Ball auf die Leinwand. Wir können dies bewegen und sicherstellen, dass wir die richtigen Kontaktstellen haben. Zuallererst beginnen wir einen neuen Weg. Es stört keine anderen Zeichnungen. Der Füllstil. Du kannst diese Farbe machen, die du willst, nur damit es auffällt, ich werde mich für Lila entscheiden. Dann ctx.arc, um unseren Ball auf die Leinwand zu zeichnen. Jeder Ort für den Moment, jede zufällige Position ist in Ordnung, 10 Pixel auf dem X und Y wie im Ballradius. Um unseren Kreis zu machen, kann der Startwinkel Null und dann 2 mal Math.PI sein. Zeichnen Sie dies, das Letzte, was wir tun müssen, ist ctx.fill, save, und in der oberen Ecke unseres Bildschirms befindet sich ein Ball. Okay. Die ersten Kontaktpunkte, die wir überprüfen möchten, sind die Ober - und Unterseite der Leinwand. Beginnend mit dem Boden. Bewegen wir unseren temporären Ball nach unten auf der Leinwand und stellen sicher, dass wir den richtigen Kollisionspunkt haben . Die X-Achse spielt momentan keine Rolle, aber wir müssen die Y-Richtung ändern. Aber zuerst werden wir die Canvas.height übergeben , speichere das. Wie Sie sehen können, drückt dies dies vom Rand der Leinwand ab, also müssen wir diese Hälfte des Kugelradius zurückziehen. Wir haben dies bereits als Variable gespeichert, sodass wir dies von unserer Leinwandhöhe abziehen können. Da sind wir los. Dies ist der Kollisionspunkt auf der Unterseite der Leinwand, auf den wir achten möchten. Nun können wir dies in einer if-Anweisung nutzen. Wir wollen prüfen, ob etwas stimmt. Die Überprüfung, die Sie machen möchten, ist, ob der Ball y, der die Position auf dem Mittelpunkt des Balls ist, größer ist als die Ballposition, die wir gerade gezeichnet haben; wenn der Ball weiter gegangen ist nach unten als dieser aktuelle Punkt wird dann als außerhalb der Leinwand angesehen , und wir müssen dann die Richtung drehen. Kurz bevor wir das tun , testen wir, dies mit dem Konsolenprotokoll von hit bottom einwandfrei funktioniert . Springe in die Konsole und aktualisiere den Browser. Sobald der Kontaktpunkt an den unteren Rand der Leinwand gelangt oder erlischt, möchten wir unser Konsolenprotokoll hier ausführen lassen. Diesen Ball zu hüpfen ist ziemlich einfach. Derzeit, wenn das Spiel beginnt, geht der Ball in eine positive oder eine Abwärtsrichtung, aber wir können dies umkehren, indem wir dies in eine negative Zahl ändern , genau wie wir es zu Beginn dieses Videos gesehen haben. Jetzt, in diesem und da wir an der Y-Richtung arbeiten , können wir unser Konsolenprotokoll ersetzen, indem wir die Variable aktualisieren. Verschieben y, der aktuelle Standort, ist gleich einer negativen Version von move y was das Positive effektiv auf ein Negativ und ein Negativ zu einem positiven umkehren wird . Sparen wir uns das auf und probieren es aus. Aktualisieren Sie, und wir sollten einen Abprall von ganz unten sehen. Natürlich geht es immer noch der Ecke der rechten Seite der Leinwand, aber das ist in Ordnung. Wir können jetzt sehen, dass unser Bounce alles funktioniert. Gut. Jetzt müssen wir auch die Kollision oben auf der Leinwand berücksichtigen. In der if-Anweisung fügen wir eine oder Bedingung hinzu. Dieses Mal möchten wir prüfen, ob der Ball y-Standort nur den oberen Teil der Leinwand berührt. Wir wollen nicht prüfen, ob dies gleich Null ist , denn wenn dies aufgrund des Ballradius der Fall wäre , wäre dies halb und die Hälfte auf der Leinwand. Wir wollen auch den Ballradius abziehen. Wir prüfen, ob dies kleiner oder gleich Null ist. Wenn ja, sollte es von der Oberseite der Leinwand abprallen. Wenn wir den Browser neu laden, bewegt sich der Ball derzeit in eine Abwärtsrichtung. Aber zum Testen können wir die Y-Richtung bewegen, um eine negative Zahl zu sein, was dazu führt, dass sich der Ball in eine Aufwärtsrichtung bewegt. Dies ist die Grundlagen, wie wir einen Ball abprallen können. Es geht hauptsächlich darum, nur zu überprüfen, ob unsere Kontaktpunkte korrekt sind, und auch sicherzustellen, dass wir auch den Ballradius berücksichtigen . Wir werden nun eine Bedingung hinzufügen, um zu überprüfen, ob der Ball die linke oder rechte Seite unserer Leinwand trifft , und später erhöht dies die Punktzahl. Dieser wird alle auf dem Ball x Standort für die linke und rechte Seite unseres Spiels basieren. Gehe zurück zu unserer Funktion, die kollide ist. Dann wollen wir gerade unter unseren Kommentaren auch eine if-Erklärung abgeben. Zunächst einmal, um zu prüfen, ob der Ball auf der linken Seite kollidiert ist. Derzeit ist unser temporärer Ball genau dort, wo wir den Ansprechpartner haben wollen , der auf einen Wert von 10 eingestellt ist. Das funktioniert alles gut, da unser Kugelradius auf 10 eingestellt ist. Wir möchten prüfen, ob der in der Variable von Ball x gespeicherte Ort kleiner oder gleich dem Kugelradius ist. Wenn der Ball links dort ist , wo er jetzt ist, möchten wir dann eine Punktzahl an den Computer weitergeben. Wir bieten eine Möglichkeit, dies später zu tun, fügen Sie aber vorerst einfach ein Konsolenprotokoll mit dem Computer-Score ein. Darunter ein Else-if-Abschnitt. Dies wird für unseren Scheck sein um zu sehen, ob der Spieler erzielt hat , indem er den Ball auf die rechte Seite bewegt hat. Dafür passieren wir die Position von Ball x. Wir möchten sicherstellen , dass der Ball die rechte Seite der Leinwand berührt. Auch hier befindet sich die vertikale X-Position in der Mitte des Balls. Wir möchten auch prüfen, ob der Ball x plus der Kugelradius größer ist als gleich der vollen Breite unserer Leinwand. Wir können das mit der Leinwandbreite greifen. Platzieren Sie dann ein Konsolenprotokoll für den Spielerstand testen Sie dies in der Konsole. Es ist ein bisschen größer. Sie haben einen Tippfehler in Zeile 85. Das will einfach zusammen sein, kein Platz dazwischen. Probieren wir das jetzt aus. Wenn sich der Ball nach rechts bewegt, sehen wir, dass es einen Spielerstand gibt. Wenn wir ganz oben zu unserem x-Standort gehen, kann es nur eine negative Zahl sein. Wir können dann den Computer-Score testen. Los geht's. Das funktioniert jetzt alles wie erwartet. fangen die Dinge jetzt wirklich an Mit unserem Spiel fangen die Dinge jetzt wirklich an, Gestalt anzunehmen. Als nächstes schauen wir uns einen weiteren wichtigen Abschnitt an, darin besteht , den Ball von den sich bewegenden Paddeln abzuprallen. 10. Paddle: In ähnlicher Weise, um von den Seiten unserer Leinwand abzuprallen, müssen wir jetzt auch berücksichtigen dass der Ball auch unsere beweglichen Paddel trifft. Dies beinhaltet ein bisschen mehr Arbeit, da wir nicht nur den Ball berücksichtigen müssen, der die Vorderseite des Paddels trifft, sondern wir müssen auch überprüfen, ob sich die Ballposition zwischen der Ober- und Unterseite des paddeln auch. Beginnend mit dem Paddel unseres Spielers, um zu überprüfen, ob wir die Dinge richtig ausarbeiten, können wir diesen temporären Ball verwenden, diesen auf die Vorderseite des Paddels legen und überprüfen, ob wir den richtigen Kontaktpunkt haben. Springen Sie in die Collide-Funktion und oben haben wir diesen Bogen, der diesen temporären Ball erzeugt. Entfernen Sie diesen Wert und legen auf die Vorderseite des Paddels, wir müssen diesen auf der X-Achse, dem Kugelradius plus der Breite des Paddels, das in der Paddelbreitenvariablen gespeichert ist, bewegen dem Kugelradius plus der Breite des Paddels, das in der Paddelbreitenvariablen gespeichert ist . Aktualisieren und zuerst können wir sehen, wie sich dies bewegt, und um dies zu bestätigen, können wir dies in die Mitte verschieben , indem wir die Y-Achse gleich der Leinwandhöhe dividiert durch 2 anpassen . Da sind wir los. Jetzt haben wir die richtige Kontaktstelle für unser Paddel. Wir können diesen Kontaktpunkt jetzt verwenden, um zu prüfen, ob der Ball kleiner oder gleich diesem X-Wert ist. Auch hier haben wir eine if-Aussage wie diese eingerichtet. Gehe nach unten zu unserem Kommentar, der den Spieler-Paddel-Kontakt überprüft. Die if-Anweisung wird prüfen, ob die X-Position des Balls kleiner oder gleich der X-Position ist , die wir gerade eingestellt haben, nämlich der Kugelradius plus die Paddelbreite an diesem Ende. Grundsätzlich prüfen, ob diese Ballposition dort ist , wo sie jetzt oder weniger ist. Mit unserer Variable move X können wir dies dann rückgängig machen, indem wir diese auf das negative Äquivalent setzen. Denken Sie daran, dass wir nur die X-Position überprüfen, also sollte der Ball irgendwo vertikal von oben nach unten abprallen , solange er mit dem Gesicht des Paddels übereinstimmt. Lasst uns das auffrischen und testen es aus. Wir sollten jetzt einen Sprung sehen, bevor er auf die Rückseite der Leinwand trifft. Gut, also funktioniert das alles jetzt gut. Als nächstes möchten wir diesen Sprung nur dann beschränken, wenn sich der Ball zwischen oben und unten im Paddel befindet. Wir haben bereits eine Variable in unserem Spiel namens Spielerposition, die sich zunächst in der Mitte der Leinwand befindet, die für uns jetzt 200 sein würde. Wenn die Auf- und Abwärtstasten gedrückt werden, aktualisiert der Mittelpunkt des Paddels die Positionsvariable des Spielers sodass wir immer wissen, wo das ist. Nehmen wir zum Beispiel an, es ist derzeit bei 100, als nächstes müssen wir überprüfen, wo sich der Ball in Bezug auf das Paddel befindet. Jetzt können wir 70 als Ballposition verwenden. Nehmen Sie diesen Wert vom Paddel weg und wir können sehen, dass der Unterschied 30 Pixel beträgt, und dies ist eine positive Zahl. In einem anderen Beispiel können wir sehen, dass die Ballposition 125 ist. Nehmen Sie dies erneut von der Spielerposition ab, aber dieses Mal ist das Ergebnis eine negative Zahl von 25. Aber warum spielt diese Berechnung eine Rolle? Nun, es ist wichtig, denn wenn diese Nummer innerhalb der Paddelhöhe liegt, sollte es einen Kontakt geben. Wir hätten die Hälfte der Paddelhöhe , da wir von der Mittellinie aus arbeiten , und wir müssen auch den Ballradius berücksichtigen. Hier können die Dinge ein bisschen komplexer werden. Hier haben wir den Radius addiert oder abgezogen, je nachdem, auf welcher Seite des Balls ist, positive und negative Werte. In der vorherigen Folie hatten wir auch die gleichen positiven und negativen Zahlen , die wir berücksichtigen mussten. Dies bedeutet, dass wir einen komplexen Code schreiben könnten, um dies zu berücksichtigen, oder wir könnten unser Leben erheblich erleichtern, indem wir jeden Vergleich so ändern positiv ist, oder wir können dies mit einer mathematischen Methode namens absolut tun . Um zu sehen, wie Math. absolute funktioniert, springen wir in die Konsole und testen das aus. Wenn Sie ein Konsolenprotokoll mit dem Wert Mathematik platzieren, übergibt Delta abs eine positive Zahl wie zwei. Wenn wir jetzt aktualisieren und in die Konsole gehen, können wir sehen, dass wir den Wert von zwei haben so wie erwartet in der Konsole. Wenn wir dies jedoch in einen negativen Wert ändern, verschiebe ich dies einfach aus der Schleife damit es sich nicht weiter wiederholt. Aktualisieren, wir können auch sehen, dass der Wert immer noch eine positive Zahl von zwei ist. Unabhängig davon, ob wir eine positive oder eine negative Zahl eingeben, erhalten wir immer das angezeigte positive Äquivalent. Der Punkt hier ist, dass wir diese absoluten Methoden verwenden können , um sicherzustellen , dass die Berechnung zwischen Ball und Paddel immer positiv ist, was bedeutet, dass wir diesen Wert immer mit einem positiven vergleichen können Aktion, den Ballradius hinzuzufügen, anstatt herausfinden zu müssen , ob wir diesen hinzufügen oder abziehen möchten. Rüber zum Code und lass uns sehen, wie das aussieht. Wir können unser Konsolenprotokoll entfernen und dann oben in unsere if-Anweisung springen. Wir überprüfen derzeit nur die Exposition, aber jetzt müssen wir auch die Y-Position mit dem Operator „UND“ überprüfen . Jetzt werden wir prüfen, ob der Ball zwischen oben und ganz unten liegt . In Mathematik an Bauchmuskeln weitergeben. Wir bekommen immer eine positive Zahl. Was wir tun wollen, ist zu überprüfen, ob die Ball Y-Position die Spielerposition wegnimmt. Denken Sie daran, dass dies uns diesen Wert zwischen Ball und Paddel geben wird, aber es wird immer eine positive Zahl sein , anders als bei den Folien. Dann prüfen wir, ob dieser Wert kleiner oder gleich der Höhe des Paddels ist , geteilt durch 2 plus den Kugelradius. Der Grund, warum wir den Ballradius hinzufügen können und wir uns keine Sorgen machen müssen je nachdem, auf welcher Seite er sich ist, dass wir dies immer in eine Pluszahl umwandeln daher addieren wir immer den Ballradius. Lassen Sie uns das speichern und probieren Sie dies im Browser aus. Zuallererst kann der Ball automatisch spielen, und wenn wir das Paddel jetzt an Ort und Stelle bewegen, sollten sie jetzt einen Kontaktpunkt zwischen Ball und Paddel verursachen . Ich weiß, dass dies schwierig erscheinen mag, aber ohne diese positive Umwandlung müssten wir dies nicht duplizieren, müssten wir dies nicht duplizieren da der Ball entweder über oder unter der Paddel-Mittellinie liegt. Jetzt, da dies funktioniert, müssen Sie als Nächstes den Kontaktpunkt für das Paddel des Computers überprüfen. Diese wird ziemlich ähnlich sein, also können wir die vollständige if-Anweisung im Player-Bereich kopieren und diese direkt unter den Computerkommentar einfügen. Erstens muss die Ausstellung auf der rechten Seite vorbei sein. Wir müssen jetzt prüfen, ob die Ballposition jetzt größer ist, fügen Sie den Ballradius hinzu, um dies zu berücksichtigen. Rechts vom Größeren oder Gleichen müssen wir prüfen, ob der Ball hinter dem Paddel des Computers liegt . Wir können dies tun, indem wir die Leinwand, Breite, Takeaway die Breite des Paddels überprüfen. Dies sollte die geachtete X-Position sein, und für die y-Position wird dies ziemlich ähnlich sein. Wir möchten auch prüfen, ob dies zwischen der Ober - und Unterseite des Paddels liegt zwischen der Ober - und Unterseite des , anstatt es an der Spielerposition zu überprüfen. Wir möchten dies anhand der Computerposition überprüfen. Natürlich wurde dieser noch nicht erstellt Gehen wir also ganz nach oben wo wir unsere Variablen erstellt haben, und wir können unsere Spielerposition duplizieren und dies in die Computerposition ändern. Auch hier ist es völlig in Ordnung, dies in der Mitte der Leinwand zu setzen , für den Beginn unseres Spiels. Die Computerposition wird auch in einem zukünftigen Video aktualisiert. Um dies zu bereinigen, können wir jetzt wieder zur Kollisionsfunktion zurückkehren und unseren temporären Ball entfernen , das brauchen wir nicht mehr. Es wird ziemlich schwierig sein zu testen, ob das Paddel des Computers funktioniert, da wir das nicht in Richtung Ball bewegen können. Aber eine Sache, die wir tun können, nur um die Dinge zu überprüfen und zu überprüfen, ob wir einen Sprung haben, ist, die Y-Position zu ändern, um einen Wert von Null zu haben. Dadurch wird der Ball horizontal durch unser Spiel bewegt, vom Paddel der Spieler. Exzellent, also arbeitet der Bounce jetzt von unseren beiden Paddeln ab. Jetzt ändert es sich zurück, Negative 1, da wir wissen, dass das funktioniert. Wir haben es durch einen der schwierigeren Teile unseres Spiels geschafft. Es mag ein bisschen schwierig sein, es aufzunehmen, aber dies ist wirklich ein wesentlicher Bestandteil, damit unser Spiel korrekt funktioniert. Es ist nicht perfekt. Wir haben bestimmte Edge-Fälle nicht berücksichtigt, z. B. wenn der Ball ganz oben oder ganz unten auf das Paddel trifft , aber wir wollen in diesem Kurs nicht zu tief gehen. Als Nächstes schauen wir uns im kommenden Video an, wie Sie die Ergebnisse sowohl für den Player als auch für den Computer verfolgen können. 11. Tracking: Wir verwenden die FiltText-Methode bereits, um unsere Punktzahl auf den Canvas zu ziehen , und unsere Scores werden auch in Variablen gespeichert. Wir wissen auch, wann der Spieler oder der Computer punktet, indem wir den Ball von der linken oder rechten Seite unseres Canvas treffen den Ball von der linken oder . Der logische nächste Schritt wäre, diese Variablen in diesem Fall zu aktualisieren, um dann die Punktzahl auf dem Bildschirm zu aktualisieren, diese Variablen, bei denen der Spieler punktet und auch Computer in die Cloud punkten Funktion, lassen Sie uns das in unserem Skript lokalisieren. Gerade hier. Wir haben uns derzeit bei der Konsole angemeldet, wenn ein Spieler oder der Computer erzielt hat. Innerhalb unserer „if else if-Anweisung könnten wir unsere Score-Variablen hier direkt aktualisieren , aber stattdessen rufe ich eine Funktion auf. Diese Funktion überprüft auch andere Dinge, wie wenn das Spiel vorbei ist , und legt den Ball auch wieder in die Mitte. Wir ersetzen diese beiden Konsolenprotokolle durch eine Funktion, die wir bald als Score erstellen werden. Die Punktefunktion muss auch darauf hingewiesen werden , welcher unserer Spieler erzielt hat. Für unseren ersten geben wir den Computer als Saite ein, und für unseren zweiten, wenn der Spieler erzielt hat, werden wir den Spieler zu dieser Funktion übergeben. Natürlich müssen wir dies erstellen und einfach unsere Cloud-Funktion sprengen, unsere Funktion namens Score erstellen. Hier drinnen nehmen wir den Spieler auf. Denken Sie daran, dass diese Spielervariable entweder unserem Computer oder unserem Player entsprechen wird. Wir können überprüfen, welche davon mit einer if-Anweisung bestanden wurde . Wenn die Player-Variable dem Computer entspricht, werden wir hier etwas tun, nämlich unsere Variablen zu aktualisieren. Denken Sie daran, dass wir uns zu Beginn den Spielerstand und den Computerstand angeschaut haben, und hier werden wir beide Variablen um den Wert eins aktualisieren . Dieser ist für den Computer-Score bestimmt. Erhöht sich mit Plus-Plus. Sonst aktualisieren wir im Spielerstand. Rüber zum Browser und lass uns das testen. Wir lassen den Ball ohnmächtig werden und das Paddel. Wir können sehen, dass der Computer-Score sehr schnell steigt. Der Grund dafür ist, dass wir jedes Mal der Ball bewegt oder jedes Mal wir einen neuen Rahmen in unserer Schleife haben, prüfen wir, ob der Ball hinter dem Spieler oder dem Paddel des Computers liegt . Da wir ständig hinter dem Paddel stehen, wird die Punktzahl weiter steigen. Um das zu beheben, können wir den Ball wieder in die Mitte unseres Spiels bringen , damit wir von vorne anfangen können. Die Art und Weise, wie wir dies innerhalb unserer Score-Funktion tun können, besteht darin Ballposition mit BallX zurückzusetzen , ist gleich der Leinwand. Breite geteilt durch 2, platziere diese in die Mitte. Wir werden das Gleiche auch für den Standort von BalLy tun. Dieses Mal basiert dies auf der Leinwandhöhe, ebenfalls durch 2 geteilt wird. Testen wir das mal. Aktualisieren Sie, lassen Sie den Ball hinter dem Paddel passieren, dieser ist auf eins gesetzt, dann wird der Ball wieder in die Mitte gelegt, damit unser Spiel fortgesetzt wird. Dies ist eine einfache Möglichkeit, die Ergebnisse unseres Spiels zu verfolgen. Im kommenden Abschnitt werden wir uns ansehen, wie wir eine maximale Punktzahl hinzufügen können , damit wir wissen, wann das Spiel beendet ist, und den Gewinner auch auf dem Canvas anzeigen. 12. Das Spiel beenden: Der erste Schritt zur Beendigung unseres Spiels besteht darin, festzulegen wie viele Punkte wir maximal sein möchten. Dafür benötigen wir eine Variable an der Spitze, die als Gewinnsumme bezeichnet wird. Const WinningTotal und mein Wert wird gleich drei sein , also wird der erste Spieler, der drei erreicht, der Gewinner sein und wir können dies innerhalb unserer Score-Funktion aktualisieren. Gehen wir zurück in unsere Funktion. Hier müssen wir prüfen, ob unser Computerstand oder Spielerstand dieser Gewinnsumme entspricht. Wenn Sie eine if-Anweisung platzieren, um zu beginnen, prüfen Sie, ob der Computerwert unserer neuen Variablen entspricht , die insgesamt gewinnt. Wenn ja, werden wir etwas tun, wenn nicht, geben wir eine Else-if-Klausel ein und dieses Mal prüfen wir, ob der Spielerstand auch unserer Gewinnsumme entspricht. Was wir hier machen wollen, beenden wir das Spiel, indem eine EndGame-Funktion erstellen. Offensichtlich haben wir das noch nicht erstellt, aber es heißt EndGame. Genau wie bei der Erstellung unserer Score-Funktion, die den Spieler aufgenommen hat, werden wir dasselbe auch für die EndGame-Funktion tun. Dies ist die Linke, diese Funktion weiß, welche der Gewinner war. Dies war der Computer, dann werden wir auch das Schlüsselwort return übergeben um aus den Anweisungen auszubrechen. In ähnlicher Weise wird die else-if-Anweisung auch unsere EndGame-Funktion aufrufen , aber den Spieler übergeben. Kehren Sie auch davon zurück, wenn dies zutrifft und der Grund, warum die EndGame-Funktion wissen muss , welcher dieser Spieler der Gewinner war, liegt darin , dass wir die Farben ändern werden , je nachdem, welcher war der Gewinner. Wie Sie sehen können, haben wir die rote Farbe für den Player und die blaue Farbe für den Computer. Dies wird sich in unserem Endgame-Text widerspiegeln. Lassen Sie uns diese Funktion direkt unten erstellen. Denken Sie daran, dass dies entweder am Computer oder dem Spieler übergeben wird, der in einem Gewinner gespeichert wird und dann eine „ if else“ -Anweisung übergeben wird. Im if-Bereich können wir prüfen, ob der Gewinner dem Computer entspricht. Sie müssen nur diese Klammern entfernen, wir haben diese nicht im Abschnitt else. Wenn der Gewinner dem Computer entspricht, was der Farbe Blau entspricht, ändern wir dann die Textfarbe, um die Ergebnisse in einer blauen Farbe anzuzeigen. ctx.fillStyle ist gleich blau und dann ändern wir im else Abschnitt fillStyle so, dass er der roten Farbe entspricht , um zu unserem Spieler zu passen. Der Grund, warum wir diese Textfarbe ändern , liegt darin, dass wir nach etwas Text auf der Leinwand anzeigen Ende des Spiels etwas Text auf der Leinwand anzeigen. Dies wird den Spieler einfach wissen lassen ob er gewonnen hat oder ob der Computer gewonnen hat. Kurz vor dem Text legen wir fest, die Textzeile dem Mittelpunkt entspricht. Platzieren Sie dies in die Mitte der Leinwand und erstellen dann unsere Texte mit einer Funktion namens FillText. Öffnen Sie das Backtick, damit wir eine Variable einfügen können , da wir auch die Variable des Gewinners einfügen müssen , je nachdem, ob der Computer oder der Spieler gewonnen hat. Angenommen, der Gewinner ist ein Doppelpunkt, dann mit dem Dollarsymbol und den geschweiften Klammern in JavaScript können wir mit dem Dollarsymbol und den geschweiften Klammern in JavaScript die Variable des Gewinners einfügen. Dies ist der Gewinner ist Spieler oder der Gewinner ist Computer. Fügen Sie nach den Backticks ein Komma hinzu, dann können wir es in die Mitte der Leinwand platzieren. Zuallererst die Exposition, die die canvas.width geteilt durch zwei ist. Auf der Y-Position befindet sich canvas.height geteilt durch zwei. Auto-Browser und wir können das ausprobieren. Aktualisieren Sie und lassen Sie uns dies aus dem Weg gehen , um auf den Wert von drei zu gelangen. Das ist eins, zwei und drei. Sie können sofort sehen, dass wir unseren Text anfangs sehen, aber er verschwindet schnell und das Spiel geht weiter. Der Grund, warum dies passiert, liegt darin, dass unsere Schleife noch läuft. Wir haben nichts getan, um unser eingestelltes Intervall zu stoppen. Sobald der Player oder der Computer die Punktzahl von drei erreicht hat, zeichnen wir den Text immer noch sehr kurz auf die Leinwand, aber bei der nächsten Iteration unserer Schleife führen wir diese Klartext-Methode das löscht alle Texte vom Bildschirm und zeichnet dann alle unsere Spielfunktionen neu. Wie verhindern wir, dass diese Schleife läuft? Nun, das eingestellte Intervall kann durch eine Methode namens Clear Intervall gestoppt werden . Dies beinhaltet das Speichern eines Verweises auf dieses Intervall, wenn wir es erstellen , und dann die Verwendung dieser Referenz , um es später mit klarem Intervall zu stoppen. Diese Referenz kann innerhalb einer Variablen gespeichert werden und wie alle anderen Variablen wird dies ganz oben sein. Rufen Sie dieses GameLoop auf und stellen Sie diese Variable unten auf gleich unserem Intervall ein, damit GameLoop unserem setInterval entspricht. Hier rufen wir setInterval immer noch wie zuvor auf, aber dies wird eine eindeutige ID zurückgeben , die in dieser Variablen gespeichert ist. Wir können dies sehen, wenn wir dies an der Konsole protokollieren, in den Browser springen und in die Konsole aktualisieren, und wir können den Wert von einem sehen. Wenn mehrere Intervalle ausgeführt wurden, jede dieser zurückgegebenen IDs eindeutig. Zurück zu unserer EndGame-Funktion kann diese Variable jetzt an ClearInterval übergeben werden , um die Ausführung der Schleife zu verhindern. Wir werden das gleich zu Beginn unserer Funktion tun. Übergeben Sie jede Methode, die ClearInterval ist, die unsere ID, unser Referenzspeicherintervall namens GameLoop, aufnimmt . Jetzt können wir das testen, aktualisieren und warten, bis dies den Wert drei erreicht. Gut. Wir können sofort sehen, dass das Spiel einfriert und wir haben immer noch den Text auf dem Bildschirm. Um dies zu verbessern, wäre es besser, den Ball zu räumen, die Paddel und auch diese gepunkteten Linien im Hintergrund zu räumen. Sogar nur die Punktzahl des Siegers auf der Leinwand. Dies ist etwas, was wir bereits von unserer Schleife aus tun können, wo wir unsere Leinwand löschen, wir ClearRect. Kopieren wir das und platzieren in unsere EndGame-Funktion. Dies wird nur die ClearInterval-Methode, es wird den Rest des Canvas löschen. Da es passiert, bevor wir unseren Text zeichnen, sollten wir den Text immer noch auf dem Bildschirm sehen aber es wäre nützlich, wenn wir die Punktzahl auch ganz oben sehen könnten . Nun, das ist ziemlich einfach. Wir wissen auch, wie man die Punktzahl mit dieser Funktion genau hier zeichnet . Nachdem wir unseren Canvas gelöscht haben, aktualisieren Sie es und wir versuchen es noch einmal. Großartig, die Leinwand wurde gelöscht wir sehen immer noch den Text. Wir sehen immer noch das Endergebnis ganz oben. das alles jetzt funktioniert, beginnen und starten wir unser Spiel neu. 13. Das Spiel starten und neu starten: Anstatt dass unser Spiel sofort beginnt , sobald der Browser geladen wird, wäre es stattdessen schön, diese Aktion mit der Tastatur auszulösen , indem Sie so etwas wie die Leertaste verwenden. Wir werden uns jetzt ansehen, wie das geht und wie wir unser Spiel neu starten können, sobald es fertig ist. Ich benutze die Leertaste, um das Spiel zu starten, aber du kannst auf eine andere Taste wechseln, wenn du möchtest. Sieh dir unsere Switch-Anweisungen an. wir werden auf den Pfeil nach oben und den Pfeil nach unten hören. Wir können einen neuen Fall erstellen, um auf unseren ausgewählten Schlüssel zu achten , um das Spiel zu beginnen. Also Fall, diesmal als String. Der Schlüssel, auf den ich hören werde, ist die Leertaste, setzen Sie einen Doppelpunkt, und dann rufen wir eine Funktion auf, um das Spiel namens Spielstart zu starten. Wenn dies in der Break-Klausel stimmt und kurz bevor wir diese Funktion erstellen, wäre es jetzt auch sinnvoller diesen neuen Teil der Funktion in etwas anderes umzubenennen, da er andere Dinge tut anstatt unseren Spieler einfach nach oben oder unten zu bewegen. Ich möchte eine gehandhabte Taste drücken. Denken Sie daran, dass wir dies auch in unserem Key Down Listener direkt oben ändern müssen . Natürlich müssen wir diese Spielstartfunktion erstellen. Richten Sie das direkt unten ein. Wenn wir darüber nachdenken, was soll dieses Spiel tun? Nun, da wir das Spiel derzeit nicht aktualisieren können und es derzeit ohne etwas beginnt, möchten wir diese Schleife, die wir es nennen, direkt unten in unsere -Funktion. Anstatt dieses Spiel sofort zu beginnen, können wir dies ausschneiden und in unsere Spielstartfunktion einfügen, so dass dies nur passiert, wenn die Leertaste gedrückt wird. Probieren wir es mal aus. Wenn wir uns aktualisieren, sehen wir noch keinen Spielbeginn. Drücken Sie die „Leertaste“ oder die gewählte Taste und los geht's. Anstelle dieses leeren Bildschirms sollte es am Anfang auch einige Anweisungen geben. Lassen Sie den Benutzer wissen, dass er die Leertaste drücken muss , um zu beginnen. Dies muss nicht in eine Funktion oder irgendetwas anderes eingehen , wir können dies einfach oben in unserem Skript hinzufügen. Aber das werden nur einige Texte sein und wir verwenden FillText, aber zuerst legen wir die Farbe mit FillStyle gleich Rot fest. Sie können dies ändern, wenn Sie es vorziehen. CTX.Font setzt dies auf eine Zeichenfolge oder 30 Pixel für die Schriftgröße mit einem Helvetica-Stil. Platzieren Sie dies mit einer Textzeile in die Mitte, zeichnen Sie dann unseren Text mit der Methode FiltText und übergeben Sie eine Zeichenfolge. Wir müssen keine Variablen einfügen, daher sind die regulären Zitate Ordnung, dann der Text des zu spielenden Leertaste. Für X- und Y-Positionen ist dies die Leinwandbreite geteilt durch zwei und dividiert auch die Höhe durch zwei. Probieren wir das mal aus. Es gibt unseren Text. Drücken Sie „Leertaste“ und unser Text wird ebenfalls gelöscht denn wenn Sie sich ganz unten erinnern, wird die Leinwand vor jeder unserer Schleifen gelöscht. Zurück zu unserer Spielstartfunktion gibt es auch noch ein paar andere Dinge, die auch hier hineingehen müssen. Der erste Schritt ganz oben besteht darin, alle Ergebnisse zurückzusetzen. Der Spieler punktet gleich 0 und der Computer punktet ebenfalls 0. Verwendung eines klaren Intervalls werden auch alle vorhandenen Timer gelöscht, die in unserer Spielschleifenvariablen gespeichert sind. Probieren wir das mal aus. Aktualisieren, drücken Sie „Leertaste“, um zu beginnen, und alles sieht gut aus. Alle Ergebnisse wurden aktualisiert, aber es gibt ein kleines Problem, wenn wir während des Spiels die Leertaste drücken. Sie können oben sehen, wenn wir jetzt die Leertaste drücken, wird die Punktzahl jedes Mal zurückgesetzt, wenn wir das Spiel beginnen. Dies ist kein Problem, wenn wir das Spiel tatsächlich beginnen wollen, aber wenn der Spieler dies während des Spiels versehentlich drückt, wird es neu gestartet. Wir können dies helfen, indem wir dies mit einer Variablen im Auge behalten . Lassen Sie das Spiel zunächst als Wert falsch laufen, also schalten wir dies auf wahr um also schalten wir dies auf wahr um, wenn das Spiel läuft, was dann verhindert, dass die Leertaste unser Spiel neu startet. Wir müssen dies an ein paar verschiedene Stellen einfügen. Zuallererst suchen wir nach unserer Funktion, die Endgame ist. Wie Sie sich vorstellen können, können wir, da dies das Ende des Spiels ist, auch diese laufende Variable für das Spiel in die Startfunktion des Spiels gleich falsch einstellen . Ganz oben möchten wir einen Check durchführen, um zu sehen ob diese laufende Variable dem Spiel entspricht „true“. Übergeben Sie dies innerhalb einer if-Anweisung, wenn das Spiel läuft. Wir müssen nicht gleich wahr oder ähnliches sagen. Wenn der Wert des laufenden Spiels gleich dem Wert true ist, wird der Code innerhalb dieser Klammern ausgeführt. Oder wir können dies auch auf eine einzige Zeile legen und die geschweiften Klammern entfernen und dann aus dieser Funktion zurückkehren. Grundsätzlich, wenn das Spiel gleich true ist, springen wir zu dieser Funktion heraus , ohne den Rest des folgenden Codes auszuführen. Dies verhindert, dass das Spiel neu gestartet wird. Wenn dies nicht der Fall ist , wenn es falsch ist, möchten wir den folgenden Code ausführen. Wir würden auch sagen, dass in unserem Spiel laufende Variable jetzt gleich wahr ist. Dies verhindert daher, dass diese Funktion ein zweites Mal ausgeführt wird , wenn die Leertaste während des Spiels gedrückt wird. Wir können das ausprobieren, auffrischen, „Leertaste“ drücken, den Ball für die Punktzahl zurückgehen lassen und wenn wir jetzt versuchen, das Leerzeichen zu drücken, das Spiel nicht zurückgesetzt. Aber wir haben ein anderes Problem , das wir ansprechen müssen und um dies zu sehen, wenn wir das Spiel neu starten und darauf warten, die Punktzahl von drei zu erreichen, lassen Sie uns dreimal zurückgehen. Alles ist gut, wir haben den Text des Gewinners ist Computer, die Punktzahl von 3-0. Aber wenn wir das Spiel jetzt mit der Leertaste neu starten, startet das Spiel neu, aber wir haben immer noch eine erste Punktzahl von einem. Aber Sie würden erwarten, dass dies Null ist, da wir dies in unsere Funktion gesetzt haben . Warum glaubst du, dass das passiert? Nun, um mehr herauszufinden, gehen wir in unsere Score-Funktion ein. Die Score-Funktion ist der einzige Ort, an dem wir eine dieser Variablen aktualisieren. Die Score-Funktion wird direkt oberhalb unserer Collide-Funktion aufgerufen . Springen Sie in die Collide-Funktion und wir rufen dies mit unserem Abschnitt „If sonst“ auf. Dies ist die einzige Funktion oder der einzige Code, der in unserem Spiel aufgerufen wird für die Aktualisierung dieser Variablen verantwortlich ist. Wir wissen, dass dies eine Ursache dafür ist unser Punktestand anfangs auf eins festgelegt wird. Warum denkst du, dass diese Score-Funktion zu Beginn eines neuen Spiels aufgerufen wird ? Nun, der Grund, warum dies passiert, ist dass unser Ball, sobald das Spiel beendet ist, entweder auf der linken Seite für eine Punktzahl oder auf der rechten Seite vorbei ist. Wir haben dies durch die Variable namens BallX gesteuert. Ja, in unserer Spielstartfunktion setzen wir zunächst beide Punkte zurück, aber sobald ein neues Spiel beginnt, berührt der BallX-Standort immer noch eine der Seiten, wodurch die Punktefunktion renn nochmal. Dies zu beheben ist ziemlich einfach. Alles, was wir tun müssen, ist, den Standort von BallX wieder in die Mitte zurückzusetzen , wenn das Spiel beginnt. Das Spiel beginnt kurz nach einem laufenden Spiel und bevor wir unsere Ergebnisse zurücksetzen, können wir auch den Wert von BallX so zurücksetzen , dass er in der Mitte des Bildschirms liegt. Testen wir das mal. Wir kommen zum Ende unseres Spiels, das ist eine Punktzahl von drei. Das Spiel ist vorbei, unsere beiden Punkte werden jetzt erwartungsgemäß zurückgesetzt. Wenn Sie solche Spiele erstellen, werden Sie oft Edge-Fälle wie diese finden , an denen Sie arbeiten können, und es geht normalerweise nur darum, verschiedene Dinge auszuprobieren und zu sehen, welches funktioniert. Als Nächstes schauen wir uns an, wie wir eine zufällige Bewegung auf den Ball anwenden können , wenn er springt. 14. Random: Wenn diese beiden MoveX- und MoveY-Variablen voreingestellt sind, wird das Spiel viel vorhersehbarer. Wir wissen, weil unser negativer 2 und unser negativer 1-Wert in welche Richtung der Ball gehen würde. Wir können dies verbessern, indem wir dies innerhalb einer Funktion viel zufälliger machen. Lassen Sie uns eine Funktion direkt unter unseren Texten erstellen , die als Zufallsbewegung bezeichnet wird. Der Zweck dieser Funktion besteht darin, diese beiden Variablen mit einigen Zufallswerten festzulegen , was bedeutet, dass wir diese Anfangswerte jetzt entfernen können. Um diese Variablen festzulegen, müssen wir diese RandomMovement-Funktion innerhalb von GameStart aufrufen . Suchen Sie diese Funktion, rufen Sie unsere neue Funktion auf, die unsere beiden Variablen bei jedem Spielstart mit einem neuen Wert zurücksetzt . Kehren Sie zurück zu unserer RandomMovement-Funktion, die unsere zwei X- und Y-Werte generiert den Ball in unvorhersehbare Richtungen abstellt . Dies verlangsamt und beschleunigt das Spiel aufgrund der zufälligen Werte und Bewegungen ein wenig, dh die x-Bewegung könnte höher oder niedriger sein, wodurch es sich langsamer oder schneller bewegt. Erstellen Sie erneut zwei Variablen oder zwei Konstanten. Dies ist zufälliges x, was eine Zufallszahl zwischen zwei und vier sein wird. Grundsätzlich setzen wir unseren x-Wert auf 2 oder 4 und auch auf eine positive oder negative Richtung ein. Wir können dies tun, indem wir auf eine JavaScript-Mathe-Funktion namens random zugreifen . Math.random generiert eine Zufallszahl zwischen 0 und 1. Aber wir werden diesen Wert mit 3 multiplizieren. Dies ermöglicht es uns, ab eins eine Zahl zu generieren . Wir können dies auch abrunden, indem wir diesen Wert reduzieren. Fügen Sie dies in der math.ceil -Methode ein. Da wir nun unseren Wert aufrunden, wird uns dies entweder einen Wert von 1, 2 oder 3 geben. Da wir den Wert von 2-4 wollen, können wir diesen Wert noch einen hinzufügen, um uns unsere Zufallszahl zu geben . Testen wir das mal. Platzieren Sie ein Konsolenprotokoll von RandomX, speichern und aktualisieren Sie den Browser springen Sie in die Konsole. Um dies zu sehen, müssen wir auch unsere GameStart-Funktion aufrufen. Drücken Sie die Leertaste, den Wert von 2, den Wert 4, 2, 3, 2. Dies scheint alles richtig zu funktionieren. Für unseren Randomy-Standort können wir diese Zeile duplizieren den Variablennamen in RandomY ändern. Randomy wird eine Zahl zwischen 0 und 2 sein. Diesen müssen wir nicht plus 1 hinzufügen. Wir können math.round verwenden, um diese Zahl zu runden, so dass wir einen Wert von Null auf zwei haben. Wir müssen jetzt auch zwei weitere Variablen erstellen. Dies wird entscheiden, ob wir eine positive oder negative Richtung haben . Derzeit haben wir nur einen positiven X- und Y-Wert, aber dies wird auch zur Unvorhersehbarkeit beitragen. Const PlusorMinusx. Auch hier greifen wir auf die zufällige JavaScript-Funktion zu, die uns mehr eine Zahl zwischen 0 und 1 gibt. Mit dem bedingten JavaScript-Operator können wir prüfen, ob dieser Wert kleiner als 0,5 ist, was ungefähr eine Chance von 50/50 sein sollte. Wenn dies der Fall ist, geben wir eine negative Zeichenfolge zurück oder speichern sie innerhalb dieser Variablen. Wenn nicht, wird es positiv sein. Da es sich um eine Zahl zwischen 0 und 1 handelt, besteht ungefähr eine halbe oder eine Wahrscheinlichkeit von 50/50, dass dies entweder ein negativer oder ein positiver Wert sein wird. Wir werden dies auch bald zu unseren Zahlen hinzufügen. Duplizieren Sie dies und der einzige Unterschied ist diesmal der Variablenname von y. Dann können wir diese Variablen verwenden um zusammenzuführen und unsere neuen Werte der MoveX - und MoveY-Variablen zu erstellen . Zuerst die Variable von MoveX. Da wir auch einen String-Wert für das Positive oder Negative zurückgeben , werden wir diesen in eine Zahlenfunktion einschließen, um sicherzustellen , dass wir immer eine Zahl anstelle einer Zeichenfolge erhalten. Beginnend mit x, PlusorMinusx, füge dies zu unserer Zufallszahl hinzu. Dies könnte beispielsweise negativ sein und dann ein Wert von zwei oder positiv oder eine beliebige Zahl zwischen diesem Bereich. Duplizieren. Wir machen das für MoveY. Ändert sich auch in ein Plus oder minus y und der Wert von zufälligem y. Dies ist eine zufällige positive oder negative Zahl in beide Richtungen, aber ich werde noch ein kleines Stück Zufall hinzufügen. Erstellen Sie Konstante, um dies in der genannten Zufallszahl zu speichern Stellen Sie das einfach auf math.random ein. Der Grund, warum wir dies tun, besteht darin, diesen beiden Variablen einen kleinen Zufallswert hinzuzufügen . Fügen Sie dies zu unserer ersten Nummer hinzu, dann sollte es zu unserer zweiten Nummer alles sein, was wir jetzt brauchen. Aktualisieren Sie den Browser. Jedes Mal, wenn wir das Spiel beginnen, sollten wir sehen, wie der Ball in eine etwas andere Richtung fährt . Wir haben es nach links, wir haben es nach rechts laufen, wir haben es nach oben, wir haben es nach unten. Sie können auch sehen, dass wir verschiedene Geschwindigkeiten haben abhängig von den tatsächlichen Werten für diese beiden Variablen. Dies ist wegen unserer Zufälligkeit noch nicht alles vorbei. Etwas später schauen wir uns an, wie wir der Ballrichtung eine zufällige Bewegung hinzufügen können , wenn sie von den Wänden und auch vom Paddel abprallt . Apropos Paddel, das werden wir im kommenden Video behandeln, in dem wir uns ansehen, wie man das Paddel des Computers automatisch bewegt. 15. Computer: Ganz oben in unseren Skripten haben wir den Player und auch die Computerpositionen innerhalb dieser Variablen. Beide Werte legen die Paddelpositionen zu Beginn unserer Spiele fest, stehen vertikal in der Mitte. Die Spielerposition, um die wir uns bereits gekümmert haben, mit den Bewegungen in unserer Handle Key-Press-Funktion. Jetzt können wir dem Computer auch etwas Bewegung hinzufügen , um das Spiel ein wenig spielbarer zu machen. Machen wir das in einer Draw-Computer-Paddle-Funktion, die gerade hier ist. Alles, was wir gerade tun, ist die canvas.height geteilt durch 2, Stellen in die Mitte zu setzen canvas.height geteilt durch 2, . Offensichtlich wollen wir das nicht genau wie oben tun. Wir möchten dies auch durch eine Variable ersetzen. Wir nehmen die Leinwandhöhe weg und ersetzen diese durch die Computerposition. Dies bedeutet, genau wie die obige Spielerposition wird jedes Mal, wenn diese Variable aktualisiert wird und wir dann die Schleife aufrufen, neue Position des auch die neue Position des Computerpaddels reflektiert. Die erste Stufe besteht darin, dies zu aktualisieren. Aber wie entscheiden wir, wie wir das bewegen sollen? Nun, wir könnten sehr komplex werden und Dinge wie künstliche Intelligenz einbeziehen, aber wir wollen nicht, dass dieser Kurs zu komplex ist. Stattdessen werden wir dies durch eine einfache Bewegung ersetzen Nachverfolgung. Dafür erstelle ich unten direkt über unserer Schleife eine neue Funktion, erstelle ich unten direkt über unserer Schleife eine neue Funktion die in jedem Intervall aufgerufen wird. Der Name der Funktion ist bewegungscomputer. Dies muss auch in jedem Intervall aufgerufen werden, damit wir unseren Funktionsnamen greifen und diesen in unsere Schleife aufnehmen können. Das grundlegendste Tracking kann in etwa so gemacht werden. Wir können unsere Variable der Computerposition aktualisieren , um der Position von Ball Y gleich zu sein. Dies wird effektiv die Position vertikal unseres Balls verfolgen , das Computerpaddel bewegen, um dies zu verfolgen, wir können sehen das? Wenn wir zu unserem Browser zurückkehren, aktualisieren Sie es und Sie können jetzt sehen, wie sich das Computerpaddel oben und unten bewegt je nach Position des Balls nach oben und unten bewegt. Großartig, das funktioniert alles gut, aber wie Sie sehen können, schafft dies ein Spiel, das dem Spieler unmöglich ist zu gewinnen. Auch hier könnten wir mit einer Computerbewegung so komplex werden, wie wir es wollen. Aber um es einfach zu halten, füge ich einfach eine If-else-Anweisung hinzu. Diese if-else-Anweisung aktualisiert die Computerposition schrittweise , je nachdem, ob sich der Ball über oder unter dem Paddel befindet. Wir können dies entfernen, eine if-Anweisung hinzufügen. Wo wir prüfen, ob die Computerposition derzeit unter der aktuellen Position von Ball Y liegt. Denken Sie daran, dass die Y-Achse oben bei 0 beginnt und in eine positive Richtung geht. Der Ball ist unter dem Paddel. Wir können dann die Positionsvariable des Computers aktualisieren , um uns auf den Ball zu bewegen. Dies kann durch Hinzufügen von Plus geschehen, andernfalls möchten wir das Paddel des Computers in die umgekehrte Richtung bewegen . Wir können das hier drinnen machen. Probieren wir das mal aus. Aktualisieren und testen Sie dies aus. Springen Sie den Ball zurück. Sie können sehen, dass sich der Computer gerade bewegt. Es ist jetzt ein gewinnbares Spiel. Sie können auch, wenn Sie die Schritte beschleunigen oder verlangsamen möchten , die das Computerpaddel benötigt, um auf den Ball zu gehen. Dies ist jedoch völlig optional, und dies muss möglicherweise auch fein abgestimmt werden je nachdem, wie schnell die Schleife läuft. Großartig. Dies ist eine sehr einfache Computerbewegung und als nächstes wird das Spiel noch weiter verbessern , indem der Ballbewegung zusätzliche Zufälligkeit hinzugefügt wird. 16. Random Bouncing: Der Ball prallt derzeit von allen Wänden und den Paddeln ab, ist ein wenig vorhersehbar. Derzeit liegt jeder Bounce bei 90 Grad, was uns oft in eine Situation bringt , in der der Ball manchmal auf einem Quadrat herumlaufen kann und von den Paddeln abprallt, kann und von den Paddeln abprallt ohne sich überhaupt bewegen zu müssen sie. Um dies zu verbessern, fügen wir unserem Paddel-Bounce eine gewisse Zufälligkeit unserem Paddel-Bounce , um unser Spiel ein bisschen besser zu machen. Dafür brauchen wir eine Funktion. Erstellen wir irgendwo in unserem Code eine Funktion mit dem Namen „ Generate random Bounce“. Füge etwas Zufälligkeit hinzu. Wir müssen nichts zu Verrücktes oder Komplexes machen. Wenn wir zuerst zu unserer Collide-Funktion gehen, überprüfen die letzten beiden if-Anweisungen den Paddelkontakt sowohl für den Player als auch für das Paddel des Computers. Derzeit, wenn es einen Kontakt zwischen dem Ball und dem Paddel gibt, machen wir hier nur die Richtung umzukehren. Wir tun dies, indem wir eine positive Richtung auf ein Negativ setzen und auch umgekehrt. Um ein wenig Zufälligkeit hinzuzufügen, müssen wir nur einer dieser Zeilen einen kleinen positiven oder negativen Wert hinzufügen kleinen positiven oder negativen Wert , den wir von unserer neuen Funktion zurückgeben können. Innerhalb dieser Funktion generieren wir zuerst eine Zahl zwischen Null und Eins. Null und eins gibt uns zwei Optionen, denen wir dann entscheiden können , ob wir eine positive oder negative Zahl erstellen wollen. Auch hier verwenden wir Math.Floor , um unsere Nummer zu runden. Die Zahl, die Sie abrunden möchten , wird mit Math.random generiert , um uns eine Zahl zwischen Null und Eins zu geben. Denken Sie daran, dass alle Math.random eine Zufallszahl zwischen Null und Eins erzeugen. Es beinhaltet nicht wirklich einen. Zum Beispiel wird es bis zu 0,999 reichen. Zufälligkeitszahl nach unten gibt uns immer einen Wert von Null. Um einen Wert zwischen Null und Eins zu erhalten, können wir dies mit zwei multiplizieren und diesen innerhalb einer Konstante installieren, diesen innerhalb einer Konstante installieren Nummer Null zu eins genannt wird. Diese beiden Optionen können jetzt verwendet werden, um ein positives oder ein negatives Symbol zu erstellen , genau wie wir es uns zuvor angesehen haben. Bewahren Sie dies in einer Konstante, positiv oder negativ auf. Dann greifen wir unsere Variable von oben, die entweder Null oder eins ist. Wenn dies einer der Optionen entspricht, die Null ist, wird die mit den bedingten JavaScript-Anweisungen erste Option mit den bedingten JavaScript-Anweisungen einen negativen Wert zurückgeben. Wenn nicht durch einen Doppelpunkt getrennt, wird ein positives Symbol zurückgegeben. Wenn dies eine Null zurückgibt, erhalten wir ein negatives Symbol. Wenn es ein zurückgibt, erhalten wir ein positives Symbol. Denken Sie daran, da wir eine Zeichenfolge zurückgeben, müssen wir die Ergebnisse auch in die Zahlenfunktion einwickeln . Stellen Sie sicher, dass wir immer eine Zahl anstelle einer Zeichenfolge zurückbekommen . Wir geben das Symbol zurück , das positiv oder negativ ist, und fügen dieses gleich einem kleinen Wert hinzu. Auch hier verwenden wir Math.random, um uns eine Zahl zwischen Null und Eins zu geben und um es ein bisschen kleinerer Wert zu machen , teilen wir dies durch zwei. Wenn wir diesen Wert dann von unserer Funktion zurückgeben, wird eine Zahl zurückgegeben die eine positive oder negative Zahl zwischen dem Wert Null und 0,5 ist . Da dies ein so kleiner Wert , den wir jetzt zurückgeben, wie können wir feststellen, ob dies zu unserem Bounce hinzugefügt wird oder nicht? Nun, das können wir zuerst mit einem Konsolenprotokoll sehen . Wenn wir nach unserer Cloud-Funktion und in unsere letzten beiden Abschnitte schauen , die wir uns zuvor angeschaut haben, können wir dies dem Player-Paddel-Kontakt direkt darüber hinzufügen , wo wir die Richtungsänderung unter ein Konsolenprotokoll mit dem Wert von mu von x. Kopieren Sie dies und machen Sie genau danach dasselbe. Jedes Mal, wenn der Ball vom Paddel der Spieler abprallt, sollten wir zwei Konsolenprotokolle mit dem Wert von mu von x sehen. Denken Sie daran, dass wir keinem unserer Richtungsänderungen einen anderen Zufallswert hinzugefügt haben einen anderen Zufallswert noch. Diese beiden Werte sollten in Bezug auf positiv oder negativ genau gleich oder das Gegenteil sein. Probieren wir das mal aus. Aktualisieren Sie und springen Sie in die Konsole. Starte unser Spiel und nimm jetzt Kontakt zwischen der Pfütze her, und wir können sehen, dass wir negative 2,49 und auch das positive Äquivalent haben . Da diese Zahlen genau gleich sind, beweist dies, dass wir nur die Richtung um 90 Grad umkehren. Aber wenn wir jetzt unseren kleinen Zufallswert hinzufügen, sollten wir zwei verschiedene Werte in der Konsole sehen. Jetzt fügen wir unser kleines Volume hinzu, das von unserer Funktion namens „Zufallsgrenzen generieren“ zurückgegeben wird. Das Gleiche gilt auch für das Paddel des Computers. Wenn wir dies nun testen, sollten wir sehen, dass der kleine Wert zurückgegeben und von unserer Funktion hinzugefügt wird, und dies sollte etwas andere Werte sein um uns eine andere Richtungsänderung mit unser Ball. Aktualisieren. Wenn wir jetzt ein paar Kontakte knüpfen, gehen wir los. Großartig. Nun, hier ist viel los aber wenn wir uns diese paarweise ansehen. den ersten beiden Paaren gibt es negative 3,55, was sich dann auf einen positiven Wert von 3,22 umkehrt. Da diese beiden Werte geringfügig unterschiedlich sind, bedeutet dies, dass unser Bounce-Wert jetzt wirksam wurde. Wenn wir uns das zweite Paar anschauen, ändern wir jetzt nicht nur den Wert von positiv auf ein Negativ, ändern auch jeden Grenzwert geringfügig. Dies gilt auch für alle Paare, die folgen. Kleine Veränderungen können einen großen Unterschied machen und unser Spiel viel weniger vorhersehbar machen. Hören Sie auch auf , dass der Ball in einem Quadrat auf der Leinwand herumläuft . Als nächstes schauen wir uns an, wie wir unser Paddel einschränken können , damit es nicht von der Canvas abgeht. 17. Das Paddel auf der Leinwand halten: Wenn wir uns dem Ende unseres Spiels nähern, der letzte Schliff, den Sie hinzufügen möchten , darin, die Spieler-Paddel so einzuschränken , dass sie nicht von oben oder unten auf der Leinwand abfallen , wenn wir die Auf- und Abwärtstasten. Dafür gehen wir in die Funktion HandleKeyPressed, um unseren Code hinzuzufügen, der benötigt wird, um dies einzuschränken. Diese HandleKeyPressed Funktion ist der Bereich in unserem Code , der erkennt, ob wir den Pfeil nach oben oder den Pfeil nach unten drücken. Die Switch-Anweisung ist dafür verantwortlich , die Spieler dann nach oben oder in eine Abwärtsrichtung gepaddelt zu bewegen. Im Inneren, beginnend mit dem Fall Pfeil nach oben, fügen wir Code hinzu, um zu verhindern dass die Blütenblätter der Spieler oben auf der Leinwand verschwinden. Bevor wir unsere Spielerposition um einen bestimmten Wert verschieben, fügen wir dazu unsere Spielerposition um einen bestimmten Wert verschieben, eine if-Anweisung hinzu, um dies zu überprüfen. Wenn etwas stimmt, möchten wir aus diesem Bereich zurückkehren, ohne die Position des Spielers zu verschieben. Es gibt etwas , das wir überprüfen möchten, ist die Spielerposition. Denken Sie daran, wenn wir über die Positionsvariable des Spielers sprechen , dies ist die Mittellinie des Paddels. Um ganz oben auf dem Paddel zu finden, müssen wir die Hälfte der Paddelhöhe abziehen und den Boden des Paddels finden , um sicherzustellen , dass es nicht von der Unterseite der Leinwand abgeht. Wir müssen auch die halbe Höhe des Paddels hinzufügen. Wir können dies innerhalb unserer if-Aussage verwenden. Abfahrt von der Top-Position innerhalb unserer if-Aussage. Zuallererst greifen wir die aktuelle Spielerposition ein. Genau wie wir auf den Rutschen gesehen haben, ziehen wir die Paddelhöhe geteilt durch 2 ab. Dies wird uns den höchsten Punkt unseres Paddels geben. Wir müssen prüfen, ob dies kleiner oder gleich 0 ist, was ganz oben auf unserer Leinwand ist. Wenn dies der Fall ist, kehren wir dorthin zurück ohne die Spielerposition zu bewegen. Dann machen wir im Pfeil nach unten eine ähnliche if-Anweisung, machen wir im Pfeil nach unten eine ähnliche if-Anweisung bei der wir überprüfen, ob die Spielerposition Diesmal werden wir die Hälfte der Paddelhöhe hinzufügen, da wir es mit der Unterseite des Paddels zu tun haben. Hier prüfen wir, ob der Boden des Pedals gleich oder größer als der Boden der Leinwand ist , die wir mit canvas.height finden können. Größer oder gleich, auf der Leinwand.height, wenn dies stimmt, kehrt wieder aus diesem heraus, ohne die Spielerposition zu bewegen, sodass sie nicht weiter als den unteren Rand der Leinwand geht. Testen Sie das aus, drücken Sie die Leertaste und wir gehen ganz nach oben. Das Place-Paddel geht nicht weiter als ganz oben. Bewegen Sie das nach unten. Es ist jetzt eingeschränkt, dass die Spieler paddeln, um im Canvas-Bereich zu bleiben. 18. Letzte Gedanken: [MUSIK] Dies ist es jetzt für das Ende unseres Spiels und herzlichen Glückwunsch, dass Sie diese Phase erreicht haben. Wir haben jetzt einige Kernkonzepte gelernt und obwohl unser Spiel nicht perfekt ist, ist es spielbar, haben wir alle Konzepte gelernt, die wir benötigen, um mit der Entwicklung von JavaScript-Spielen zu beginnen. Ich hoffe, es hat dir gefallen. Ich hoffe, du hast ein paar neue Fähigkeiten erworben und bist bestrebt mehr JavaScript-basierte Spiele zu entwickeln. Danke, dass du an diesem Kurs teilgenommen hast, und wir sehen uns im nächsten.