A basic implementation of Flappy Bird with real-time multiplayer using Hathora

Overview

Screen Shot 2022-06-02 at 4 38 30 PM

Multiplayer Flappy Bird with Hathora

A basic implementation of Flappy Bird with real-time multiplayer

Overview

This is a simple game of Flappy Bird except up to 4 people can compete to see who gets to the end first while traversing through gaps between pipes.

Running into the ground or a pipe will reset you backwards giving your opponents a chance to take the lead.

Try it out here! Send the link to friends to have them join.

Latency Strategies

This game is server authoritative and utilizes client side prediction to provide immediate feedback to the player. Client and server are forced to simulate at a fixed 60fps.

For remote players, dead reckoning is used to simulate where each player is likely to be in real-time. This will not always be accurate and a very basic mid-point nudge is used to move remote players towards their true position.

For the local player, the game is simulated immediately using the same logic as the server. But because the client will always be ahead of the last known server state, client side replay is used to approximate the true position of the local player each time server state is received.

In a perfect world, the replayed position is the same as the client's predicted position and no correction will be applied. But when there is a difference, the same basic mid-point nudge used for remote players is also used to move the local player towards their true position.

You can find the dead reckoning and client side replay implementation in client/web/store/server.ts which is a mobx state store. The normal game simulation is in client/web/scenes/GameScene.ts.

Pressing the d key will toggle a debug view of a filled in rectangle representing the last known server position of each player and a black outline rectangle representing the last predicted position.

Improvements & Issues

High latency conditions will still appear jittery due to the simple mid-point nudge as players get instantly corrected by at least half the distance between where they are and where they should be. This can be mitigated by using some form of interpolation, adjusting things like velocity, or even slowing the client simulation down until things catch up.

Dropped or lost input packets are also not handled in this example. The client sends a ping that includes whether the space key was pressed or not every frame. This input information is also stored locally for client side replay. The server does not currently keep a list of unprocessed inputs and will always processes the latest input data on the next frame.

This means that what and when input is processed on the server vs client is going to have more difference than if we also processed input per frame on the server.

The symptoms of this can be seen in cases where the client thinks it has collided with the floor or pipe but the server says it didn't happen and then a correction occurs. The reverse can also happen where the client thinks it avoided a collision but the server says otherwise.

Lost inputs can also be seen when a large correction occurs because while the client simulated pressing space, the server didn't get it and so the authoritative position is one where the player kept falling.

Check out this GDC talk for more on how games like Overwatch handle these issues.

Getting Started

This project uses Hathora and requires the hathora cli.

Clone the repository and run:

hathora dev

Head over to http://localhost:3001 to see a React app to create a new game or join an existing. Either option will end up loading a Phaser 3 client game.

The Hathora prototype UI will be running on http://localhost:3000.

License

MIT License

You might also like...

Spacecraft - multiplayer code editor & terminal

Spacecraft - code, create and hop together. Inspiration Cloud developer environments are the new cool. Services like Gitpod & Github Codespaces have h

Dec 21, 2022

API, web and mobile application for finding a partner to play online multiplayer games.

API, web and mobile application for finding a partner to play online multiplayer games.

Duo Finder Duo Finder is a simple mobile and web application for gamers looking for partners to play a game with. It's basics was developed during the

Sep 20, 2022

A simple library for Node and the browser that allows you to rapidly develop stateful, socketed multiplayer games and web applications.

gameroom.js Overview gameroom.js is a simple library for Node and the browser that allows you to rapidly develop stateful, socketed multiplayer games

Nov 3, 2022

An online multiplayer IO-like game that tests your general knowledge.

An online multiplayer IO-like game that tests your general knowledge.

Source code for insort.app Insort is a game where you sort a deck of cards by some attribute. It's main components are React, Socket.io, Express and P

Dec 10, 2022

We are a group of videogame URJC students making a brand new Phaser3.0 browser multiplayer game. Come and support us!

COOKIE MAYHEM - JUEGOS EN RED Este proyecto está sujeto a cambios. Somos un grupo de estudiantes de Diseño y Desesarrollo de Videojuegos en la Univers

