I turned my terminal game into an isometric world (plain SVG + Vue, no game engine)
DockerLinux is my free browser game for learning Linux and Docker in a simulated terminal. Until this week it was one terminal and a list of levels. Now every level is a building on a map of islands: finish one in the terminal, and the path to the next lights up while Byte, our pixel penguin, walks there. No canvas, no game engine. It's SVG drawn by Vue, and a small pure-JavaScript module that…
This is a story about creating an isometric world for a terminal-based game using Docker, Linux, SVG, and Vue.js. The game, called DockerLinux, aims to teach users about Linux and Docker through a simulated terminal environment. The map consists of islands, each representing a different concept or level, such as Linux or a Harbour.
The levels are determined by a small amount of data, which includes the location of the level on the grid and the specific topics it covers. The SVG drawings are generated using data, which allows for a consistent map and enables the game to check for correctness. Paths between levels are automatically created using Dijkstra's algorithm on the grid.
The isometric view is achieved by transforming the grid coordinates into screen coordinates using simple mathematical functions. The game uses a thin wrapper module to decide what goes on each level, and the missions are provided as data instead of code, making it possible to check if the player has completed the tasks correctly without the risk of crashing the game.
The game is available at dockerlinux.com, where users can access 17 levels for free in English and Portuguese. Two islands are still not fully developed.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
