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.
Go to the website and play by clicking/tapping left or right side of the screen to move the ball.
Link to Code
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
gulpfor one-time production build with minifying and obfuscating
gulp watchfor continuous watching for changes (useful for development)
To launch the game, open created
Build process is poorly configured, so after adding new file to
src your need to restart gulp.
bundle- creates uglified and obfuscated
distdirectory from all
copy-html- copies all
copy-css- copies all
How I built it
The idea for DotFall is super simple so I decided to learn some basic DevOps1, 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 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" 🙂
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.
DevOps only. The code itself is a mess 😅 ↩
Top comments (0)