Mobile Wizard

Project Demo

Youtube link: https://www.youtube.com/watch?v=_yBl1-YVUmw

Introduction

Mobile Wizard is a web based 2-player street fighter like game that utilizes mobile browsers as player controllers.
Controller inspired by Nintendo Switch and mechanics inspired by Harry Potter wand dueling games, 2 players will fight to their
deaths by casting spells at the other player. The game host will show the health bars of the players on a computer browser
like street fighters.

Live Demo

A live demo is available at https://game.projectmobilewizard.com.

Documentation

Documentation is available in Postman

Project Contributors

Cho Yin Yong, Zhili Pan, Guo Bin Liu

Beta Version key features

In the beta version, a game host (on a computer) will be able to host a game room for two players to join.
Two players will be able to join through their mobile browsers and prepare to duel.

The game host’s screen will be able to show the health bar of the two players.
When the game starts, the players can swing their phones to cast spells,
and actions will cause damage to the other player, or prevent damage from the other player.

At the end of the game, some interesting statistics of the game such as the damage done by each player
will be shown to the player through the host screen.

The application will be easily deployable through a docker compose script with automatic certificate renewal with LetsEncrypt and nginx.

Final Version additional features

Ability to join a room through a unique room ID automatically generated, and have the backend store the peer ids using Redis.

For convenience, a QR code is generated for each room so players can scan the QR code to join a room.

Players can save their data or change their nickname through authenticating with Firebase.

In addition to the healthbar shown in the host screen, 2D sprites corresponding with the action made by each player will also be shown. (strike, throw, defense, hit, death)

Error tracking with Sentry. PWA-ify frontend Angular app.

Technologies

• Flask - Backend Webserver.
• PostgreSQL - DMBS of choice to store information about players and the game session.
• Angular - Framework responsible for client routing and frontend interactions.
• Docker - For packaging the application for deployment at ease.
• Firebase - For third-party authentication
• Redis - In memory data store
• PeerJS - WebRTC Peer to peer javascript library
• PeerServer - Broker connections between PeerJS clients.
• Nginx - Web serving, reverse proxying, caching, load balancing
• LetsEncrypt - Free, automated certificate generation and renewal
• Cloudflare - Our Content Delivery Network and DNS Management Tool
• Phaser - Javascript Game Engine to render characters on screen.
• Sentry - Error Tracking Software for production.

Top 5 Technical Challenges

1. WebRTC Real-time communication - Synchronizing the game state between the host and the players.
2. Capturing and processing motion - Translate the motion received by the mobile browser[1] to an actual action.
3. External API - Learning how to integrate external APIs into our application.
4. 2D Graphics - Rendering sprites onto the host screen using Phaser.
5. Deploy ready application - Have everything packaged with Docker (reverse proxy, compiling assets, load balancing etc)