An open-source arcade of experimental web games that break the fourth wall of your browser. Play across multiple windows where actions in one tab magically affect the other.
This repository is a growing arcade of unique, browser-based games and interactive experiences built on a simple yet powerful premise: real-time synchronization across browser windows.
Our mission is to build an open-source playground that explores the creative frontier of the web browser. We are achieving this by:
- 🎮 Redefining Local Multiplayer: Creating novel co-op and PvP games that two people can play on the same machine.
- 🎨 Building Interactive Art: Designing digital toys where separate windows act as portals to a single, cohesive world.
- 🧑💻 Making Advanced APIs Accessible: Demonstrating the power of
LocalStorageandBroadcastChannelin a fun, hands-on way.
Getting started with BrowserRift is simple! Follow these steps to experience the magic:
-
Clone or Download the Repository:
git clone https://github.com/rohan-27p/BrowserRift.git cd BrowserRift -
Install
serveglobally (if you haven't already):npm install --global serve
Note:
serveis a static file server that properly handles the local environment. You'll need Node.js installed (at least Node LTS). Learn more at npm serve. -
Start the local server:
serve
This will start a local server (typically at
http://localhost:3000). Open the URL shown in your terminal. -
Launch a Game or Visualizer:
- You'll see a gallery of all available games and visualizers
- Click on any thumbnail in the gallery to open that experience
- Each game/visualizer will open in a new window or tab
-
Experience the Multi-Window Magic:
- For single-window experiences: Simply interact and enjoy!
- For multi-window games: Open multiple instances by clicking the launch button multiple times or duplicating the tab
- Watch as actions in one window affect the others in real-time!
- For the best experience, arrange your browser windows side-by-side
- Some games require 2 players - perfect for sharing with a friend on the same computer
- Make sure your browser allows pop-ups from the local file
Explore our growing collection of browser-bending experiences:
- Rift Pong: The classic game of Pong, but with a twist. Each player controls their paddle from a separate browser tab!
- 3D Cube Sync Motion: A synchronized 3D sphere across two windows demonstrating real-time cross-window coordination using Three.js.
Have an idea? Contribute your own game or visualizer!
Want to contribute your own creation? Here's a step-by-step guide:
Create a new folder in the gamesNdesigns/ directory with a descriptive name:
cd gamesNdesigns
mkdir my-awesome-gameCreate an index.html file in your new folder. This is the entry point for your game/visualizer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Awesome Game</title>
</head>
<body>
<!-- Your game code here -->
<script src="main.js"></script>
</body>
</html>Key Requirements:
- Keep all assets (JS, CSS, images) within your game folder
- Use
localStorageorBroadcastChannelAPI for cross-window communication - Ensure your game works in modern browsers
- Test with multiple windows/tabs to verify synchronization
Create a thumbnail.png file (recommended size: 400x300px or 4:3 aspect ratio) that represents your game. This will be displayed in the main gallery.
Add your game entry to the manifest.json file in the root directory:
{
"title": "My Awesome Game",
"description": "A brief description of what makes your game unique",
"folder": "my-awesome-game",
"thumbnail": "thumbnail.png",
"author": "your-github-username",
"tags": ["Game", "2-Player", "Your-Tag"]
}- Test your game thoroughly by opening
index.htmlin the root directory - Verify your game appears in the gallery with the correct thumbnail
- Submit a Pull Request following our contribution guidelines
We welcome contributions of all kinds! Whether you're fixing a bug, improving documentation, or creating a new game, we'd love to have you involved. This is a perfect project for Hacktoberfest.
- Find an issue to work on in the Issues tab. Look for ones tagged
hacktoberfestorgood first issue. - If you have a new game idea, please create a new issue to discuss it first.
- Follow the detailed instructions in our CONTRIBUTING.md file to get started.
Made with ❤️ for Open Source.