HTML5 Spiel Schritt für Schritt in Schritt zum Lernen von JavaScript | Laurence Svekis | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

HTML5 Spiel Schritt für Schritt in Schritt zum Lernen von JavaScript

teacher avatar Laurence Svekis, Best Selling Course Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

22 Einheiten (2 Std. 18 Min.)
    • 1. Promotions-Video

      1:13
    • 2. HTML5 Kurs Einführung

      3:39
    • 3. HTML5 Spielvorlage

      3:01
    • 4. HTML5 Spiel verbinden Leinwand mit Javascript

      5:10
    • 5. HTML5 Spiel Verwenden Sie JavaScript, um Leinwand zu erstellen

      3:26
    • 6. GameBoard HTML5 einrichten

      10:40
    • 7. HTML5 drawimage Auswahl von image

      9:44
    • 8. HTML5 Draw dynamische Variablen

      8:03
    • 9. HTML5 Spiel Einstellung event

      6:40
    • 10. HTML5 Spiel aktive Tastatur

      5:50
    • 11. HTML5 Spielbewegung

      5:48
    • 12. HTML5 Spiel erstellen einen Feind

      6:54
    • 13. HTML5 Spiel zufällige enemy

      6:02
    • 14. HTML5 Spiel Feind bewegen

      9:24
    • 15. HTML5 Spiel Berechnungen

      3:05
    • 16. HTML5 Spiel Hinzufügen von HTML5

      9:01
    • 17. HTML5 Spiel Kollision Erkennung

      10:00
    • 18. HTML5 Game powerup

      6:50
    • 19. HTML5 Spiel runaway Geist

      1:59
    • 20. HTML5 Game Hit Test Geist

      8:41
    • 21. HTML5 Spiel das Spiel anpassen

      4:32
    • 22. HTML5 Spiel einen zweiten Feind hinzufügen

      8:39
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

582

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Erfahren Sie, wie du HTML5 und JavaScript von Grund auf erstellen kannst. Schritt für Schritt Tutorials mit echten HTML5 Codebeispielen

Crashkurs zum Lernen, wie du ein HTML5-Spiel von Grund auf für Anfänger erstellen kannst.

Core-HTML5-Training mit Leinwand und einem Spielfeld festlegen. Text und dynamische Variablen hinzufügen. Mit event zur Bestimmung der Tastaturaktionen und zur Erstellung von Bewegungen Erstelle einen zufälligen Feind und lass ihn herum. Interaktion mit Spielelementen wie einer power Kollisionsdetektion zur Bestimmung mehrerer Reaktionen auf Objektinteraktionen auf dem Spielbrett Verstechen und feine Abstimmung von interactions für ein besseres Spiel im Spiel.

Dieser Kurs ist für alle konzipiert, die besser verstehen wollen, wie du dein eigenes HTML5 erstellen kannst. In diesem Kurs zeigen wir dir, wie du ein einfaches HTML5-Spiel von Grund auf erstellen kannst. Du kannst den Beispielcode im Kurs wiederverwenden und üben.

Wir beginnen mit einem leeren Dokument, fügen in HTML-Format und dann JavaScript hinzu, um das Spiel zu erstellen.

Das Spiel, das wir in dem Kurs erstellen, ist ein pacman mit einem pacman das um den Bildschirm herum bewegt werden kann. Es gibt auch 2 Geister, die sich in Richtung des Spielers oder wegbewegen, wenn der Pacman aufgespeist ist.

Wir führen dich Schritt für Schritt durch und mit detaillierten explanations und mehr.

  • quick werden auf den Punkt
  • voll abgedeckte Themen mit realen world
  • Herausforderungen und Lektionen und Code-Muster
  • Code-Snippets
  • Links zu den besten Ressourcen, um Zeit zu sparen
  • Neues Kursmaterial regelmäßig hinzugefügt
  • Vertrauter Name in der Bildung seit 2002
  • Full HD einfach lesbare Quellcode
  • schnelle Unterstützung der Kursteilnehmer
  • regelmäßige Gespräche

Wir vermitteln dir die neuesten Techniken und Werkzeuge zur Verfügung zu stellen, um HTML5 Leinwand Animationen und Inhalte zu erstellen. Alles, was du wissen musst, ist in diesem Kurs enthalten. Lerne in deinem eigenen Tempo und lebenslangen Zugriff auf diesen Kurs.