Dec 19, 2022

It is a very basic implementation of how blockchain works, mainly how the bitcoin blockchain.

How to run this program npm install node core/blockchain.js What is this It is a very basic implementation of how blockchain works, mainly how the bit

May 9, 2022

Basic Implementation of a Contract Wallet in Solidity. The owner can transfer Ether/ERC20 and execute transactions via low-level calls.

Contract Wallet Basic Implementation of a Contract Wallet in Solidity. The owner can transfer Ether/ERC20 and execute transactions via low-level calls

Jun 18, 2022

🚀AI拟声: 5秒内克隆您的声音并生成任意语音内容 Clone a voice in 5 seconds to generate arbitrary speech in real-time

🚀AI拟声: 5秒内克隆您的声音并生成任意语音内容 Clone a voice in 5 seconds to generate arbitrary speech in real-time

English | 中文 Features 🌍 Chinese supported mandarin and tested with multiple datasets: aidatatang_200zh, magicdata, aishell3, and etc. 🤩 PyTorch work

Dec 29, 2022

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

2FA-Solver A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes. It can be used as an offline web page b

Dec 7, 2022
Owner
ourcade
Game development for people who love games. ❤️🎮🤗
ourcade
A "Basic-to-Lisp" compiler. But Basic is not real Basic, and Lisp is not real Lisp.

Basic2Lisp A "Basic-to-Lisp" compiler. But Basic is not real Basic, and Lisp is not real Lisp. Syntax Print-Sth Put some-value to standard output. PRI

Hana Yabuki 5 Jul 10, 2022
A serverless, real-time, wordle-inspired, multiplayer game.

fivebysix.com A multiplayer, worlde-inspired web app. Demo Technologies 100% TypeScript (including IAC via CDK) Vite React / Redux AWS AppSync Dynamo

Evan Rose 35 Jan 1, 2023
🐦 Flappy Dronie

?? Flappy Dronie Created for the Dronies Contest (Category: Coding/Web) ?? Design The design is heavily inspired by droniesnft.com as this is a fan pr

BennoDev 19 Nov 10, 2022
A quotaless, partially limitless, and fast Node.js Multiplayer Piano server implementation that efficiently makes use of the protocol and uWebSockets.js

speedymppserver A quotaless, partially limitless, and fast Node.js Multiplayer Piano server implementation that efficiently makes use of the protocol

Lapis 4 Oct 14, 2022
Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the DOM and adding basic events.

Awesome Books Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the

Didier Peran Ganthier 6 Dec 20, 2022
BASIC is a web application contains basic applications related to studies, love, health, weather, productivity. This project aim to simply the user's life in anyway.

BASIC is a web application contains basic applications related to studies, love, health, weather, productivity. This project aim to simply the user's life in anyway. Supported by all operating system, need an internet connection for working properly.

IRUTHAYA SANTHOSE I 1 Dec 19, 2021
This project will be a basic website that allows users to add/remove books from a list. The main objective is to understand how to use JavaScript objects and arrays and dynamically modify the DOM and add basic events.

Awesome-books Awesome Books This project will be a basic website that allows users to add/remove books from a list. This project is part of the Microv

Aleksandra Ujvari 10 Oct 3, 2022
An api named Crypto Versus, a multiplayer versus hacking simulator. Project still in the making!

Crypto Versus A Multiplayer Versus Hacking Simulation Inspired by the Steam game Bitburner Table of content Possible ouputs for all endpoints routes /

null 3 Jan 29, 2022
Perfect interpolation for multiplayer cursors.

perfect-cursors Perfect interpolation for animated multiplayer cursors. Used in tldraw. ?? Love this library? Consider becoming a sponsor. Installatio

Steve Ruiz 452 Dec 15, 2022
rGUI is a GUI Library made for the GTA Multiplayer Modification RAGE:MP

rGUI - RAGE:MP A multifunctional GUI Library made for the GTA Multiplayer Modification RAGE:MP which is easy to use and understand. Will be updated fr

revenant. 11 Jan 3, 2023