JavaScript/Tutorials/Spiele/Adventure
- 45min
- mittel
- Kenntnisse in
- HTML
- JavaScript
In diesem Tutorial lernst Du, wie Du ein einfaches Adventure-Spiel mit grafischen Elementen entwickeln kannst. Die Interaktivität und Auswertung wird mit JavaScript, die grafische Gestaltung mit SVG erreicht.
Inhaltsverzeichnis
Vorüberlegungen
Computerspiele - eine Übersicht
Adventures oder Abenteuerspiele bezeichnen ein bestimmtes Genre von Computerspielen. Hauptprinzip des Adventures ist eine zu Grunde liegende Geschichte, die in einem Gebäude oder Höhlensystem spielt. Durch Erkundung von Räumen, die aber auch Sackgassen sein können, und das Lösen von Rätseln wird diese Geschichte im Adventure erlebt. Fast immer sind Adventures Einzelspieler-Spiele.
Ursprünglich waren Adventures text-basiert, da Computer noch keine Grafikfähigkeiten hatten. Unterhalb des ausgegebenen Infotexts war ein Eingabefeld, in dem der Spieler seine nächsten Schritte eingab. Aus der Eingabe wurde mit String-Operationen Schlüsselwörter wie "go" oder "take" identifiziert und dementsprechend neue Texte geladen.[1]
- Colossal Cave Adventure - das erste Textadventure von 1972
Erst später wurden die Geschichten durch grafische Elemente bereichert, bis Sierra On-Line 1984 mit Myst ein Spiel entwickelte, in dem der Spieler eine Figur mit Pfeiltasten und Maus bewegen und auf interessante Punkte der Grafik klicken konnte.[2]
Noch älter ist die erste Simulation. Im Jahre 1966 wurde mit Hamurabi (aka the Sumer game) das erste text-basierte Strategiespiel veröffentlicht.[3] Hier konnte man als König Hammurabi (das zweite "m" wurde aufgrund der Dateinamenbegrenzung auf 8 Zeichen geopfert) innerhalb von 10 Runden (=Jahren) Getreide zum Kauf von Land, zur Aussaat investiert werden.
Route 66
Spielidee
Eine der programmiertechnischen Herausforderungen eines Text-Adventures ist gerade die Analyse und Verarbeitung des Eingabe-Strings. Trotzdem werden wir von dem typischen Muster abweichen und stattdessen „nur“ ein Adventure mit vorgegebenen Antwortmöglichkeiten erstellen. Dabei soll das Multiple-Choice-Skript aus dem vorherigen Kapitel zur Anwendung kommen.
Der Spieler fährt auf der berühmten Route_66 von Chicago bis an den Pazifik nach Santa Monica. Dabei kommt er in verschiedene Situationen, in denen er mehrere Handlungsmöglichkeiten hat.
Diese Handlungsmöglichkeiten haben Konsequenzen in Bezug auf …
- Zeit (Reisedauer, Aufenthalt an diesem Ort)
- Geld (Kosten für Unterkunft, Reperaturen, Einnahmen wie Verdienste und Belohnungen)
- Treibstoff (Was nützt einem ein voller Geldbeutel, wenn man in the middle of nowhere mit leerem Tank steht?)
Der Spieler hat gewonnen, wenn er es schafft, bis nach Santa Monica zu kommen. Sein noch vorhandenes Geld zeigt, wie erfolgreich er war.
Einsatz von Grafik
Zu den Texten (Situation und Optionen) soll jeweils eine dazu passende Grafik dargestellt werden. Diese Grafik soll allerdings nicht aus fertigen Rastergrafiken bestehen, sondern aus SVG-Hero-Images bestehen. Diese können passend auf die Viewport-Größe skaliert werden, wobei kleinere Details ausgeblendet werden können.
JavaScript
Datenstruktur
data: {
cost: 3000,
failure: "You've lost.",
intro: "Route 66, the “Mother road USA“, is the most famous road in America. We start our journey in Sante Fe, New Mexico and want to cruise through the Southwest all way to the Pacific Ocean in Santa Monica, California!",
scenes: [
{ // Spielzug1
situation: "1. You drive with your car. ... Your tire bursts and you’ve got a flat.",
background: "scene_01", // kann von Funktion interpretiert werden
options: [
{
text: "Some minutes ago you saw a sign for a gas station. You get out of your car, take a bottle of water and walk there.",
result: "You walk for two hours and find nothing but sand and some bushes all over! Finally you arrive and get help. They charge you 75$."
cost: 75,
fuel: 0,
time: 3,
},
{
text: "Call the AAA.",
time: 3,
cost: 0,
result: "AAA comes and changes your wheel. It's free but it takes one hour."
},
{
text: "You find an old car. You remove one of the tires and take it to fix up your car.",
time: 4,
cost: 4,
result: "It took you 30 minutes to loose the screws but you got a new set of wheels for no charge."
}
]
}
],
success: "You've won!",
time: 30
};
Jede der Situationen, die einem im Spiel begegnen kann, besteht aus einem Einführungssatz situation, dem Hintergrundbild background und mehreren Optionen in einem Array. Jede dieser Optionen enthält
-
text: eine mögliche Lösung -
result: (un)beabsichtigte Konsequenzen dieser Entscheidung -
time: -
cost:
Der Bote des Königs
Das Reisekönigtum der Karolinger und Ottonen bildet den Abschluss der ersten Sequenz im Lehrplan Geschichte in der 7. Klasse der Realschule Bayern. Zur Wiederholung und Vertiefung habe ich mit meiner 7. Klasse und einigen Helfern aus der Homepage-AG der 10.Klasse ein Spiel entworfen.
Der Spieler soll auf seiner Reise nach Aachen Abenteuer bestehen und dafür möglichst wenig Zeit und Geld benötigen.
ToDo (weitere ToDos)
Weblinks
- js13kGames Tutorial – How to Make a Text Game with HTML5
- Gamedevelopment.tutsplus: Game Design & Development Tutorials
