Ulrich-Matthias Schäfer und Wout Fierens haben am 7. April 2017 eine Anleitung für ein Pong-Spiel mit SVG.js veröffentlicht. Der Originalbeitrag auf CSS-Tricks erklärt, wie SVG-Elemente und JavaScript gemeinsam ein kleines Browser-Spiel bilden.
Spielfeld, Schläger, Ball und Punkteanzeige werden als Vektorelemente angelegt. Die Spielschleife nutzt requestAnimationFrame und übergibt die vergangene Zeit an eine Update-Funktion. Diese bewegt den Ball und prüft Kollisionen.
Eingaben, Gegnerlogik und Farbeffekte
Die Anleitung behandelt außerdem Tastatureingaben, eine einfache Gegnersteuerung, das Zurücksetzen nach Punkten und Farbverläufe. Sie führt schrittweise von der Darstellung zur Spiellogik. Ein eigener Laufzeit- oder Kompatibilitätstest der Redaktion liegt nicht vor.
Anders als beim zuvor vorgestellten C#-Pong-Projekt mit Bridge.NET setzt dieses Lehrbeispiel direkt auf JavaScript und SVG. Es dokumentiert den Bibliotheks- und Codeansatz von 2017, keine geprüfte Anleitung für aktuelle SVG.js-Versionen.