A modern take on the classic ping pong game, built with Phaser 3. This top-down arcade experience features updated gameplay mechanics, refined constants, and a robust scene management system.
- Top-down 2D gameplay with refined mechanics
- Dynamic ball angles based on paddle hit location
- Progressive difficulty with continuous ball speed increment
- Updated winning score and speed limits for balanced gameplay
- High score system saving the top 10 scores with player names
- Clean, modern UI with multiple scenes including menus and options
- Co-op mode for two players with dedicated controls
- Use the Up and Down arrow keys to move Player 1's paddle.
- In co-op mode, Player 2 uses the W and S keys to move their paddle.
- Deflect the ball with your paddle to keep it in play.
- Exploit ball angle dynamics:
- Center hits result in primarily horizontal returns.
- Edge hits produce steeper angles.
- The ball accelerates over time. Stay alert as the game pace increases.
- The game ends when a player reaches 5 points.
- Initial Ball Speed: 300 units per second (movement is measured in game units, not strictly pixels)
- Speed Increase: 5 units per second added continuously as the game progresses
- Maximum Ball Speed: 800 units per second
The speed values refer to movement units per second within the game engine, ensuring consistent behavior across different resolutions.
- Win Condition: First player to reach 5 points wins the match.
- Points are scored when the opponent misses the ball.
- Player 1 Paddle Speed: 5 units per frame
- Player 2 Paddle Speed (Co-op): 5 units per frame
- AI Paddle Speed: 4 units per frame (when playing against the computer)
The angle at which the ball deflects off the paddle is determined by the hit position:
| Hit Area | Angle Change | Description |
|---|---|---|
| 0-20% | Steep upward | Sharp change upward |
| 20-40% | Moderate upward | Subtle upward adjustment |
| 40-60% | Horizontal | Minimal deviation |
| 60-80% | Moderate downward | Subtle downward adjustment |
| 80-100% | Steep downward | Sharp change downward |
- Center hits (40-60%) typically keep trajectories more predictable.
- Hits closer to the edges produce more dramatic directional changes.
- After striking a paddle, the ball always moves towards the opponent's side.
The game is organized into multiple scenes to streamline gameplay and enhance user experience:
- BootScene: Initializes game settings and assets.
- LoadingScene: Preloads assets and displays a loading screen.
- StartMenu: Main menu offering play, high scores, options, and co-op mode.
- GameScene: Core gameplay mechanics, ball-paddle interactions, and co-op mode.
- OptionsScene: Allows players to adjust game settings.
- PlayerSelectScene: Facilitates player selection/input before gameplay.
- HighScores: Displays the top 10 scores.
-
Installation:
npm install
-
Starting the Game:
npm start
-
Access the Game: Open your browser to the address provided by the console (typically http://localhost:8080).
- Player 1:
- ↑ - Move paddle up
- ↓ - Move paddle down
- Player 1:
- ↑ - Move paddle up
- ↓ - Move paddle down
- Player 2:
- W - Move paddle up
- S - Move paddle down
Additionally:
- Enter - Confirm input (e.g., name entry)
- Click - Menu navigation
- Framework: Phaser 3
- Rendering: HTML5 Canvas
- Asset Management: All game assets are preloaded in the respective scenes.
- Local Storage: High scores are stored in the browser's localStorage.
- Audio: Managed via a dedicated Audio Manager handling sound effects like hover and click.
The source is organized into distinct modules and scenes:
- Core game constants and configuration are defined in
game.js. - Scenes are located under the
/scenesdirectory and include BootScene, LoadingScene, StartMenu, GameScene, OptionsScene, PlayerSelectScene, and HighScores. - An Audio Manager (
AudioManager.js) handles sound effects for UI interactions.
MIT License