Add game screenshot to README and update project documentation ``` |
||
---|---|---|
.continue/rules | ||
assets | ||
src | ||
README.md | ||
android-chrome-192x192.png | ||
android-chrome-512x512.png | ||
apple-touch-icon.png | ||
favicon-16x16.png | ||
favicon-32x32.png | ||
favicon.ico | ||
index.html | ||
start_web.bat |
README.md
The Jewel Weaver
Project Description
The Jewel Weaver is a match-3 puzzle game built using Phaser 3.90, featuring an engaging gameplay loop where players swap adjacent jewels to create matches of three or more identical jewels. The game includes core mechanics such as jewel swapping, match detection and destruction, cascading jewel movements, and a countdown timer for added challenge.
The primary objective is to achieve high scores by creating combos and clearing the board efficiently. The game features a visually appealing interface with a black background, grid-based gameplay, and animated jewel interactions. It includes multiple scenes - a menu scene for initial setup and a main game scene with core gameplay mechanics.
Technologies Used
This codebase utilizes:
- Phaser 3.90: A powerful HTML5 game framework for creating 2D games in JavaScript
- JavaScript (ES6+): Modern JavaScript features including classes, modules, and async/await patterns
- HTML5 Canvas: For rendering the game graphics and animations
- CSS3: For styling the web page layout and responsive design
File Structure
.
├── index.html # Main HTML entry point with Phaser script loading
├── src/
│ ├── main.js # Game configuration and initialization
│ ├── MenuScene.js # Menu scene for initial game setup and UI
│ └── GameScene.js # Core gameplay logic including grid management, jewel swapping, match detection
└── assets/
└── CodePredators-Regular.otf # Font file used in the game (though not currently implemented)
The codebase follows a modular structure where each scene is encapsulated in its own class. The main.js file handles game initialization and configuration, while MenuScene and GameScene manage their respective gameplay states. The Phaser framework's scene system allows for seamless transitions between different game states.
The GameScene contains the core logic including grid management (makeGrid), jewel creation (createJewel), swap mechanics (moveJewel), match detection (checkMatches), and game flow control functions.