For the 10th anniversary of Monero and the meetup v0.3 in Offenbach, Germany. We came up with a neat little idea to give the participants a little celebratory Monero-experience. Read about how the idea came to be, how the application works and even give it a try yourself!
Give this game a few seconds to load. Then you can send any small amount to the QR code or click here to open your device monero wallet to make some coins drop!
Much of this came about by using resources that were just naturally around:
index.html, load the images there and style them with CSS.And that is pretty much how the idea came to be! But enough high level talk, let's see how the final result was implemented.
First, I had a look at littleJS, but was not able to wrap my head around even just loading and placing the background images. So, the next choice was Phaser, which is a very powerful game engine for browser games.
You can check out the entire codebase for the implementation.
The game itself is very minimalistic:
Then we "marry" it with monero-ts which allows us to use a full Monero wallet in the browser. Yes, this means that right now, you have a full Monero wallet running in your browser! Webassembly for the win!
The Monero wallet is also minimalistic. All we need is to initialize it and notify us about newly received transactions. For this purpose a view-only wallet is fully sufficient, so we don't expose the spend key.
The final piece was to make a bridge from the outputReceived listener of the Monero wallet into the game. The Phaser game scene allows us to set a basic Javascript eventListener on the game scene. This means that in the wallet listener, we can emit the event for the game scene.
That's all from a high-level overview. If you are interested in the details, make sure to check the repo.
Like mentioned before, the game features a full (view only) Monero wallet. Upon page load the javascript and webassembly code for this wallet are loaded onto the clients browser (i.e. what you are looking at right now). The wallet is then initialized with hard-coded credentials and automatically starts the sync process.
It is a simple concept, but the implications are powerful. This technology allows for having easy, non-custodial Monero-experiences on the web! Think about this.
Also, the potential of browser games that feature a built in Monero wallet are limitless. I am not a fan of the "pay to win" or "pay to play" mechanic, but nevertheless, having a virtual arcade machine where you toss in your Moneroj has some kind of charm to me.
Finally, we bundle the game project (i.e. compile typescript to minified javascript, and bundle the game assets). The result of the "build" step is a dist/ directory, containing all the files we require to run the game. Check out this blog article if you want to dive deeper in how to bundle a Phaser game for later consumption.
The entry for our game is the dist/index.html. Using an iFrame, we can integrate it into this website. All we do is place the dist/ folder into the public/ directory of the NextJS project.
Maybe this is an inspiration to you to start coding something with Phaser and Monero. Again, check out the repo for details and raise an issue if you have questions.