Shield Defense Game

An Electron-based shield defense game implemented with HTML5 Canvas.

Game Concept

• A white square (core) is positioned at the center of the screen
• A T-shaped shield surrounds the square, rotatable to four directions: up, down, left, right
• Bars are generated from the four edges of the screen and move toward the center to attack
• Players use arrow keys to control the shield direction, blocking bars from corresponding directions
• When the shield successfully blocks a bar, the bar disappears and points are scored
• When a bar touches the center square, health is reduced; game ends when health reaches zero

Controls

• Arrow Keys - Control shield direction (up, down, left, right)
• Spacebar - Pause/Resume game
• ESC Key - Return to menu
• F3 Key - Toggle debug information display

Game Mechanics

Bar Generation Pattern

• Bars are generated from the four edges of the screen, moving strictly horizontally or vertically
• Direction 0 (Up): Generated from top edge, moving vertically downward
• Direction 1 (Right): Generated from right edge, moving horizontally leftward
• Direction 2 (Down): Generated from bottom edge, moving vertically upward
• Direction 3 (Left): Generated from left edge, moving horizontally rightward

Defense Mechanism

• The shield must face the same direction as the incoming bar to successfully defend
• Successful defense awards points; failure allows the bar to continue and potentially hit the core
• Each core hit reduces health by 10 points

Difficulty Progression

• Difficulty level automatically increases every 30 seconds
• Bar generation speed gradually increases
• Bar movement speed gradually accelerates

Technical Features

• Built on Electron framework for cross-platform compatibility
• Smooth 60FPS gameplay using HTML5 Canvas
• Object-oriented JavaScript design
• Responsive design supporting different screen sizes
• Rich particle effects system
• High DPI screen support

Running the Game

Install Dependencies

npm install

Start Game

npm start

Development Mode

npm run dev

File Structure

shield-defense-game/
├── main.js              # Electron main process
├── index.html           # Game page
├── styles.css           # Style file
├── js/
│   ├── game.js          # Main game class
│   ├── shield.js        # Shield class
│   ├── bar.js           # Attack bar class
│   ├── particle.js      # Particle effects class
│   └── utils.js         # Utility functions
├── assets/
│   ├── sounds/          # Sound files (to be added)
│   └── images/          # Image resources (to be added)
└── package.json

Debug Features

Press F3 to display debug information, including:

• FPS display
• Game state
• Active bar count
• Particle count
• Collision area visualization

Future Improvements

• Sound system
• More particle effects
• Achievement system
• Local high score records
• Additional game modes
• Touch screen support