DO Hackathon Runner game submission (DevLog #3)
Tags: dohackathon, javascript, gamedev
Published: 2021-01-10 23:14:24

---
title: DO Hackathon Runner game submission (DevLog #3)
published: true
description: My submission to the DigitalOcean App Platform Hackathon!
tags: dohackathon,javascript,gamedev
series: do-hackathon-runner
---

## What I built

A platformer game featuring top lists and passive multiplayer.

### Category Submission: 

Random Roulette

### App Link

[https://hackathon-runner-cztm4.ondigitalocean.app/](https://hackathon-runner-cztm4.ondigitalocean.app/)

### Screenshots

![game3](https://dev-to-uploads.s3.amazonaws.com/i/buubb9opvpnnl5gmzfls.gif)

![localhost_3000_](https://dev-to-uploads.s3.amazonaws.com/i/v2rtuicu6n6d94uw5wp3.png)

![Screenshot 2021-01-10 at 21.31.54](https://dev-to-uploads.s3.amazonaws.com/i/w418rs6xamrhwamsscfy.png)
 
### Description
 
HACKATHON RUNNER is small platform game built with React, Phaser3, NestJS, Postgres and Redis. Basic at its core it features game play mechanics such as collectible gems, bouncing pads, water, wind, keys and doors. It also has top lists over who can complete the level the quickest with different amount of completion.

The most technically interesting feature however is its _passive multiplayer_ which means that when you play you can see every other player who are playing at the same time. They can't affect your game but maybe you'll find inspiration for a quicker path to get on that top list.

### Link to Source Code

[https://github.com/anton-g/hackathon-runner](https://github.com/anton-g/hackathon-runner)
(I tried adding the "Deploy to DO"-button but seems it doesn't work for my app with [these limits](https://www.digitalocean.com/docs/app-platform/how-to/add-deploy-do-button/)?)

### Permissive License

[MIT](https://github.com/anton-g/hackathon-runner/blob/main/LICENSE)

## Background

I wanted to build something for this hackathon but had zero ideas so I started playing around with Phaser and suddenly inspiration came, which then turned into this. I expand a bit more on this in a [previous post](https://dev.to/awnton/do-hackathon-runner-devlog-1-28pd).

### How I built it 

The game consists of four components: The game client, the server, a Postgres database and an Redis instance.

![Untitled-2021-01-10-2045](https://dev-to-uploads.s3.amazonaws.com/i/q8hoyc0gi7svu3u8cpxz.png)

The game client is built with React and uses Phaser3 as its game engine. I had never used Phaser before this project and found it surprisingly easy to get something up and running. There's so much resources in the development community that I rarely ran into an issue that I got stuck on. It's hosted as a static page on DO since that is just what it is. All communication with the server is done with WebSockets and REST calls.

The server in itself is built with Node and the [NestJS](https://nestjs.com) which I think it's fantastic. It comes with **a lot** of out of the box functionality for building APIs, setting up web sockets and communicating with databases. It's hosted as a Web Service on DO.

Finally I used a Postgres Dev Database for persisting the top lists and then a Redis instance to support horizontal scaling without segmenting the passive multiplayer in the game.
 
I found that specifying the entire app in the [App Specification](https://www.digitalocean.com/docs/app-platform/references/app-specification-reference/) worked really well. Previously when I've built similar things there's always been a hassle to handle environment variables but with the bindable variables it worked like a charm. The only thing I ran into was that I didn't realise I had to create a Redis DB cluster manually since it couldn't be done with the `doctl` CLI, but other than that: 👏👏👏


### Additional Resources/Info 

Building this wouldn't have been possible without a lot of things, including the incredible community that we developers have around us. I've probably missed something below, but here's a lot of resources I've used:

- [ReactJS](https://reactjs.org)
- [Phaser3](https://phaser.io/phaser3)
- [NestJS](https://nestjs.com)
- [Socket.IO](https://socket.io)
- [Tiled](https://www.mapeditor.org) - Map editor
- [KenneyNL](https://kenney.nl) - Free graphics
- [Atlas Packer](https://gammafp.com/tool/atlas-packer/) - Tool to create sprite atlases
- [tile-extruder](https://github.com/sporadic-labs/tile-extruder) - Tool that fixed an annoying bug with some sprites
- [Snapshot Interpolation](https://github.com/geckosio/snapshot-interpolation) - Library that assists with "snapshot interpolation", a technique to reduce lag in multiplayer games.
- [Phaser3 and Tiled tutorial](https://stackabuse.com/phaser-3-and-tiled-building-a-platformer/)