Ruby-Programmierung mit nur einem Browser: "Block Breaking", das Schritt für Schritt erstellt (Nyle-Canvas Edition)
Überblick
Dieser Artikel ist eine teilweise Modifikation dessen, was als Unterrichtsmaterial für Programmierkurse für Schüler der Mittel- und Oberstufe erstellt wurde.
Wir werden ein "Block Breaking" -Spiel mit Nyle-Canvas erstellen, mit dem Sie die Ruby-Spielprogrammierung mit nur einem Browser starten können. Wir werden nach und nach "Blockbrüche" von 0 machen. Selbst wenn es mit Ruby abgeschlossen ist, kann "Block Breaking" in mehr als 100 Zeilen durchgeführt werden.
Technische Erklärung
Bibliothek verwendet
--Nyle-Canvas (DXRuby-Stil)
https://spoolkitamura.github.io/nyle-canvas/
Da es sich um eine integrierte Entwicklungsumgebung handelt, die einen Ruby-Editor und eine Ausführungsumgebung integriert, die in einem Browser ausgeführt wird, muss Ruby nicht installiert werden.
Nyle-Canvas (DXRuby-Stil)
In diesem Text verwenden wir den DXRuby-API-kompatiblen "DXRuby-Stil" unter den Nyle-Canvas-Beschreibungsstilen.
Wie benutzt man Nyle-Canvas?
Siehe den Beitrag unten.
- Einführung in Nyle-Canvas (DXRuby-Stil) - Qiita
https://qiita.com/noanoa07/items/e7ebf97edef4ae9b448a
Betriebsumgebung für Nyle-Canvas erforderlich
--Browser (Chrome usw.)
- Internetverbindung --OS, auf dem der Browser ausgeführt wird (Windows, MacOS, Linux, Android, iPadOS, iOS usw.)
- PC, Tablet (mit externer Tastatur), Smartphone (* Einige Touchpanel-Vorgänge werden ebenfalls unterstützt.)
Nyle-Canvas-Homepage
--Nyle-Canvas-Homepage
https://spoolkitamura.github.io/nyle-canvas/
--Nyle-Canvas-Editor (DXRuby-Stil); Editor-Bildschirm für die eigentliche Programmierung
Klicken Sie unter "Nyle-canvas-Homepage" auf den Link "DXRuby-Stil".
--Nyle-Canvas-Handbuch, Bedienung des Editors
https://spoolkitamura.github.io/nyle-canvas/dev2/site/manual_editor.html
Referenzseite
DXRuby-Seite, die das Original des "DXRuby-Stils" ist;
--DXRuby Homepage http://dxruby.osdn.jp
--DXRuby 1.4.6 Referenzhandbuch http://mirichi.github.io/dxruby-doc/index.html
--DXRuby 1.4.1 Referenzhandbuch http://dxruby.osdn.jp/DXRubyReference/20095313382446.htm
Ein Artikel zur Verwendung von DXRuby;
--2D-Spielbibliothek für Ruby DXRuby: Grundlagen zur Verwendung von --Qiita https://qiita.com/noanoa07/items/bced6519d9b53685b651
Andere DXRuby API-kompatible Bibliotheken, die im Browser funktionieren;
- DXOpal https://yhara.github.io/dxopal/doc/ja/index.html
https://yhara.github.io/dxopal/index.html
- Spielprogrammierung beginnend mit Ruby - DXOpal Edition - Rubyist Magazine Nr. 0057 https://magazine.rubyist.net/articles/0057/0057-GameProgramingWithDXOpal.html
Der Artikel über "Blockbrechen" mit DXRuby, der die Grundlage dieses Textes bildet;
――Für Programmieranfänger: „Block Breaking“, das Schritt für Schritt mit DXRuby ―― Qiita erfolgt https://qiita.com/noanoa07/items/9ebc059550c620ab223c
Ausführungsumgebung dieses Textes
--Browser; Google Chrome (Version 83.0.4103.61, 64-Bit, MacOS-Version)
- Ausführungsbetriebssystem; macOS（Catalina 10.15.5）
Darüber hinaus haben wir den Vorgang unter Safari / macOS und Chrome / Windows10 entsprechend bestätigt.
Entsprechende Version
Nyle-Canvas (DXRuby-Stil); dev2 (veröffentlicht am 30.05.2020)
Original
- Geändert von "17.03.2014 Ich habe an der Matsue Ruby Conference 05 teilgenommen - mirichis Tagebuch"
http://d.hatena.ne.jp/mirichi/20140317/p1
Quellcode für diesen Text
https://github.com/noanoa07/nyle-canvas-blocks
Lizenz dieses Textes
Der Kommentar, der Ruby-Quellcode und die Bilddaten in diesem Text sind alle gemeinfrei.
(Nyle-Canvas-Quellcode ist MIT-lizenziert)
Programmerklärung
1. 1. Verwendung von Nyle-Canvas (Gliederung)
Im folgenden Beitrag erfahren Sie, wie Sie Nyle-canvas verwenden.
- Einführung in Nyle-Canvas (DXRuby-Stil) - Qiita https://qiita.com/noanoa07/items/e7ebf97edef4ae9b448a
Hier ist die minimale Erklärung.
1-1. Öffnen Sie den Nyle-Canvas-Editor
Bei Nyle-canvas wird der Programmbearbeitungsbildschirm (Editor) angezeigt, indem Sie mit einem Browser auf die folgende Site zugreifen.
"Nyle-Canvas-Homepage"
https://spoolkitamura.github.io/nyle-canvas/
Von
Klicken Sie auf den Link "DX Ruby Style".
Dies ist der Nyle-Canvas-Editor-Bildschirm.
Außerdem erklären wir hier die Verwendung von Google Chrome als Browser. (Die Ausführungsumgebung ist macOS.)
Das Basisprogramm wird vorab auf dem Editorbildschirm angezeigt.
Darüber hinaus befinden sich oben links auf dem Bildschirm verschiedene Schaltflächen.
Von rechts
-- ▶ ︎ button ； Programmausführung
-- ↓ button; Programm speichern (Download)
--T button; Einstellung für Schriftart (Schriftgröße)
--? Button; Zum Hilfebildschirm (Referenzbildschirm) gehen
・ Neues Programm erstellen
Nyle-canvas in Ihrem Browser ** Auf dem Editor-Bildschirm ** "Neu laden", um zum Ausgangszustand zurückzukehren.
So "neu laden":
--Drücken Sie die Taste "↻" oben im Browser
--Wählen Sie "Menü"> "Datei"> "Ansicht"> "Seite neu laden"
--Shortcut; (macOS) Befehl + R, (Windows) Strg + R
1-2. Programmausführung / Neuausführung
Das Programm ist ** kein Speichervorgang ** und wird ** sofort ** durch Drücken der Taste ▶ ︎ ausgeführt.
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
Window.loop do
#Code für die Bildschirmzeichnung(your draw code here)
end
Ein neuer Tab in Ihrem Browser wird geöffnet und zeigt das grundlegende schwarze Quadratfenster an.
Oben links ist der Ursprung (x = 0, y = 0), die Horizontale (x) nimmt nach rechts zu und die Vertikale (y) nimmt nach unten zu.
Der zwischen "Window.loop do ~ end" geschriebene Code wird 60 Mal pro Sekunde wiederholt ausgeführt.
→ DXRuby-Referenz: Lernprogramm 1. Grundformular http://mirichi.github.io/dxruby-doc/tutorial/basic.html
・ Neuausführung
Sie können das Programm erneut ausführen, indem Sie ** "Neu laden" auf dem ** Ausführungsbildschirm ausführen.
So "neu laden":
--Drücken Sie die Taste "↻" oben im Browser
--Wählen Sie "Menü"> "Datei"> "Ansicht"> "Seite neu laden"
--Shortcut; (macOS) Befehl + R, (Windows) Strg + R
・ Schließen Sie den Ausführungsbildschirm
Schließen Sie die Registerkarte Ausführungsbildschirm. Drücken Sie die Taste "×" oben auf dem Bildschirm.
--Shortcut; (macOS) Befehl + W, (Windows) Strg + W
1-3. Programm speichern (herunterladen)
Drücken Sie die Taste ↓, um das Programm herunterzuladen. Das Download-Ziel hängt von den Browsereinstellungen ab, aber es scheint, dass es sich häufig um den Ordner "Download" handelt.
1-4. Programm laden
Ziehen Sie die Nyle-Canvas-Programmdatei (HTML-Datei) per Drag & Drop auf den Nyle-Canvas-Editor-Bildschirm Ihres Browsers.
1-5. Laden von Bilddateien
Nyle-Canvas speichert und verwaltet auch Bilddateien zusammen mit dem Programm.
Die Bilddatei, die Sie verwenden möchten, kann durch Ziehen und Ablegen direkt auf den Editorbildschirm in Nyle-canvas kopiert werden und wird als Liste der Bilddateien am unteren Rand des Editorbildschirms angezeigt. (* Groß- und Kleinschreibung können Kleinbuchstaben sein.)
Verwenden Sie zum Laden und Verwenden einer Bilddatei aus einem Programm "Image.load (Name der Bilddatei)".
Es ist nicht erforderlich, dass ** Pfadname usw. ** den Speicherort vor dem Bilddateinamen angibt.
Das geladene Bild befindet sich in der Bildklasse.
1-6. So öffnen Sie die Konsole
Ergebnisse wie "Fehlermeldungen" und "Puts" zur Laufzeit werden an die "Konsole" des Browsers ausgegeben.
So öffnen Sie in Chrome; (** auf dem Ausführungsbildschirm **)
a) Gemeinsam für MacOS und Windows
--Drücken Sie die Taste F12 (oder fn + F12)
- (Überall auf dem Bildschirm);
Rechtsklick(Zwei-Finger-Klick usw.)>Überprüfung> Wählen Sie in den geöffneten Entwicklertools `` Konsole ”`
b) macOS
--Wählen Sie "Menü"> "Anzeige"> "Entwicklung / Verwaltung"> "Javascript Console"
--Shortcut; Befehl + Option + J
c) Windows
--Menü ＞ Andere Tools ＞ Entwicklertools ＞ Wählen Sie "Konsole" aus den geöffneten Entwicklertools --Kurzschnitt; Strg + Umschalt+J`
1-7. Hilfe (Referenz)
Drücken Sie die Schaltfläche "?" Oben links im Nyle-Canvas-Editor, um den Hilfebildschirm (Referenzbildschirm) zu öffnen.
→ \ [Nyle-canvas] API-Referenz (DXRuby-Stil) https://spoolkitamura.github.io/nyle-canvas/dev2/site/_man_api_dx/index.html
Die API von Nyle-canvas wird kurz zusammengefasst. Verwenden Sie sie daher immer häufiger, wenn Sie in Schwierigkeiten sind.
2. Machen Sie eine "Blockpause"
Schließlich werden wir eine "Blockpause" machen.
* Über .html file und .rb file
Das Programm, das auf Nyle-canvas ausgeführt wird, ist die .html-Datei. (Das Beispielprogramm befindet sich im Ordner "src / block_html".)
In der folgenden Erklärung wird jedoch nur der Programmteil von Ruby aufgelistet. (Im Ordner "src / block_ruby" befindet sich eine gleichnamige ".rb-Datei".)
2-1. Lösche die Wand (linke Seite) (rb_block01.html)
Machen Sie zuerst eine vertikale Wand auf der linken Seite (Dicke 20).
Machen Sie die obere linke Ecke "(0, 0)", ein weißes Rechteck mit einer Breite von 20 (Dicke) und einer Höhe von 480 (entspricht der Höhe des Fensters). Die untere rechte Ecke ist also "(20, 480)"
Das Programm verwendet "Window.draw_box_fill (oben links x, oben links y, unten rechts x, unten rechts y, Farbe)".
Schreiben Sie dies in Window.loop do ~ end und lassen Sie es jedes Mal zeichnen.
rb_block01.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
Window.loop do
Window.draw_box_fill(0, 0, 20, 480, C_WHITE) #◆ Hinzufügung
end
2-2. Lösche die Wand (auch auf der rechten Seite) (rb_block02.html)
Als nächstes machen Sie eine vertikale Wand auf der rechten Seite.
Das "x" in der oberen linken Ecke ist "640 - 20 = 620", was die Fensterbreite 640 minus der Wandstärke 20 ist, und das "y" ist "0".
Die untere rechte Ecke ist dieselbe (640, 480) wie die untere rechte Ecke des Fensters.
rb_block02.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
Window.loop do
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE) #◇ Ändern (Zeichenausrichtung)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE) #◆ Hinzufügung
end
2-3. Lösche die Wand (auch auf der Oberseite) (rb_block03.html)
Machen Sie die obere Seitenwand (Dicke 20).
Die obere linke Ecke ist "(0, 0)", die untere rechte Ecke "x" entspricht der Fensterbreite "640" und "y" entspricht der Wandstärke "20".
rb_block03.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
Window.loop do
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE) #◆ Hinzufügung
end
2-4. Bringen Sie eine Leiste heraus (rb_block04.html)
Bereiten Sie ein hellblaues rechteckiges Bild (src / image / bar.png) mit einer Breite von 100 und einer Höhe von 20 als Balken vor, um den Ball zurückzuschlagen.
Ziehen Sie zunächst die Datei bar.png per Drag & Drop direkt auf den Editorbildschirm. Dadurch wird es in Nyle-canvas kopiert und in der Bilddateiliste am unteren Rand des Editorbildschirms angezeigt.
Laden Sie dann die Bilddatei mit Image.load (" bar.png "). (Es ist kein Pfadname erforderlich.)
Die vertikale Position des Balkens "y" sollte "480 - vertikale Breite des Balkens" betragen, um mit dem unteren "480" des Fensters übereinzustimmen. Die horizontale Position "x" des Balkens sollte 0 sein.
Verwenden Sie zum Anzeigen der Leiste "Window.draw (x-Position, y-Position, Bild)" in "Window.loop do ~ end".
rb_block04.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ") #◆ Hinzufügung
bar_x = 0 #◆ Hinzufügung
bar_y = 480 - img_bar.height #◆ Hinzufügung
Window.loop do
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar) #◆ Hinzufügung
end
2-5. Bewegen Sie die Leiste mit den Pfeiltasten (rb_block05.html)
Verwenden Sie die linke und rechte Pfeiltaste (← →) auf der Tastatur, um den Balken nach links und rechts zu bewegen (x-Richtung).
Bewegen Sie den Balken, indem Sie den gedrückten Zustand der linken und rechten Pfeiltaste mit "Input.x" abrufen und die Werte ("-1", "0", "1") zur "x-Position" des Balkens hinzufügen. Ich werde.
rb_block05.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
Window.loop do
bar_x = bar_x + Input.x #◆ Hinzufügung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
end
2-6. Bewegen Sie die Leiste mit den Pfeiltasten: Eine andere Schreibweise (rb_block06.html)
Eine andere Möglichkeit, bar_x = bar_x + Input.x zu schreiben,
Schreiben wir es als bar_x + = Input.x um. Es ist das gleiche, aber wenn Sie sich daran gewöhnen, ist es möglicherweise einfacher zu sehen.
rb_block06.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
Window.loop do
bar_x += Input.x #◇ Ändern (Schreibstil ändern)
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
end
2-7. Bewegen Sie die Leiste schnell (rb_block07.html)
Bewegen wir die Leiste schnell.
Input.x gibt nur die Werte -1, 0, 1 zurück, also multiplizieren wir sie mit vier, um sie zu erhöhen und zur x-Position in der Leiste hinzuzufügen.
rb_block07.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
Window.loop do
bar_x += Input.x * 4 #◇ Ändern (schnellere Reaktion)
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
end
2-8. Bewegen Sie die Leiste mit der Maus (rb_block08.html)
Bewegt den Balken nach der Bewegung der Maus nach links und rechts ("x-Richtung").
Bewegen Sie den Balken, indem Sie die x-Position der Maus mit Input.mouse_x abrufen und diesen Wert der x-Position des Balkens zuweisen.
- Die "Leiste" kann mit der "linken / rechten Taste" oder mit der "Maus" verschoben werden. Ab diesem Zeitpunkt wird sie jedoch mit der "Maus" angezeigt.
rb_block08.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste#◇ Ändern (auskommentieren)
bar_x = Input.mouse_x #Für die Maus#◆ Hinzufügung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
end
2-9. Lassen Sie die Leiste nicht hervorstehen (rb_block09.html)
Stellen Sie sicher, dass die Stange nicht aus der linken und rechten Wand herausragt.
Die "x-Position" des Balkens befindet sich ganz links, daher ist der Mindestwert die Wandstärke "20".
Andererseits ist das rechte Ende "x Position + Balkenbreite img_bar.width", so dass der Maximalwert "Fensterbreite 640 - Wandstärke 20 - Balkenbreite img_bar.width" ist.
Schreiben Sie das Obige in "if ~ elsif ~ end".
rb_block09.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20 #◆ Hinzufügung
bar_x = 20 #◆ Hinzufügung
elsif bar_x > 640 - 20 - img_bar.width #◆ Hinzufügung
bar_x = 640 - 20 - img_bar.width #◆ Hinzufügung
end #◆ Hinzufügung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
end
2-10. Lösche den Ball (rb_block10.html)
Bereiten Sie ein Bild (src / image / ball.png) eines roten Kreises mit 20 Breiten und 20 Höhen als Kugel vor.
Ziehen Sie die Datei "ball.png " per Drag & Drop auf den Editor-Bildschirm, registrieren Sie sie in Nyle-canvas und verwenden Sie "Image.load (" ball.png ")" auf die gleiche Weise wie in "2-4. Bringen Sie die Leiste heraus". Lesen.
Hinweis) Informationen zur Transparenz von Bildern
In dev2, das am 30. Mai 2020 veröffentlicht wurde, wird die weiße Farbe des Bildes zum Zeitpunkt von Image.load automatisch transparent gemacht. Daher ist der Hintergrund von "ball.png ", bei dem ein roter Ball auf einem weißen Hintergrund gezeichnet ist, automatisch transparent.
Die x-Position sei vorerst "ball_x = 300" und die y-Position "ball_y = 400".
Zeichnen Sie danach mit Window.draw.
rb_block10.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ") #◆ Hinzufügung
ball_x = 300 #◆ Hinzufügung
ball_y = 400 #◆ Hinzufügung
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball) #◆ Hinzufügung
end
2-11. Bewegen Sie den Ball (horizontal) (rb_block11.html)
Bewegen Sie den Ball zur Seite (x Richtung). (X ist in der Plus-Richtung rechts)
Mit der Geschwindigkeit in x-Richtung als "dx" addieren Sie "dx" zur x-Position "ball_x" des Balls jedes Mal, wenn er sich in einer Schleife dreht (1/60 Sekunden) ("ball_x + = dx").
rb_block11.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2 #◆ Hinzufügung
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx #◆ Hinzufügung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
2-12. Bewegen Sie den Ball (vertikal) (rb_block12.html)
Bewegen Sie es nun vertikal (y Richtung). (Der untere Rand von "y" ist in Plusrichtung)
Hören Sie auf, es horizontal zu bewegen (kommentieren Sie es mit "# ball_x + = dx" aus), stellen Sie die Geschwindigkeit in y-Richtung auf "dy" und fügen Sie "dy" jedes Mal hinzu, wenn es sich in einer Schleife dreht ("ball_y + =") dy`).
rb_block12.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2 #◇ Ändern (Zeichenausrichtung)
dy = -2 #◆ Hinzufügung
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
#ball_x += dx #◇ Ändern (auskommentieren)
ball_y += dy #◆ Hinzufügung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
2-13. Bewegen Sie den Ball (vertikal und horizontal) (rb_block13.html)
Wenn Sie die Bewegung in "x-Richtung" neu starten (auskommentieren "ball_x + = dx"), bewegt sich der Ball diagonal.
rb_block13.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx #◇ Ändern (auskommentieren)
ball_y += dy
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
2-14. Der Ball springt (horizontal) (rb_block14.html)
Lass den Ball springen. Bewegen Sie sich zunächst nur in horizontaler Richtung (x-Richtung) (kommentieren Sie mit # ball_y + = dy aus).
Es trifft auf die linke Wand, wenn die "Ball x Position" ("Ball_x") kleiner als die linke Wandstärke von "20" wird.
Haben Sie andererseits die rechte Wand getroffen, als die Breite des Fensters 640 betrug - die Dicke der rechten Wand betrug 20 = 620 "?
Bounce bedeutet, dass die Geschwindigkeit "dx" in x-Richtung in die entgegengesetzte Richtung ist, sodass Sie "dx = -dx" schreiben können.
Schreiben Sie das Obige in "if ~ end".
rb_block14.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ")
img_ball.set_color_key(C_WHITE)
ball_x = 300
ball_y = 400
dx = 2
dy = -2
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
#ball_y += dy #◇ Ändern (auskommentieren)
if ball_x < 20 || ball_x > 620 #◆ Hinzufügung
dx = -dx #◆ Hinzufügung
end #◆ Hinzufügung
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
#ball_y += dy #◇ Ändern (auskommentieren)
if ball_x < 20 || ball_x > 620 #◆ Hinzufügung
dx = -dx #◆ Hinzufügung
end #◆ Hinzufügung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
Die rechte Seite ist in die Wand gegangen.
2-15. Ball springt (horizontal): geändert (rb_block15.html)
Die "Ball x Position" ("Ball_x") ist das linke Ende des Balls, das rechte Ende ist also "Ball_x + Ball_Breite", was die Summe der "Ballbreite" ("Ball_Breite") ist.
"Auf die rechte Wand schlagen" muss sein, wenn dieser Wert größer als "Fensterbreite 640 - rechte Wandstärke 20 = 620" ist.
(ball_x + ball_width) > 620
Um den Kollisionszustand langsam zu beobachten, wird außerdem die Einstellung der Anzahl der Ziehzeiten pro Sekunde (Anfangswert: 60) auf 30 halbiert.
Window.fps = 30
rb_block15.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)#◆ Hinzufügung
Window.fps = 30 #◆ Hinzufügung
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
#ball_y += dy
if ball_x < 20 || (ball_x + ball_width) > 620 #◇ Ändern
dx = -dx
end
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
Das sieht gut aus, aber wenn Sie genau hinschauen, wird der Ball für einen Moment in die Wand versenkt (sowohl die linke als auch die rechte Wand).
2-16. Ball springt (horizontal): Fix 2 (rb_block16.html)
Wenn Sie zuvor gegen eine Wand stoßen, kehren Sie einfach die x-Geschwindigkeit (dx = -dx) des Balls um.
Dies wird abprallen, aber die Position des Balls (ball_x) hat sich nicht geändert, so dass der Ball in der Wand stecken bleibt.
Daher wird die Position des Balls (ball_x) auch um den Bewegungsbetrag ( + dx) (ball_x- = dx) umgekehrt.
rb_block16.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 0
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
Window.fps = 30
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
#ball_y += dy
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx #◆ Hinzufügung
dx = -dx
end
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
Hier sieht es gut aus.
2-17. Der Ball springt (vertikal) (rb_block17.html)
Bewegen Sie den Ball nun nur noch vertikal (y-Richtung), so dass er von der oberen Wand abprallt.
Es trifft auf die obere Wand, wenn die y-Position (ball_y) des Balls kleiner als die Dicke 20 der oberen Wand wird.
Außerdem wird die Anzahl der Zeichnungen pro Sekunde wiederhergestellt (auskommentiert) und der Anfangswert der "x-Position" des Balkens in die Mitte geändert.
rb_block17.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 250 #◇ Änderung (numerische Änderung)
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30 #◇ Ändern (auskommentieren)
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
#ball_x += dx #◇ Ändern (auskommentieren)
ball_y += dy #◇ Ändern (auskommentieren)
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
if ball_y < 20 #◆ Hinzufügung
ball_y -= dy #◆ Hinzufügung
dy = -dy #◆ Hinzufügung
end #◆ Hinzufügung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
Es prallt immer noch nicht von der Latte ab.
2-18. Der Ball springt (vertikal und horizontal) (rb_block18.html)
Bewegen Sie es vertikal und horizontal, damit es abprallt. Die Atmosphäre des "Block Breaking" ist ein wenig herausgekommen.
rb_block18.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx #◇ Ändern (auskommentieren)
ball_y += dy
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
if ball_y < 20
ball_y -= dy
dy = -dy
end
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
2-19. Ball springt (mit Balken) (rb_block19.html)
Versuchen Sie auch, an der Bar zu hüpfen.
Die Bedingungen, unter denen der Ball auf die Latte trifft, sind:
○ y-Koordinaten
- "Unter dem Ball"> "Über der Bar"
（ball_y + ball_height） > (480 - bar_height)
○ x Koordinaten
- "Rechts vom Ball"> "Links von der Stange"
(ball_x + ball_width) > bar_x
- "Links vom Ball" <"Rechts von der Stange"
ball_x < (bar_x + bar_width)
Es ist Zeit, die oben genannten Bedingungen gleichzeitig zu erfüllen (&&).
rb_block19.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width #◆ Hinzufügung
bar_height = img_bar.height #◆ Hinzufügung
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
ball_y += dy
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
if ball_y < 20
ball_y -= dy
dy = -dy
end
if (ball_y + ball_height) > (480 - bar_height) && #◆ Hinzufügung
(ball_x + ball_width) > bar_x && #◆ Hinzufügung
ball_x < (bar_x + bar_width) #◆ Hinzufügung
#◆ Hinzufügung
ball_y -= dy #◆ Hinzufügung
dy = -dy #◆ Hinzufügung
end #◆ Hinzufügung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
Das sieht gut aus, aber der Sprung, wenn er beim Bewegen der Stange von der Seite getroffen wird, ist seltsam.
2-20. Ball springt (mit Balken): fix (rb_block20.html)
Sobald der Ball zu weit in die Latte gelangt, befindet er sich auch nach dem Abprallvorgang noch in der Latte. Das "dy" wiederholt also nur Plus und Minus und Sie können die Latte nicht verlassen.
Fügen Sie daher eine Bedingung wie "Bounce nur dann" hinzu, wenn Sie bei "Bounce-Verarbeitung" die Leiste verlassen können.
In der y-Richtung
Under the ball <= Unterhalb des Balkens um den absoluten Wert von dy
(ball_y + ball_height) <= (480 - bar_height + dy.abs)
rb_block20.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width
bar_height = img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
ball_y += dy
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
if ball_y < 20
ball_y -= dy
dy = -dy
end
if (ball_y + ball_height) > (480 - bar_height) && #◇ Ändern (Zeichenausrichtung)
(ball_y + ball_height) <= (480 - bar_height + dy.abs) && #◆ Hinzufügung
(ball_x + ball_width) > bar_x && #◇ Ändern (Zeichenausrichtung)
ball_x < (bar_x + bar_width) #◇ Ändern (Zeichenausrichtung)
ball_y -= dy
dy = -dy
end
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
end
Diesmal sieht es gut aus.
2-21. Lösche einen Block (1) (rb_block21.html)
Von hier aus werden wir Blöcke machen. Erster.
Bereiten Sie als Block ein grünes rechteckiges Bild (src / image / block.png) mit einer Größe von 58 horizontal und 18 vertikal vor.
Die Breite wird auf "(Fensterbreite 640 - Dicke der linken und rechten Wand 20 * 2) / 10 = 60" eingestellt, und der Abstand zwischen den Nachbarn wird auf "58" eingestellt, indem jeweils 1 links und rechts genommen wird. ..
Ziehen Sie diese block.png-Datei per Drag & Drop auf den Editor-Bildschirm und registrieren Sie sie in Nyle-canvas.
Laden Sie dann die Bilddatei mit Image.load (" block.png "). (Es ist kein Pfadname erforderlich.)
Mit dem ersten Block als "Block00" ist die Position von der Innenseite der oberen linken Wand ("x = 20", "y = 20") mit einem Spalt von "1" in horizontaler und vertikaler Richtung, "Block00_x = 21", " Platziere es bei block00_y = 21`.
Zeichnen Sie dann mit Window.draw (block00_x, block00_y, img_block).
rb_block21.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width
bar_height = img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
img_block = Image.load("block.png ") #◆ Hinzufügung
block_widh = img_block.width #◆ Hinzufügung
block_height = img_block.height #◆ Hinzufügung
block00_x = 21 #◆ Hinzufügung
block00_y = 21 #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
ball_y += dy
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
if ball_y < 20
ball_y -= dy
dy = -dy
end
if (ball_y + ball_height) > (480 - bar_height) &&
(ball_y + ball_height) <= (480 - bar_height + dy.abs) &&
(ball_x + ball_width) > bar_x &&
ball_x < (bar_x + bar_width)
ball_y -= dy
dy = -dy
end
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
Window.draw(block00_x, block00_y, img_block) #◆ Hinzufügung
end
2-22. Lösche die Blöcke (2) (rb_block22.html)
Der zweite Block (block01) verwendet dasselbe Bild und ist um Blockbreite (block_widh) + Lücke (2) nach rechts versetzt.
rb_block22.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width
bar_height = img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
img_block = Image.load("block.png ")
block_widh = img_block.width
block_height = img_block.height
block00_x = 21
block00_y = 21
block01_x = 21 + block_widh + 2 #◆ Hinzufügung
block01_y = 21 #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
ball_y += dy
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
if ball_y < 20
ball_y -= dy
dy = -dy
end
if (ball_y + ball_height) > (480 - bar_height) &&
(ball_y + ball_height) <= (480 - bar_height + dy.abs) &&
(ball_x + ball_width) > bar_x &&
ball_x < (bar_x + bar_width)
ball_y -= dy
dy = -dy
end
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
Window.draw(block00_x, block00_y, img_block)
Window.draw(block01_x, block01_y, img_block) #◆ Hinzufügung
end
2-23. Lösche die Blöcke (3) (rb_block23.html)
Platzieren Sie auch den dritten Block (Block02). Die x-Position wird in Erwartung des Blocks und der Lücke um "block_widh + 2" verschoben.
rb_block23.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width
bar_height = img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
img_block = Image.load("block.png ")
block_widh = img_block.width
block_height = img_block.height
block00_x = 21
block00_y = 21
block01_x = 21 + block_widh + 2
block01_y = 21
block02_x = 21 + (block_widh + 2) * 2 #◆ Hinzufügung
block02_y = 21 #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
ball_y += dy
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
if ball_y < 20
ball_y -= dy
dy = -dy
end
if (ball_y + ball_height) > (480 - bar_height) &&
(ball_y + ball_height) <= (480 - bar_height + dy.abs) &&
(ball_x + ball_width) > bar_x &&
ball_x < (bar_x + bar_width)
ball_y -= dy
dy = -dy
end
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
Window.draw(block00_x, block00_y, img_block)
Window.draw(block01_x, block01_y, img_block)
Window.draw(block02_x, block02_y, img_block) #◆ Hinzufügung
end
2-24. Lösche die Blöcke (10) (rb_block24.html)
Wenn Sie 10 auf die Seite legen, ist es genau die richtige Breite.
rb_block24.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width
bar_height = img_bar.height
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
img_block = Image.load("block.png ")
block_widh = img_block.width
block_height = img_block.height
block00_x = 21
block00_y = 21
block01_x = 21 + block_widh + 2
block01_y = 21
block02_x = 21 + (block_widh + 2) * 2
block02_y = 21
block03_x = 21 + (block_widh + 2) * 3 #◆ Hinzufügung
block03_y = 21 #◆ Hinzufügung
block04_x = 21 + (block_widh + 2) * 4 #◆ Hinzufügung
block04_y = 21 #◆ Hinzufügung
block05_x = 21 + (block_widh + 2) * 5 #◆ Hinzufügung
block05_y = 21 #◆ Hinzufügung
block06_x = 21 + (block_widh + 2) * 6 #◆ Hinzufügung
block06_y = 21 #◆ Hinzufügung
block07_x = 21 + (block_widh + 2) * 7 #◆ Hinzufügung
block07_y = 21 #◆ Hinzufügung
block08_x = 21 + (block_widh + 2) * 8 #◆ Hinzufügung
block08_y = 21 #◆ Hinzufügung
block09_x = 21 + (block_widh + 2) * 9 #◆ Hinzufügung
block09_y = 21 #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
Window.loop do
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
ball_x += dx
ball_y += dy
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
if ball_y < 20
ball_y -= dy
dy = -dy
end
if (ball_y + ball_height) > (480 - bar_height) &&
(ball_y + ball_height) <= (480 - bar_height + dy.abs) &&
(ball_x + ball_width) > bar_x &&
ball_x < (bar_x + bar_width)
ball_y -= dy
dy = -dy
end
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
Window.draw(block00_x, block00_y, img_block)
Window.draw(block01_x, block01_y, img_block)
Window.draw(block02_x, block02_y, img_block)
Window.draw(block03_x, block03_y, img_block) #◆ Hinzufügung
Window.draw(block04_x, block04_y, img_block) #◆ Hinzufügung
Window.draw(block05_x, block05_y, img_block) #◆ Hinzufügung
Window.draw(block06_x, block06_y, img_block) #◆ Hinzufügung
Window.draw(block07_x, block07_y, img_block) #◆ Hinzufügung
Window.draw(block08_x, block08_y, img_block) #◆ Hinzufügung
Window.draw(block09_x, block09_y, img_block) #◆ Hinzufügung
end
2-25. Erstellen Sie Blöcke zusammen (Item class) (rb_block25.html)
Das Programm zum Erstellen / Zeichnen von Blöcken wurde 10 Mal wiederholt, daher werde ich sie alle auf einmal erstellen.
Befolgen Sie die folgenden Schritte, um es zu machen.
1) Erstellen Sie eine Klasse namens "Item class"
Um Blöcke zu behandeln, ist es praktisch, die folgenden Attribute zusammen verarbeiten zu können.
--x Position --y Position --Bild --Bild breite --Bildhöhe
Auf dieser Grundlage erstellen wir eine Klasse namens "Item class".
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
end
Die "Item-Klasse" (eine Instanz von) hat jetzt eine "x-Position", eine "y-Position", ein "Bild", eine "Breite" und eine "Höhe".
2) Bereiten Sie ein Bild des Blocks vor
img_block = Image.load("block.png ")
3) Machen Sie einen Block mit Item class
Item.new (x Position, y Position, img_block)
4) Bereiten Sie das Array "Blöcke" vor, um mehrere Blöcke (Blöcke) zu erstellen.
Erstellen Sie ein leeres Array "Blöcke" mit "Blöcken = []".
5) Erstellen Sie Blöcke nacheinander und fügen Sie sie dem Array "Blöcke" hinzu
Verwenden Sie die Methode "<<", um dem Array einen Block hinzuzufügen, und wiederholen Sie den Vorgang, um dem Array "Blöcke" hinzuzufügen.
Da es 10 Mal wiederholt wird, verwenden Sie "10.times do ~ end", um "x" jedes Mal zu erhöhen, um einen Block mit verschobener horizontaler Position zu erstellen. (X ändert sich zu 0, 1, 2, ..., 9)
10.times do |x|
blocks << Item.new(21 + (img_block.width + 2) * x, 21, img_block)
6) Fassen Sie die Zeichnung der Blöcke zusammen
BlockgruppeblocksIst ein Array, wiederholen Sie den VorgangArray.each do |Array要素| 〜 endKann verwendet werden.
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
Mit dem oben genannten ist das Programm viel sauberer. (Kommentare wurden ebenfalls hinzugefügt.)
rb_block25.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20#◆ Ergänzung (Kommentar)
#Machen Sie den Block zu einer Item-Klasse#◆ Ergänzung (Kommentar)
class Item #◆ Hinzufügung
def initialize(x, y, image) #◆ Hinzufügung
@x = x #◆ Hinzufügung
@y = y #◆ Hinzufügung
@image = image #◆ Hinzufügung
@width = image.width #◆ Hinzufügung
@height = image.height #◆ Hinzufügung
end #◆ Hinzufügung
attr_accessor :x, :y, :image, :width, :height #◆ Hinzufügung
end #◆ Hinzufügung
#Bar Vorbereitung#◆ Ergänzung (Kommentar)
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width
bar_height = img_bar.height
#Ballvorbereitung#◆ Ergänzung (Kommentar)
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
#Blockvorbereitung#◆ Ergänzung (Kommentar)
img_block = Image.load("block.png ")
#Initialisierung von Blöcken#◆ Ergänzung (Kommentar)
blocks = [] #◆ Hinzufügung
10.times do |x| #◆ Hinzufügung
blocks << Item.new(21 + (img_block.width + 2) * x, 21, img_block) #◆ Hinzufügung
end #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife#◆ Ergänzung (Kommentar)
Window.loop do
#Bewegen Sie die Stange#◆ Ergänzung (Kommentar)
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
#Bewegen Sie den Ball#◆ Ergänzung (Kommentar)
ball_x += dx
ball_y += dy
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)#◆ Ergänzung (Kommentar)
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung) #◆ Ergänzung (Kommentar)
if ball_y < 20
ball_y -= dy
dy = -dy
end
#Kollisionsurteil mit Bar#◆ Ergänzung (Kommentar)
if (ball_y + ball_height) > (480 - bar_height) &&
(ball_y + ball_height) <= (480 - bar_height + dy.abs) &&
(ball_x + ball_width) > bar_x &&
ball_x < (bar_x + bar_width)
ball_y -= dy
dy = -dy
end
#Bildschirmzeichnung#◆ Ergänzung (Kommentar)
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
blocks.each do |block| #◆ Hinzufügung
Window.draw(block.x, block.y, block.image) #◆ Hinzufügung
end #◆ Hinzufügung
end
2-26. Lösche einen Block (mache die zweite Stufe) (rb_block26.html)
Wir werden auch den zweiten Block machen.
Erhöhen Sie in der zweiten Zeile die "y-Position" um "Blockhöhe (img_block.height) + Lücke (2)".
Schreiben Sie mit 10.times do ~ end wie in der ersten Zeile.
rb_block26.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Machen Sie den Block zu einer Item-Klasse
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
end
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width
bar_height = img_bar.height
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
blocks << Item.new(21 + (img_block.width + 2) * x, 21, img_block)
end
10.times do |x| #◆ Hinzufügung
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2), img_block) #◆ Hinzufügung
end #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
#Bewegen Sie den Ball
ball_x += dx
ball_y += dy
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball_y < 20
ball_y -= dy
dy = -dy
end
#Kollisionsurteil mit Bar
if (ball_y + ball_height) > (480 - bar_height) &&
(ball_y + ball_height) <= (480 - bar_height + dy.abs) &&
(ball_x + ball_width) > bar_x &&
ball_x < (bar_x + bar_width)
ball_y -= dy
dy = -dy
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
end
2-27. Lösche einen Block (mache bis zur 5. Stufe) (rb_block27.html)
Ich habe die 5. Etappe geschafft.
rb_block27.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Machen Sie den Block zu einer Item-Klasse
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
end
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width
bar_height = img_bar.height
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
blocks << Item.new(21 + (img_block.width + 2) * x, 21, img_block)
end
10.times do |x|
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2), img_block)
end
10.times do |x| #◆ Hinzufügung
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * 2, img_block) #◆ Hinzufügung
end #◆ Hinzufügung
10.times do |x| #◆ Hinzufügung
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * 3, img_block) #◆ Hinzufügung
end #◆ Hinzufügung
10.times do |x| #◆ Hinzufügung
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * 4, img_block) #◆ Hinzufügung
end #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
#Bewegen Sie den Ball
ball_x += dx
ball_y += dy
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball_y < 20
ball_y -= dy
dy = -dy
end
#Kollisionsurteil mit Bar
if (ball_y + ball_height) > (480 - bar_height) &&
(ball_y + ball_height) <= (480 - bar_height + dy.abs) &&
(ball_x + ball_width) > bar_x &&
ball_x < (bar_x + bar_width)
ball_y -= dy
dy = -dy
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
end
2-28. Lösche Blöcke (mache bis zur 5. Reihe) (rb_block28.html)
Da "10.times do ~ end" fünfmal vorkam, werde ich dies ebenfalls zusammenfassen.
Setzen Sie 5.times do ~ end in 10.times do ~ end, um eine doppelte Form zu erhalten.
rb_block28.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Machen Sie den Block zu einer Item-Klasse
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
end
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar_x = 250
bar_y = 480 - img_bar.height
bar_width = img_bar.width
bar_height = img_bar.height
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball_x = 300
ball_y = 400
dx = 2
dy = -2
ball_width = img_ball.width
ball_height = img_ball.height
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
5.times do |y| #◆ Hinzufügung
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * y, img_block) #◆ Hinzufügung
end #◆ Hinzufügung
end
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar_x += Input.x * 4 #Für linke und rechte Taste
bar_x = Input.mouse_x #Für die Maus
if bar_x < 20
bar_x = 20
elsif bar_x > 640 - 20 - img_bar.width
bar_x = 640 - 20 - img_bar.width
end
#Bewegen Sie den Ball
ball_x += dx
ball_y += dy
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball_x < 20 || (ball_x + ball_width) > 620
ball_x -= dx
dx = -dx
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball_y < 20
ball_y -= dy
dy = -dy
end
#Kollisionsurteil mit Bar
if (ball_y + ball_height) > (480 - bar_height) &&
(ball_y + ball_height) <= (480 - bar_height + dy.abs) &&
(ball_x + ball_width) > bar_x &&
ball_x < (bar_x + bar_width)
ball_y -= dy
dy = -dy
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar_x, bar_y, img_bar)
Window.draw(ball_x, ball_y, img_ball)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
end
2-29. Bälle und Stangen sollten auch "Gegenstandsklasse" sein (rb_block29.html)
Wenn Sie sich das vorstellen, sind die Attribute von Ball und Stange fast die gleichen wie bei der "Gegenstandsklasse". Machen wir es also zur "Gegenstandsklasse".
Dies erleichtert auch das Lesen des Programms.
rb_block29.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Bälle, Stangen und Blöcke sollten in der Item-Klasse sein#◇ Ändern (Bälle und Balken werden ebenfalls in die Gegenstandsklasse umgewandelt)
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
end
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar = Item.new(250, 480 - img_bar.height, img_bar) #◇ Ändern (Remake zur Item-Klasse)
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball = Item.new(300, 400, img_ball) #◇ Ändern (Remake zur Item-Klasse)
dx = 2 #Ballgeschwindigkeit (x-Richtung)#◇ Ändern (Zeichenausrichtung, Hinzufügen von Kommentaren)
dy = -2 #Ballgeschwindigkeit (y-Richtung)#◇ Ändern (Zeichenausrichtung, Hinzufügen von Kommentaren)
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
5.times do |y|
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * y, img_block)
end
end
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar.x += Input.x * 4 #Für linke und rechte Taste#◇ Ändern (Balken.zu x)
bar.x = Input.mouse_x #Für die Maus#◇ Ändern (Balken.zu x)
if bar.x < 20 #◇ Ändern (Balken.zu x)
bar.x = 20 #◇ Ändern (Balken.zu x)
elsif bar.x > 640 - 20 - bar.width #◇ Ändern (Balken.x、bar.zur Breite)
bar.x = 640 - 20 - bar.width #◇ Ändern (Balken.x、bar.zur Breite)
end
#Bewegen Sie den Ball
ball.x += dx #◇ Ändern (Ball.zu x)
ball.y += dy #◇ Ändern (Ball.zu y)
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball.x < 20 || (ball.x + ball.width) > 620 #◇ Ändern (Ball.x、ball.zur Breite)
ball.x -= dx #◇ Ändern (Ball.zu x)
dx = -dx
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball.y < 20 #◇ Ändern (Ball.zu y)
ball.y -= dy #◇ Ändern (Ball.zu y)
dy = -dy
end
#Kollisionsurteil mit Bar
if (ball.y + ball.height) > (480 - bar.height) && #◇ Ändern (Ball.y、ball.height、bar.zur Höhe)
(ball.y + ball.height) <= (480 - bar.height + dy.abs) && #◇ Ändern (Ball.y、ball.height、bar.zur Höhe)
(ball.x + ball.width) > bar.x && #◇ Ändern (Ball.x、ball.width、bar.zu x)
ball.x < (bar.x + bar.width) #◇ Ändern (Ball.x、bar.x、bar.zur Breite)
ball.y -= dy #◇ Ändern (Ball.zu y)
dy = -dy
end
#
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar.x, bar.y, bar.image) #.x、bar.y、bar.
Window.draw(ball.x, ball.y, ball.image) #.x、ball.y、ball.
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
end
◇ Ändern (zu Barimage) ◇ Ändern (zu Ballimage) 2-30. Kollisionsurteil "Kollision?" (Rb_block30.html) In Zukunft werden wir Kollisionsurteile "Kollision" treffen. Nicht nur für Balken, sondern auch für Blöcke, da wir viele Kollisionsurteile treffen werden. Hier werden wir Quadrate betrachten.
Betrachtet man die beiden Rechtecke item_a und item_b;
-
Koordinaten von
item_a; oben links (a_x0,a_y0), unten rechts (a_x1,a_y1) -
Koordinaten von
item_b; oben links (b_x0,b_y0), unten rechts (b_x1,b_y1)
Die x-Koordinate von "item_a" ist "a_x0 bis a_x1" und die y-Koordinate ist "a_y0 bis a_y1".
Die x-Koordinate von "item_b" ist "b_x0 bis b_x1" und die y-Koordinate ist "b_y0 bis b_y1".
Unter Berücksichtigung jeder Koordinate (x, y) sind die Bedingungen, unter denen die beiden kollidieren (kollidieren), wie folgt.
a_x0 < b_x1 und
a_x1 > b_x0 und
a_y0 < b_y1 und
a_y1 > b_y0
Wenn dies codiert ist, sieht es so aus: (Item_a und item_b sind Item class)
def collision?(item_a, item_b)
a_x0 = item_a.x
a_x1 = item_a.x + item_a.width
a_y0 = item_a.y
a_y1 = item_a.y + item_a.height
b_x0 = item_b.x
b_x1 = item_b.x + item_b.width
b_y0 = item_b.y
b_y1 = item_b.y + item_b.height
if a_x0 < b_x1 &&
a_x1 > b_x0 &&
a_y0 < b_y1 &&
a_y1 > b_y0
true
end
end
Kollision? Gibt true zurück, wenn ein Konflikt vorliegt.
(Für andere Ideen zur Kollisionsbeurteilung (Kreis, Farbe) siehe unten;
→ ・ DXRuby: Lassen Sie uns selbst ein "Hit-Urteil" fällen - Qiita https://qiita.com/noanoa07/items/b7d647bba20116c41a77 ）
Da es auch notwendig ist, die Sprungrichtung ("x-Richtung", "y-Richtung") zu berücksichtigen, wird die Bewegung des Balls in "x-Richtung" und "y-Richtung" unterteilt, und für jede wird eine Kollisionsbeurteilung vorgenommen.
rb_block30.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Bälle, Stangen und Blöcke sollten in der Item-Klasse sein
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
end
#Kollisionsurteil#◆ Hinzufügung
def collision?(item_a, item_b) #◆ Hinzufügung
a_x0 = item_a.x #◆ Hinzufügung
a_x1 = item_a.x + item_a.width #◆ Hinzufügung
a_y0 = item_a.y #◆ Hinzufügung
a_y1 = item_a.y + item_a.height #◆ Hinzufügung
#◆ Hinzufügung
b_x0 = item_b.x #◆ Hinzufügung
b_x1 = item_b.x + item_b.width #◆ Hinzufügung
b_y0 = item_b.y #◆ Hinzufügung
b_y1 = item_b.y + item_b.height #◆ Hinzufügung
#◆ Hinzufügung
if a_x0 < b_x1 && #◆ Hinzufügung
a_x1 > b_x0 && #◆ Hinzufügung
a_y0 < b_y1 && #◆ Hinzufügung
a_y1 > b_y0 #◆ Hinzufügung
#◆ Hinzufügung
true #◆ Hinzufügung
end #◆ Hinzufügung
end #◆ Hinzufügung
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar = Item.new(250, 480 - img_bar.height, img_bar)
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball = Item.new(300, 400, img_ball)
dx = 2 #Ballgeschwindigkeit (x-Richtung)
dy = -2 #Ballgeschwindigkeit (y-Richtung)
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
5.times do |y|
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * y, img_block)
end
end
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar.x += Input.x * 4 #Für linke und rechte Taste
bar.x = Input.mouse_x #Für die Maus
if bar.x < 20
bar.x = 20
elsif bar.x > 640 - 20 - bar.width
bar.x = 640 - 20 - bar.width
end
#Bewegen Sie den Ball in y-Richtung#◇ Ändern (nur in y-Richtung)
ball.y += dy #◇ Ändern (nur in y-Richtung)
#Kollisionsurteil mit Bar
if collision?(ball, bar) #◇ Ändern (neu schreiben)
if ball.y + ball.height <= 480 - bar.height + dy.abs #◇ Ändern (neu schreiben)
ball.y -= dy #◇ Ändern (neu schreiben)
dy = -dy #◇ Ändern (neu schreiben)
end #◇ Ändern (neu schreiben)
end #◇ Ändern (neu schreiben)
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball.y < 20
ball.y -= dy
dy = -dy
end
#Bewegen Sie den Ball in x-Richtung#◇ Ändern (nur in x-Richtung)
ball.x += dx #◇ Ändern (nur in x-Richtung)
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball.x < 20 || (ball.x + ball.width) > 620
ball.x -= dx
dx = -dx
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar.x, bar.y, bar.image)
Window.draw(ball.x, ball.y, ball.image)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
end
2-31. Machen Sie "Kollision?" Eine Methode der "Objektklasse" (rb_block31.html)
In Ruby wird die Notation "item_a.collision? (Item_b)" häufiger verwendet als die Notation "collision? (Item_a, item_b)" (objektorientiert).
Machen Sie dazu "Kollision?" Eine Methode der "Item-Klasse" (genauer gesagt eine Instanzmethode).
Wie man es macht ist wie folgt.
class Item
def Die Methode, die Sie hinzufügen möchten
#Methodeninhalt
end
end
Hier wird das Äquivalent von "item_a" als "self" geschrieben.
class Item
def collision?(item_b)
a_x0 = self.x
a_x1 = self.x + self.width
a_y0 = self.y
a_y1 = self.y + self.height
b_x0 = item_b.x
b_x1 = item_b.x + item_b.width
b_y0 = item_b.y
b_y1 = item_b.y + item_b.height
if a_x0 < b_x1 &&
a_x1 > b_x0 &&
a_y0 < b_y1 &&
a_y1 > b_y0
true
end
end
end
Anstatt "Kollision? (Ball, Balken)" zu schreiben, können Sie jetzt "Ball.Kollision? (Balken)" schreiben.
rb_block31.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Bälle, Stangen und Blöcke sollten in der Item-Klasse sein
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
#Kollisionsurteil#◇ Ändern (zur Methode der Artikelklasse)
def collision?(item_b) #◇ Ändern (neu schreiben)
a_x0 = self.x #◇ Ändern (neu schreiben)
a_x1 = self.x + self.width #◇ Ändern (neu schreiben)
a_y0 = self.y #◇ Ändern (neu schreiben)
a_y1 = self.y + self.height #◇ Ändern (neu schreiben)
#◇ Ändern (neu schreiben)
b_x0 = item_b.x #◇ Ändern (neu schreiben)
b_x1 = item_b.x + item_b.width #◇ Ändern (neu schreiben)
b_y0 = item_b.y #◇ Ändern (neu schreiben)
b_y1 = item_b.y + item_b.height #◇ Ändern (neu schreiben)
#◇ Ändern (zur Methode der Artikelklasse)
if a_x0 < b_x1 && #◇ Ändern (zur Methode der Artikelklasse)
a_x1 > b_x0 && #◇ Ändern (zur Methode der Artikelklasse)
a_y0 < b_y1 && #◇ Ändern (zur Methode der Artikelklasse)
a_y1 > b_y0 #◇ Ändern (zur Methode der Artikelklasse)
#◇ Ändern (zur Methode der Artikelklasse)
true #◇ Ändern (zur Methode der Artikelklasse)
end #◇ Ändern (zur Methode der Artikelklasse)
end #◇ Ändern (zur Methode der Artikelklasse)
end #◇ Ändern (zur Methode der Artikelklasse)
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar = Item.new(250, 480 - img_bar.height, img_bar)
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball = Item.new(300, 400, img_ball)
dx = 2 #Ballgeschwindigkeit (x-Richtung)
dy = -2 #Ballgeschwindigkeit (y-Richtung)
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
5.times do |y|
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * y, img_block)
end
end
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar.x += Input.x * 4 #Für linke und rechte Taste
bar.x = Input.mouse_x #Für die Maus
if bar.x < 20
bar.x = 20
elsif bar.x > 640 - 20 - bar.width
bar.x = 640 - 20 - bar.width
end
#Bewegen Sie den Ball in y-Richtung
ball.y += dy
#Kollisionsurteil mit Bar
if ball.collision?(bar) #◇ Ändern (neu schreiben)
if ball.y + ball.height <= 480 - bar.height + dy.abs
ball.y -= dy
dy = -dy
end
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball.y < 20
ball.y -= dy
dy = -dy
end
#Bewegen Sie den Ball in x-Richtung
ball.x += dx
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball.x < 20 || (ball.x + ball.width) > 620
ball.x -= dx
dx = -dx
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar.x, bar.y, bar.image)
Window.draw(ball.x, ball.y, ball.image)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
end
2-32. Kollisionsbeurteilung mit Block (Trefferblock verschwindet) (rb_block32.html)
Beurteilen Sie die Kollision mit dem Block.
Array.delete_if ist eine Anweisung, Array-Elemente einzeln abzurufen und aus dem Array zu löschen, wenn die Bedingungen erfüllt sind.
Daher können Sie den Block, der in der Kollisionsbeurteilung "wahr" wurde, aus den Blockgruppenarray "Blöcken" löschen.
blocks.delete_if do |block|
if ball.collision?(block)
true
end
end
Der Code, der dies verwendet, lautet wie folgt.
rb_block32.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Bälle, Stangen und Blöcke sollten in der Item-Klasse sein
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
#Kollisionsurteil
def collision?(item_b)
a_x0 = self.x
a_x1 = self.x + self.width
a_y0 = self.y
a_y1 = self.y + self.height
b_x0 = item_b.x
b_x1 = item_b.x + item_b.width
b_y0 = item_b.y
b_y1 = item_b.y + item_b.height
if a_x0 < b_x1 &&
a_x1 > b_x0 &&
a_y0 < b_y1 &&
a_y1 > b_y0
true
end
end
end
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar = Item.new(250, 480 - img_bar.height, img_bar)
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball = Item.new(300, 400, img_ball)
dx = 2 #Ballgeschwindigkeit (x-Richtung)
dy = -2 #Ballgeschwindigkeit (y-Richtung)
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
5.times do |y|
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * y, img_block)
end
end
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar.x += Input.x * 4 #Für linke und rechte Taste
bar.x = Input.mouse_x #Für die Maus
if bar.x < 20
bar.x = 20
elsif bar.x > 640 - 20 - bar.width
bar.x = 640 - 20 - bar.width
end
#Bewegen Sie den Ball in y-Richtung
ball.y += dy
#Kollisionsurteil mit Bar
if ball.collision?(bar)
if ball.y + ball.height <= 480 - bar.height + dy.abs
ball.y -= dy
dy = -dy
end
end
#Kollisionsbeurteilung mit Block (y-Richtung)#◆ Hinzufügung
blocks.delete_if do |block| #◆ Hinzufügung
if ball.collision?(block) #◆ Hinzufügung
true #◆ Hinzufügung
end #◆ Hinzufügung
end #◆ Hinzufügung
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball.y < 20
ball.y -= dy
dy = -dy
end
#Bewegen Sie den Ball in x-Richtung
ball.x += dx
#Kollisionsbeurteilung mit Block (x-Richtung)#◆ Hinzufügung
blocks.delete_if do |block| #◆ Hinzufügung
if ball.collision?(block) #◆ Hinzufügung
true #◆ Hinzufügung
end #◆ Hinzufügung
end #◆ Hinzufügung
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball.x < 20 || (ball.x + ball.width) > 620
ball.x -= dx
dx = -dx
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar.x, bar.y, bar.image)
Window.draw(ball.x, ball.y, ball.image)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
end
2-33. Wenn es einen Block trifft, prallt es ab, es ist abgeschlossen (rb_block33.html)
Wenn es den Block trifft, wird es abprallen.
Wenn es mit einem Block kollidiert, fügen Sie einfach den Bouncing-Code hinzu.
#Kollisionsbeurteilung mit Block (y-Richtung)
blocks.delete_if do |block|
if ball.collision?(block)
ball.y -= dy #◆ Hinzufügung
dy = -dy #◆ Hinzufügung
true
end
end
Damit ist das "Blockbrechen" vorerst abgeschlossen!
rb_block33.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Bälle, Stangen und Blöcke sollten in der Item-Klasse sein
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
#Kollisionsurteil
def collision?(item_b)
a_x0 = self.x
a_x1 = self.x + self.width
a_y0 = self.y
a_y1 = self.y + self.height
b_x0 = item_b.x
b_x1 = item_b.x + item_b.width
b_y0 = item_b.y
b_y1 = item_b.y + item_b.height
if a_x0 < b_x1 &&
a_x1 > b_x0 &&
a_y0 < b_y1 &&
a_y1 > b_y0
true
end
end
end
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar = Item.new(250, 480 - img_bar.height, img_bar)
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball = Item.new(300, 400, img_ball)
dx = 2 #Ballgeschwindigkeit (x-Richtung)
dy = -2 #Ballgeschwindigkeit (y-Richtung)
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
5.times do |y|
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * y, img_block)
end
end
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar.x += Input.x * 4 #Für linke und rechte Taste
bar.x = Input.mouse_x #Für die Maus
if bar.x < 20
bar.x = 20
elsif bar.x > 640 - 20 - bar.width
bar.x = 640 - 20 - bar.width
end
#Bewegen Sie den Ball in y-Richtung
ball.y += dy
#Kollisionsurteil mit Bar
if ball.collision?(bar)
if ball.y + ball.height <= 480 - bar.height + dy.abs
ball.y -= dy
dy = -dy
end
end
#Kollisionsbeurteilung mit Block (y-Richtung)
blocks.delete_if do |block|
if ball.collision?(block)
ball.y -= dy #◆ Hinzufügung
dy = -dy #◆ Hinzufügung
true
end
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball.y < 20
ball.y -= dy
dy = -dy
end
#Bewegen Sie den Ball in x-Richtung
ball.x += dx
#Kollisionsbeurteilung mit Block (x-Richtung)
blocks.delete_if do |block|
if ball.collision?(block)
ball.x -= dx #◆ Hinzufügung
dx = -dx #◆ Hinzufügung
true
end
end
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball.x < 20 || (ball.x + ball.width) > 620
ball.x -= dx
dx = -dx
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar.x, bar.y, bar.image)
Window.draw(ball.x, ball.y, ball.image)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
end
Anwendungsproblem
Lassen Sie uns "Block Breaking" verbessern und entwickeln
Lassen Sie uns "Block Breaking" verbessern und entwickeln.
Das Folgende ist nur ein Beispiel. Fühlen Sie sich frei, es selbst zu entwickeln.
A. Verbessern Sie den Betrieb
Versuchen Sie, den erstellten "Blockbrecher" zu bewegen, und reparieren Sie das Teil, an dem Sie sich Sorgen um die Bewegung machen.
B. Erweitern Sie die Funktionalität
Lassen Sie es uns entwickeln, indem wir die Funktion "Blockbrechen" hinzufügen.
B-1. Zeichen auf dem Bildschirm anzeigen (rb_block34.html)
Lassen Sie uns die Zeichen auf dem Bildschirm anzeigen.
Bereiten Sie zunächst standardmäßig die Schriftart vor.
font = Font.new(24)
Die Zeichen werden wie folgt angezeigt.
Window.draw_font (x-Position, y-Position, Zeichenkette, Schriftart, {: color => Zeichenfarbe)
Um die Anzahl der verbleibenden Blöcke herauszufinden, überprüfen Sie die Anzahl der Elemente im Blockarray "Blöcke". Verwenden Sie daher "blocks.size".
rb_block34.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Bälle, Stangen und Blöcke sollten in der Item-Klasse sein
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
#Kollisionsurteil
def collision?(item_b)
a_x0 = self.x
a_x1 = self.x + self.width
a_y0 = self.y
a_y1 = self.y + self.height
b_x0 = item_b.x
b_x1 = item_b.x + item_b.width
b_y0 = item_b.y
b_y1 = item_b.y + item_b.height
if a_x0 < b_x1 &&
a_x1 > b_x0 &&
a_y0 < b_y1 &&
a_y1 > b_y0
true
end
end
end
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar = Item.new(250, 480 - img_bar.height, img_bar)
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball = Item.new(300, 400, img_ball)
dx = 2 #Ballgeschwindigkeit (x-Richtung)
dy = -2 #Ballgeschwindigkeit (y-Richtung)
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
5.times do |y|
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * y, img_block)
end
end
#Schriftvorbereitung#◆ Hinzufügung
font = Font.new(24) #◆ Hinzufügung
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar.x += Input.x * 4 #Für linke und rechte Taste
bar.x = Input.mouse_x #Für die Maus
if bar.x < 20
bar.x = 20
elsif bar.x > 640 - 20 - bar.width
bar.x = 640 - 20 - bar.width
end
#Bewegen Sie den Ball in y-Richtung
ball.y += dy
#Kollisionsurteil mit Bar
if ball.collision?(bar)
if ball.y + ball.height <= 480 - bar.height + dy.abs
ball.y -= dy
dy = -dy
end
end
#Kollisionsbeurteilung mit Block (y-Richtung)
blocks.delete_if do |block|
if ball.collision?(block)
ball.y -= dy
dy = -dy
true
end
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball.y < 20
ball.y -= dy
dy = -dy
end
#Bewegen Sie den Ball in x-Richtung
ball.x += dx
#Kollisionsbeurteilung mit Block (x-Richtung)
blocks.delete_if do |block|
if ball.collision?(block)
ball.x -= dx
dx = -dx
true
end
end
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball.x < 20 || (ball.x + ball.width) > 620
ball.x -= dx
dx = -dx
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar.x, bar.y, bar.image)
Window.draw(ball.x, ball.y, ball.image)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
#Anzeige von Zeichen#◆ Hinzufügung
string = "Die restlichen Blöcke#{blocks.size}Es ist ein Individuum." #◆ Hinzufügung
Window.draw_font(20, 200, string, font, {:color => C_YELLOW}) #◆ Hinzufügung
end
B-2. Spiel über Bildschirm hinzufügen (rb_block35.html)
Fügen wir ein Spiel über dem Bildschirm hinzu.
Wenn die "y-Position" ("ball.y") des Balls größer als die vertikale Breite des Fensters "480" ist, wird das "Spiel über dem Bildschirm" angezeigt.
Das Spiel über dem Bildschirm wird wie folgt ausgeführt.
-
Zeichnen Sie ein weißes Quadrat, das der Fenstergröße (640, 480) entspricht (
Window.draw_box_fill (0, 0, 640, 480, C_WHITE)). -
Zeigen Sie das Wort "Game Over" an (
Window.draw_font (200, 200," Game Over ", Schriftart, {: color => C_BLACK}))
Dies ist der hinzugefügte Code.
rb_block35.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Bälle, Stangen und Blöcke sollten in der Item-Klasse sein
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
#Kollisionsurteil
def collision?(item_b)
a_x0 = self.x
a_x1 = self.x + self.width
a_y0 = self.y
a_y1 = self.y + self.height
b_x0 = item_b.x
b_x1 = item_b.x + item_b.width
b_y0 = item_b.y
b_y1 = item_b.y + item_b.height
if a_x0 < b_x1 &&
a_x1 > b_x0 &&
a_y0 < b_y1 &&
a_y1 > b_y0
true
end
end
end
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar = Item.new(250, 480 - img_bar.height, img_bar)
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball = Item.new(300, 400, img_ball)
dx = 2 #Ballgeschwindigkeit (x-Richtung)
dy = -2 #Ballgeschwindigkeit (y-Richtung)
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
5.times do |y|
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * y, img_block)
end
end
#Schriftvorbereitung
font = Font.new(24)
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar.x += Input.x * 4 #Für linke und rechte Taste
bar.x = Input.mouse_x #Für die Maus
if bar.x < 20
bar.x = 20
elsif bar.x > 640 - 20 - bar.width
bar.x = 640 - 20 - bar.width
end
#Bewegen Sie den Ball in y-Richtung
ball.y += dy
#Kollisionsurteil mit Bar
if ball.collision?(bar)
if ball.y + ball.height <= 480 - bar.height + dy.abs
ball.y -= dy
dy = -dy
end
end
#Kollisionsbeurteilung mit Block (y-Richtung)
blocks.delete_if do |block|
if ball.collision?(block)
ball.y -= dy
dy = -dy
true
end
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball.y < 20
ball.y -= dy
dy = -dy
end
#Bewegen Sie den Ball in x-Richtung
ball.x += dx
#Kollisionsbeurteilung mit Block (x-Richtung)
blocks.delete_if do |block|
if ball.collision?(block)
ball.x -= dx
dx = -dx
true
end
end
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball.x < 20 || (ball.x + ball.width) > 620
ball.x -= dx
dx = -dx
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar.x, bar.y, bar.image)
Window.draw(ball.x, ball.y, ball.image)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
#Anzeige von Zeichen
string = "Die restlichen Blöcke#{blocks.size}Es ist ein Individuum."
Window.draw_font(20, 200, string, font, {:color => C_YELLOW})
#Spiel über dem Bildschirm#◆ Hinzufügung
if ball.y >= 480 #◆ Hinzufügung
Window.draw_box_fill(0, 0, 640, 480, C_WHITE) #◆ Hinzufügung
Window.draw_font(200, 200, "Spiel ist aus", font, {:color => C_BLACK}) #◆ Hinzufügung
end #◆ Hinzufügung
end
B-3. Starten Sie das Spiel über den Bildschirm neu (rb_block36.html).
Drücken Sie im Spiel über dem Bildschirm eine bestimmte Taste, um das Spiel neu zu starten.
Überprüfen Sie "Input.key_down? (Tastaturkonstante)", um festzustellen, ob eine Taste gedrückt wurde.
Danach können Sie den Neustartbildschirm einstellen. (Hier bleiben die verbleibenden Blöcke unverändert und der Ball wird wieder in den Ausgangszustand versetzt.)
rb_block36.rb
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width = 640
Window.height = 480
Window.bgcolor = C_BLACK
#Wandstärke: links, rechts, oben; 20
#Bälle, Stangen und Blöcke sollten in der Item-Klasse sein
class Item
def initialize(x, y, image)
@x = x
@y = y
@image = image
@width = image.width
@height = image.height
end
attr_accessor :x, :y, :image, :width, :height
#Kollisionsurteil
def collision?(item_b)
a_x0 = self.x
a_x1 = self.x + self.width
a_y0 = self.y
a_y1 = self.y + self.height
b_x0 = item_b.x
b_x1 = item_b.x + item_b.width
b_y0 = item_b.y
b_y1 = item_b.y + item_b.height
if a_x0 < b_x1 &&
a_x1 > b_x0 &&
a_y0 < b_y1 &&
a_y1 > b_y0
true
end
end
end
#Bar Vorbereitung
img_bar = Image.load("bar.png ")
bar = Item.new(250, 480 - img_bar.height, img_bar)
#Ballvorbereitung
img_ball = Image.load("ball.png ")
ball = Item.new(300, 400, img_ball)
dx = 2 #Ballgeschwindigkeit (x-Richtung)
dy = -2 #Ballgeschwindigkeit (y-Richtung)
#Blockvorbereitung
img_block = Image.load("block.png ")
#Initialisierung von Blöcken
blocks = []
10.times do |x|
5.times do |y|
blocks << Item.new(21 + (img_block.width + 2) * x, 21 + (img_block.height + 2) * y, img_block)
end
end
#Schriftvorbereitung
font = Font.new(24)
#Einstellen der Anzahl der Zeichnungen pro Sekunde (Anfangswert: 60)
#Window.fps = 30
#Hauptschleife
Window.loop do
#Bewegen Sie die Stange
#bar.x += Input.x * 4 #Für linke und rechte Taste
bar.x = Input.mouse_x #Für die Maus
if bar.x < 20
bar.x = 20
elsif bar.x > 640 - 20 - bar.width
bar.x = 640 - 20 - bar.width
end
#Bewegen Sie den Ball in y-Richtung
ball.y += dy
#Kollisionsurteil mit Bar
if ball.collision?(bar)
if ball.y + ball.height <= 480 - bar.height + dy.abs
ball.y -= dy
dy = -dy
end
end
#Kollisionsbeurteilung mit Block (y-Richtung)
blocks.delete_if do |block|
if ball.collision?(block)
ball.y -= dy
dy = -dy
true
end
end
#Wenn es gegen die Wand stößt, prallt es ab(y Richtung)
if ball.y < 20
ball.y -= dy
dy = -dy
end
#Bewegen Sie den Ball in x-Richtung
ball.x += dx
#Kollisionsbeurteilung mit Block (x-Richtung)
blocks.delete_if do |block|
if ball.collision?(block)
ball.x -= dx
dx = -dx
true
end
end
#Wenn es gegen eine Wand stößt, springt es zurück (x-Richtung)
if ball.x < 20 || (ball.x + ball.width) > 620
ball.x -= dx
dx = -dx
end
#Bildschirmzeichnung
Window.draw_box_fill( 0, 0, 20, 480, C_WHITE)
Window.draw_box_fill(620, 0, 640, 480, C_WHITE)
Window.draw_box_fill( 0, 0, 640, 20, C_WHITE)
Window.draw(bar.x, bar.y, bar.image)
Window.draw(ball.x, ball.y, ball.image)
blocks.each do |block|
Window.draw(block.x, block.y, block.image)
end
#Anzeige von Zeichen
string = "Die restlichen Blöcke#{blocks.size}Es ist ein Individuum."
Window.draw_font(20, 200, string, font, {:color => C_YELLOW})
#Spiel über dem Bildschirm
if ball.y >= 480
Window.draw_box_fill(0, 0, 640, 480, C_WHITE)
Window.draw_font(200, 200, "Spiel ist aus", font, {:color => C_BLACK})
Window.draw_font(200, 230, "Fahren Sie mit der Leertaste fort", font, {:color => C_BLACK}) #◆ Hinzufügung
if Input.key_down?(K_SPACE) #◆ Hinzufügung
ball.x = 300 #◆ Hinzufügung
ball.y = 400 #◆ Hinzufügung
dx = 2 #◆ Hinzufügung
dy = -2 #◆ Hinzufügung
end #◆ Hinzufügung
end
end
Dies ist das Ende des Textes.
Versuchen Sie danach bitte, es auf verschiedene Arten zu entwickeln!
Recommended Posts