Trainline

Links

• See Live Trainline Demo.
• See it on GitHub.

Game description

In this game your task is to drive an increasing number of trains 🚆 to their respective stations.
The trains are color-coded and have to travel to the corresponding station with the same color.

Starting with the sixth level, all levels are created by a random generator. Therefore the level of difficulty does not increase with the progress but is pure randomness.

How to play

Some rails consist of switches that can be adjusted by clicking on them.
By setting the switches in the right position you can control the path of the train

Map Editor

The Map editor is currently still in the beta phase.
The rails cannot be rotated at the moment.

Random Map Generator

Any sequence of numbers can be entered in the upper text field.
This sequence of numbers is used to create a random rail network

The Code

Since this was my first game project, I faced a lot of challenges.
The first decision you had to make was which render engine to use.
In the end I decided to use Pixi.js
pixijs

A lot of things had to be used to get things running in the first place.
I will now go into some of these challenges in more detail

Spritesheets

A sprite is a single graphic image that is incorporated into a larger scene.
When you put many sprites into a single image, you get a spritesheet,
Thi improves the game performance, reduces the memory usage and speeds up the startup time of the game.
To generate a Sprite Sheet i used the Free Sprite Sheet Packer.

load the Spritesheet in Pixi

.. description follows

move an object along a path

To move along a path you can use some great libraries.
As a challenge I implemented this in Vanilla JS

Implementation

.. description follows