Welcome to Flap Frenzy, an immersive and interactive WebXR experience built on top of the WebXR Template App. In this game, players navigate their character through a series of shrinking target rings by physically flapping their arms and adopting different poses. This dynamic and engaging experience is designed to get you moving and test your coordination and timing skills.
Developed by Felix Z | Funded by Meta | Assets by Synty Studio
- Arm Flapping: Flap your arms to make the character ascend.
- Glide: Extend your arms horizontally to glide and maintain altitude.
- Dive: Tuck your arms to dive and lose altitude quickly.
- Objective: Pass through as many target rings as possible. The rings decrease in size as you advance, increasing the difficulty.
To set up your development environment and start playing Flap Frenzy, follow these steps:
- Clone the repository:
git clone https://github.com/felixtrz/flap-frenzy.git
- Navigate to the project directory:
cd flap-frenzy - Install the required dependencies using npm:
npm install
- To start a local development server, run:
This will compile the project and open it in your default web browser.
npm run serve
- To create a production build, run:
The build artifacts will be stored in the
npm run build
dist/directory.
For a detailed breakdown of the project's structure and a developer's guide, please see the Project Structure & Developer Guide in the
srcdirectory.
Flap Frenzy is an example of combining web technologies with game design patterns to create immersive experiences. Below is an outline of the key architectural elements:
The game's 3D rendering and interactive capabilities are powered by Three.js, with its robust WebXR support enabling immersive VR experiences. This integration allows us to tap into the full potential of virtual reality, providing a seamless and intuitive gameplay experience that is both performant and visually enjoyable.
Our use of an ECS architecture is exemplified by the PlayerComponent and PlayerSystem. The PlayerComponent holds the state and attributes of the player, while the PlayerSystem handles input and updates the player's state. This separation of data and logic facilitates a modular and maintainable codebase, allowing for easy iteration and expansion of game features.
Blender is a powerful 3D modeling software and our tool of choice for creating and editing 3D assets. To optimize these assets for the web, we employ gltf-transform, which compresses meshes and textures with minimal sacrifice in quality. This streamlined workflow is crucial for maintaining high performance and fast load times, essential for the smooth operation of WebXR experiences.
Please read CONTRIBUTING.md for details on how to contribute to the project.
This project is licensed under the MIT License - see the LICENSE.md file for details.