Sign in with MetaMask
Main game lobby
Placing bet after joining game
Waiting for all players to place bets
Another deathmatch player
Winner notification message
Game server smart contract transactions

Inspiration

With the advent of Blockchain technology an incredible new world of financial services are emerging. One of these new types of services is known as "GameFi". GameFi can refer to several different aspects of decentralized game finance. However, for the purpose of this project I focused on the incentive of earning cryptocurrency by battling other players in Quake deathmatches.

What it does

In 2013, an incredible developer created WebQuake an HTML5 WebGL port of Quake. This awesome software enables players to directly play Quake inside the web-browser.

WebQuake provides multiplayer capabilities by exposing a JavaScript client/server using websockets & JSON Web API endpoints for obtaining sever/player information in real-time.

This project has modified the original WebQuake source code to include a new Fantom module enabling the ability to interface web3 connected wallets directly into the real-time game. This enables players to compete against each other for cryptocurrency "FTM" (the native currency of the Fantom blockchain).

Each player deposits the required bet amount (dictated by the smart contract). Once the required minimum number of players have joined the game server, the deathmatch starts. The first player to reach the "frag limit" (total kills) automatically wins the game. When this occurs all of the FTM players deposited within the smart contract is instantly paid to the winning address. The entire process is facilitated on the frontend with a web application "game lobby" providing in-game overlay components (all built with Vue.js) ontop of the WebQuake browser client injected canvas element.

How I built it

WebQuake provides an incredible foundation to hack on since it provides the underlying multiplayer networking support and the ability to run an entire game client directly from within the browser. If the player has a compatible modern browser e.g Chrome, they are ready to play.

Fantom blockchain provides ultra-fast transaction confirmations coupled with super-cheap fees. More importantly, the Fantom blockchain is EVM (Ethereum Virtual Machine) compatible meaning developers can write smart contracts using the popular Solidity programming language.

Since Solidity was inspired by other popular programming languages like JavaScript, it has grown to become one of the pre-dominant smart contract programming languages for decentralized application development "dApps".

For users to interact with EVM compatible blockchains (e.g: Fantom) they need a software cryptocurrency wallet. One of the most popular wallets is MetaMask. It allows users to access their wallet through a browser extension or mobile app, which can then be used to interact with decentralized applications Source: Wikipedia.org.

To interact with MetaMask wallet, different JavaScript libraries have been developed. This enables interfacing with the connected users wallet and ultimately with decentralized application (dApp) smart contract code running on the associated blockchain network. For this project, the application code interfaces with the popular web3.js JavaScript library.

With all of that said, we can distill the core building blocks of the project into three separate subsystems:

WebQuake client / server
MetaMask wallet
Fantom blockchain

How does it work

Each player visits the dApp frontend client inside a desktop browser.
Each user connects to the site with MetaMask. The MetaMask should be configured to the same blockchain network as the /dApp and /WebQuakeServer. In other words, if you deployed the smart contract to the Fantom testnet, and the dApp and WebQuakeServer are also using the Fantom testnet, then all of the players using MetaMask would also need to be configured to connect to the Fantom testnet RPC. Here are steps from Fantom on adding a custom RPC to MetaMask.
For each player to access the game you will need funds to deposit into the smart contract. Without this you cannot join the game. If you are using the Fantom testnet you can get fake FTM testnet coins. These are great since they look and behave like real FTM but only work on the testnet. You can get free testnet FTM coins using the Fantom testnet faucet.
Once the player has entered the game, if they have not yet placed a bet on the smart contract they will be prompted by the game lobby client to do so. Once the transaction has a blockchain confirmation they will either be dropped directly into live deathmatch or will see a message indicating the server is waiting for other players to place bets/join.
Once in-game the game lobby client will show a small toolbar with the players wallet address indicating the account address is connected with MetaMask. In addition a small money bag jackpot icon will appear in the top right corner of the game with the total FTM locked in the smart contract. This is the total amount that players are trying to win. In addition the players abbreviated wallet address will be automatically prefixed next to the player name directly within in-game players list.
The server is configured for a fraglimit. In traditional Quake terms, "frag" means "kill". If the server fraglimit is set for a value of 10 then the player who first gets 10 "frags" will win the game and the funds will be instantly released from smart contract and sent to the players address. When the game ends each player will get a final game result in-game notification message. The notification message will indicate to the player if they won. The message will also provide the on-chain Fantom transaction id of the funds released to the winning players wallet address.
When the user has closed this message, they will automatically be sent back to the main game lobby. Here they can join a new game. As of now whenever the game ends the server will automatically close its process with an exit code of 100. The usage of a process exit code of 100 is non-standard to traditional exit code statuses. However, for this project, 100 denotes "GAME OVER RESTART WEBQUAKE SERVER". The exit code auto respawns a fresh WebQuake server process.

This is currently done to wipe all server-side state after the game is completed. This was the easiest way to keep things clean after each game is concluded. In addition, it provides a similar behavior to old style arcade games that restart after the game is over. This restart functionality was easily implemented inside the /WebQuakeServer/server.js. You will notice the usage of the native spawn method part of the node.js runtime library chid_process.

Challenges I ran into

The time-consuming part of this project was reviewing the original WebQuake port source code to better understand the best code entry points for making relevant modifications.

Accomplishments that I'm proud of

Fusing a classic game like Quake with modern blockchain technology like Fantom is awesome! I'm proud of being able to make something like this. Most importantly people will have fun!

What I learned

The biggest takeaway from this project was experiencing how fast Fantom can process transactions while also offering super low transaction fees. I had been turned off in the past using Ethereum (since its so slow and expensive). I now have a renewed interest in further developing using a blockchain like Fantom since it has EVM support. It makes the entire process smooth and pleasurable.

What's next for Fantom Web3 Quake

At the moment this project was purely for my own intellectual curiosity, fun, and creative exploration into the Fantom ecosystem. It was developed specifically for this hackathon. Next steps will depend entirely on any organic interest this project may or may not garner from the broader community.