Starting with DevOps on minigame project
Tags: octograd2020, githubsdp
Published: 2020-05-20 12:42:52

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## DotFall

DotFall is a super simple game inspired by an older mobile game, Rapid Roll (remake can be found [here](https://play.google.com/store/apps/details?id=com.eskimob.rr)). 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](https://dotfall.azurewebsites.net/) and play by clicking/tapping left or right side of the screen to move the ball.


## Link to Code

{% github Voodu/dot-fall %}

## How I built it
The idea for DotFall is super simple so I decided to learn some basic DevOps[^1], 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](https://phaser.io/). 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](https://www.google.com/) and [cousin](https://stackoverflow.com/) I made Phaser work with TypeScript.

The second thing I was quite satisfied with was configuration of [gulp](https://gulpjs.com/) - 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! 😁

![Success kid](https://i.imgur.com/AqU2HEY.jpg)

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

[^1]: DevOps only. The code itself is a mess 😅

## 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](https://azure.microsoft.com/services/app-service/static/) 🆕. It does most of the things I did above out of the box.

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)