https://github.com/david-mwas/brickbricker

A Brick Breaker Game built with React Native, utilizing Expo, Reanimated, and React-Native-Skia for smooth animations and enhanced performance. This project demonstrates advanced techniques in gesture handling, physics-based animations, and canvas rendering for a seamless gaming experience.
https://github.com/david-mwas/brickbricker

expo react-native reanimated skia

Last synced: 6 days ago
JSON representation

A Brick Breaker Game built with React Native, utilizing Expo, Reanimated, and React-Native-Skia for smooth animations and enhanced performance. This project demonstrates advanced techniques in gesture handling, physics-based animations, and canvas rendering for a seamless gaming experience.

• Host: GitHub
• URL: https://github.com/david-mwas/brickbricker
• Owner: David-mwas
• Created: 2024-11-22T11:14:13.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-23T16:49:56.000Z (2 months ago)
• Last Synced: 2024-11-23T17:27:45.504Z (2 months ago)
• Topics: expo, react-native, reanimated, skia
• Language: TypeScript
• Homepage:
• Size: 4.84 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Brick Breaker Game

A **Brick Breaker Game** built with **React Native**, utilizing **Expo**, **Reanimated**, and **React-Native-Skia** for smooth animations and enhanced performance. This project demonstrates advanced techniques in gesture handling, physics-based animations, and canvas rendering for a seamless gaming experience.







 


  

  

  

  



## Features

- **Dynamic Gameplay**: Interactive paddle to break all the bricks.

- **Smooth Animations**: Powered by Reanimated and Skia.

- **Gesture Detection**: Move the paddle with touch gestures for precise control.

- **Responsive Design**: Optimized for different screen dimensions.

- **Win or Lose Conditions**: Clear all bricks to win or let the ball fall to lose.

- **Real-time Collision Detection**: Physics-based interactions for paddle, ball, and bricks.

## Tech Stack

- **React Native**: Framework for building the game.

- **Expo**: Streamlined development and testing.

- **React-Native-Skia**: Canvas rendering for graphics.

- **Reanimated**: Handles animations and physics.

- **React-Native-Gesture-Handler**: Gesture control for paddle movement.

## Gameplay

1. **Start the Game**: The ball starts bouncing, and the paddle can be controlled via gestures.

2. **Break Bricks**: Aim to hit and break all the bricks on the screen.

3. **Winning Condition**: Successfully clear all the bricks.

4. **Losing Condition**: Letting the ball fall below the paddle.

## Installation

1. Clone the repository:

   ```bash

   git clone https://github.com/David-mwas/BrickBricker.git

   cd BrickBricker

   ```

   ## Starting the Game

1. Make sure you have [Bun](https://bun.sh) installed on your machine. OR use npm

1. Clone the repository:

   ```bash

   bun start or npm start

   ```

## How to Play

1. Launch the app on your device or emulator.

2. Drag the paddle left or right to control it.

3. Break all bricks to win.

4. Avoid letting the ball fall off the screen!