Triff deine:n Kursleiter:in

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Kursleiter:in

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Promotions-Video: in diesem Kurs werden wir Ihnen zeigen, wie Sie ein HTML fünf Leinwand basiertes animiertes Spiel von Grund auf neu erstellen. Ich bin seit über 14 Jahren Webentwickler, und ich werde mein Wissen mit Ihnen teilen und Ihnen Schritt fürSchritt zeigen, Schritt zeigen, wie Sie Ihre eigenen HTML 5 basierend erstellen. Wir werden die Grundlagen diskutieren, wie HTML 5 eingerichtet und mit Canvas interagiert werden. Wir werden darüber reden, wie man Bilder auf die Leinwand senkt. Wie verwenden und interagieren Sie mit Tastatur- und Ereignis-Listener? Wir werden Ihnen auch zeigen, wie Sie automatisierte Gegner innerhalb des Spiels erstellen, auch verschiedene Spielobjekte hinzufügen und dann Kollisionserkennung verwenden, um Interaktivität zwischen allen verschiedenen Objekten zu schaffen . In diesem werden wir auch die Feinabstimmung Animation und eine ganze Menge mehr abdecken, wenn Sie bereit sind, Ihre eigenen HTML fünf Spiele zu erstellen. Fangen wir an 2. HTML5 Kurs Einführung: in diesem Kurs werde ich dich Schritt für Schritt durch, wie man ein Javascript-basiertes HTML-Fünf-Spiel von Grund auf neu erstellt. Wir werden alle verschiedenen Komponenten einschließen, sie auf dem Weg erklären und erklären, wie die verschiedenen Funktionen in Canvas HTML Five und JavaScript funktionieren und wie sie alle zusammenarbeiten. Mein Name ist Lawrence, und ich bin seit über 14 Jahren Webentwickler, und ich werde mein Wissen mit Ihnen teilen. Alle Quelldateien. Werden Sie auch miteinbezogen? Der Editor, den ich verwenden werde, ist Klammern. Dies ist ein kostenloser, herunterladbarer Editor von Adobe. Ich werde eine Ressourcendatei hinzufügen, in der wir alle Ressourcen, die in diesem Kurs verwendet werden , Links zu allen Differenz-Ressourcen- und Informationsdateien haben werden. Es gibt auch einige Code-Stift-Dateien. So Code Pen ist ein Online-Editor, den Sie verwenden können, um JavaScript, HTML und CSS direkt online zu üben . Der gesamte Code wird aus einer leeren Vorlage geschrieben, beginnend mit dem HTML, das die JavaScript-Quelle einbringt. Und dann werden wir hauptsächlich mit der JS-Datei arbeiten. und das wird in der Lage sein, den gesamten Spielaufbau unterzubringen. Das wird also alles eingeschlossen sein. Schritt für Schritt, wie man das Spiel von Grund auf neu zu bauen, beginnend mit den verschiedenen Variablen zu verwenden. Wie man die Leinwand einrichtet, wie man Bilder einbringt. Laden von Bildern, Hinzufügen in Listener, Tastatur-Listener, die auf Tastendruckfunktionen hören, Pfeiltasten überprüfen, um zu sehen, welche Tasten tatsächlich gedrückt werden. Ich verhindere auch den Abfluss der verschiedenen Objekte auf dem Bildschirm und dann einige zusätzliche Funktionen dieser Objekte. Einige nützliche Funktionen hier und verschiedene Möglichkeiten, um auseinander zu brechen und Spiele einzurichten. Schleifen von Spielen und Animationen von Spielen und dann Rendern von Animationen auf der Leinwand, Kollisionserkennung, Hinzufügen verschiedener Objekte auf dem Bildschirm und bewegen sich dann um diese Objekte auf dem Bildschirm, auch verhindert, dass sie aus dem Bildschirm für Bewegung laufen. Und dann, natürlich, Kollisionserkennung und dann Zeichnung verschiedene Objekte wie Punkte so kreisförmig und Rechtecke sowie. Und dann schließlich zeichnen Sie diese Bilder auf dem Bildschirm und schreiben Sie Text auf die Leinwand. Um ein einfaches Spiel wie diese Simulation von Pac Man vs die beiden Geister abschließen zu können. Es wird ermutigt, dass Sie den Code, über den wir diskutieren, mitverfolgen und üben. Ich erstelle sogar Ihre eigenen Versionen des Codes mit Ihrem eigenen Editor O verwenden bald einen Online-Editor . Bist du bereit? Beginnen wir mit der Erstellung unseres ersten HTML-Fünf-Spiels. 3. HTML5 Spielvorlage: in dieser Lektion werden wir darüber reden, wie wir unser HTML Fünf-Spiel einrichten können. Das erste, was wir tun möchten, ist das Dokument fest zu deklarieren und Sie tun dies, indem Dock eingeben und bei HTML eso deklarieren, lässt dies den Browser wissen, dass dies ein HTML-Fünf-Dokument ist , und dann werde ich das Öffnen und Schließen HTML-Tags, setzen Sie einige Abstände in. Ihre nächste Sache, die ich tun möchte, ist Kopf aufzustellen. Dies ist also, wo alle unsere Meta-Informationen eingerichtet werden, die ich auch in einen Titel hinzufügen werde . Also werde ich es einfach Spiel-Tutorial nennen. Und jetzt sind wir bereit, die Leiche aufzubauen. So öffnen und schließen Sie Body-Tags. Also habe ich die Autbst-automatischen Verschluss-Tags eingerichtet. Ich benutze Klammern, Lehmklammern. Dies ist ein kostenloser, herunterladbarer Editor , den Sie selbst herunterladen können. Oder du könntest auch deinen Lieblingseditor verwenden. Also die andere Sache, die wir tun werden, ist, dass wir etwas Styling erstellen , und ich denke, jetzt werde ich es einfach auf der Seite Styling behalten, und dann werden wir auch mit JavaScript verknüpfen. So erstellen Sie eine brandneue JavaScript-Datei und verlinken Sie auch darauf. Also werde ich ein Skript machen und eine Quelle für das Drehbuch machen. Eso Ich werde es einfach Js dot Js nennen und so wird das ziehen in unsere JavaScript-Datei, und dann werden wir einen Split-Screen tragen und das JavaScript einschließen, weil es das JavaScript sein wird, das diese Funktionalität Teoh Ihr HTML fünf Spiel hinzufügen wird . Und schließlich möchte ich in Leinwand hinzufügen. Dieses Canvas-Tag ist also eines der wichtigsten Tags hier für Ihr HTML Five-Spiel. Das habe ich erhalten. Ordnen Sie alles auf. Sie müssen alle auswählen und dann Aiken verschönern. Dies macht es besser lesbar. Und dann hier, in Leinwand, werde ich eine Breite 600 Ich gebe ihm auch eine Höhe von etwa 400. Also mach einfach 400. Und jetzt, wenn ich auf die Seite gehe, damit wir keine leere Seite mehr haben, haben wir das alles. Jetzt alle diese Vorlage eingerichtet und es ist bereit zu gehen. Muss auch die JavaScript-Js-Datei erstellen. Und dann werden wir das Spiel von diesem Punkt an aufbauen 4. HTML5 Spiel verbinden Leinwand mit Javascript: in dieser Lektion werden wir darüber sprechen, unsere Leinwand in unser JavaScript einzurichten und tatsächlich einzubinden . Es gibt eine Reihe von verschiedenen Möglichkeiten, das zu tun. Sie können sogar die Leinwand mit JavaScript erstellen, was wir Ihnen auch zeigen werden, wie Sie das tun. Aber für dieses Beispiel haben wir tatsächlich gerade mit HTML erstellt und jetzt werde ich es unterschreiben und ich d Also werde ich es Canvas geben. Also werde ich ihm eine Vorstellung von Canvas-Raum geben und dann jetzt in meinem JavaScript. Also werde ich mich damit verbinden, indem ich Canvas und Canvas einrichten werde ich Dokument machen, also funktioniert das innerhalb der Morgendämmerung, denn jetzt, wo ich ein I d gegeben habe, kann ich dieses spezielle Element in der HTML fünf tatsächlich isolieren und aufnehmen, Also, jetzt muss ich nur das i d des Elements angeben und dann wird das die Leinwand an dieses bestimmte Objekt im html eso binden Jetzt haben wir Element von i d bekommen und jetzt, wo wir es durch die i d identifiziert haben. Also bekommen Element von i d. Also, jetzt muss ich nur das i d des Elements angeben und dann wird das die Leinwand an dieses bestimmte Objekt im html eso bindenJetzt haben wir Element von i d bekommen und jetzt, wo wir es durch die i d identifiziert haben. Wir können tatsächlich unsere Interaktion einstellen, die wir nur C T X nennen werden, und das wird uns erlauben, tatsächlich mit der Leinwand in zweidimensionalen zu interagieren . Erlauben Sie uns, ein Update, Bilder und Inhalte darin zu zeichnen . Also ziehen Sie diese Variable ein, die wir gerade mit Canvas eingerichtet haben, und dann ist die Methode „get context“ und der Kontext wird zu tief sein. Jetzt, da wir unser JavaScript eingerichtet haben, gibt es hier eine wichtige Sache zu beachten, weil wir die Morgendämmerung verwenden und mit dem Dom, müssen wir sicherstellen, dass die eigentliche Seite geladen wurde, um mit der Morgendämmerung zu interagieren. Eso Deshalb werden wir tatsächlich unser JavaScript nehmen, und wir werden es unter die dom-Objekte verschieben, weil es sonst nicht funktioniert, wenn Sie es oben auf der Seite behalten. Wenn wir das JavaScript hier verbinden, werden wir nicht in der Lage sein, tatsächlich auf unsere Leinwand zuzugreifen. Es s Also das ist einer der Gründe, warum wir unser JavaScript unten setzen, so dass alle diese Informationen in das Dom geladen werden, und dann sind wir bereit, mit diesem Inhalt zu interagieren. Und jetzt werden wir nur einen schnellen Test hinzufügen, nur um sicherzustellen, dass unsere HTML Five tatsächlich angeschlossen ist und funktioniert. Also geben wir einen Text in unsere Leinwand ein. Also im Moment gibt es nichts auf der Leinwand. Wir haben keine Informationen geladen und ich werde einige grundlegende Text eingeben und es wird Hallo Welt sehen. Schließen Sie das ab. Und jetzt, nach Position, wo der Text ist so hier drüben in unserem Hinweis hier haben wir bemerkt, dass der String Text Nummer X Nummer. - Warum? Das wird also auf unserer X-Achse sein. So Lage auf unserer X-Achse können wir so etwas wie 10 tun und warum Zugang? Da wir eine Höhe von 400 haben, können wir vielleicht etwas wie 1 50 machen und dann haben wir auch ein Maximum mit. Also, wenn wir die Breite des Inhaltsbereichs oder den Textbereich, den wir in unsere Leinwand hinzufügen zu begrenzen wollen schwächen tun Sie dies innerhalb des nächsten Kommas. Aber im Moment werden wir es einfach als Standard belassen, weil ich nicht will, dass ich etwas dort setzen,auf unsere Webseite gehen und es aktualisieren muss dort setzen, . Und wir sehen, dass wir diese Hello Welt haben, und das ist auf unserer Leinwand Bereich. Eso eines der Dinge, die ich werde innerhalb des Stils einrichten, nur so dass wir tatsächlich sehen können , wo unsere Leinwände. Also werde ich Canvas einrichten, und das gilt für alle Leinwände, die ich auf meiner Seite habe. Also begrenzen Sie einen Pick und ich werde ihm eine Farbe von Schwarz geben. Also sparen Sie, dass Verschönern Sie das. Machen Sie es besser lesbar. Geh wieder raus. Aktualisieren Sie es. Nun, da wir eine Grenze haben, damit wir tatsächlich erkennen können, wo sich unsere Leinwand befindet. Es sieht so aus, als wären wir bereit, mit unserer Leinwand zu interagieren und weiterhin unser Spiel auszubauen , das wir in den kommenden Lektionen machen werden. 5. HTML5 Spiel Verwenden Sie JavaScript, um Leinwand zu erstellen: in dieser Lektion. Wir werden ein wenig zurückspringen, wie versprochen, und wir werden uns eine Möglichkeit ansehen, die Leinwand zu erstellen, ohne sie in HTML einzugeben, indem wir sie innerhalb des HTML eingeben . Ich werde die Leinwand auskommentieren wieder auf unsere Webseite gehen. Aktualisieren Sie das, und wir sehen, dass wir nichts dort haben, wenn wir zu der Quelle gehen, die jetzt auskommentiert wird, und wir sind immer noch Links zu unserem JavaScript eso in hier. Wir werden tatsächlich unsere Candace was einrichten, mit JavaScript. Und das erspart uns die Mühe, das hier einzurichten und es dann tatsächlich in den Dom zu kochen und zu hoffen, dass wir in der vorherigen Lektion bemerkt hatten, dass, als ich mein JavaScript über den tatsächlichen HTML-Inhalt legte , wir waren nicht in der Lage, sich mit dieser bestimmten Leinwand zu verbinden, die ich d. und es auf diese Weise zu tun, wird tatsächlich sicherstellen, dass alles geladen ist und dass Sie in der Lage sind ihm zu verbinden. Das erste, was wir tun werden, ist zu dokumentieren und wir werden auf Element erstellen, und das Element, das wir erstellen, ist eine Leinwand, und das nächste, was wir tun, ist, dass wir C t x dasselbe tun, was wir vorher getan haben und wir werden das Gleiche einfach kopieren, denn an diesem Punkt schaffen wir das innerhalb der Morgendämmerung, und jetzt fangen wir es an, damit wir es tatsächlich mit der CTX manipulieren können. Und es gibt noch ein paar andere Dinge, die wir tun müssen. Eigentlich müssen wir der Leinwand Ah, Höhe sowie ein mit geben . Also werden wir bei dem bleiben, was wir oben hatten, und ich werde ihm eine Höhe von 400 geben . Und mit 600 ist das 400 Pixel von 600 oder ich sollte 600 mal 400 horizontal sagen. Und dann, was wir tun müssen, ist, dass wir tatsächlich einen Stift dies zu den Körper-Tags. Also werden wir anwesend sein, ein Kind in ihre aufbringen, und das wird das Leinwandobjekt sein, das wir gerade erschaffen haben. Und dann auch, wenn wir bis zu ihm auf hallo Welt schwächen wollten. Also, wenn ich jetzt auf die Seite gehe, aktualisiere ich sie. Wir erhalten tatsächlich das gleiche Ergebnis, das wir aus der vorherigen Lektion gemacht haben. Dies ist der Weg, um es zu erstellen, indem Sie JavaScript verwenden, wenn die Seite geladen wird, und es gibt uns im Wesentlichen das gleiche Ergebnis, das wir in der vorherigen Lektion betrachten. Also wieder, innerhalb des Quellcodes, haben wir das kommentiert und in der nächsten Lektion werden wir anfangen, in einige oder spannende Dinge mit HTML fünf Leinwand zu bekommen und tatsächlich beginnen einige Spielelemente zu erstellen. 6. GameBoard HTML5 einrichten: Nun, da wir einige der Grundlagen der Einrichtung von Canvas auf Ihrer Website durchgegangen sind, können wir beginnen, einige tatsächliche Spielkomponenten zu laden. Und eines der ersten Dinge, die ich laden möchte, ist eigentlich, ich will eine Last in einem Bild uns. Wir machen einen Pac Man zu einem Mini-Pacman-Spiel, bei dem wir uns haben werden, Pac Man, wir werden zufällige Geister haben und einen Punkt erschaffen und wenn der Pac-Mann den Punkt isst, dann kann er den Geist fressen. Aber wenn die Ziege den Pac-Mann bekommt, ohne blau zu sein oder ohne im Mord zu sein, wenn der Hund gegessen wurde, dann verliert der Pac-Mann. Also machen Sie einfach eine schnelle Art von Scoring-Spiel wie das und was ich werde sehen, ist, dass ich diese PNG-Datei verwenden werde . Eso Diese PNG-Datei hat eine Reihe von verschiedenen Modi, verschiedene Symbole hier. Also haben wir unsere Geister an. Wir haben unseren Pac-Mann mit offenem Mund, geschlossenem Mund und den ganzen Weg runter. Also werden wir all diese blauen Geister benutzen, eso Lasst uns damit beginnen, dieses Bild in unsere Leinwand zu bringen . Eso in der letzten Lektion haben wir darüber gesprochen, wie man unsere Leinwand einrichtet und wie man sie mit JavaScript einbringt. Also werde ich weitermachen, und ich werde nur anfangen, etwas von dem hier zu entfernen, und ich werde ctx in Kontext ändern. Und wir werden das behalten. Wir werden diese, äh, die Größe hier von 400 mit 600 aufstellen äh, . Das ist also ein guter Anfang für das, was wir im Spiel haben werden. Eso Was ich jetzt tun möchte, ist eigentlich eine Last im Bild zu wollen. Also möchte ich ein brandneues Image einrichten. Also werde ich Hauptbild machen, und ich werde es einem neuen Bild gleich machen. Und dann werde ich das gleiche Objekt benutzen. So gemein Bild ist mein Objekt. Eigentlich sollte das ein Gleichheitszeichen sein, und ich werde tun, wenn das Hauptbild fertig ist. Wenn es also standardmäßig geladen ist, will ich hier eine Falsche haben, und ich werde es in wahr ändern. Sobald es geladen wird und bedeuten Bild bereit, oder wir werden dies auf Last nennen. Also, wenn das Bild fertig geladen wird. Wir werden weglaufen. Eine bestimmte Funktion dieser Funktion wird überprüfen, um sicherzustellen, dass sie bereit ist. Und wenn es fertig ist, wird es die Bereitschaft auf wahr setzen. Und es wird die Spiel-Rendering-Funktion starten, so auf Load prüfen bereit. Das wird also unsere Funktion sein, die überprüfen wird, ob die Dinge fertig waren, und dann ist hier drüben ein gemeines Bild. Das wird also die Quelle dieses Bildes sein. Also werde ich das gleiche benutzen, das wir gerade vorhin betrachten. Es nennt sich nur gepackte PNG. Also nochmal, nur um zu überprüfen, was hier passiert, eso richte ich ein neues Bildobjekt ein. Uh, und ich setze es ein. Ich gebe es bereit und überprüfe standardmäßig auf false. Und wenn das Bild geladen wird, wird es die Funktion ausführen. Überprüfen Sie bereit, und es wird den Quell-Pack-Punkt-PNG als Quelle verwenden. Das bedeutet, dass ich zustimmen muss, dass diese Funktion hier „Scheck ready“ heißt. Jetzt haben wir alles in dieser Funktion vorbeigekommen , und dann kann ich das einfach fertig machen, und ich kann das auf Truppen setzen und ich werde eine andere Funktion hier haben. Ich werde das Plädoyer nennen. Sobald die Bilder geladen sind, wird diese Funktion am Ende laufen. Das ist nur zu tun, um Spiel zu spielen. Ich könnte wahrscheinlich ich es auch vereinfachen, einfach vielleicht setzen Spiel hier spielen, wenn es fertig und geladen ist. Aber nur für den Fall, dass ich etwas anderes tun möchte, werde ich tatsächlich halten, dass innerhalb dieser Funktion s Also ist dies Art der Vorbereitung für die Erweiterung für spätere mögliche Erweiterung, die innerhalb dieses Spiels erforderlich sein könnte. Und ich wollte verschönern, das ist also jetzt müssen wir noch eine Funktion erstellen und es wird die Spielfunktion sein . Und was dieser hier tun wird, ist, das wird der Start des Spiels sein, das Spiel starten, diese Art von Funktion. Also wieder, einfach funktionieren, ein Spiel spielen. Also alles hier ist, wenn das Spiel gestartet wird, eso sobald unsere Bilder Luft geladen, dann können wir alles tun, was wir noch tun müssen. Und hier haben wir diese Funktion gestartet, die Spiel gespielt wird und diese Funktion wird tatsächlich eine weitere Funktion starten. Es wird Rendern genannt, und wir werden auch die Schleife hier in die Spiel-Methode einbinden, und wir werden später darauf eingehen . Also, was das Rendern ist, wird das eigentlich sein, wo wir tatsächlich den Inhalt auf unserer Leinwand ausgeben werden. Und das wird nur Funktion rendern genannt. Und jetzt, was ich tun will, ist, dass ich Kontext tun werde, Phil Stil, und ich werde ihm eine Farbe eso geben und ich werde nur eine Farbe von schwarz eso nur für den Moment, wir werden anfangen mit dieser schwarzen Hintergrundfarbe, und ich werde schnell über das, worüber wir gerade gesprochen haben, gehen, so schwarz. Und jetzt muss ich die eigentliche Füllung des Rechtecks so ähnlich wie das tun, was wir vorher gesehen haben . Also beginne ich das bei 0,0 und bringe es den ganzen Weg hoch. Also hier haben wir unsere Zahlen. Wenn wir also Rechteck füllen, müssen wir alle vier Ecknummern haben. Also müssen wir das X haben, warum das w in der h also die X koordinieren die y-Koordinate. Dies wird die Breite und dann die Höhe sein und mit Breite und Höhe können wir diese Leinwand tatsächlich mit und Leinwandhöhe verwenden, so dass wir die gesamte Leinwand füllen wollen . Und natürlich, wenn Sie nicht die gesamte Leinwand füllen wollen, würden Sie dies entsprechend anpassen. Jetzt gehen wir einfach zurück auf die Seite und es passiert gerade nicht so viel . Wir haben unser schwarzes Rechteck, es ist schwarz gefüllt. Also, nur um es dir wieder zu zeigen, damit wir buchstäblich die Farbe haben können, die wir uns wünschen, können wir Hexi Dezimal verwenden. Wir können RGB als auch auf diese wird den gesamten Hintergrund aktualisieren und gehen zurück über das, was wir hier eingerichtet haben, s so zusammenzufassen. Das haben wir uns in der vorherigen Lektion angeschaut, in der wir den Canvas-Kontext erstellt haben, um d wir ihn an das body-Tag innerhalb des HTML angehängt haben, setzen wir die Canvas-Höhe von 400 mit einem 600. Also wahrscheinlich nur schnell tauschen diese herum, weil wir normalerweise mit tun und dann machen wir Höhe auf, dann machen Höhe auf, wir hier nur ein Bild laden eso wir richten Hauptbild ein, das an einem Objekt des Bildes gibt , das wir bereit machen, Das ist also etwas, das wir wieder verwenden können oder können, je nachdem, was wir später tun und wie wir es skalieren, wollen wir vielleicht wissen, dass wir hier einen Wert von Hauptbild bereit haben, der uns sagen wird, ob Dieses Bild ist geladen. Eso Wenn wir mehrere Bilder laden, dann wollen wir diese Fähigkeit haben, um zu sagen, dass dieses Bild geladen ist und andere Bilder als auch geladen wurden. Also, wieder, das ist für, wenn wir das hier rausbauen wollen, wir machen Hauptbild auf Last und was hier passiert. Sobald das On Load abgeschlossen ist, wird es diese Methode namens check ready ausführen, die gerade hier drüben ist. Und hier machen wir das Spiegeln, der Wechsel von falsch zu wahr. Und dann führen wir hier eine weitere Funktion aus, und das ist die Funktion. Und wieder, dies geschieht für die Skalierung und Aufrüstung innerhalb des Kabels später. Im Moment sieht es wahrscheinlich ein bisschen seltsam aus, dass wir wahrscheinlich nur rendern könnten, wenn geladen ist. Also brauchen wir diese nicht unbedingt in diesem Moment. Aber ich habe sie hinzugefügt, weil wir sie verwenden und mit ihnen arbeiten, während wir durch diesen Kurs fortschreiten eso Was hier geschieht, ist alles, was wir tun, ist, dass wir uns wieder mit der Leinwand verbinden, die wir ursprünglich hier aufgebaut haben und wo wir bekam hier ein paar eingebaute Funktionen. Eso Phil Stil Das gibt uns also die Farbe, die wir füllen werden. Und dann hier taten ah, Phil Rechteck und diese Luft die Dimensionen des Rechtecks, die sich füllten. Also in der nächsten Lektion werden wir in ein paar wirklich spannende Sachen geraten. Wir werden anfangen, das Bild durchzubringen, und dann machen wir ein paar wirklich coole Sachen, damit die Bilder sich bewegen. Und so weiter s Oh, das kommt in den kommenden Lektionen, sowie wir werden die eigentliche Spielschleife einbauen und dort auch einige Funktionen ausführen 7. HTML5 drawimage Auswahl von image: in dieser Lektion werden wir mehr über das Bild sprechen und das Bild innerhalb unserer Leinwand hinzufügen. Also in der vorherigen Lektion haben wir uns angesehen und wir haben dieses Bild, wo wir alle unsere verschiedenen Symbole haben , die wir im Spiel verwenden werden, sind in einem Bild enthalten. Natürlich könnten Sie mehrere Bilder haben, in denen Sie sie alle laden können. Aber was ich für die Zwecke dieses Kurses mache, ist, dass ich nur dieses eine Bild benutzen werde, und ich werde bestimmte Teile des Bildes aussuchen, die ich auf der Leinwand zeigen möchte. Also für den Pac-Mann werde ich nur dem Parkmann für einen Geist zeigen. Ich werde einen Geist zeigen, und es wird es tatsächlich ein bisschen einfacher für mich machen, wenn ich tatsächlich einige Funktionen innerhalb dieses mache , die nicht nach dem Laden mehrerer Bilder gehen. Ich habe alles in diesem Bild enthalten. Und wie wir in der vorherigen Lektion gesehen haben, laden wir dieses Bild ein und wir sind bereit, es zu benutzen. Also, um dieses Bild tatsächlich hinzuzufügen, wird es wirklich einfach sein, denn alles, was wir tun müssen, ist die Methode zeichnen Bild, und das wird die gesamte Funktionalität des Bildes zu tun. Wir müssen nur ein paar wichtige Informationen beantworten. Und die 1. 1 ist, Wann zeichnen Sie Bild? Wo ist es die Bildquelle von einigen hier drüben zu bekommen, wir haben es geladen. Wir haben geladen und in das Objekt, mein Hauptbild. Also alles, was ich tue, ist, mich mit dem Bild zu verbinden, das wir zuvor geladen haben. Und ich ziehe es aus. Und dann muss ich hier angeben, wo ich es zeichnen möchte. Also, wenn ich 00 zeichnen möchte, so wäre dies direkt in der Ecke. Also gehen Sie zurück zu unseren Beispielen oder ziehen Sie nicht direkt in die Ecke. Wenn ich es auf die X-Koordinaten verschieben wollte, könnte ich das tun, und dann die weißen Koordinaten. Ich könnte das auch bewegen, also gibt es eine Reihe zusätzlicher zusätzlicher Parameter, die Sie in Esso hinzufügen können. Dies ist standardmäßig. Das ist das einfachste, was wir tun können. Eso Wir können auch in zweiten Satz von Parametern hinzufügen, und wir können auch zusätzliche Parameter innerhalb einer anderen Zeile hinzufügen, wo wir ein bestimmtes Stück davon auswählen können , s Oh, ich habe ein Beispiel hier, innerhalb des Code-Stift I O s. Oh, das ist ein Code-Kugelschreiber. Ich oh, das ist, dass ich auch einen Link dafür bereitstellen kann. Eso hier haben wir ein Beispiel dafür, dass wir unser Zeichnungsbild haben und was wir im Moment tun, ist, dass wir nur das Bild so zeichnen, wie es ist. Wir bewegen es rüber. Also unsere waren, glaube ich, 40 mal Null. Also stellen wir es hier rüber. Eso, wie du gesehen hast, als wir es geladen haben. Eigentlich gab es eine ganze Reihe von zusätzlichen Parametern. Eso der nächste wird das mit auf und die Höhe des Bildes sein. Wenn ich also ein Bild 20 mal 20 haben wollte, und ich nehme das ganze Bild, dann mache ich es 20 mal 20. Ich kann es so machen. Eso Wenn ich eine 1 20 von 1 20 wollte, könnte ich das tun, wenn ich es noch größer auf 400 durch 400 so weiter wollte . Dies bestimmt also die Höhe von dem Bild, das wir eso verwenden werden. Der nächste Satz von Parametern wird tatsächlich sein, es wird das tatsächlich um einiges ändern . Eso Was wir tun wollen, ist, dass wir in der Lage sein wollen, einen dieser Geister hier oder tatsächlich den Pac Man auszusuchen und dieses bestimmte Bild zu isolieren und es in unsere Leinwand zu bringen. Eso brauchen wir einige Mawr-Koordinaten, die wir hinzufügen müssen. Der nächste Satz von Koordinaten, die hinzugefügt wurden, wird die x- und y-Koordinate der oberen linken Ecke des Unterrechtecks der Bildquelle sein. Also, wenn ich aussuchen wollte, so schauen wir uns die Quelle des Bildes. Das ist also dieses Bild hier, also kann ich das vielleicht auf ein separates Fenster ziehen, und wir können sehen, dass dies die Quelle des Bildes ist. Und vielleicht will ich einfach nur das Nashorngesicht bekommen. Also nur grob, wenn ich das betrachte, wenn ich in die Quelle des Bildes gehe, wähle Aiken grob aus, dass dies wahrscheinlich etwa 60 Pixel in Dies ist wahrscheinlich etwa 150 nach unten, also werde ich einfach mit dem gehen und ich werde 60 in do 150 nach unten gehen . Und wie wir sehen, sehen wir hier oben nicht wirklich etwas passiert, weil sich diese jetzt tatsächlich geändert haben. Also betrachten wir diese Koordinaten nicht mehr als die Breite und Höhe des tatsächlichen Ziel-Canvas-Bildes. Wir betrachten das Quellbild neben der Breite und Höhe des Quellbildes. Also werde ich reinziehen. Und so jetzt sehen wir, dass, wenn wir die Koordinaten 60 mal 1 50 nehmen, das bringt uns tatsächlich gerade in Rate über dort. Und wir nehmen 10 mal 10 davon und wir setzen es als Gabel. Also, vielleicht was? Ändern Sie das einfach auf 100 mal 100. Also sind wir eigentlich raus, das 100 mal 100 eso zu setzen. Es bringt sogar noch ein bisschen mehr ins Gesicht. Also, um das noch einmal durchzugehen, weil das eigentlich ziemlich komplex sein wird. Eso, wenn ich aussuchen will. Also das erste, was der erste Parameter dort ist ziemlich unkompliziert. Es wird nur das Bild sein, und die nächsten vier werden mit dem Quellbild zu tun haben. Also das x und y des Quellbildes und dann die Breite und die Höhe des bestimmten Stückes oder Stückes von Informationen, die wir bekommen. Selbst wenn ich das reduziere, sehen wir, dass es es tatsächlich ausdehnt. Weil jetzt alles, was ich tue, ist, dass ich 20 ein Stück 20 von dort auswähle. Aber es ist eine verlängerte bis 100, wenn wir zu unserem Ziel gehen. Also, wenn ich das auf 20 bringen sollte, als wenn diese beiden übereinstimmen, dann sind wir tatsächlich eine Scheibe von diesem eso diese Dies ist 1 50, so dass es nicht notwendigerweise mit diesem eso wieder übereinstimmt. Das ist ziemlich komplex, aber visuell, was wir hier tun werden, ist, dass wir zuerst die Quelle betrachten müssen, und dann müssen wir das Ziel aus unserem eigenen Bild heraussuchen. Also gehen wir zurück zu unserem Quellcode und versuchen zu suchen. Jetzt, da wir die Koordinaten dort haben, also müssen wir das jetzt aktualisieren, und wir können ah Breite und Höhe einstellen und all diese Informationen hier herausziehen. Dies ist also, wo die Position auf dem Bild, die wir versuchen, auszusuchen. Das ist also 3 20 der Punkt bei 3 20 Der nächste Punkt ist, warum? Also, diese Null. Das ist genau hier oben, wo wir es rausholen. Wir wollen 32 Picks über 32 Picks nach unten machen, um dieses bestimmte Stück des Bildes auszuwählen . Das ist, wo wir die 32 32 bekommen, dann die anderen vier Zahlen sind, wo wir lokalisieren. Also 00 ist, wo wir lokalisieren. Also, wenn ich es auf 50 und 50 setzen wollte, könnte ich das einstellen. Und wenn ich den Pac-Mann in der gleichen Größe behalten will, könnte ich 32 machen, die unseren Pac-Mann verkleinern werden. Eso können wir das tatsächlich ändern und unser Ziel Pac Man als Bigas machen, die wir wollen. Es könnte ihn wirklich groß machen, wenn wir wollen. Und wir können sie den ganzen Weg zurück auf seine Standardzeichen bringen. Es gibt also werde ich bei der Größe von und einem Stock mit einer Größe von 32 bleiben und dann in der nächsten Lektion werden wir mehr darüber reden, wie man diese Figur dynamisch macht und um zu beginnen sie auf dem Bildschirm zu bewegen und zu starten mit einigen zusätzlichen Funktionen zu unserem Spiel. Aber so wählen Sie das Bild aus und laden Sie diesen Pack-Punkt-PNG und isolieren Sie dann dieses bestimmte Stück des Bildes und extrahieren Sie es auf die Leinwand. 8. HTML5 Draw dynamische Variablen: Also, jetzt, in diesem Spiel, was ich tun möchte, ist, dass ich tatsächlich wollen, um einige dieser Sachen dynamisch zu machen. Und was wir in den späteren Lektionen tun werden, ist das, was wir bereits erwähnt hatten. Wir werden durch dieses Rendering schleifen. Und was eigentlich passieren wird, ist, dass wir die Leinwand aufräumen und alles immer und immer wieder neu zeichnen, Frame für Frame. Und so werden wir Bewegung, Interaktion, Berechnungen für das Spiel und so weiter haben Interaktion, . Also, das wird alles in dieser Renderfunktion getan werden eso Für jetzt, Was ich tun möchte, ist, dass ich in der Lage sein, diesen Teil des Bildes zu isolieren, denn wie wir uns ansehen, habe ich diesen Mund öffnen und schließen. Ich habe das oben und unten. Also möchte ich tatsächlich Werte für diese festlegen, weil ich die Möglichkeit haben möchte, sie dynamisch zu ändern , wenn Ereignisse innerhalb des Spiels passiert sind. Und wenn sich die Dinge eso ändern, möchte ich diese Fähigkeit haben, eine dynamische Interaktion zu haben. Das wird also sein, dass ich es Packen Mund nennen werde und der Grund, warum ich das anrufe, ist, weil sich unser Mund öffnet und schließt... Also das ist, was wir es einfach nennen, um es als den Mund zu identifizieren und dann Richtung zu packen. Und das ist die eigentliche Richtung, in die sich unser Charakter bewegen wird und wir können all das Zeug in einem innerhalb eines Objekts ziehen. Also wussten wir, dass wir ein Spielerobjekt erstellen müssen, und dies könnte viele Variablen und Werte enthalten. Also, das werde ich voran gehen, und ich werde hier drüben erschaffen, und dann werde ich es als Spieler Ex-Spieler erschaffen. Warum? Und ich werde diesen Rudelmund und ein gepacktes Verzeichnisobjekt haben. Also hier drüben, anstatt eine feste Position zu sein. Also habe ich noch immer diese Objekte zu erstellen. So spielt Spieler Spieler. Warum? Es wird mir also meine Koordinaten des Spielers geben, und ich werde diese auch in Objekte verwandeln. Das werden also vier Objekte sein, und ich gehe hier rauf, und ich werde das Spielerobjekt und die Art und Weise, wie wir Objekte setzen, voreinstellen. Also variabler Spieler gleich, äh, geschweifte Klammern, also x so standardmäßig werde ich X Ausgangsposition von 50 geben. Ich werde geben, warum eine Ausgangsposition von 100 und dann haben wir eine, die wir Pack Mund genannt haben . Und ich werde geben, dass der Wert von 3 20, der standardmäßig da war. Und dann hatte ich noch einen namens Pack Direction, und das war Null, denn dort wird es sich tatsächlich ändern. Wenn wir die Richtung geändert haben, werden wir tatsächlich ein anderes Bild verklagen, da sich die Richtung ändert eso für gerade jetzt , ist wahrscheinlich alles, was wir brauchen, um diese Werte von 32 eso zu wählen Wenn wir sie machen wollen größer und kleiner, die das dynamisch geschehen wollen, könnten wir das auch hinzufügen. Anstatt 32 zu sein, könnten wir diese dynamisch ändern. Also, wenn wir es wollen, bekam ich nur einen Anruf es Friedensgröße. Und im Moment werden es 32. Das sollte ein Komma sein. Und dann, natürlich, wenn wir andere Dimensionen hätten, also wenn wir eine andere, äh, äh, horizontale Größe mit einer anderen vertikalen Größe hätten, müssten wir das auch aktualisieren. Also, jetzt Also, können wir beginnen, einige dynamische Funktionen auch mit in unser Spiel hinzuzufügen. Also, jetzt werde ich das wieder auf 32 ändern, damit es gut auf eine Zeile passt, weil das ein bisschen lang wurde . Und dann, wenn es nötig ist, können wir dasnatürlich wenn es nötig ist, können wir das immer wieder auf die Größe dort ändern. Also werden wir eigentlich nicht den Wert der Wissenschaft nutzen. Und in der nächsten Lektion werden wir mehr darüber reden, wie Sie Ihre Tastatur einrichten können. Funktionalität s werden in das s o für jetzt für dünn diese Lektion. Wir werden dies nur mit der Einrichtung einiger Scoring-Informationen beenden, denn genau wie bei jedem guten Spiel müssen Sie Scoring haben. Also werde ich eine Schriftart setzen. Jetzt müssen Sie keine Größe festlegen. Sie können einfach die Standardwerte von Schriftarten verwenden. Aber für dieses Tutorial werde ich hier nur in einer Größe von 20 Picks setzen. Verdana Schriftart und ich muss auch den Füllstil machen, weil wir blau verwenden. Wenn wir unseren Standardtext in Schwarz ändern, wird er nicht sichtbar sein. Also werde ich den Text eigentlich weiß machen. Und wenn Sie bemerken, dass es hier ein Muster gibt, was wir tun, so wird sich der Füllstil auf die nächste tatsächliche Aktion beziehen, die füllen wird. Wenn ich also keinen Füllstil festgelegt hätte, würde er ihn als blau annehmen. Also möchte ich auf jeden Fall sicherstellen, dass ich ein Gehirn aufrichte. Sie fühlen sich Stil, weil ich eine andere Farbe für den Text haben möchte. Und dann hier drüben ist, wo ich tatsächlich in die Textinformationen schreiben werde. Also werde ich dem Pac Man geben und natürlich sollten wir eine Punktzahl aufstellen. Und hier bin ich nur in Aing Ah zusammengefräst, String hier in Javascript. Das sollte also ziemlich unkompliziert sein. Und ich werde auch eine Punktzahl für den Geist machen. Und vielleicht kann ich hier Gespenst aufbauen. Und dann muss ich jetzt wählen, wo ich eine Position will. Es ist O genau wie das Bild, das ich Punkteigenschaft einrichten kann, dass dort der Parameter als das, was ich angezeigt werden möchte. Und dann hier ist, wo ich so X zuerst positioniere. Und warum dann zweiter? Also werde ich es bei zwei und 18 setzen. Gehen Sie schnell zurück auf unsere Seite. Aktualisieren Sie es. Und ich musste hier schnell zurückreißen, weil ich die Punktewerte einrichten muss , weil das einen Fehler auslöst. Also muss ich eine variable Punktzahl einrichten und es wird es gleich Null unveränderlichen g Punktzahl und gleich dieser Null. Also, wenn ich jetzt wieder rausgehe und mich auffrischen, ist es oh, da haben wir unseren Text auf und werfen ein Ergebnis und dann, was wir auch tun werden. Wir werden diese Punktzahl erhöhen, wenn verschiedene Aktionen und verschiedene Dinge innerhalb des Spiels passieren . 9. HTML5 Spiel Einstellung event: Also in dieser Lektion werden wir in ein paar wirklich coole Sachen kommen, wo wir tatsächlich eine gewisse Interaktion haben werden . Tastaturklicks, sie werden verfolgt, und dann wird etwas passieren, sobald sie verfolgt werden. Also müssen wir zuerst ein Objekt einrichten. Also wollte es es Qi Click nennen. Und wir werden nur ein leeres Standardobjekt haben, das wir verwenden werden. Und dann werden wir hier ein paar Ereignis-Listener einrichten. Fügen Sie also Ereignis-ID-Ereignis-Listener hinzu, und wir werden für das Ereignis des Schlüssels nach unten hören. Also das zieht im Wohnheim und fügt dann hinzu, fügte ich verschiedene Ereignisse hinzu. Also werden wir ein Funktionsereignis haben, und wir müssen diesen Parameter dort übergeben. Und wir wollen das falsch haben und dann mit den Augen, wo wir die Veranstaltung aufstellen werden, also nennst du es Qi. Klicken Sie auf. Das ist also dieses Objekt, das wir gerade hier eingerichtet haben und dann erhalten wir diese Ereignisinformationen und wir werden den eigentlichen Schlüsselcode erhalten, und das sollte eine Periode sein, weil wir den Schlüsselcode von diesem Ereignisobjekt erhalten, und Wir werden das in eine andere Funktion übergeben. Eso für den Moment. Was ich tun werde, ist Konsolen. Loggen Sie sich das aus. Also starten Sie, ähm, einfach zurück zu hier, öffnen Sie unsere Konsole hier, also benutze ich, äh, amüsantes Chrom. Irgendwo gibt es also einen Rechtschreibfehler. Geh zurück. Hafer. Also, jetzt sehen wir, dass, wenn ich auf der Tastatur berühren wurden diese Objekte, die in eso gesendet werden , es ist tatsächlich nehmen und tun, dass Ereignis hören eso diese Luft. Gerade als ich die Tastatur berührte, erhalte ich diese Objekte. Ah, und so wo ich einen Pass über den Schlüsselcode und auch innerhalb dieses Schlüsselklickobjekts bekommen habe. Also passieren wir eigentlich gar nichts. Also setzen wir nichts ein. Wir müssen es tatsächlich als wahr festlegen. , Und jetzt,wenn wir auf einen Schlüssel klicken, werden wir tatsächlich einen Klick bekommen. Wenn wir gehen, klicken Sie auf. Wir werden tatsächlich den A s c Zeichencode für den Schlüssel zu bekommen. Das Klicken. Also, das ist runter. Das ist noch übrig. Das ist oben. Das ist richtig. Wir sehen also, dass es sich tatsächlich aufbaut. Wenn ich im Raum lege, glaube, der Raum war 32 jede andere Taste innerhalb der Tastatur wird einen zweiten Wert innerhalb ihres eso zurückgeben Dies tatsächlich müssen wir wahrscheinlich anfangen, Objekte zu entfernen, weil wir nicht alle diese haben wollen Objekte immer alle wahr. Ah, und wir wollen 1/2 diese Ereignisse entfernen. Also wollen wir in ein zweites Ereignis hinzufügen, und das wird entscheidend sein. Und das wird das erste Ereignis vermeiden und was es tun wird, Es wird einfach das Schlüsselklick-Ereignis löschen, damit wir das löschen sollten. Jedes Mal, wenn die Taste gedrückt wird, werden wir diesen Wert aufheben, und jedes Mal, wenn er angehoben wird, verlieren wir den Rest der Werte, damit er jedes Mal gelöscht wird, wenn wir den Schlüssel heben . Und das gibt uns die Möglichkeit zurückzukehren, diesen einen Wert, den wir suchen, und dann diese Luft, die Werte, nach denen wir tatsächlich suchen, wenn wir unsere Berechnungen machen. Und wir sehen hier, dass manchmal, wenn Sie eine Reihe von Tasten gleichzeitig drücken, es durch mehr als einen Wert geht eso Dies ist etwas, was Wir werden für uns gut innerhalb des Objekts suchen . Und das ist, was wir ein Objekt verwenden, weil wir, ah, eine Reihe von verschiedenen Werten bekommen, die hier durchlaufen werden könnten. Eso wieder In der nächsten Lektion werden wir auf einige interessantere Sachen eingehen. Eso für den Moment, wir werden nur auf zusätzliche Funktion einrichten, und ich wollte es bewegen nennen, und ich werde diesen Schlüsselklick-Wert innerhalb eines Parameters dort senden. Und dann werde ich einfach das Gehirn aufstellen, das du funktionierst. Es ist noch eine da, und ich werde diesen einen Zug nennen, damit das alles damit zu tun hat, sich auf dem Bildschirm zu bewegen , und wir werden nach bestimmten Werten suchen, die übergegangen sind. Wir wissen also, dass wir diese Schlüsselklick-Werte übergeben. Wir wissen also, dass wir, sobald wir das überstanden haben, etwas Dynamisches mit der Berechnung machen müssen, wo stehen die Spieler gegenüber? Und dann wieder, machen Sie das aus. Also vielleicht, was wir vorerst tun können, ist, dass wir das rausmachen werden. Und wenn ein Schlüssel angeklickt wird, gehe ich zu Player X , und natürlich werden wir das ändern. Uh, komm in Schwung. Also jetzt, wenn ich gehe zurück und aktualisiere es so was auch immer Taste, die ich gerade drücke, wir sehen, dass wir haben sind bewegen Funktionalität, und in der nächsten Lektion wird einige oder interessante Sachen sein. Wir werden den Mund öffnen und schließen, während wir uns bewegen. Und dann werden wir auch in den verschiedenen Richtungen hinzufügen, erkennen, auf welchen Schlüssel tatsächlich geklickt wurde und diesen bestimmten Satz ausführen, die speziellen Werte für die Schlüssel, die angeklickt werden. Es kommt also in der nächsten Lektion auf. 10. HTML5 Spiel aktive Tastatur: in dieser Lektion werden wir einige zusätzliche Funktionen hinzufügen, die wir in der letzten Lektion begonnen haben in der wir die Ereignis-Listener s hinzugefügt haben. Und dann richten wir eine Funktion ein, bei der wir tatsächlich auf diesen Zug hören, die Taste aufheben, die gedrückt wurde. Und dann werden wir einige Aktionen ausführen, je nachdem, welche Taste gedrückt wurde. Eso Es gibt ein paar weitere Werte hier, die ich einrichten möchte, also möchte ich eigentlich einen Geschwindigkeitswert einrichten, und dies wird bestimmen, wie schnell sich der Charakter über eso bewegen wird Dies ist etwas, das wir dynamisch machen wollen und all diese Variablen, wenn Sie Variablen setzen, gibt Ihnen dies die Möglichkeit, sie innerhalb des Skripts zu ändern. Ah, und dann ist dies einer der Gründe, warum wir am Anfang des Spiels so viele verschiedene Variablen setzen und diese so einrichten, dass wir die Möglichkeit haben, eine davon zu ändern . In dieser Lektion werden wir uns darum bemühen, das X zu ändern, das Warum mit der Geschwindigkeit. Und wir werden auch diesen Richtungswert ändern, weil wir wieder zu dem Bild zurückkehren, das wir verwenden. Also, wenn der Pac-Mann untergeht, wollen wir uns tatsächlich ändern. Ähm, wir wollen mich ändern, auf welche Weise er sich sieht. Und das ist einer der guten Gründe, warum die Verwendung uh, Bilddatei wie diese ist, weil ich alle erforderlichen Bilder direkt in dieser eine PNG-Datei habe. Also zurück zu der Bewegung. Also werde ich eine Reihe von bedingten Aussagen machen, also werde ich tun, wenn ich bei 37 in Key Click beginne. Das ist also der, äh dieser Wert, den wir hier innerhalb der Funktion durchlaufen und wir wollen, dass etwas passiert. Eso, was wir tun wollen, wenn es 37 ist, ist der linke Schlüssel. Also wollen wir eigentlich Player X minus gleich und und eine Spielergeschwindigkeit machen. Es wird uns also diesen dynamischen Wert geben, also sollte das ungleich sein. Site eso Dies wird die Geschwindigkeit subtrahieren und dann möchte ich auch die Richtung so klar eine Packrichtung einstellen und eso die Rückkehr zu unserem Bild. Wenn ich standardmäßig nach rechts gehe, wird es Null sein, die Luft, alle 32 mal 32. Also 32 ist hier. Also das geht nach unten ist 32, also 64 geht links, also setze ich diese Packrichtung gleich 64 und dann werde ich dies auch für alle anderen Schlüssel tun . Also habe ich eine Reihe von verschiedenen Tasten, und das Gute an den Pfeiltasten ist, dass sie alle aufeinander folgenden sind. Also habe ich 37 38, also werden 38 tatsächlich hochgehen. Also ist es die oben Taste s o innerhalb von 38. Wir müssen die „Warum“ -Koordinate verwenden? Wir müssen Geschwindigkeit machen. Und unsere Richtung wird 96 sein, glaube ich aus den Berechnungen. Als nächstes wollen wir 39. Also 39 wird X sein. Also hier hatten wir unsere Standardeinstellung anfangs. Also fügen wir es nur hinzu. Die Spielergeschwindigkeit und unsere Richtung wird auf Null zurückgehen und dann 40 schließlich wird inkrementell ng wai also nach unten gehen. Also müssen wir tun, warum sie das in ein Plus ändern und unsere Richtung wird die letzte dort sein, die verfügbar ist, ist 32 eso nur einen kurzen Blick auf das und wir sollten gut sein, das zu rendern. Eso jetzt gehen wieder hier raus, Wir werden sehen, was passiert, wenn wir die Pfeiltasten berühren und wir sehen, dass wir unsere Bewegung an Ort und Stelle haben . Eso ziemlich ein paar Dinge, die in den kommenden Lektionen kommen. Eso, ich will, dass Mund öffnen und schließen eso, das wird etwas , das ziemlich einfach sein wird, zu setzen. Ich werde auch Teoh dafür sorgen, dass wir unsere Grenzen hier auf der Leinwand nicht . So Leinwand mit und Leinwand Höhe. Und wenn wir das Limit überschreiten, möchte ich es auf diese Seite zurücksetzen. Wenn du Pacman spielst, gehst du nach rechts und kommst von links rein und ich werde das auch für den Auf- und Abstieg tun. Wenn du also runtergehst, wenn du aus dem Bildschirm kommst wirst du hier oben sein und runter kommen, und dann werden wir die gleiche Funktionalität auch für die Geister hinzufügen. Füge hinzu, ah, Power Up, Power Up Pille oder Dot s, damit wir das essen und ein paar Geister jagen können. Das kommt alles in den nächsten Lektionen 11. HTML5 Spielbewegung: Also, jetzt möchte ich in dieser Mundbewegung hinzufügen, und wenn der Spieler den Rand der Leinwand passiert, wollen wir, dass Zehe diesen Spielerwert zurücksetzen, damit ich all das hier hinzufügen kann. Also werde ich schnell verschönern, dass ein wenig dann hier, Ich werde tun, wenn Player X, es ist größer als oder gleich. Und ich habe eine Leinwand mit und die Leinwand mit minus 32, so dass, obwohl, sobald es so ziemlich berührt die Kante dort, kann ich ihn zurück in die Nullposition drehen, so dass ich Spieler X einrichten und ihm einen Wert von Null geben kann . Und manchmal mit diesen Werten, muss man ein bisschen mit ihm herumspielen s oh, dieser ein Also einmal. Warum, wenn es die Leinwandhöhe minus 32 geht, setzen wir warum auf Null und dann die nächsten zwei. Also werde ich überprüfen, ob Player X jetzt kleiner als Null ist. Also bedenken Sie, dass Sie wollen, ähm, Sie wollen es nicht gleich Null setzen, weil ich hier auf Null setze, und wenn ich darauf suche, dass es kleiner oder gleich Null ist als wenn es hier auf Null trifft , Ich werde hier einen Konflikt kriegen. Also musst du wirklich sicherstellen, dass du deine Werte nicht überlappst. Deshalb ist es immer gut, um sicherzustellen, dass dudiese überprüfst. du deine Werte nicht überlappst. Deshalb ist es immer gut, um sicherzustellen, dass du Also, jetzt gehen Sie einen Wert von Spieler X, und ich werde ihm Wert von Leinwand mit minus 32 und gleiche Sache für warum Leinwand Höhe minus 32 und dann schließlich, was ich tun möchte, so zeigen wir Ihnen einfach, wie das funktioniert. Und dann werden wir den Mund setzen, was eigentlich etwas ist, das ich tun wollte, weil einige müssen Sie einige nette Funktionalität hinzufügen . Aber sehen Sie, dass wir diese Arbeit jetzt und jetzt haben, um unseren öffnenden und schließenden Mund einzurichten . Also denke ich, dass das, äh, ziemlich ordentlich Teil davon ist. Und es ist schon wieder. Es wird wirklich einfach sein, weil es alles in diesem Bild enthalten ist, also müssen Sie nicht wirklich Bilder umdrehen. Also, wenn dieser Wert 3 20 ist, werden wir etwas tun. Und wenn es nicht 3 20 ist, dann werden wir es einfach auf 3 20 setzen, also wenn es nicht 3 20 ist und es auf 3 52 und hier, werde ich es einfach anders machen. Und hier werden wir auf 3 20 einrichten, damit das nächste Mal diesen Wert dort trifft , und er setzt ihn auf 3 52 zurück. Also jetzt, nur um das zu übergehen, wie das funktioniert. Jedes Mal, wenn die Taste gedrückt wird, Jedes Mal, wenn sich der Pacman bewegt, wird er sich durch die beiden Möglichkeiten drehen, wo sich der Mund befindet. Es wird diese Bildnadel in den Auswahlbereich von 3 20,23 52 bewegen und hier haben wir die Münder, die offen sind. Und wieder, hier ist es, wo es funktioniert. Wirklich, wirklich gut, mit diesen Arten von PNG ist, wo Sie einfach das ganze Ding in laden, und dann können Sie einfach zwischen den verschiedenen Spots mit Javascript bewegen, um all diese verschiedenen Spots auszuwählen. Also, jetzt müssen wir acht testen. Stellen Sie sicher, dass es funktioniert und sehen Sie es. Wir haben unseren Mund geöffnet und geschlossen, und alles scheint so zu sein , wie wir Zehenarbeit brauchten. Und natürlich könntest du diese Bewegung immer verlangsamen. Wenn Sie mehrere Positionen des Mundes hatten, könnten Sie das verlangsamen, verschiedene Dinge passieren und so weiter. Wenn Sie einen Charakter haben, der läuft, können Sie alle verschiedenen Punkte dort hinzufügen, um die Bewegung natürlich aussehen zu lassen. Und das ist einer der Gründe, warum ich Pacman wirklich mag, weil es eine sehr unkompliziert ist. Sie haben nicht viele bewegliche Teile. Sie haben einen öffnenden und schließenden Mund, was es wirklich einfach macht, diese Acht zu rendern. Also in der nächsten Lektion werden wir in ein paar zusätzliche Sachen bekommen. Wir sind, wo, uh, rendern, dass wir tatsächlich einige Animationen machen, die wir in den Power Dot hinzufügen werden . Dann werden wir anfangen, einige Feinde hinzuzufügen, um es in, ähm, oder interessantes Spielzu verwandeln ähm, oder interessantes Spiel 12. HTML5 Spiel erstellen einen Feind: In dieser Lektion werden wir uns die Anfrage Animationsrahmen s ansehen. Oh, das wird etwas, das relativ neu ist. Eso werden nicht alle älteren Browser unterstützen. Das ist hier drüben. Sie haben hier eine Browser-Kompatibilitätstabelle, um Sie wissen zu lassen, ob Browser Air-kompatibel sind . Siehst du dir das mal an? Wenn Sie an älteren Versionen arbeiten, in denen Ihr Spiel mit Internet Explorer kompatibel sein muss , gibt es Möglichkeiten, dies zu ermöglichen, um kompatibel zu werden. Hier ist Eso. Sie können hier die verschiedenen Animationswerte festlegen, so dass wir in dieser Lektion nur mit dem Animationsrahmen für Fensteranfragen arbeiten. Sie können dies auch erreichen, indem Sie Intervalle verwenden, aber , wahrscheinlich ist der beste Weg,dies zu tun, der moderne Weg ist, diesen Anforderungsanimationsrahmen zu machen. Und was das tut, ist, dass das Schleifen dieser Intervalle und alles, was wir tun müssen , ist in unseren Code gehen, schauen Sie zurück, was wir hier im Plädospiel tun, und wenn ich das in Anfrage Animationsrahmen Spiel füge, es wird das kontinuierlich rendern. Also nur um Ihnen zu zeigen, was hier passiert, und vielleicht werde ich einfach einen schnellen Wert setzen. Vielleicht erhöhen wir einfach die Punktzahl. Ihre nur für den Augenblick. Nur um dir zu zeigen, was hier vor sich geht. Und ich habe eine Liste mit dem Wert der Punktzahl. Gehen Sie zurück zu unserem Spiel, aktualisieren Sie es, und wir sehen, dass dies ungefähr jede Sekunde ist. Es durchläuft diese bestimmte Funktion, und wir sehen, dass es tatsächlich den Bildschirm dort aktualisiert. Das ist also ein wirklich gutes Animationsintervall uns. Und das ist, ähm, eines der Dinge, die wichtig ist, wenn Sie ein Spiel erstellen, Augen Zehe, haben diese Fähigkeit Zehenschleife durch und laufen kontinuierlich durch Funktionen. Es wird also anders sein, als wenn Sie eine Website oder so etwas entwerfen, wo Sie nach einem eher linearen Prozess suchen, Sie wollen ständig in der Lage sein, zu aktualisieren und neu zu berechnen, was in Ihrem Spiel passiert . Und das ist, was dieser Anforderungsanimationsrahmen Sie tun können, um diese Funktion immer und immer wieder zu durchlaufen . Und wenn Sie irgendwelche Berechnungen haben oder wenn Sie etwas brauchen Zehe passieren, dann könnten Sie das alles in den Rahmen hinzufügen. Also alles, was ich für meinen tue, ist, dass ich den Anzug rendere und natürlich, natürlich, ich könnte das einfach kopieren, als ob du dieses Rendering loswirst. Und ich könnte das alles im Spiel haben. Eso manchmal, je nachdem, was Ihre Spielstruktur ist, können Sie es so tun. Aber wir wollen die Fähigkeit haben. Thio hat eine zusätzliche Funktionalität hinzugefügt und unser Spiel ausgebaut. Und deshalb haben wir all diese verschiedenen Funktionen. Und das ist, was wir haben sie in dieser Art von Mode gruppiert, so dass ich tatsächlich diese Zehe schwarz ändern kann , eine Füllung von schwarzen eso. In dieser Lektion werden wir anfangen, in, äh, fügen Sie die Feinde hinzu, um auch einige Funktionen für den Feind zu machen. Eines der ersten Dinge, die ich tun möchte, ist, dass ich meinen Feind anziehen möchte. Ähm, und ich werde mich aufstellen. Also richten wir dieses Objekt hier ein, das die Spielerinformationen steuert. Vielleicht müssen wir hier ein anderes Objekt einrichten, das unsere feindlichen Informationen kontrolliert also brauchen wir nichts von diesem Zeug, notwendigerweise. Obwohl , wir vielleicht brauchen,brauchen wir dort einige Werte, aber im Moment werden wir sie einfach gleich halten. Ich werde nur das X und das Y ändern, also ist es nicht sofort auf dem Spieler und ich werde den Feind rendern. Also von hier, während wir tun müssen, ist, brauchen wir nur ein weiteres Bild zu zeichnen und tatsächlich gehen, um den Feind vor dem Pac Man zu tun . Und das ist eine andere Sache, die Sie beachten müssen, dass, wenn Sie Dinge auf der Leinwand zeichnen , dies in Ordnung sein wird. Und deshalb machen wir eigentlich zuerst das Rechteck, um unsere Leinwand zu klären, dass wir das Schwarze machen. Wir machen die Leinwandgröße, und wir machen das alles zuerst, weil wir wollen, dass all diese Zehe tatsächlich einige der ersten Stücke sind, die wir sehen. Und hier drüben, wenn ich die Partitur jetzt im Grunde setzen will, werden der Geist und der Pac Man in der Lage sein, über die Partitur zu gehen . Es ist also alles geschichtet, in der Reihenfolge, was hereinkommt. Zuerst gibt es eso Jetzt müssen wir ausziehen. Also wieder werden wir Punkt in Maine Bild verwenden, so dass sich das nach dem Satz von Wert für Here s nicht ändert, also werde ich einfach Null für jetzt setzen . Anfahrtsbeschreibung. Es gibt keine Richtung für den Geist. Also 00 32. 32 wird unseren ersten Lesegeistesgeist von 0,32 mal 32 abholen. Und jetzt müssen wir ihre Koordinaten festlegen, wo sie sich befinden. Und wir werden ihn einfach behalten. 32 32 ist es wirklich einfach, einen Feind hinzuzufügen. Und wie wir hier sehen können, gibt es einen Geist und in den kommenden Lektionen waren tatsächlich dabei, ihn zu animieren. Und wieder kam dies dorthin, wo die Schichtung ist. Also, wenn unser Pac-Mann unterwegs ist, ist er auf der obersten Ebene. Und deshalb kann er dort und wieder auf den Geist gehen. Denken Sie immer daran, wie Sie leering, wie Sie stapeln, was auf der Leinwand passiert, und das hängt von der Reihenfolge ab, in der Sie den Code eingeben. der nächsten Lektion werden wir vielleicht den Geist animieren, und dann werden wir das Spiel beenden, indem wir einen Power Dot hinzufügen, uns die Möglichkeit gibt, den Geist zu essen. Das kommt alles in den nächsten Lektionen 13. HTML5 Spiel zufällige enemy: Also innerhalb von Spielen, oft mal müssen Sie Zehe haben zufällige Dinge passieren. Zufallswerte zurückgegeben. Also möchte ich immer eine einfache Funktion einschließen, bei der ich eine Zahl übergeben und über einen Zufallswert für diese Zahl zurückgeben kann. Also mache ich einfach so etwas wie zurückgekehrt und dann Mundboden, um es zurück zu bringen. Teoh tatsächlichen Wert und dann mathematische Zufallszahl. Denn wenn wir nur mathematische Zufallsprinzip machen, bekommen wir diesen Nullpunkt und eine ganze Reihe von Werten dort. Also möchte ich das multiplizieren und welches der Parameter ist, den wir dort innerhalb dieser Funktion übergeben haben , dass meine Nummer und dann ich gerne plus eins s tun Oh, das sollte mir eine Zufallszahl von Null zu diesem bestimmten Wert oder von eins zu was auch immer dieser Wert ist. Und natürlich natürlich haben Sie vielleicht eine andere Form. Sie lassen Sie, mit dem Sie arbeiten wollen, wir wollen es randomisieren oder einige dieser Werte ändern. Aber für die Zwecke dieser Lektion halte ich es wirklich einfach, wo ich das zurückgeben kann. Und der Grund, warum ich das tue, ist, weil ich tatsächlich einen zufälligen Geist setzen will , damit ich nicht nur diesen einen Geist lauern will. Ich möchte in der Lage sein, unsere zufällige eso einzustellen. Eines der Dinge hier ist, dass ich denke, ich habe ein Set. Ich werde hier Wert setzen. Also werde ich das auseinanderbrechen und einfach einen separaten Daumen beruhigen. Glauben Sie ein wenig Platz hier, und ich werde meinen Geist als falschen Wert einrichten. Und das wird mir die Möglichkeit geben, zu überprüfen, ob der Geist existiert. Wenn es beim Rendern des Inhalts nicht existiert, werde ich auch meine Geisterinformationen darstellen. Und wieder, das hängt alles davon ab, wie und wo Sie dies verwenden möchten. Aber die meiste Zeit können Sie die meisten Ihrer Funktionen hier innerhalb dieses Renderings ausführen. Ah, das könntest du auch hier im Spielspiel einrichten. Wenn du keinen Geist erkannt hast, könntest du einen dort an diesem Punkt uns erstellen Nun, eso eine Reihe von verschiedenen Möglichkeiten, die du in Esso eingeben kannst. Wenn Sie dies behalten möchten, ist der Rendering-Teil wirklich sauber mit nur Canvas-Informationen. Dies ist ein großartiger Ort, um das auch zu tun. Ah, aber für den Moment, was ich tun werde, ist, dass ich tatsächlich den Geist innerhalb der Renderfunktion rendern werde . Also werde ich überprüfen und sehen, ob Geist existiert. Und wenn es nicht existiert, dass ich ihn erstellen oder seine Informationen hier aktualisieren werde, eso, wenn er nicht existiert, weiß ich, dass ich eine Nummer für ihn festlegen muss. Also werde ich für das, was ich hier tue, ist, dass ich eine Nummer für ihn festlege . Und dann ist hier, wo welches Bild ich eigentlich herausziehen werde, also werde ich keine Geisternummer herausziehen. Das wird mir also die Fähigkeit geben, nicht nur den roten Geist darauf zu haben. Vielleicht haben Sie die orangefarbene. Die rosa. Das Blaugrün hat den violetten gewonnen, also gibt es fünf verschiedene. Also werde ich meine tauben fünf machen und ich hatte ein multiplizieren es mit 64. Und ich werde ihm auch eine zufällige X- und Y-Position geben, also werde ich ihnen Enemy X geben. Und wieder, dieser Geist, ähm , Funktion dort, und ich werde ihm einfach eine zufällige Stelle auf der Karte dort. Und auch werde ich ihm eine zufällige y-Position geben. Also dieser Typ gibt mir eine zufällige Geisterfarbe, zufällige Position, und wie wir sehen können, macht er das gerade jetzt ständig. Also denke ich tatsächlich, dass es, ah, Fehler gibt in der Berechnung. Also, was? Ich werde das entfernen, weil ich nicht wirklich im Nullwert berechnet habe. Also ist es besser. Ich sehe also nicht den Pac-Mann dort nicht. Ich sehe all die verschiedenen Geister, das ist genau das, was ich will. Aber ich möchte tatsächlich in der Lage sein, dies auf false zu setzen. Also erschaffe ich nur den einen Geist, der du dort war, wo ich ein paar von ihnen erschaffe . Aber ich wollte sicherstellen, dass ich die Geister richtig erschaffe. Eso Nun, wenn ich es tue, Geist gleich wahr. Ich sollte nur einen Geist haben, und es wird viel einfacher sein, das zu verfolgen, was hier passiert. Und eine andere Sache, die ich auch hinzufügen möchte, ist, dass ich nicht will, dass er an die Spitze kommt, also werde ich ihm ein Plus 30 geben, Teoh, Teoh, gib ihm eine Position, zufällige Position, aber tatsächlich haben sie unten, wo der Inhalt dort oben ist. Geben Sie ihnen also ungefähr eine zentrierte Position. Eso kommt keine Lektionen. Wir werden darüber reden, wie wir unseren Geist tatsächlich bewegen können eso Es kommt in der nächsten Lektion. 14. HTML5 Spiel Feind bewegen: Jetzt, da wir unseren Feind erschaffen haben Jetzt müssen wir etwas Bewegung für unseren Feind s 01 der Dinge, die ich hier aktualisieren möchte. Als wir ihn erschaffen haben, möchte ich überprüfen, ob er sich bewegt. Vielleicht könnten wir sogar etwas tun, wo wir eso haben. Das Bewegen wird tatsächlich ein Wert davon sein, wie viele Leerzeichen oder wie viele Sekunden er sich in die gleiche Richtung bewegt. Eso Ich möchte ihm die Möglichkeit geben, sich in zufällige Richtungen zu bewegen, aber ich will nicht, dass er zufällig hin und her brummt. Ich möchte, dass er eine Entscheidung trifft, in welche Richtung er für eine Weile in diese Richtung geht. Und wenn die Berechnung nach oben ist, wird es ein Countdown für diese Bewegung sein, wird es sinken. Sobald es auf Null trifft, wird es neu initiieren. Es wird neu bewerten, in welche Richtung er gehen muss, und ich werde all das Zeug in die Rendering-Funktion einfügen. Also hier haben wir unseren Geist eingerichtet und was ich tun werde, ich werde nicht in der beweglichen Berechnung hier drin hinzufügen, nur weil ich jedes Mal zurücksetzen wollte , wenn es Null trifft. Also wird es immer das Gleiche sein. Also, was wir haben, ist der Feind, und wenn es weniger als Null ist, dann will ich, dass etwas passiert. Und hier ist, wo wir unseren Feind in Bewegung aussuchen, und wir werden ihm einen zufälligen Wert geben. Also benutzst du diesen Verstand, ähm, wieder. Und vielleicht wählen wir so etwas wie zufällig 30 aus. Multiplizieren Sie es mit drei. Und wieder, Sie haben möglicherweise eine andere Berechnung, die Sie hier verwenden möchten. Ich füge 10 hinzu, weil ich nicht will, dass es unter 10 geht. Und das sollte uns grob, ähm, eine Zufallszahl geben, damit es herunterzählt. auch Vielleicht möchten Sieauchdie Geschwindigkeit auf ihn ändern, nicht nur überprüfen. Also habe ich eine Geschwindigkeit von fünf eingestellt. Also vielleicht möchte ich, dass er tatsächlich eine zufällige Geschwindigkeit hat, wird nicht immer mit der gleichen Geschwindigkeit s bewegen jedes Mal, wenn er die Richtung ändert. Es wird eine Möglichkeit geben, dass er auch die Geschwindigkeit ändert. Nun, die Art und Weise, wie wir es hier machen, weil ich es in diesem Renderbereich platziere, wird es ihn wirklich schneller und immer wieder bewegen. Es könnte besser gewesen sein, eine andere Funktion zu erstellen und dies herauszubringen, aber im Moment werde ich sie innerhalb des Renders behalten. Aber das ist etwas zu beachten, dass dies eine schnellere, schnellere Reaktion sein wird , weil dies jede Sekunde ausgeführt wird, im Gegensatz zu der Person und den Schlüsselklicks und ihrer Bewegung. Also denke ich, eine Bewegung der groben Zahl vier oder fünf und dann hier ist, wo wir tatsächlich Richtung setzen. Also wollte ich die Richtung gleich Null setzen, und ich werde Richtung X und Richtung machen. Warum? Also habe ich sie beide auf Null gesetzt. Und der Grund, warum ich das tun wollte, ist, weil ich hier drüben los bin, will ich eigentlich herausfinden, in welche Richtung er sich bewegen sollte, entweder nach oben oder unten, links und rechts. Und die Art und Weise, wie ich das tun werde, ist, dass ich tun werde, also nehme ich diese zufällig generierte Zahl, die ich hier drüben habe und tatsächlich darüber nachdenke, ich muss wahrscheinlich etwas hinzufügen, um es entweder seltsam zu machen oder sogar eso ich werde es seltsam machen oder sogar damit, auch da. So können wir jetzt Feind bewegen. Und wenn es Modul ist, wenn es einen Rest gibt, dann wird es eine Sache tun, und wenn es keinen Rest gibt, geht es in die andere Richtung. Also die erste Berechnung. Also, wenn es einen Rest gibt, weiß ich, fügen Sie in den anderen gibt es auch eso, was wir tun wollen. Wir wollen es nach links und rechts bewegen, wenn es keinen Rest gibt, und wenn es einen Rest gibt, werden wir es nach oben und unten bewegen 50 Chance auf die Richtung, die er nehmen wird . Und ich möchte auch die Rücksicht nehmen. Wenn ich diese Berechnung mache, möchte ich einen Blick werfen und sehen, wo sich die Spieler befinden. Und wenn der Spieler eigentlich weniger ist als mein Standort, werde ich sie so schicken. Und wenn die Spieler mehr werden, dann schicke ich ihn in die andere Richtung. Also werde ich es hier tun. Ich werde feindliche Richtung machen. X entspricht Minus. Also von hier wird es tatsächlich die Geschwindigkeit subtrahieren und sonst wird eine andere Aussage dort und das Gegenteil wird die Geschwindigkeit hinzufügen, also wird die Richtung der Geschwindigkeitswert sein. Und dann das natürlich könnte sich das natürlichändern. Und dann hier, alternativ, werde ich hier die Weisen tun. Also habe ich all diese Zehe gewechselt. Warum? Also, das sollte ich uns Richtung geben, um rein zu gehen und dann kurz bevor wir unseren Feind herausziehen Jetzt hier müssen wir hinzufügen. Wenn das so viel wie das, was wir hier mit den Tasten gemacht haben, die Tastatur, wo wir in Spieler hinzugefügt haben, haben wir das gleiche für den Feind zu tun. Der Feind X entspricht also dem Feind X und der gegnerischen Richtung X, ein Gegner y entspricht dem Feind. Warum, plus feindliche Richtung? Warum und eine andere Sache. Ich möchte diesen beweglichen Wert tatsächlich verringern, so dass wir ab und zu zurücksetzen können. Also ungefähr, was auch immer diese Berechnung ist, das ist und wie viele Sekunden sie einen Reset durchführen, und es wird immer zufällig sein. Und der Grund, warum wir es zufällig machen, ist, dass niemand wirklich bestimmen kann , was das Muster für den Feind sein wird. Also wurde mir klar, dass ich zurück zum Feind ging. Ich habe diese Richtung X und Richtung nie festgelegt. Warum? Also muss ich diese vor der Arbeit hinzufügen, weil es sonst nur dieses X und y überschreibt . Es funktioniert also nicht genau, weil ich das Objekt nicht richtig eingerichtet habe. Also, wieder hier raus zu gehen, erfrischend, dass wir sehen, dass es jetzt richtig funktioniert, wo wir unseren Geist zufällig bewegen , und er bewegt sich tatsächlich immer auf den Spieler zu. Wir wollen es wieder auffrischen, Anderer Geist und diese Bewegung. Wenn wir also nicht wollen, dass er jemals still steht, kann ich diesen zufälligen Wert ändern, anstatt fünf zu sein. Vielleicht kann ich ein Plus ändern, so dass es immer einen Wert gibt, der zurückgegeben wird . Und wenn Sie bemerken, jetzt sind Geister tatsächlich laufen vom Bildschirm. Eso müssen wir in der gleichen Funktionalität hinzufügen, die wir in unserem Pac Man hatten, wenn wir aus dem Bildschirm gehen , dass er auf der anderen Seite erscheint, also kommt das in der nächsten Lektion. 15. HTML5 Spiel Berechnungen: So ähnlich wie das, was wir für unseren PAC-Mann tun mussten, um ihn davon abzuhalten, von der Bühne zu rennen , müssen wir tatsächlich dasselbe für den Geist tun eso Ich kann das einfach so ziemlich kopieren und dann einfach den Text hier aktualisieren. Also, nachdem wir unsere Berechnung durchgeführt haben, möchte ich sicherstellen, dass wir nicht von der Seite laufen. Also 1. 1 wollten wir alle diese Spieler Toe Feind ändern, weil wir dies bereits getan haben. Und viele Male, wenn Sie verschiedene Engines verwenden, die verfügbar sind, haben sie bereits diese Arten von Dingen vorgebaut. Oder Sie könnten Ihre eigene Bibliothek erstellen, die diese Art von Sache macht, wo sie automatisch die Höhe erkennt mit, und diese Werte könnten automatisch in eso eingespeist werden. Aber zum Zweck dieser Lektion werden wir es einfach so haben. Also jetzt gehen und es erfrischen. Wir sollten nicht gehen , , sollten nicht mehr vom Bildschirm rennen. Und wie Sie sehen können, hey geht tatsächlich durch. Das ist also, äh, das sieht wirklich gut , als müsste ihn wahrscheinlich etwas verlangsamen, weil es wahrscheinlich ziemlich schwer sein wird , zu fangen und vielleicht sogar einige dieser Zahlen zu ihn etwas schneller in Richtung wechseln lassen. Ich könnte das loswerden und ihn dort etwas verlangsamen. Also nur einige kleinere Anpassungen und Optimierungen und Sie werden feststellen, dass Sie in der Regel einige Anpassungen vornehmen müssen , um Ihre Berechnungen zu optimieren. Aber das sieht so aus, als ob es ein bisschen besser funktioniert. Es war ein wenig mehr hält herauszufinden, wo ich bin und er findet Wege, um mich auf das zu bekommen ist genau das, was wir in unserem Spiel Zehe wollen. Fügen Sie Herausforderungen in unserem Spiel in den kommenden Lektionen waren und sprechen Sie über Kollisionserkennung eso, dass wir wissen, dass, wenn tatsächlich der Geist tatsächlich erkannt hat uns kollidiert mit uns. Wir werden in unserem Power-Up-Punkt hinzufügen, so Ort, dass irgendwo zufällig auf dem Bildschirm Ziel des Spiels ist es, den Pac Man zu bekommen, um den Punkt zu essen und dann den Geist zu essen, um zu punkten und sicherzustellen, dass die tatsächlich der Geist nicht isst den Pac Man und Das wird die Zusammenfassung unseres Spiels sein. Eso für den Moment. Was wir tun werden, ist kommende Lektionen. Es ist also nur eine kleine Optimierung für diese kommende Lektion. Wir werden darüber reden, diesen Power-Punkt hinzuzufügen und dann auch die Kollisionserkennung in den kommenden Lektionen durchzuführen. 16. HTML5 Spiel Hinzufügen von HTML5: in dieser Lektion werden wir darüber reden, unseren Power-Up-Punkt-s hinzuzufügen Oh, das wird ein weiteres Objekt sein, das wir auf unserem Bildschirm platzieren werden. Und das bedeutet, dass wir hier rüber gehen und eines dieser Objekte reproduzieren sollten, weil wir noch ein paar davon brauchen werden. Also werden wir diese X und Y brauchen, ähm, wir müssen sie nicht irgendwo zufällig auf dem Bildschirm platzieren. Wir brauchen auch ein, äh, Einschalten, Einschalten, also nennen Sie es einfach „Einschalten“. Und im Moment werden wir das falsch machen. Und jetzt werden wir tun, Wir sollten das ändern, ein Schwung, unser Es wird es Powerdot nennen also werden wir eine X- und Y-Koordinate für Power Dot haben und wir werden einfach einen Punkt zeichnen , wenn Power Up Null, wir werden diesen Punkt zeichnen Wir sind Ich werde die Berechnungen dafür machen. Also, wenn es verfügbar ist, werden wir es zeichnen. Und wenn es nicht verfügbar ist, dann werden wir es nicht zeichnen. Und wenn es nicht verfügbar ist, bedeutet das, dass der Pac-Mann es gegessen hat und wir es im Moment nicht zeigen werden. Also hier runter zu gehen, so wie wir es mit dem Geist getan haben. Wenn wir es rendern, möchte ich eine schnelle Überprüfung durchführen, um zu sehen, ob es existiert. So wie wir es mit den Geistern gemacht haben, werde ich die Klamotten zumachen. Die sind hier unten. Daumen minimieren. Es nimmt nicht so viel Platz auf dem Bildschirm ein. Und ich werde einen Scheck machen, um zu sehen, ob der Power Dot eingeschaltet ist. Ah, also wenn darin und das falsch ist, was es standardmäßig sein sollte, gehe ich hier hoch, wir sehen, dass wir die Macht auf falsch eingestellt haben. Also hier können wir unsere Zufallsberechnungen uns bekommen. Wir können unsere Power Dot exe und Power Dot y Position einstellen. Und dann wieder hier, werde ich das „Meine Taube „benutzen, es wird 30 hinzufügen, damit ich nicht direkt an der Spitze lande und der Einheit Power Dot Warum? Und natürlich könnten Sie Thies so einstellen, dass sie von der Leinwand abhängig ist. Diese Werte eso abhängig. Wenn Sie die Größe Ihrer Leinwand ändern, kann sie auch leicht angepasst werden. Also manchmal ist das eine gute Idee, so viel wie Sie können dynamisch zu halten um, um Anpassungen und Salon eso jetzt, eine andere Sache. Wir müssen das so einstellen, dass wir dort keine ganzen Punkte erstellen. Eso Jetzt haben wir unsere Berechnung dort für den Power Dot gemacht und so können wir jetzt nach unten gehen und wir werden tatsächlich überprüfen, ob der Power Dot existiert. Und wenn es so ist, hat das alles hier oben damit zu tun, sich um den Feind zu bewegen. Also hier drüben, werden wir sehen, ob der Power Dot existiert. Dann ziehen wir das auf den Bildschirm, je nach Position. Also haben wir es nicht unbedingt auf die gleiche Art und Weise, wie diese Bilder gemacht wurden. Eso, Natürlich, wenn Sie ein Bild des Punktes hatten, Sie könnten das auch einschließen. Aber für die Zwecke dessen, was wir in diesem Kurs machen, zeigen Juan einfach andere Wege. Wie man auf der Leinwand s. Eine andere Möglichkeit, auf dem Campus zu zeichnen ist wieder, dass Phil Stil, weil wir wollen, um eine bestimmte Farbe zu setzen. Also möchte ich gelb sein, um mit Pac Man-Spielen konsistent zu sein. Ich glaube, dass Erwachsene wahrscheinlich ah, weiß oder gelb sind , aber für diese Lektion werden wir es einfach gelb halten. Und jetzt müssen wir einen Bogen zeichnen. Also müssen wir eine kreisförmige, ah Punkt kreisförmige Mode eso zeichnen . Regel Wenn Sie auf der Leinwand zeichnen möchten, zeichnen Sie in der Regelein Quadrat oder ein Rechteck auf. Und wenn wir etwas anderes als das wollen, dann müssen wir die Wege aufzeichnen und die Wege trocknen, wo wir wollen, dass die Verbindungen hergestellt werden . Also Rechtecke werden standardmäßig nur ein schnelles Rechteck zeichnen, nur um zu veranschaulichen, wie einfach es wirklich ist, ein Rechteck zu machen und was wir wieder tun, ähnlich dem, was wir vorher mit der Zeichnung des Bildes tun. Also bekommen wir eine X- und A-Y-Koordinate. Also, wenn ich wollte, dass dieser bestimmte uh Punkt bestimmte X und Y Koordinate zeigt, könnten sie X und y tun, und dann ist das mit. Die nächste Koordinate wird also die Breite sein. Also, wenn ich einen Punkt wollte, das war 20 oder eine rechteckige in diesem Fall oder wenn ich wollte ein Quadrat, Ich könnte tun 20 mal 20 aktualisieren Sie es und wir bekommen diese zufällige Position des Quadrats so nicht ideal für das Spiel, das wir tun, weil ich will, dass als kein Bogen anstelle des Rechtecks ist ein paar weitere Schritte, die wir tun müssen. Um dies zu erreichen, können wir dort innerhalb der Manz ill eine Führung in Reihenfolge gezeichneten Bögen sehen wir das X, warum wir den Radius, den Start, Winkel und Winkel machen den Start, und ob es gegen den Uhrzeigersinn ist. Also haben wir diese Art von Wert hier. Also 75 von 75. Das ist also, wo die Positionierung eso ist es 50 02 mal pi und das gibt uns ein kreisförmiges Objekt. Und dann müssten wir nur das ausfüllen. Und wir machen dieses Ding namens Beginpfad, weil wir tatsächlich auf der Leinwand zeichnen. Also müssen wir das auch einbeziehen. Es ist also der Kontext-Anfangspfad, und das lässt die Leinwand wissen, dass Sie tatsächlich anfangen werden, einen Pfad zu zeichnen, und ich werde das aktualisieren. Fügen Sie das Mathematik-Pi Times zwei ein. Und wenn Sie Pfade zeichnen, müssen Sie den Pfad tatsächlich schließen, nachdem Sie fertig sind, damit zu zeichnen. Und dann, nachdem Sie es geschlossen haben, ist das der Punkt, an dem Sie es tatsächlich füllen können. Das sollte uns also einen Kreis geben, der zum Führer hier zurückgeht. Es gibt Startwinkel und Winkel und, ähm, gegen den Uhrzeigersinn. Also möchte ich eigentlich, ich muss den Startwinkel auf Null setzen, und ich denke, dass das, äh, sollte das ein wenig beheben. Natürlich das Problem auch hier, auch hier, dass ich gefüllte Rechtecke habe. Ich muss das in Arc eso ändern, mein Radius wird 20 sein, was wahrscheinlich ein bisschen größer sein wird , als ich brauche, aber im Moment sollte das okay sein. S Oh, ja, ja, definitiv größer als das, was ich will. Und ich möchte das wahrscheinlich ändern, um weiß zu sein. Wir machen das etwas kleiner. Aktualisieren. Es ist also das gibt uns unseren Power-Up-Punkt und in den nächsten Lektionen werden wir darüber reden, wie wir feststellen können, ob der Pac-Mann den Punkt isst und dann wenn der Pac-Mann den Geist isst, also einige wirklich coole Dinge kommen in den nächsten Lektionen 17. HTML5 Spiel Kollision Erkennung: Also das erste, was ich tun möchte, ist die Kollisionserkennung mit dem Einschaltpunkt in unserem Spiel hinzuzufügen . Also das ist eines der Dinge, die wir hinzufügen möchten, wenn der Pac-Mann über den Punkt geht, bekommt er tatsächlich die Punkt-eso-Kollisionserkennung auf der Leinwand zu essen. Sie müssen ziemlich viel Berechnung machen und das wieder, das wird etwas sein, das ziemlich viele bedingte Aussagen erfordern wird. Eso schaut nur auf Wahrscheinlich, wo der beste Polizeizehen in diesem Power-Up-Punkt hinzufügt, vielleicht ist nachdem wir sogar Dinge umgezogen haben. Als wir unseren Feind herumzogen haben,haben wir all diese Berechnungen. Als wir unseren Feind herumzogen haben, Also hier drin werden wir Absprachen machen, und das wird eine ziemlich große if-Aussage und dann natürlich müssen wirnatürlichauch eine für den Geist tun. Wenn Sie also eine der JavaScript-Engines verwenden, haben sie normalerweise diese Art von Sachen eingebaut, weil es viele sich wiederholende Teile des Codes gibt. Und wenn Sie irgendeine Art von Schießen jede Art von Kugeln oder so etwas wie diesen eso tun , das wirklich komplex wird, weil Sie eine ganze Reihe von Kollisionen haben werden, um zu erkennen. Und die einzige Möglichkeit, Kollisionen zu erkennen, ist zu berechnen, wo sich Ihre Spieler befinden. Uh, und in diesem Fall, wo sich unser Powerdot befindet und natürlich, müssen wir ein Minus 10 darauf machen. Oder vielleicht könnten wir ein Minus Fünf machen, weil das unser Radius des Power-Punkts ist. Also müssen wir die Hälfte des Radius subtrahieren, weil dies ein Mittelpunkt ist, so dass X und Y innerhalb der Arche sind ein Mittelpunkt, und es geht 10 um sie herum. Vielleicht war das richtig, dass der Radius 10 war. Dies erkennt also, um zu sehen, ob die Spielerkoordinaten kleiner sind als die Power Dots Koordinaten . Und wir müssen auch überprüfen, um zu sehen, ob der Power Punkt X kleiner als die Spieler X ist. Und hier müssen wir in ah, 16 wieder hinzufügen, um diesen Mittelpunkt zu bekommen und eine weitere Überprüfung hier, um zu sehen, ob die Spieler, warum Koordinate kleiner oder gleich der Power dot Warum bayous, Ted und ein weiterer Scheck, um Powerdot zu sehen Warum ist weniger dann, Spieler? Warum plus 16. Und wenn das wahr ist, dann werden wir uns vorerst ausloggen, es eso Hoffentlich sollte diese Berechnung einen quadratischen Bereich erstellen , der überprüft, ob der Spieler und der Power-Punkt innerhalb des gleichen Abstands liegen und Aktualisieren Sie das. Und hoffentlich jetzt, wenn ich es durchgehe, bekommen wir einen Treffer , den es uns anscheinend nicht tut. Stimmt etwas nicht mit der Berechnung? Aber wir haben dort einen Hit bekommen, also ist es etwas aus. Wir müssen also die tatsächlichen Grenzen ein bisschen größer machen . Also werde ich das einfach zu 16 ansprechen und wieder gibt es immer verschiedene Anpassungen, die du vornehmen musst. Es sah so aus, als wäre es etwas da draussen. Das ist wahrscheinlich nicht die beste Position des Power Dots, der aussah, als wäre es ah, ein bisschen besser dort. Es gibt immer Optimierungen mit den Berechnungen, also sieht es so aus, als wäre es ah, die Grenzen sind ziemlich gut. Wir müssen wahrscheinlich ein wenig auf dieser Seite des Punktes. Also, was ich tun kann, um es ein bisschen größer zu machen. Vergrößern Sie diese Grenze. Also kam das Problem von der linken Seite rein und tatsächlich das. Also habe ich am Ende den Code aktualisiert. Die Berechnung musste entfernen, dass Power Punkt minus 10 und dann auch für X und Y. Und jetzt sieht es so aus, als wäre der Treffer genauer. Wenn ich in die Nähe des Punktes komme, wenn ich den DOT berühre, gibt es mir einen Treffer, und das ist genau das, was ich will. Zehe passieren in meinem Code. Also, wenn ich es sofort anrühre, bekomme ich den Treffer. Und immer gibt es diese Berechnung und Arbeit damit, das ist, wo ich normalerweise Konsolenprotokoll verwende, um mir bei den verschiedenen Berechnungen zu helfen und bestimmen, wann ich einen Treffer sehe. - Eso. Jetzt, da ich diesen Hit funktioniere, kann ich weiterhin den Code ausschreiben und ich könnte etwas passieren lassen, sobald die Kollision erkannt wurde und eines der Dinge, die ich will, ist, dass die Geisterfarbe der Zehe tatsächlich ändert, und wieder, das ist ein guter Grund, warum wir alles in einer PNG-Datei verwendet haben, wo ich leicht zu einer anderen Farbe wechseln und stattdessen verwenden kann. Also, was ich für diese Macht tun werde, werde ich die 12 falsch setzen, weil ich das nicht mehr zeigen will. Eso der Power-Punkt ist jetzt falsch. Und ich kann in ein paar weitere Objekte hier innerhalb des Power Dot Eso hinzufügen, dass wir das falsch dort hatten . Ich will einen Countdown haben. Und jetzt bin ich fest, dass Null und eine andere, die ich haben will, ist, dass ich in der Lage sein will, uns einen Wert für die alte Geisternummer zu speichern . Eso habe ich diese Werte hinzugefügt und ich werde den Daumen hier unten wiederverwenden. Also nochmal, ähm, ich werde eine Countdown-Nummer mit Power Dots und diesem auch festlegen. Also, unser Countdown gehen wir auf 500. Ich werde auch die Geisternummer nehmen, und ich werde diese alte Geisternummer nehmen und die dort drin aufbewahren. Und der Grund, warum ich das mache, ist, weil ich tatsächlich die Farbe ändern werde. Und ich muss wissen, was die ursprüngliche Farbe des Geistes war, um ihn wieder zu wechseln nachdem der Countdown beendet ist. Das ist also der Countdown, während der Geist vom Pac-Mann essbar sein wird und jetzt kann ich diese Geisternummer festlegen und bereits wissen, welche Nummer ich brauche, um sie rauszuschicken. Ich muss 3 84 einrichten, um der blaue Geist zu sein und p dot x also werde ich die aus dem Weg bringen, damit es keine Kollisionen damit gibt. Und so jetzt, wenn ich wieder raus gehe, wenn ich den Punkt esse, sagte der Punkt verschwinden und der Geist blau zu drehen eso Bündel von Dingen, die wir noch hinzufügen müssen, will ich, dass gehen Stapel zu blinken ich will, dass geht weg von mir, anstatt auf mich zu kommen auf und dann müssen wir auch die Kollisionserkennung mit dem Geist hinzufügen, damit alles in den nächsten Lektionen auftaucht. Und dann natürlich nicht, wollen wir natürlich nicht,dass dieser Punkt erscheint, während der Countdown noch stattfindet. Eso wollen wir, dass der Punkt wieder erscheint, nachdem der Countdown abgeschlossen ist 18. HTML5 Game powerup: In dieser Lektion werden wir den Geist hin und her blinken lassen. Und die Art und Weise, wie ich das tun werde, ist, dass ich von diesem zu diesem umkehre. Und wir werden auch die zwei verschiedenen Geistervariationen verwenden. Also haben seine Augen tatsächlich eso hin und her zwischen diesen beiden Schwimmen bewegen, um hier einen brandneuen Wert zu setzen . Und ich werde diesen Blitz nennen, um ihm tatsächlich einen Wert von Null zu geben und hier runter zu gehen . Und wenn wir bei Oates schreiben, , ich blitze da drin, und das wird das hier dynamisch machen, und dann machen wir einfach so etwas wie das, was wir hier getan haben, als wir den Mund wechselten Öffnen und Schließen. Und das ist diejenige, nach der ich hier drüben suche, also werden wir eine schnelle Überprüfung durchführen, um zu sehen ob es in welcher Rolle es ist, und dann, abhängig von der Straße, auf der es ist werden wir tatsächlich das Bild anpassen, das angezeigt wird. Wenn dieser gleich Null ist, dann werden wir es auf 32 setzen und wenn sonst, ist es nicht gleich Null. Wir werden es gleich Null setzen. Das sollte uns also die Fähigkeit geben, die Geisteraugen zu bewegen, wenn wir hinübergehen. Ich meine, das ist ein bisschen zu viel Bewegung. Aber jetzt haben wir den Geist blinkt, also können wir ihn entweder einstellen. , Wir können es so einstellen,dass es aus den Augen entfernt wird, die sich bewegen, wenn wir wollen. Das ist oh, vielleicht ist das ein bisschen zu schnell so gut wir. Wir wollen das vielleicht nicht unbedingt tun. Eso Die andere Option hier ist zu sehen, ob es eingeschaltet ist und dann je nachdem, was die Power Up ist, dann können wir hin und her wechseln. Also lasst uns. Oder wir können das in unserem Countdown hinzufügen. Und weil wir dort einen Countdown haben, den wir runterzählen werden. Vielleicht können wir das im Countdown hinzufügen. Und sobald der Countdown beendet ist, werden wir nicht mehr zwischen den beiden wechseln, also machen wir es einfach so. Also werde ich in diesem Countdown eine Überprüfung der Zählung dort unten hinzufügen und sehen, ob es größer als Null ist. Und wenn es so ist, dann werden wir mit dem Countdown fortfahren, um ihn auf Null zu bringen. Und ich werde hier einen weiteren Wert im Feind hinzufügen und ich werde es nur Geisterfressen nennen. Und ich werde das zu falsch machen und hier rüber gehen, wann immer wir unsere Kollisionserkennung haben , werde ich Power Dots setzen. Geisterwärme ist gleich wahr. Während die Zeit angetrieben wird, werden wir es als wahr haben. Und der Grund, warum wir den Countdown nicht wirklich nutzen können, ist, weil wir in der Lage sein müssen, das zu verringern. Und wir müssen etwas passieren, wenn es Null erreicht eso wahrscheinlich ein paar verschiedene Möglichkeiten, dies zu erreichen. Aber im Moment werden wir sagen, wenn das wahr ist, dann werden wir mit unserem Countdown fortfahren, bis dann werden wir mit unserem Countdown fortfahren, bis der Countdown weniger als Null erreicht. Und sobald es weniger als Null trifft, und dann werden wir hier alles zurücksetzen. Also werden wir das ändern, um gleich falsch zu sein. Wir werden die Geisternummer zurück in die ursprüngliche Nummer ändern, die wir gesetzt hatten. Also eine Geisternummer. Das wird also seine Farbe wieder ändern und wir müssen hier noch eine Sache hinzufügen, die wir überprüfen müssen, ob dies existiert und wir haben Zehe haben, so dass wir nicht den Punkt setzen Sie einfach, dass weniger als oder weniger als fünf. Also, wenn ich jetzt den Punkt esse, sollte es einen Countdown geben und schließlich sollte er wieder zu seiner normalen Farbe wechseln. Und dann holen wir unsere Tochter zurück. Also jetzt haben wir unsere grundlegende Spielfunktionalität. Wir müssen die Kollisionserkennung mit dem Geist hinzufügen, und wir müssen auch die Fähigkeit hinzufügen, dass der Geist von mir wegläuft, sobald ich den DOT gegessen habe . Also, das ist Ah, das kommt in der nächsten Lektion. 19. HTML5 Spiel runaway Geist: Also, was ich in dieser Lektion setzen möchte, ist, dass dieser Geist tatsächlich die Richtung ändert wenn der Punkt gegessen wurde, wenn die Kollision erkannt wurde, wir wollen, dass der Geist die Richtung ändert, und das ist relativ einfach zu tun. Eso Wir werden das hier tun, wo wir tatsächlich die Werte festlegen und hier etwas Einfaches tun können , wo wir die feindliche Geschwindigkeit mit negativem multiplizieren . Wenn das wahr ist, also gehen wir wieder hier hoch, prüfen wir, ob also gehen wir wieder hier hoch,prüfen wir, ob der Power Dot Ghost essen wahr ist. Und wenn es wahr ist, dann nehmen wir unser Tempo an. Wir werden es mit der Geschwindigkeit gleich machen, aber multipliziert mit negativem, und das wird uns den entgegengesetzten Wert von dem geben, was wir hier hatten. Das gibt uns also den gegenteiligen Wert dessen, was hier standardmäßig auf passiert ist. Das ist genau das, was wir wollen. Ich will also, dass er in die entgegengesetzte Richtung geht. Also, wenn ich das esse, sollte er anfangen, sich von mir wegzubewegen, genau das, was passiert. Das ist genau das, was wir wollen, denn wir wollen ihn jagen und jetzt wollen wir eine Kollisionserkennung überprüfen. Wenn wir in den Geist eso laufen, kommt es in der nächsten Lektion. 20. HTML5 Game Hit Test Geist: So ähnlich wie wir unsere Kollisionserkennung mit dem Powerdot hatten. Wir müssen auch eine Kollisionserkennung mit dem Geist haben. Das war also die Power-Up-Kollisionserkennung. Und das wird die Geisterkollisionserkennung sein. Und so müssen wir nur ein paar Updates machen, und wir werden wahrscheinlich auch eine Wieder Berechnung tun müssen. Für das. Das sind vielleicht nicht genau die gleichen Werte. Es war ein Hit da drüben. Und vielleicht werden wir uns jetzt eigentlich nicht bewegen. Bewegen Sie den Geist um eso nur auf einen Kommentar, um Haute zu verwenden, um seine Bewegung zu entfernen. Aktualisieren Sie es. Und so sollten wir jetzt Teoh in der Lage sein. Und das ist offensichtlich ein besserer Weg, um die Kollisionen zu erkennen, nur um sicherzustellen, dass alles genau dort ist, wo wir es brauchen. Und es sieht so aus, als ob es ist, wird es wieder aus sein. Also schweben wir hier rüber. Wir sehen, dass wir nicht bekommen, Ah, Ah, die Kollisionen, die wir brauchen. Die Kollisionen sind leicht aus und nach oben, so dass es einige kleinere Anpassungen gibt. Wir müssen eine Kollision etwas bewegen, und es ist einfach nicht so groß genug Platz, dass wir eso aufnehmen. Wir müssen ein paar Anpassungen daran vornehmen. Also habe ich einige Anpassungen daran vorgenommen und es sieht tatsächlich so aus, als ob es viel besser funktioniert , einige kommen von links und rechts und dann von unten. Ich muss immer noch eine Einstellung auf der Unterseite machen, dann auch für die Oberseite. Das sieht also grob richtig aus. Da ist also muss ich die gleiche Einstellung, die ich gemacht habe, nehmen und diese hier anpassen, haben eine größere Werte, dass wir einen größeren Trefferbereich haben. Also werde ich den gleichen Wert dort von 26 tun. Geh wieder runter. Und jetzt, wenn ich von unten reinkomme, sollte ich den Geist treffen, sobald ich ihn anfasse. So sieht alles wirklich gut aus mit der Kollisionserkennung s, es kann einige zusätzliche Funktionen aufbauen, was passieren wird, wenn wir die Kollision erkennen . Eso Eines der Dinge, die wir tun wollen, ist, dass wir überprüfen wollen, ob es tatsächlich der Spieler ist, der gewinnt oder ob es der Geist ist, der gewinnt und die Art und Weise, wie wir das tun werden , ist, wenn das wahr ist, dann wissen wir, dass der Spieler punktet und sonst dann wissen wir, dass der Feind punktet. Und so hatten wir die Partituren, die wir am Anfang aufgestellt haben. Die G-Score ist für den Geist. Die Punktzahl ist für den Spieler, so gehen Sie zurück, wo ich gerade hinzugefügt, dass. Also werde ich die G-Score erhöhen. Wenn es der Geist und die Punktzahl ist, wenn es der Spieler ist, der die Punkte bekommen sollte. Also, jetzt sollten wir sehen, dass etwas mit den Punkten passiert. Und dann, wenn ich den Punkt esse und wenn ich auf ihn gehe, sollte ich eine Erhöhung meiner Punktzahl sehen. Eso Dies funktioniert genau so, wie wir es brauchen, um zu funktionieren. Äh, jetzt gehe ich hier raus, bevor ich den Geist wieder in Bewegung bringen lasse. Ich muss hier noch ein paar Sachen hinzufügen, denn wie wir gesehen haben, ist es nicht gerade ideal, dass die Punktzahl weiter steigt. Wir müssen tatsächlich alles zurücksetzen, was wir in einer anderen brandneuen Funktion hinzufügen können, die das Zurücksetzen der Werte für den Spieler und äh tun könnte, und so weiter. Oder wir könnten sie einfach hier hinzufügen, weil wir wissen, dass wir Kollisionserkennung haben oder so, was wir tun wollen, ist, dass wir die Standorte zurücksetzen wollen, also werde ich nur hinzufügen, dass es hier unten. Und wieder, das hängt davon ab, was? Ihre Vorlieben. Wenn diese besondere Aktion passiert, alles, was ich hier mache, ist, dass ich die Punktzahl steigere. Eso Was ich tun werde, ist, dass ich ihre Positionen einfach zurücksetzen werde . Also gehen, um ihn zurückzusetzen, Teoh der Spieler auf 10 und 100 und dann muss ich zurücksetzen. Der Feind ist X, also werde ich ihn auf die Ferne bringen bis 300 und den Feind. - Warum? Ich werde mit 200 spielen und dann kann ich das vielleicht sogar auf falsch setzen. Und dann musste ich mich auch daran erinnern, dass ich einige dieser Werte hier zurücksetzen muss. Also vielleicht, was ich tun kann, ist, dass ich diese Null setzen kann und diese spezielle Funktion damit umgehen lassen kann. So gehen Sie zurück, so dass uns automatisch zurücksetzt, wenn die Kollision erkannt wird. Und natürlich wird das viel besser aussehen, wenn sich der Geist wieder bewegt. Das wird viel mehr Sinn machen. Es sieht also so aus, als ob alles so funktioniert, wie wir es brauchen. Und jetzt können wir diese Fesseln aus dem Geist entfernen und ihn tatsächlich bewegen lassen . Es wird also frei sein, sich zu bewegen. Eso, wir rennen vor ihm weg, so dass der Geist punktet. Und dann, natürlich, wenn ich den Punkt esse, dann wird er vor mir weglaufen, versuchen, wegzukommen und so gibt es noch ein paar andere Dinge eso Vielleicht kann ich meine Geschwindigkeit anpassen, wo ich meinen Kerl einmal beschleunigen kann Ich esse den Power-Up-Punkt, also werden wir nur einige kleinere Anpassungen und Anpassungen in den kommenden Lektionen vornehmen, um das Spiel ein wenig einfacher zu spielen. 21. HTML5 Spiel das Spiel anpassen: so ein paar kleinere Verbesserungen, die wir immer noch innerhalb des Spiels kümmern müssen. Und einer von ihnen ist dieses Auge blinkt. Also wollen wir etwas von diesem Blinken der Augen entfernen und wir wollen im Blinken von Weiß und Blau bleiben , wenn wir tatsächlich eso verfolgen. Es gibt ein paar verschiedene Möglichkeiten, dies zu tun. Wir können es blinken lassen, und wir können die Augen langsamer bewegen, wenn wir wollten. Also könnten wir hier eine Art Countdown einlegen. Ah, und wann immer es auf Null zählt, können wir das einstellen. Also werde ich hier einfach einen anderen Wert hinzufügen. Ich nenne es Zählblinzeln und ich werde ihm einen Wert von 10 geben und dann nach unten gehen . Und wenn Zählung blinkt größer als Null ist. Und jetzt werde ich das einfach erhöhen oder das verringern. Und dann hier kann ich sonst hineinlegen. Und auch kann ich das wieder auf 10 zurücksetzen oder was auch immer Wert wir wollen, um es zu setzen. Dadurch bewegen sich ihre Augen langsamer. Und dann das Blinken natürlich ist das Blinken natürlichauch langsamer. So sagte sogar, es kann 20 sein. Das ist also eine langsamere Bewegung der Augen. Und auch, wenn wir unsere Kraft der Taste erreichen, wird es auch langsamer sein. So sieht viel natürlicher aus, dass wir die Geschwindigkeit verlangsamt haben. Und eine andere Sache, die nur zu zwicken, dass ich die Geschwindigkeit erhöhen will. Ich möchte löschen erhöhen die Spielergeschwindigkeit, sobald es eine Power Up gegeben hat. Also gehen Sie den ganzen Weg rüber bis hierher. Einige haben eine Kollisionserkennung, die wir machen Spielergeschwindigkeit gleich 10 und dann hier werden wir es wieder auf fünf bringen. Natürlich gibt es diese verschiedenen Möglichkeiten, dies zu optimieren. Also, jetzt, wenn wir das essen, entfernen Sie viel schneller und gibt uns die Möglichkeit, den Geist viel einfacher und wieder zu fangen , eine Menge dieser zwickt seine ah, für Gameplay-Fähigkeit. In jedem erstellten Spiel solltest du es also testen, um sicherzustellen, dass es so funktioniert, wie du es brauchst, um zu funktionieren . Also wieder, diese Power Dots scheinen sie ein wenig zu hoch zu erscheinen. Also musste ich zu der Stelle gehen, wo sie auf dem Bildschirm überprüfen, und das war das Problem dort, das ich hinzufügen musste, dass plus 30. Jetzt sollten sie also unter jenem Raum erscheinen, der nicht mehr oben erscheinen sollte. Und selbst um das Spiel zu aktualisieren, Sie nicht in mehreren Geistern auf, sie könnten unabhängig voneinander auf arbeiten. Dann wieder, wenn sie den Power-Button bekommen, dann könnten Sie einen von denen verfolgen. 22. HTML5 Spiel einen zweiten Feind hinzufügen: Also, jetzt im Spiel, werden wir tatsächlich einen zweiten Geist hinzufügen. Also rufen wir einfach, ähm, Feind, um Feind, es wirklich einfach zu machen. Und wir können dort die meisten der gleichen Werte verwenden. Und jetzt, wann immer wir uns darauf beziehen. Also hier überprüfen wir, ob es existiert. Also muss ich wieder hier rauf gehen und so etwas tun. Alles, was wir getan haben, muss für den zweiten Feind reproduziert werden. Und Sie können sogar Loops und eine Erhöhung erstellen, wenn Sie wollten, um wirklich mehrere Feinde aufzubauen. Aber für die Zwecke war Lektion versucht, es einfach zu halten, und wir werden sehen, ob diese existiert. Und dann, natürlich, haben wir alle das duplizieren und auch das Bild duplizieren. Und einiges davon brauchen wir nicht zu duplizieren. Wir können es einfach tun. Und wir müssen diesen Scheck nicht duplizieren, weil das für beide universell sein wird . Und natürlich, Ah, hier drüben auch. Also, wo immer wir das erwähnen, müssen wir das nur duplizieren. Und dieses, wir müssen wahrscheinlich einen zweiten Wert dort hinzufügen. Also ein Eichhörnchen wieder da oben vergisst und hinzufügen und sehen, was Ah ist, Das sieht so weit aus. Also gibt es unseren zweiten Feind eso Er bewegt sich noch nicht. Aber wenn wir essen, gingen die Punkte von etwas schief dort auch. Also gehe ich einfach wieder da raus, also erfrischen Sie das. Und hoffentlich sollten sich diesmal beide abschalten. Also wurden beide zu Hause blau, so dass wir die Kollisionserkennung noch nicht zur Verfügung haben. Also müssen wir ihn dazu bringen, sich zu bewegen. Also nochmal, es ist ein Blotter, der hier dupliziert. Und natürlich gibt es andere Möglichkeiten, das hier drüben zu tun. Eigentlich müssen wir dieses nicht unbedingt duplizieren, weil wir Teoh die gesamte Kollisionserkennung duplizieren müssen . Es wird also nicht unbedingt auf beide zutreffen. Das war ein Fall, in dem wir zwischen den beiden unterscheiden, aber hier drüben wird es dasselbe sein, was passieren wird. , Und nun,um diese Bewegung hinzuzufügen, ist es wieder eine Bewegung. Da ist einiges an der Bewegung. Wahrscheinlich gibt es vielleicht einen besseren Weg. Wenn wir mehrere Feinde erstellen, erstellen Sie eine Art von Funktion um ihre, aber für wieder, für jetzt, werden wir einfach nur duplizieren, dass aus. Also nur versucht, den zweiten Feind ziemlich schnell hinzuzufügen, eso wird sicherstellen, dass er nicht von der Leinwand rennt. Das wird ihn dazu bringen, dass er sich wieder in Bewegung bewegt. Das war S O. Dies ist die Richtung, in die sie gehen werden, und der Feind bewegt wird der Countdown sein . Und dann, sobald alle die gleichen Eigenschaften wie die vorherige, wo wir die Richtung haben , haben wir Geschwindigkeit, so dass sie unterschiedliche Geschwindigkeiten haben und unabhängig voneinander arbeiten können . Ich habe vielleicht ein paar Sachen verpasst, also werde ich schnell hier durchgehen und dann einen Scheck machen, nur um sicherzustellen, dass es funktioniert. Nicht sicher, genau. Sicher, woher ich weiß, welcher ist. Also denke ich, was ich tun muss. Ich muss ihre Bewegung verlangsamen, weil sie ziemlich schnell sind, und es ist ziemlich schwer, sie tatsächlich zu fangen. Also, das ist etwas anderes, das ich daran anpassen sollte. Und natürlich, natürlich, wenn du das Spiel machst, willst du es nicht zu einfach machen, aber du willst es auch nicht zu schwer machen. Also, wenn ich da draußen gehe, werde ich sie verlangsamen. Nur eine Berührung. Und auch, du könntest etwas tun, wo es nivelliert. Je nachdem, äh, äh, wie maney, wie viele, was die Partitur ist, könnte es sich ändern. Und diese Art von Sache könnte dynamisch sein. Eine schwellende Anzahl von Geistern könnte ebenfalls dynamisch sein. Eso könnte man hier wirklich eine ganze Menge Funktionalität aufbauen. Eine andere Sache, die ich tun könnte, ist , wenn es immer wenn wir anschalten, dass ich sie vielleicht dazu bringen könnte, sogar ein bisschen langsamer damit sie leichter zu fangen sind. In der nächsten Vorlesung werde ich also den gesamten Quellcode dafür einschließen. Es ist alles Javascript-basiert. Das ganze Gericht ist Javascript. Eso könnten Sie diesen JavaScript-Code in und sogar erstellen Sie Ihr eigenes Bild mit einem Zusammenbruch von verschiedenen Feinden und dann Pacman eso die, die wir jetzt verwenden, sind die ersten für die Geister und dann alle Pac Man-Bewegungen und alle Nur das zum Blau und das Weiß für die Geister hier, wenn es hochgefahren ist. Also wieder gibt es hier eine Reihe von verschiedenen Optionen, die uns zur Verfügung stehen, und Sie sind willkommen, den Code nach Bedarf zu erstellen und Ihre eigene Version desselben Spiels zu erstellen, indem Sie dies als Za-Basis verwenden, um Ihre eigene Version von in diesem Spiel.