https://github.com/felixtrz/flap-frenzy
Flap flap flap
https://github.com/felixtrz/flap-frenzy
Last synced: about 2 months ago
JSON representation
Flap flap flap
- Host: GitHub
- URL: https://github.com/felixtrz/flap-frenzy
- Owner: felixtrz
- License: mit
- Created: 2023-09-08T23:27:31.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-04T18:04:57.000Z (over 1 year ago)
- Last Synced: 2025-04-30T03:47:28.445Z (about 2 months ago)
- Language: JavaScript
- Size: 19.9 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Flap Frenzy
Welcome to Flap Frenzy, an immersive and interactive WebXR experience built on top of the [WebXR Template App](https://github.com/meta-quest/webxr-samples). 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](https://twitter.com/felix_trz) | Funded by [Meta](https://meta.com/) | Assets by [Synty Studio](https://www.syntystudios.com/)
## Table of Contents
- [How to Play](#how-to-play)
- [Getting Started](#getting-started)
- [Project Architecture Overview](#project-architecture-overview)
- [Contributing](#contributing)
- [License](#license)
## How to Play
- **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.
## Getting Started
To set up your development environment and start playing Flap Frenzy, follow these steps:
1. Clone the repository:
```sh
git clone https://github.com/felixtrz/flap-frenzy.git
```
2. Navigate to the project directory:
```sh
cd flap-frenzy
```
3. Install the required dependencies using npm:
```sh
npm install
```
4. To start a local development server, run:
```sh
npm run serve
```
This will compile the project and open it in your default web browser.
5. To create a production build, run:
```sh
npm run build
```
The build artifacts will be stored in the `dist/` directory.
## Project Architecture Overview
> For a detailed breakdown of the project's structure and a developer's guide, please see the [Project Structure & Developer Guide](./src/README.md) in the `src` directory.
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:
### Three.js and WebXR Support
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.
### Entity-Component-System (ECS) Architecture
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.
### 3D Asset Workflow
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.
## Contributing
Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on how to contribute to the project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE.md) file for details.