Erstellen Sie ein kachelbasiertes HTML5-Spiel

In diesem Tutorial zeige ich Ihnen, wie Sie mit HTML5 2D-Spiele auf Kachelbasis erstellen können. Mit dem Spielbereich, der durch eine einfache Karte definiert ist, werden wir versuchen, spielbare 'Agenten' so zu gestalten, dass sie durch das Level laufen, wie diese Agenten mithilfe der Pfadfindung zu 'Mobs' erweitert werden und wie das Spiel auf andere Weise auf dem Bildschirm gerendert wird Arten von Renderer. Vom Desktop-PC bis zum Mobiltelefon können Sie durch entsprechende Aufteilung der Verantwortlichkeiten flexible Spiele erstellen, die auf jedem Gerät mit einem Browser funktionieren.

Der Quellcode / die Demo für das Tutorial finden Sie hier . Dies beinhaltet alles im Tutorial und ermöglicht eine einfache Erweiterung für Ihre eigenen Spiele.



Das 2D-Array zeigt, dass rote Quadrate 1s und leere Quadrate 0s sind



Das 2D-Array zeigt, dass rote Quadrate 1s und leere Quadrate 0s sind

Auswahl treffen

Wir beginnen mit der Verwendung mehrerer Canvas-Elemente zum Zeichnen des Spielbereichs. SVG- oder sogar DOM-Knoten können jedoch auch zum Rendern Ihrer HTML5-Spiele verwendet werden. Die Wahl der richtigen Technologie hängt davon ab, wie das Spiel funktionieren soll.

Wenn Sie mit Bitmaps arbeiten, ist Canvas normalerweise die beste Wahl, da es eine konsistente API bietet, die eine gute browserübergreifende Leistung erbringt. Alle modernen Browser unterstützen dies, einschließlich Browser auf Mobilgeräten. Was den Internet Explorer betrifft, bieten nur Versionen 9 und höher native Unterstützung, obwohl es eine Polyfüllung gibt, die die Unterstützung für IE7 und 8, die auf Google Code gehostet werden, als Patches bezeichnet Explorercanvas . SVG ist besser für Spiele geeignet, die Vektorgrafiken verwenden und eine ähnliche Browserunterstützung wie das Canvas-Tag haben.



DOM / CSS wird am besten für Spiele mit einfacheren Animationen verwendet. Ein Vorteil, den sowohl SVG als auch DOM / CSS gegenüber Canvas haben, besteht darin, dass Sie Ereignis-Listener direkt an die gerenderten Elemente binden können. Bei einer Zeichenfläche müssen Sie berechnen, auf welches Element geklickt wird. Glücklicherweise ist dieses Tutorial kein Problem, da das Spiel nicht auf Mausereignisse reagieren muss.

Karten

Lassen Sie uns zuerst unser Level einrichten. Mit Karten können Sie den Spielbereich programmgesteuert definieren und Wände mit nicht begehbaren Kacheln erstellen. Diese können in ihrer einfachsten Form durch Einsen und Nullen in einem 2D-Array dargestellt werden - hier ist 0 eine begehbare Kachel und 1 eine Wand:

var map = [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ];

Aus dem obigen Code können wir erkennen, dass der Spielbereich rund um den Rand Wände sowie einige Hindernisse in der Mitte aufweist. Sie können diesen Kartentyp als Grundlage für Kollisionsberechnungen sowie zum Rendern des Spiels auf dem Bildschirm verwenden.



Karte rendern

Um Ihre Karte zu rendern, benötigen Sie eine Renderer Objekt, das für das Rendern einer Ebene des Spiels verantwortlich ist. Die Verwendung mehrerer Ebenen ist einfacher und schneller als die Verwendung einer einzelnen Ebene, da Sie den Hintergrund nicht jedes Mal neu zeichnen müssen, wenn sich ein Charakter bewegt.

