Worms Remake als HTML5-Spiel

Das Spiel Worms, in dem sich zwei Parteien von Würmern bekriegen mussten, blickt mittlerweile auf eine über zwanzigjährige Geschichte zurück. Im Rahmen seiner Bachelorarbeit entwickelte Ciarán McCann ein Remake des Spieles. Geschrieben wurde das ganze in Typescript, welches in JavaScript kompiliert wird. Neben dem Tutorial bietet das Spiel einen lokalen Mehrspielermodus und einen Online-Modus. Letzterer kann leider im Moment nicht ausprobiert werden, da der dazu benötigte Server nicht läuft. KI-Gegner sind nicht vorgesehen, so das man zwangsläufig einen weiteren Mitspieler für eine Runde im Worms-Remake benötigt.

Das Worms Remake

Die Auswahl an Waffen und Fähigkeiten reicht nicht ganz an das Original heran; es sind insgesamt 9. Der Quelltext des Spieles ist auf GitHub zu finden. Er ist unter der Apache License in der Version 2 lizenziert und damit freie Software. Ausprobiert werden kann das Spiel auf der Seite des Autors.

Bauwerks- und Geometriegeneratoren für Minecraft

Auf der Suche nach einem Generator, für einfache geometrische Formen in Minecraft, bin ich auf die Webseite plotz.co.uk gestoßen. Dort gibt es Generatoren für Spheren, Elipsioiden, Tori und Bauwerke wie Observatorien, Leuchttürme oder Schneemänner.

Der Generator für den Wizard Tower

Je nach verwendetem Generator können unterschiedliche Parameter wie Größe, Stockwerke und ähnliches eingestellt werden. Anschließend kann man die erzeugten Geometrien nachbauen, indem man sie sich Schicht für Schicht anzeigen lässt. Dies ist vor allem bei Formen wie Kugeln oder elliptischen Körpern sehr angenehm, da die Fehlerquote dank der detaillierten Bauanleitung stark abnimmt. Geschrieben sind die Generatoren mit den Mitteln von HTML5 und JavaScript.

Freies HTML5 Soundboard

Für einen Pen & Paper-Abend war ich auf der Suche nach einem freien und technisch simplem Soundboard. Idealerweise sollte dieses auf HTML5-Techniken basieren. Ein Soundboard welches diese Kriterien erfüllte, wollte sich sich allerdings nicht finden lassen, so das ich selber tätig wurde. Herausgekommen ist ein simples und einfach zu konfigurierendes Soundboard.

Das Soundboard in Aktion

Zur Nutzung des Soundboard müssen die Soundclips in den assets-Ordner kopiert werden und dazu eine passende boards.json-Datei geschrieben werden. Ein Beispiel dieser Datei befindet sich im Repository. Anschließend kann das Soundboard im Browser genutzt werden. Soundclips können einzeln oder in einer Schleife abgespielt werden. Für jeden Clip lässt sich daneben die Lautstärke einzeln regeln. Auch das Abspielen von mehreren Clips parallel ist kein Problem. Zu finden ist das Soundboard auf GitHub. Lizenziert ist es unter der AGPL in der Version 3 und somit freie Software.

Zwischenablage aus einer Webanwendung heraus nutzen

Wer aus einer Webanwendung heraus etwas in die Zwischenablage kopieren möchte, der benötigte bis vor einiger Zeit dazu ein Schnipsel Flash. Mittlerweile lässt sich dies, ohne zusätzliche Plugins, in den meisten Browsern über eine entsprechende Web Api nutzen.

clipboardjs.com

Einfacher wird die Nutzung dieser Web Api mit der JavaScript-Bibliothek clipboard.js. Die Bibliothek welche sich seit September 2015 in der Entwicklung befindet, abstrahiert die Nutzung der entsprechenden Web Api. Damit wird es möglich, mit wenigen Zeilen, die Zwischenablage in einer Webanwendung zu nutzen. Der Quelltext der Bibliothek ist auf GitHub zu finden. Sie ist unter der MIT Lizenz lizenziert und damit freie Software.

Unterschiedliche Views in einer Single Page Application

Für ein kleineres Projekt habe ich vor einiger Zeit eine HTML5-Single-Page-Application entwickelt und stand dann vor dem Problem wie ich unterschiedliche Views innerhalb dieser Seite realisiere. Da ich möglichst ohne schwerfälliges Framework auskommen wollte, habe ich mich für eine Lösung mittels jQuery entschieden. Im HTML habe ich dazu mehrere Views definiert:

<div id="options" class="widget" style="display: none">
</div>

<div id="game" class="widget">
</div>

Der Inhalt des div-Elements mit der Id options ist dabei standardmäßig ausgeblendet. Nun kann die Ansicht der beiden Views mittels der Funktion switchView gewechselt werden:

switchView() {
	  
    if(this.activeView==this.Views.Game) {
        $("#game").css({"display": "none"});
        $("#options").css({"display": "block"});
        this.activeView = this.Views.Options;
    }
    else if (this.activeView==this.Views.Options) {
        $("#options").css({"display": "none"});
        $("#game").css({"display": "block"});
        this.activeView = this.Views.Game;
    }
}

In der Funktion wird das CSS der jeweiligen div-Elemente manipuliert. Dadurch wird die Sichtbarkeit der Blöcke gewechselt und man hat eine einfache View Umschaltung realisiert.