Starting with DevOps on minigame project

DotFall

DotFall is a super simple game inspired by an older mobile game, Rapid Roll (remake can be found here). You just fall down and try to reach the highest score you can! Watch out, because the longer you play, the faster you fall!

I did it as a part of Faculty Open Day at my University. The game was a small competition. Its participants were supposed to get the highest score, take a snapshot of it and win some small prizes.

Should work well on desktop browser as well as mobile.

Demo Link

Go to the website and play by clicking/tapping left or right side of the screen to move the ball.

Link to Code

Voodu / dot-fall

Simple 2D game in Typescript using Phaser.io

DotFall

Simple game written using Phaser 3 and Typescript Main aim is to fall with the ball as long as you can.

To build the game, run npm install in project root and then

• gulp for one-time production build with minifying and obfuscating
• gulp watch for continuous watching for changes (useful for development)

To launch the game, open created dist/index.html
Build process is poorly configured, so after adding new file to src your need to restart gulp.

Gulp tasks

• bundle - creates uglified and obfuscated bundle.js file in dist directory from all .ts files in src
• copy-html - copies all .html files from src to dist
• copy-css - copies all .css files from src to dist
• copy-assets - copies assets folder from src to dist
• copy-other - copies .png,.xml,.ico,.svg,.webmanifest files from src to dist (favicon files)
• copy-all - runs copy-html…

View on GitHub

How I built it

The idea for DotFall is super simple so I decided to learn some basic DevOps¹, CD and other auto-magic stuff with that. I also wanted to make it bug-free and really playable by the users (not some I-will-fix-that-later project).

The game itself is written in Phaser framework. Natively it's written in pure JavaScript and personally I prefer using TypeScript. So that's my small success #1 - with help from our uncle and cousin I made Phaser work with TypeScript.

The second thing I was quite satisfied with was configuration of gulp - I've never used it before, but after some messing around with it I managed to successfully use it in the project to automate all the building, bundling etc.

After everything was coded and worked more or less okay, it was time for publishing. I wanted to make it as smooth as possible. First of all I'd set up an App Service on Microsoft Azure to host the content of my game. The best part of it was the ease of usage - I could just publish the changes directly from my VS Code and it worked!

The last step was to have some sort of CD. As I'd used Azure for hosting, I've decided to use Azure Pipelines for easier integrations. After some struggle, playing with YAML files and other weird configuration it finally worked! After pushing changes to the master branch, code was processed by the pipelines (gulp bundling included), then automagically detected by Azure and reflected on the live page. Full success! 😁

To complete the tech stack topic - I'm not that console-freak type, so I've used GitKraken to help me with "gitting around" 🙂

Additional Thoughts

I have a small challenge for you - try to break the game and set the high score by hand! The game has no backend (I promise!) so the score is somehow stored on your machine. I tried the manual modification to be as hard as possible (to prevent cheating in the competition), but, obviously, it can't be prevented completely by client side-only application.

Currently, if you want to build something similar (static website with CD from GitHub), I'd definitely recommend checking out 🆕 Azure Static Website 🆕. It does most of the things I did above out of the box.

---

1. DevOps only. The code itself is a mess 😅 ↩