Das MapRenderer Zeichnet auf eine Referenz aus der Spielkarte und dem Canvas-Element. Anschließend wird die Karte gelöscht und über jede Kachel iteriert, um an den X- und Y-Koordinaten der Kachel auf die Leinwand zu zeichnen. Alle Kacheln mit dem Wert 0 werden übersprungen. Wir lassen nur den Hintergrund durch. Das MapRenderer Erweitert ein Basis-Renderer-Objekt und fügt eine benutzerdefinierte Zeichenmethode hinzu. Dadurch kann das Spiel den größten Teil der Rendering-Logik zwischen den Spielern teilen MapRenderer und ein CharacterRenderer , die wir später definieren werden.

MapRenderer.draw and MapRenderer.drawTile draw: function(){ var self = this; this.context.clearRect(0, 0, this.w, this.h); this.context.fillStyle = 'rgba(255,0,0,0.6)'; _(this.map).each(function(row,i){ _(row).each(function(tile,j){ if(tile !== 0){ //if tile is not walkable self.drawTile(j,i); //draw a rectangle at j,i } }); }); }, drawTile: function(x,y){ this.context.fillRect( x * this.tileSize, y * this.tileSize, this.tileSize, this.tileSize ); }

Wenn während der Iteration die zu zeichnende Kachel nicht begehbar ist, wird die MapRenderer wird ausgeführt drawTile Übergeben der zu zeichnenden Kachelkoordinaten. drawTile zeichnet dann ein Rechteck auf die Leinwand mit Fliesengröße Breite und Höhe bei x * tileSize, y * tileSize Pixel auf dem Bildschirm. Multiplizieren von Koordinaten und Dimensionen mit dem Fliesengröße ermöglicht es uns, von Spielkoordinaten in Bildschirmkoordinaten zu übersetzen. Beim Ausführen wird das unten gezeigte Rendering erzeugt.

Der Render zeigt den Spielbereich auf einem festen schwarzen Hintergrund

Wenn Sie ems oder Prozentsätze verwenden, um Schriftgrößen zu ändern
Der Render zeigt den Spielbereich auf einem festen schwarzen Hintergrund

Der schwarze Hintergrund ist nur ein festes schwarzes Quadrat, das mit CSS erstellt wurde Hintergrund Eigenschaft, die später durch ein Bild ersetzt wird. Diese Ebene kann ein beliebiges Element auf Blockebene sein. Ein div sollte ausreichen. Absolute Positionierung des Hintergrunds und der Leinwand zu oben: 0 und links: 0 Sie können sie mit Z-Index-Deklarationen oder einfach der Reihenfolge, in der sie im DOM ankommen, stapeln.

Das Rendern verbessern

Wir haben eine einfache Darstellung unseres Spielbereichs, aber sie sieht im Moment ziemlich einfach aus. Als nächstes werden wir uns die Verwendung von Bildern anstelle von Leinwand ansehen drawRect . Lassen Sie uns unseren Hintergrund mithilfe von CSS in etwas verwandeln, das Gras ähnelt. Dies ist so einfach wie das Anwenden von a Hintergrund Eigenschaft zur ersten Ebene:

.background-canvas { background: url('../img/grasstile.png'); }

Wenn Sie das Rendern der Wände verbessern, müssen Sie die Karte ändern. Anstatt nur 1s zur Darstellung der Wände zu verwenden, können wir 1s, 2s und 3s zur Darstellung verschiedener Bilder verwenden.

var map = [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [3,0,0,0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [3,0,0,0,0,0,0,0,2,1,3,0,0,0,0,0,0,0,0,0,0,0,0,2], [3,0,0,0,0,0,0,0,2,1,1,1,3,0,0,0,0,0,0,0,0,0,0,2], [3,0,0,0,0,0,0,0,0,0,2,1,1,1,1,3,0,0,0,0,0,0,0,2], [3,0,0,0,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,0,0,0,2], [3,0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [3,0,2,1,1,1,3,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,1,1], [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ];

In der neuen Karte 0 stellt eine begehbare Fliese wie zuvor dar (transparent), 1 stellt ein kontinuierliches Wandbild dar, zwei repräsentiert den linken Rand einer Wand und 3 repräsentiert den rechten Rand einer Wand.

Sprites in einem Kachelsatz verwenden

Jetzt haben wir eine detailliertere Karte, wir können unsere verbessern drawTile Methode in unserer Renderer um ein sogenanntes Sprite-Blatt zu verwenden. Möglicherweise haben Sie beim Schreiben von CSS schon einmal davon gehört: Ein Sprite-Blatt ist ein einzelnes Bild, das alle Bilder enthält, die Sie für Ihre Benutzeroberfläche benötigen. Sie werden häufig im Web verwendet, um HTTP-Anforderungen zu speichern. Das Erstellen eigener Grafiken kann einige Zeit dauern, wenn Sie mit Grafikpaketen nicht vertraut sind. Vorgefertigte Sprite-Blätter für dieses Tutorial wurden von www.spriters-resource.com bezogen.

Bei Verwendung mit dem Segeltuch Tag, Sprite-Blätter können auch die Leistung verbessern. Das Abtasten von einer zwischengespeicherten Leinwand ist schneller als das Zeichnen von separaten Bildobjekten.

Um zu wissen, welcher Teil des Sprites für die verschiedenen Kacheln abgetastet werden soll, benötigen wir eine Kachelspezifikation, die als Eigenschaft von definiert werden kann Renderer . Die Kachelspezifikation ist ein Hash, der die X- und Y-Koordinaten der Grafiken auf dem Sprite-Blatt enthält. Zum Beispiel haben unsere Hintergrundkacheln die folgende Kachelspezifikation:

{ '1': {x: 0 , y: 0}, '2': {x: 48, y: 0}, '3': {x: 24, y: 0} }

Das Bild für unsere '1' Fliese ist bei 0.0 im Sprite Sheet, 'zwei' ist bei 48.0 und '3' ist bei 24.0 (wie im Bild unten gezeigt). Wir benötigen ein neues Objekt, um das Sprite und seine Kachelspezifikation aufzunehmen, die wir benennen werden Kachelsatz . Es ist verantwortlich für das Laden des Sprites in ein Bildelement und das Laden der Kachelspezifikation JSON über Ajax sowie für die Bereitstellung von Methoden für den Zugriff auf die Daten.

Das Hintergrund-Sprite-Blatt

Das Hintergrund-Sprite-Blatt

Eine Instanz des Kachelsatzes kann dann an neue Agenten und an die übergeben werden MapRenderer zur Verwendung mit Zeichenfliesen. Das drawTile Methode, verantwortlich für das Zeichnen einer einzelnen Kachel in unserer Basis Renderer wird jetzt so aussehen:

drawTile: function(sprite, singleTileSpec, x, y){ this.context.drawImage( sprite, singleTileSpec.x, singleTileSpec.y, this.tileSize, this.tileSize, // source coords Math.floor(x * this.tileSize), Math.floor(y * this.tileSize), this.tileSize, this.tileSize // destination coords ); }

Die anderen Methoden können gleich bleiben. Wir müssen uns nur ändern drawTile Daher werden ein Sprite sowie Details zum Abtasten akzeptiert. Jetzt, da wir das Sprite aus dem Kachelsatz verwenden, sieht das Rendern unseres Spielbereichs viel besser aus.

So ändern Sie die Leinwandgröße in Photoshop

Einen Agenten machen

Für den Spieler müssen wir eine erstellen Agent Objekt, um die Position des Spielers zu handhaben und einen Verweis auf sein Kachelset zu halten. nicht so wie MapRenderer , die nur ein Kachelset hat, das CharacterRenderer Sie müssen verschiedene Sprites zum Rendern von dem Agenten übergeben, den sie rendern. Alle Agenten teilen ihre eigene Canvas-Ebene, genau wie wir es mit dem Spielbereich und dem Hintergrund getan haben.

Der Spielbereich wird mit Sprites anstelle einfacher Rechtecke gerendert

Der Spielbereich wird mit Sprites anstelle einfacher Rechtecke gerendert

Um den Charakter zu rendern, zeichnen wir sie auf die gleiche Weise wie die Wände im vorherigen Abschnitt. Eine Kachelspezifikation definiert die Positionen der Spieler-Sprites auf einem Sprite-Blatt. Die Zeichenmethode unterscheidet sich ein wenig von der Zeichenmethode in unserem MapRenderer ::

CharacterRenderer.draw: draw: function(){ var self = this; this.context.clearRect(0, 0, this.w, this.h); _(this.agents).each(function(agent){ self.drawTile( agent.getSprite(), agent.getTileSpec()[agent.getTileId()], agent.position.x, agent.position.y ); }); }

Bei der obigen Methode werden das Sprite, die Kachelspezifikation und die Position des Spielers vom Spieleragenten an den Spieler übergeben drawTile Methode. Das getSprite Die Methode gibt einen Verweis auf das Sprite des Agenten aus seinem Kachelsatz zurück. getTileSpec zusammen mit getTileId Gibt die Spezifikation für das aktuelle Plättchen des Spieleragenten zurück.

Die Position des Agenten wird als X- und Y-Koordinate gespeichert, die im Gegensatz zu Kachelpositionen Brüche sein können, um eine reibungslose Bewegung auf der Karte zu ermöglichen.

Benutzereingaben verarbeiten

Jetzt können wir eine Karte mit einem Spieler darin rendern, aber wir können nicht mit unserem Spieler interagieren. Die Entscheidung über die Interaktion stellt ein kleines Problem dar: Tastatureingaben lassen sich am einfachsten verkabeln, Tablets und Handys verfügen jedoch nicht über Tastaturen. Wir könnten Touch- oder Mausereignisse verwenden, aber was ist, wenn der Spieler eher ein Gamepad als eine Maus hat? Die Lösung besteht darin, ein Objekt zu erstellen, das alle drei abhört und eine einheitliche Schnittstelle bietet.

Der angezeigte Spieleragent wird über dem Spielbereich gerendert

Der angezeigte Spieleragent wird über dem Spielbereich gerendert

Joystix wird zuerst mit Marcin Wicharys nach verbundenen Gamepads suchen gamepad.js Unterstützungsobjekt. Wenn der Benutzer den Daumenstift auf seinem Gamepad bewegt hat, führt Joystix seinen aus Bei der Bewegung Rückrufen. Wenn eine Taste auf dem Gamepad gedrückt wurde, führt Joystix ihre aus onButtonPress Rückrufen. Auf diese Weise können wir den Agenten durch Joystix-Eingaben verschieben. Zum Beispiel in unserem game.js Datei nennen wir a doMove Methode auf dem Agenten, wenn Joystix eine Bewegung erkennt.

Wenn kein Gamepad erkannt wird, verwendet Joystix als nächstes Seb Lee-Delisles JavaScript-Multitouch-Gamecontroller . Dies funktioniert, indem ein Daumenstift überall dort gezeichnet wird, wo der Benutzer den Bildschirm links berührt (und hält), und ein Feuerknopf, wenn er die rechte Seite des Bildschirms berührt. Das Gleiche Bei der Bewegung und onButtonPress Rückrufe werden von Joystix ausgelöst, sodass sich der Spieleragent nicht darum kümmern muss, woher die Eingabe kommt.

Wenn kein Gamepad und keine Berührung vorhanden ist, wartet Joystix auf WASD- oder Pfeiltastenereignisse. Die Leertasten und die Eingabetaste fungieren als Feuerknopf.

Die Joystix-Quelle wird mit den Dateien für dieses Lernprogramm gebündelt oder kann es sein Zugriff auf GitHub .

der Unterschied zwischen Kunst und Design

Kollisionsmanagement

Wir können unseren Spieleragenten bewegen, aber er geht direkt über alle Wände. Wir brauchen ein Objekt, das die Kollisionserkennung unterstützt. Die Kollisionserkennung kann je nach Art des Spiels kompliziert sein. Es stehen viele verschiedene Algorithmen für Begrenzungsrahmen und Linienkreuzungen zur Auswahl - und diese können schwierig zu beherrschen sein. Glücklicherweise ist es für kachelbasierte Spiele viel einfacher. Wir können einfach eine Fliese als begehbar oder nicht begehbar festlegen und eine Bewegung in sie verhindern.

Für unser CollisionManager Wir müssen wissen, wie die Spielkarte aussieht, wo der Spieler ist und wohin er gehen möchte. Anschließend wird geprüft, ob die neue Position begehbar ist, und in diesem Fall die neue Position zurückgegeben. Wenn die Kachel nicht begehbar ist, wird die CollisionManager gibt die ursprüngliche Position zurück.

function CollisionManager(options){ this.map = options.map; } CollisionManager.prototype.getPosition = function(isY, x, y, intent){ var newPosition = isY ? y : x, tryPosition = isY ? Math.floor(y+intent) : Math.floor(x+intent); if(isY && !this.map[tryPosition+1][Math.floor(x)+1]){ newPosition = y+intent; }else if(!isY && !this.map[Math.floor(y)+1][tryPosition+1]){ newPosition = x+intent; } return newPosition; };

Wenn Kollisionen von einem Objekt verwaltet werden, wird die Kopplung zwischen Benutzereingaben und dem Player verringert und später eine einfachere Erweiterung oder Änderung ermöglicht. Mit dem CollisionManager Wenn Sie Ihre neue Position zurückgeben, anstatt zurückzugeben, ob eine Kollision aufgetreten ist oder nicht, müssen sich die Agenten keine Gedanken darüber machen, was passiert, wenn sie gegen eine Wand stoßen. Die Agenten müssen nur wissen, wo sie landen.

Sie werden feststellen, dass das erste Argument an die übergeben wurde getPosition Funktion wird aufgerufen isY und das getPosition gibt nur einen einzigen Wert zurück. Dies ermöglicht es uns, die Y- und X-Bewegung getrennt zu handhaben. Wenn der Agent gegen eine Wand stößt, rutscht er daran entlang, anstatt daran festzuhalten.

Eine 3D-Projektion der einzelnen Ebenen, die im Sprite-basierten Rendering verwendet werden

Eine 3D-Projektion der einzelnen Ebenen, die im Sprite-basierten Rendering verwendet werden

Agenten in Feinde ausdehnen

Das nächste, was wir für unser Spiel machen müssen, sind die Feinde. Die Feinde werden Agenten sein, genau wie unser Spieler, außer dass sie nicht auf Benutzereingaben reagieren. Stattdessen wird die Mob Objekt wird die erweitern Agent Objekt und fügen Sie ein wähle eine Aktion Methode, die Benutzereingaben durch einfache künstliche Intelligenz (KI) ersetzt.

Der Mob nimmt auch einen Verweis auf die Spielerposition in seinem Konstruktor. Das targetAgent ist der Agent, auf den der Mob zugehen sollte:

Mob.js return Agent.extend({ constructor: function(options){ this.targetAgent = options.targetAgent; Agent.prototype.constructor.call(this,options); }, chooseAction: function(){ var dx = this.targetAgent.position.x - this.position.x, dy = this.targetAgent.position.y - this.position.y, moveX = dx*0.03, moveY = dy*0.03, absX = Math.abs(moveX), absY = Math.abs(moveY); moveX = absX/moveX * Math.max(absX,0.05); moveY = absY/moveY * Math.max(absY,0.05); return {x:moveX, y:moveY}; } });

wähle eine Aktion Wählt eine Position des Feindes aus, die dem Spieler am nächsten ist und auf eine maximale Entfernung von +/- 0,05 in X oder Y begrenzt ist, um zu verhindern, dass er sich zu schnell bewegt. Dies bedeutet, dass der Feind bei jedem Tick der Spiel-Engine auf den Spieler zugeht.

Abgesehen von dieser Änderung haben unsere Feinde alle die gleichen Methoden und Eigenschaften wie unser Spieleragent und können von unseren auf die gleiche Weise behandelt werden CharacterRenderer und CollisionManager . Der einzige Unterschied besteht darin, dass wir ausführen müssen, wenn Benutzereingaben definieren, wohin der Spieler gehen möchte wähle eine Aktion um die Koordinaten zu erhalten, die definieren, wohin der Mob gehen möchte.

Die Mobs haben ein eigenes Kachelset, das dasselbe Sprite wie der Agent verwendet, jedoch eine andere Kachelspezifikation verwendet, um feindliche Bilder auf dem Sprite und nicht auf den Spieler zu verweisen.

Das Charakter-Sprite-Blatt

Das Charakter-Sprite-Blatt

Bei einer etwas größeren Karte wird der Weg, den unser Feind nimmt, wenn sich der Spieler nicht bewegt, umseitig angezeigt. Beachten Sie, dass der Feind beim Einzug in das dreizehnte Feld hinter der Baumreihe stecken bleibt. In jeder Runde wird versucht, sich in einer geraden Linie auf den Spieler zuzubewegen, der sich zu diesem Zeitpunkt direkt in einem Baum befindet.

Wegfindung

Unser Feind ist im Moment nicht eines der schärfsten Werkzeuge in der Kiste und geht direkt gegen Wände. Es wäre viel besser, wenn er stattdessen um sie herumgehen könnte. Dazu müssen wir einen Pfadfindungsalgorithmus verwenden.

MacBook Pro 15 Zoll Cover Hülle

Wir werden den A * -Algorithmus verwenden, der sehr genau und relativ schnell ist. Zuerst werden wir unserem Mob eine neue Methode hinzufügen: getAStarMovement .

getAStarMovement: function(){ var map = this.getWalkableMap(), path; map[Math.floor(this.position.y)][Math.floor(this.position.x)] = 's'; map[Math.floor(this.targetAgent.position.y)][Math.floor(this.targetAgent. position.x)] = 'g'; path = astar(map,'manhattan',true); if(path && path.length>1){ return { x: path[1].col, y: path[1].row }; } return this.position; }

Ein * erfordert eine begehbare Karte, die wir aus unserer Kollisionskarte generieren können. Alles andere als a 0 wird als nicht begehbare Kachel definiert, und alle Nullen werden als begehbare Kacheln festgelegt. Wir fügen dann eine hinzu s um den Startpunkt zu markieren und G um das Ziel zu markieren (die Position des Spielers). Der eingeschlagene Pfad wird vom A * -Algorithmus generiert, und der erste Eintrag im Pfad wird als nächster Schritt zurückgegeben.

Ein Pfad, der vom einfachen AI-Algorithmus generiert wird

Ein Pfad, der vom einfachen AI-Algorithmus generiert wird

wähle eine Aktion dann verwendet getAStarMovement Um zu bestimmen, in welche Kachel Sie sich bewegen müssen, um dem von A * berechneten optimalen Pfad zu folgen:

chooseAction: function(){ var nextMove = this.getAStarMovement(), dx = nextMove.x - this.position.x, dy = nextMove.y - this.position.y,

Der verwendete A * -Algorithmus wird mit den Dateien für dieses Lernprogramm gebündelt. Es basiert auf Matthew Trost ' A-Star Pathfinding-Algorithmus '.

Der vom A * -Algorithmus erzeugte Pfad

Der vom A * -Algorithmus erzeugte Pfad

Abschließend

In diesem Tutorial haben wir ein kachelbasiertes HTML5-Spiel erstellt, das auf einer Vielzahl von Browsern ausgeführt werden kann. Wir haben uns angesehen, wie ein 2D-Array in einen Spielbereich verwandelt werden kann, wie wir es mit Feinden und einem Spieler füllen können und wie wir diese Agenten auf verschiedene Arten steuern können.

Sie müssen nicht nur ein schurkenhaftes Spiel erstellen: Kacheln können für eine Vielzahl von Spielen verwendet werden, und der Quellcode sollte für viele eine gute Basis sein. Habe Spaß!

Wörter: Dan Nearne

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 245.