About RPC Battleground👊
Start MenuRPC Battleground is a web-based game experience built with Svelte. You will compete with the monsters in the game by playing the rock paper scissor game.
One of the cool features of this game experience is that it uses your device's camera to detect your hand gesture in real-time. When it's your turn to make a move, you present your hand to the camera. The game will automatically detect which move you want to make.
Built in svelte
This is my first project which is completely coded in Svelte. When choosing the right tech stack, I found Svelte is very suitable for building this project, as Svelte is not powered by a virtual dom. One thing about the game experience is that the elements on the DOM should be animated and transformed very often without compromising the performance. Svelte detects which part of the state variable will be controlling which part of the DOM elements. Doing it without a virtual dom makes this game experience very smooth and enjoyable.
The project is open sourced, check out the soruce code here
Central state management
States play an important role in video games. It is a very good practice of having a single source of truth for each part of the game elements to share the same copy of states and data. In that way, the flow of the game can be very consistent.
For this project, I use XState to management all the states in the game experience. XState also works great with Svelte. Defining all the states of the game, as well as what are the important data that need to be tracked upfront helps me to have a more clear overview of everything that is going to happen in the game. And the UI (in this case, the Svelte components) could be programmed based on the change of these states.
Manage game state with XStateBuilt-in accessibility features
One of the main focuses of this project is to provide top-level accessibility features built in.
First, the player could choose if they would like to turn off the gesture detection feature and interact with the game with the mouse and keyboard.
The game also includes a voice-over feature. I found clearly defining the aira-properties for each dom element is not enough for a great experience for someone who would use the built-in screen reader feature in modern browsers. It can be a lot of things going on during one match. What move did the competitor make? Who wins the match? Simply using aira tag only helps to understand which elements can be interacted with on the DOM. So I use Modern browsers SpeechSynthesis API to read out everything that happened during a match.
Eric Wei