https://github.com/5h1ngy/fe-phaser-season-times
A TypeScript-based match-3 puzzle game built with Phaser and Vite. This project features an interactive grid with dynamic resizing, smooth animations powered by GSAP, and responsive design for immersive gameplay. Perfect for developers looking to explore game mechanics, animations, and grid-based layouts in web games
https://github.com/5h1ngy/fe-phaser-season-times
animations dynamic-grid frontend game-development gsap match-3 phaser puzzle-game typescript vite web-game
Last synced: 28 days ago
JSON representation
A TypeScript-based match-3 puzzle game built with Phaser and Vite. This project features an interactive grid with dynamic resizing, smooth animations powered by GSAP, and responsive design for immersive gameplay. Perfect for developers looking to explore game mechanics, animations, and grid-based layouts in web games
- Host: GitHub
- URL: https://github.com/5h1ngy/fe-phaser-season-times
- Owner: 5h1ngy
- License: mit
- Created: 2025-01-04T14:16:12.000Z (4 months ago)
- Default Branch: develop
- Last Pushed: 2025-02-03T16:11:43.000Z (3 months ago)
- Last Synced: 2025-02-03T17:24:27.131Z (3 months ago)
- Topics: animations, dynamic-grid, frontend, game-development, gsap, match-3, phaser, puzzle-game, typescript, vite, web-game
- Language: TypeScript
- Homepage: https://www.5h1ngy.click/projects/fe-phaser-season-times
- Size: 7.41 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **fe-phaser-season-times 🚀**
[](./LICENSE)
[](#)
**fe-phaser-season-times** is an interactive browser-based puzzle game built with Phaser 3, TypeScript, and GSAP. This project focuses on responsive design, animations, and scalability for casual gaming experiences.
## **URLs 🌐**
| Key | Value |
|-----------|---------------------------------------------------------------------------------|
| Website | https://5h1ngy.github.io/fe-phaser-season-times/ |
## **Introduction 🤖**
**fe-phaser-season-times** is a dynamic puzzle game where players match items on a grid for points. It leverages Phaser 3 for game development, GSAP for animations, and TypeScript for a scalable codebase. The game features responsive design, making it playable on both desktop and mobile devices.
## **Features ✨**
- ✅ Responsive grid-based puzzle gameplay
- ✅ Interactive animations using **GSAP**
- ✅ Type-safe development with **TypeScript**
- ✅ Real-time score tracking and UI updates
- ✅ Highly customizable and scalable architecture
## **Requirements 🔧**
Ensure the following are installed on your system:
- **Node.js**: `>= 20.18.0`
- **Yarn**: `>= 4.5.1`
## **Installation 🛠**
### Steps
1. Clone the repository:
```bash
git clone https://github.com/5h1ngy/fe-phaser-season-times.git
cd fe-phaser-season-times
```
2. Install dependencies:
```bash
yarn install
```
3. Start the development server:
```bash
yarn start:dev
```
For a production build:
```bash
yarn build:prod
yarn start:prod
```
## **Usage 🕹**
### Core Features:
- **Grid Matching**: Match 3 or more items to clear them and score points.
- **Interactive Animations**: Smooth animations for swaps and grid updates.
- **Responsive Design**: Playable on devices of various screen sizes.
The game initializes a grid where items fall into place. Players can swap adjacent items to form matches, triggering animations and scoring mechanisms.
## **Project Structure 🗂**
```plaintext
src/
├── assets/ # Game assets (sprites, images, etc.)
├── entities/ # Game entities and logic (e.g., MainGrid)
├── scenes/ # Game scenes (e.g., MainScene)
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
├── main.ts # Game entry point
└── vite.config.ts # Vite configuration
```
## **Key Dependencies 🔗**
- **Phaser 3**: Game engine for 2D games
- **GSAP**: Animation library for smooth transitions
- **TypeScript**: Type-safe development
- **Vite**: Development server and build tool
For detailed dependency versions, see the [package.json](./package.json).
## **Testing 🧪**
The project uses **TypeScript** for type checking. To ensure code quality:
```bash
yarn build:prod
```
No formal test framework is currently integrated. Contributions for testing setups are welcome.
## **License 🏷**
This project is licensed under the **MIT License**. See the [LICENSE](./LICENSE) file for details.
## **Contributing (Optional) 🤝**
Feel free to fork this repository and submit pull requests. All contributions are welcome.
## **Contact 📧**
For inquiries, please reach out to:
- **Author**: [5h1ngy](https://github.com/5h1ngy)
- **Repository**: [GitHub](https://github.com/5h1ngy/fe-phaser-season-times)