Bounce die Wände aus - Spiele-Entwicklung, MDN
Dies ist der dritte Schritt von 10 der GameDev Canvas-Tutorial. Sie können den Quellcode finden, da es nach Abschluss dieser Lektion bei GameDev-Leinwand-Werkstatt / lesson3.html aussehen sollte.
Es ist schön, unser Ball zu sehen, bewegen, aber es verschwindet schnell aus dem Bildschirm, um den Spaß zu begrenzen wir mit ihm haben können! Zu überwinden, dass wir einige sehr einfache Kollisionserkennung implementieren wird (die später näher erläutert wird), um den Ball zu machen die vier Ränder der Leinwand abprallen.
Einfache Kollisionserkennung
Zur Erkennung der Kollision wir werden prüfen, ob der Ball berührt (Kollision mit) der Wand, und wenn ja, werden wir die Richtung seiner Bewegung entsprechend ändern.
Jetzt aktualisieren, um die Linie, die den Ball in der drawBall () Funktion dazu zieht:
Abprallen oben und unten
Wenn der y-Wert der Kugelposition niedriger als Null ist, auf der y-Achse die Richtung der Bewegung ändern, indem sie sich gleich sind, umgekehrt wird. Wenn der Ball wurde nach oben mit einer Geschwindigkeit von 2 Pixeln pro Frame bewegt, jetzt wird es „oben“ mit einer Geschwindigkeit von -2 Pixel zu bewegen, die mit einer Geschwindigkeit von 2 Pixeln nach unten bewegen pro Frame tatsächlich entspricht.
Der obige Code würde mit dem Ball umgehen weg von der oberen Kante prallt, jetzt also lassen Sie uns darüber nachdenken, den unteren Rand:
Wenn die y-Position der Kugel größer als die Höhe der Leinwand ist (zur Erinnerung, dass wir die y-Werte von links oben zählen, so dass der obere Rand bei 0 beginnt, und der untere Rand ist bei 480 Pixel, die Leinwand Höhe), dann prallen er die Unterkante durch Umkehren der y-Achsen-Bewegung wie zuvor ab.
Wir konnten diese beiden Aussagen zu einer Einheit verschmelzen auf Code Ausführlichkeit zu speichern:
Wenn eine der beiden Aussagen ist richtig. Umkehr der Bewegung der Kugel.
Abprallen der linke und rechte
Wir haben die oberen und unteren Rand bedeckt, so denken wir über die linken und rechten. Es ist sehr ähnlich eigentlich alles, was Sie tun müssen, ist, die Anweisungen für x statt y zu wiederholen:
An diesem Punkt sollten Sie den obigen Code-Block in die draw () Funktion einfügen, kurz vor der schließenden geschweiften Klammer.
Der Ball hält in der Wand verschwinden!
Testen Sie Ihren Code an dieser Stelle, und Sie werden begeistert sein - jetzt haben wir einen Ball, der alle vier Ränder der Leinwand abgeprallt! Wir haben ein anderes Problem ist jedoch - wenn der Ball jede Wand trifft es versinkt etwas vor Richtungswechsel:
Dies ist, weil wir den Kollisionspunkt der Wand und die Mitte der Kugel sind zu berechnen, während wir es für seinen Umfang tun sollen. Der Ball sollte direkt nach, wenn berühren die Wand prallt, nicht, wenn es auf halber Strecke schon in der Wand, also lassen Sie sich unsere Aussagen ein wenig anpassen, dass aufzunehmen. Aktualisieren Sie den letzten Code, den Sie zu dieser hinzugefügt:
Wenn der Abstand zwischen der Mitte der Kugel und dem Rand der Wand genau der gleiche wie der Radius der Kugel ist, wird die Bewegungsrichtung ändern. Zieht man den Radius von einem Rand der Breite und das Hinzufügen es auf die andere gibt uns den Eindruck der richtigen Kollisionserkennung - der Ball die Wände prallt, wie es tun sollten.
Vergleichen Sie Ihren Code
Lets überprüfen wieder das fertige Code für diesen Teil gegen das, was du hast, und ein Spiel haben:
Übung. versuchen, die Farbe der Kugel in eine zufällige Farbwechsel jedes Mal, es auf die Wand trifft.
Nächste Schritte
Wir haben jetzt auf die Bühne kommen, wo unser Ball bewegend ist und bleiben auf dem Spielbrett. Im vierten Kapitel werden wir ein steuerbares Paddel bei der Umsetzung finden - Paddle und Tastatursteuerung sehen.