https://github.com/johndev19/flappy-ball

Flappy Ball is an HTML5 canvas game inspired by the classic Flappy Bird. In this game, players control a bouncing ball, navigating it through obstacles while collecting power-ups and aiming for a high score.
https://github.com/johndev19/flappy-ball

canvas-game css game game-development html5 javascript

Last synced: about 2 months ago
JSON representation

Flappy Ball is an HTML5 canvas game inspired by the classic Flappy Bird. In this game, players control a bouncing ball, navigating it through obstacles while collecting power-ups and aiming for a high score.

• Host: GitHub
• URL: https://github.com/johndev19/flappy-ball
• Owner: JohnDev19
• License: mit
• Created: 2024-10-29T02:50:42.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-29T02:57:20.000Z (over 1 year ago)
• Last Synced: 2025-01-30T06:27:31.366Z (over 1 year ago)
• Topics: canvas-game, css, game, game-development, html5, javascript
• Language: JavaScript
• Homepage: https://johndev19.github.io/Flappy-Ball/
• Size: 80.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Flappy Ball Game

## Description

Flappy Ball is an HTML5 canvas game inspired by the classic Flappy Bird. In this game, players control a bouncing ball, navigating it through obstacles while collecting power-ups and aiming for a high score.

![Demo](flappyball1.jpg)

![Demo](flappyball2.jpg)

## Features

- Canvas-based gameplay

- Ball physics with gravity and bounce effects

- Progressive difficulty increase

- Power-up system with two types: Invincibility and Slow Motion

- Level progression

- High score tracking with local storage

- Pause functionality

- Particle effects for enhanced visual experience

## How to Play

1. Click the "Start Game" button to begin.

2. Use the following controls to make the ball jump:

   - Click or tap the screen

   - Press the spacebar

   - Touch the screen (on mobile devices)

3. Navigate the ball through gaps in the obstacles.

4. Collect power-ups to gain temporary advantages:

   - Gold star: Invincibility

   - Blue star: Slow Motion

5. Avoid hitting obstacles or the ground/ceiling.

6. Try to achieve the highest score possible!

## Setup and Running

1. Clone this repository to your local machine.

2. Open the `index.html` file in a modern web browser.

3. No additional setup or installation is required!

## Technologies Used

- HTML5

- CSS3

- JavaScript (ES6+)

- HTML5 Canvas API

## Game Mechanics

- The ball constantly falls due to gravity.

- Obstacles move from right to left.

- Hitting an obstacle or the ground/ceiling ends the game.

- Score increases by successfully passing obstacles.

- Every 10 points, the level increases, and the game gets faster.

- Power-ups provide temporary abilities:

  - Invincibility: Pass through obstacles without collision.

  - Slow Motion: Slows down the game speed for easier navigation.

## Future Enhancements

- Multiple ball skins

- Online leaderboard

- Additional power-up types

- Background music and sound effects

- Mobile-optimized touch controls

## Contributing

Contributions, issues, and feature requests are welcome! Feel free to check [issues page](https://github.com/JohnDev19/Flappy-Ball/issues) if you want to contribute.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.

## Acknowledgments

- Inspired by the classic Flappy Bird game