Arbeitsblatt: Skript CSedWeek

Spiele programmieren mit dem Online-Tool AgentCube Links: AgentCubes (Webseite): - Tutorial (Wiki) auf Deutsch: - Video Anleitung: - Online Tool: - Beispiele: Spiel Frogger Mit Hilfe dieser Anleitung lernst du eine einfache Version des Spieles Frogger zu programmieren. Inhaltsverzeichnis 1. Spielbeschreibung . 2 2. Programmstart . 3 3. Neues Projekt erstellen 3 4. Agenten erstellen . 3 4.1 Frosch erstellen 3 4.2 Strasse erstellen 4 4.3 Zielflagge erstellen . 4 4.4 Auto erstellen . 4 4.5 Tunnel links erstellen . 4 4.5 Tunnel rechts erstellen . 4 5. Agenten platzieren . 4 6. Bewegung des Frosches programmieren 4 7. Speichern und testen . 6 8. Bewegung des Autos programmieren . 6 9. Tunnel programmieren 6 10. Bewegung des Autos programmieren II 7 11. Bei „Zusammenstoss zurücksetzen programmieren 7 12. Am Ziel . 8 13. 3D-Ansicht . 8 14. Online speichern 8 1. Spielbeschreibung (aus Wikipedia) Frogger ist ein Arcade- und Videospiel, das 1981 von Sega produziert und von Konami entwickelt wurde. Im Original-Spiel geht es darum, einen Frosch sicher über eine stark befahrene Strasse und anschliessend über einen Fluss zu führen. Auf der fünfspurigen Strasse muss der Frosch verschiedenen Fahrzeugen ausweichen. Da der Frosch nicht schwimmen kann, überquert er den Fluss, indem er Schildkröten und treibende Baumstämme als Plattformen nutzt. Dabei kann er umherschwimmenden Krokodilen sowie Schlangen zum Opfer fallen. 2 2. Programmstart Öffne in Google Chrome das Programm mit folgendem Link: Klicke dann auf Create your 3D Game. Blende die Videos aus, indem du auf hide video klickst. Willst du dir später die Anleitungsvideos (in Englisch) anschauen, klickst du auf show video. Nun kannst du mit dem Spiel programmieren beginnen! 3. Neues Projekt erstellen Klicke oben auf der Symbolleiste bei World auf das Pluszeichen. Im sich öffnenden Fenster kannst den Namen, die Grösse (Zeilen Spalten) und die Anzahl Levels eingeben. Klicke abschliessend auf New World. Der Name deines Spieles wird nun angezeigt. 4. Agenten erstellen Für die einfache Version des Spieles brauchen wir Frosch, Strasse, Ziel, Auto und Tunnel (rechts und links): 4.1 Frosch erstellen Klicke unten links auf Agent. Im folgenden Fenster wählst du Inflatable Icon – Animals – Frog. Schreibe dann oben links bei Name den Namen des Agenten hin und klicke unten rechts auf Save. Du kannst deine Agenten links unterhalb Agents sehen. Willst du deinen Frosch anpassen, gelangst du mit einem Doppelklick auf das Froschsymbol in den Bearbeitungsmodus. Wenn du fertig bist, klicke auf Save. 3 4.2 Strasse erstellen Wie unter 4.1 beschrieben erstellst du nun den Agenten Strasse: Inflatable Icon – Landscape – Road. 4.3 Zielflagge erstellen Inflatable Icon – Miscellaneous – Flag. 4.4 Auto erstellen Inflatable Icon – Vehicles – nach Wahl. 4.5 Tunnel links erstellen Inflatable Icon – Landscape – TunnelL. 4.5 Tunnel rechts erstellen Inflatable Icon – Landscape – TunnelR. 5. Agenten platzieren Nun zeichnen wir mit Hilfe der Bleistiftfunktion die Agenten auf unsere Spielfläche. Wähle dazu das Bleistift in der Symbolleiste oben aus, markiere dann den gewünschten Agenten und klicke auf der Spielfläche in das Quadrat, wo du den Agenten platziert haben möchtest. Die Autos musst du nicht setzen. Die sollen später von alleine aus dem Tunnel fahren. Das könnte zum Beispiel nun so aussehen. 6. Bewegung des Frosches programmieren Wir müssen den Frosch mit Hilfe der Tastatur über das Spielfeld zur Flagge führen können. Dazu muss er sich vor, zurück, nach rechts und nach links bewegen können. Dies programmieren wir nun unterhalb der Spielfläche: 1. Markiere unter Agenten den Frosch. 4 2. Ziehe den Baustein key up arrow (links unter Conditions) in das while-running Feld in den if-Teil. Achtung: Bausteine erst loslassen, wenn ein grünes Pluszeichen und eine gelbe Linie erscheint. Das gilt für alle Bedingungen (Conditions) und Aktionen (Actions) 3. Ziehe den Baustein move (rechts unter Actions) in das while-running Feld in den then-Teil. 4. Passe den Move-Baustein an, indem du auf den roten Punkt klickst. Wähle die Bewegung nach oben. 5. Nun kannst du das Ganze 3x duplizieren. 6. Zum Schluss müssen die Tasten und die Bewegungen wie folgt angepasst werden: (Anstelle der Pfeiltasten können auch beleibige Buchstaben gewählt werden!) 5 7. Speichern und testen Jetzt wollen wir das Ganze mal speichern und testen. Zum Speichern drückst du in der Symbolleiste oben auf Save. Zum Testen wählst du den grünen Start-Button. Jetzt kannst du testen ob zu den Frosch mit den vorher programmierten Tasten zu der Flagge führen kannst. Zum Zurücksetzen drückst du den Reload-Button. 8. Bewegung des Autos programmieren Markiere links den Agenten Auto und programmiere wie folgt: Zum Testen zeichnest du ein Auto in den Spielplan. Was passiert nun? Bewegt sich das Auto? Was passiert, wenn das Auto das Ende der Strasse erreicht? Verschwindet es? Kommen wieder weitere Autos von links? Unsere Aufgabe ist es nun zu programmieren, dass Autos links erscheinen, über die Strasse fahren und rechts wieder verschwinden. Dazu müssen wir die Tunnel programmieren. 9. Tunnel programmieren Damit aus dem linken Tunnel die Autos erscheinen, gehst du wie folgt vor: Markiere den Tunnel_links und programmiere folgendes: Häufigkeit: alle 0.6 Sek. Unregelmässigkeit: 25% Chance Teste hier mit verschiedenen Werten. Was passiert wenn du den Wert der Sekunden vergrösserst, verkleinerst? Was passiert, wenn du den Prozentwert vergrösserst, verkleinerst? 6 10. Bewegung des Autos programmieren II Nun wollen wir programmieren, dass die Autos am Ende der Strasse verschwinden. Dazu markierst du das Auto und fügst eine neue Regel ein. Da neue Regeln standardmässig unten erscheinen, musst du sie hier mit der Maus nach oben ziehen. Du musst programmieren, dass das Auto verschwindet, wenn es den rechten Tunnel ereicht. So sieht das Verhalten der Autos dann neu aus: Speichere und teste dein Spiel. 11. Bei „Zusammenstoss zurücksetzen programmieren Was passiert, wenn der Frosch von einem Auto überfahren wird? Das wollen wir jetzt programmieren. Als erstes müssen wir dem Frosch eine zweite Form zuweisen. Markiere den Frosch, klicke auf den kleinen grünen Pfeil. Wähle dann ganz unten links Shape. Benenne diese Form. Mit einem Doppelklick kannst du die Form bearbeiten. Nun erstellst du eine neue Regel ( Rule, untern in der Mitte). Der Code sieht wie folgt aus: Speichere und teste dein Spiel erneut. 7 12. Am Ziel Erreicht der Frosch das Ziel, möchten wir einen Sound ertönen und eine Nachricht erscheinen lassen. Das geht so: Markiere den Agenten Frosch. Nun erstellst du mit Rule eine neue Regel. Diese neue Regel ziehst du mit der Maus an die oberste Stelle. So sieht der Code aus: Mit einem Klick auf den kleinen weissen Pfeil kannst du einen weiteren Text eingeben. Wenn du mehrere Level hast, kannst du anstelle von reload-world mit switch-to-world ins nächste Level wechseln lassen. Speichere und teste dein Spiel erneut. 13. 3D-Ansicht Um dein Spiel in 3D darzustellen kannst du dieses Symbole benutzen. Teste es in 3D. Mit reload gelangst du wieder in die Normalansicht. 14. Online speichern Damit du dein Spiel später weiter bearbeiten kannst, musst du es übermitteln. Klicke dazu auf Submit your Game und fülle die Angaben aus. Du bekommst dann eine e-Mail mit einem Link. So kannst du später dein Spiel wieder weiter programmieren oder mit deinen Freunden teilen. Link zu in diesem Tutorial erstellten Spiel. Den zweiten Teil, den Fluss, kannst du nun selber programmieren. Viel Spass! 8