astrid dot tech

Collision Zone

IO game where you crash trucks into each other

June 2019 - August 2019

javascript typescript html css phaser-js Bootstrap website Websockets cpp Node.js AWS

Site:

Source:

An IO game that involves cars crashing into each other. It used to be located at collision.zone, but I have shut it down due to hosting and domain name costs (why are .zone domains $30/yr!?). However, I am considering bringing it back (possibly at collisionzone.astrid.tech?)

Here’s a GIF of some AIs playing the game against each other!

Technology Stack

Frankly, I made it this way as an excuse to finally have a polyglot project.

Instance Server

A server that runs a single instance of the game. Needs to be fast.

Matchmaking Server

Serves the static frontend and performs matchmaking. Speed is not as much of an issue here.

  • Language: TypeScript
  • Node.js
  • Express

Frontend

Technically part of the matchmaking server project, might consider moving it out for a decoupled frontend architecture.

  • Language: TypeScript
  • Phaser 3 Game Engine

The Protocol

There are three entities at play here:

  • The client, or the browser that the player is using.
  • The matchmaking server, a Node.js HTTP server.
  • The instance server, a C++ server that exposes a spectator socket and a player socket.

The general high-level flow is as follows:

  1. The client visits collision.zone. The matchmaking server gives the user:

    • a HTML page and tells them about what gamemodes are available
    • an instance server’s spectator socket to allow the client to see a game without interacting with it.
  2. The client begins matchmaking. The matchmaking server puts them in the matchmaking queue.

  3. When there is an open instance server, the matchmaking server gives the client that instance server’s player socket, and the client connects to that socket and starts playing.

During gameplay, the instance server’s sockets use a custom binary protocol to send game updates in order to reduce bandwidth as much as humanly possible. See this document for its specification.

Fun facts!

  • The initial prototype was created during HSHacks III back in 2017 under the name of “High Octane Elastic Snowploughs.” The backend was a Flask site serving a Socket.IO connection, and the frontend drew everything using a basic Canvas API,
  • After the hackathon, there were many incomplete rewrites of the project in various languages, including Java and more Python, until eventually I did it again in 2019 using this current stack.