Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Denis Potschien 23. Februar 2015

Blockrain.js für jQuery: So bauen Sie sich ein Tetris für die eigene Website

Kein Beitragsbild

In den 80er Jahren war Tetris ein überaus erfolgreiches Computerspiel, welches auch noch in späteren Jahrzehnten, vor allem dank Nintendo und dem Gameboy weltweit bekannt und beliebt blieb. Heute gilt Tetris als Klassiker unter den Computerspielen und wird weiterhin oftmals nachgeahmt. Mit der JavaScript-Adaption „Blockrain.js“ kann sich nun jeder das Spielvergnügen und den Flair der 80er auf seine Website holen. Dabei gibt es viele Möglichkeiten, Funktionsumfang und Aussehen des Spiels nach den eigenen Wünschen anzupassen.

blockrainjs
Klassisches Theme von „Blocktrain.js“

„Blocktrain.js“ mit jQuery einbinden

„Blocktrain.js“ ist als Plug-in für jQuery konzipiert. Das Download-Paket umfasst eine Stylesheet- sowie eine JavaScript-Datei, die das Spiel als Plug-in enthält. Eine Demo-HTML-Datei ist nicht vorhanden; aber die Einbindung ist spielend einfach. Innerhalb des Bodys wird ein „<div>“-Container platziert, dem eine beliebige Größe und Klasse oder ID zugewiesen wird. Anhand der Klasse oder ID wird der Container dem Plug-in zugewiesen.

Anschließend werden jQuery und das Plug-in eingebunden und das Plug-in aufgerufen.

<div id="spiel" style="width: 450px; height: 500px"></div>

<script src="jquery.min.js"></script>
<script src="blockrain.jquery.js"></script>

<script>
  $("#spiel").blockrain();
</script>

Der „<div>“-Container wird genutzt, um darin das Spiel per HTML5-Canvas darstellen zu können. Dabei passt sich das Spiel automatisch der Breite und Höhe des Containers an. Auch relative Angaben sind möglich, um das Spiel beispielsweise der jeweiligen Größe des Displays anpassen zu können. Die Stylesheet-Datei ist für das eigentliche Spiel nicht nötig, da per Canvas die Gestaltung der Spielfläche übernommen wird. Allerdings werden der „Play“-Button sowie die Einblendung der Punkte per CSS gestaltet.

blockrainjs_gameboy
„Blocktrain.js“ mit Gameboy-Theme

Hat man alles richtig gemacht, sieht man die klassische Tetris-Oberfläche und kann mit dem Spielen loslegen. Gesteuert wird „Blockrain.js“ mit der Tastatur.

Funktionalität anpassen

Die Funktionalität des Spiels  lässt sich dank zahlreicher Parameter individuell anpassen. Wer beispielsweise nicht selbst spielen will, sondern den Computer spielen lassen möchte, kann das Spiel quasi im Autopilot-Modus laufen lassen.

$("#spiel").blockrain({
  autoplay: true,
  autoplayRestart: true
});

Die beiden „autoplay“-Parameter sorgen dafür, dass der Rechner das Spielen übernimmt und bei Spielende wieder ein neues Spiel beginnt.

Auch den Schwierigkeitsgrad des Spiels kann man dank zweier Parameter individuell festlegen. Zum einen gibt es mit „difficulty“ die Möglichkeit, das Spiel „normal“, „nice“ oder „eval“ zu spielen. Die drei Spielvarianten unterscheiden sich durch die Beschaffenheit und Anordnung der Blöcke. Außerdem kann die Spielgeschwindigkeit per „speed“-Parameter eingestellt werden.

$("#spiel").blockrain({
  difficulty: "eval",
  speed, 50
});

Die Beschriftung der Buttons und Texte ist ebenfalls frei definierbar. So ist es möglich, das Spiel komplett auf Deutsch umzustellen. Insgesamt gibt es ohnehin nur fünf verschiedene Texte, die übersetzt werden müssen.

$("#spiel").blockrain({
  playButtonText: "Spiel starten"
});

Aussehen mit Themes oder eigenem Style individualisieren

Möglicherweise ist die klassische Tetris-Oberfläche nicht jedermanns Sache. Daher gibt es gleich sieben Themes mit unterschiedlichem Aussehen für „Blockrain.js“. Ein Theme wird einfach per Parameter ausgewählt.

$("#spiel").blockrain({
  theme: "candy"
});

Wem das noch nicht reicht, der kann das Aussehen des Spiels auch komplett selbst designen. Die Farbe der Blöcke, sowie des Hintergrunds, können ebenso definiert werden, wie die Farbe und Beschaffenheit der Linien und des Hintergrundrasters.

blockrainjs_candy
„Candy“-Theme

Je nach Seitenverhältnis des „<div>“-Containers wird die Spieloberfläche gegebenenfalls arg verzerrt dargestellt. Allerdings ist es mit „blockWidth“ möglich, die Anzahl der Spalten festzulegen.

$("#spiel").blockrain({
  blockWidth: 20
});

Alternativ kann man auch eine feste Größe für die Blöcke definieren. Dann wird die Anzahl der Spalten anhand der Breite des Spielbereichs errechnet.

$("#spiel").blockrain({
  autoBlockWidth: true,
  autoBlockSize: 10
});

Im Beispiel sind also alle Blöcke jeweils zehn Pixel groß.

Fazit und Link zum Beitrag

„Blockrain.js“ ist eine schöne Spielerei – im wahrsten Sinne des Wortes – und steht unter der bekannten MIT-Lizenz jedem zur freien Verfügung.

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar

  1. Ohh… Was für ein Spiel das war! Ich hab dabei so viel Zeit verloren :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.