Physics Hack & Slash

Physics Hack & Slash is an action-packed 2D arena survival game built with HTML5 Canvas and vanilla JavaScript. Take on the role of a brilliant scientist wielding a physics-powered hammer, battling waves of thematically diverse enemies inspired by concepts from physics!

Play the game live on GitHub Pages: https://gnurtuv.github.io/physics-hack-and-slash/

Features

• Dynamic Combat: Engage enemies with melee slashes and ranged energy bolts.
• Agile Movement: Dodge enemy attacks with a swift dash mechanic.
• Diverse Enemies: Face four unique enemy types, each with distinct behaviors and visual themes based on physics concepts:
  • Thermal Enemy: Manipulates heat, changing its appearance and intensity.
  • Nuclear Enemy: Emits a damaging aura and fires radioactive projectiles.
  • Magnetic Enemy: Pulls or pushes the player with strong magnetic forces.
  • Ideal Gas Enemy: Expands and becomes faster as it takes damage, eventually venting excess energy.
• Power-Up System:
  • Collect power-ups dropped by defeated enemies.
  • Choose strategic upgrades between waves.
  • Available power-ups include: Health Pack, Energy Cell, Speed Surge, Damage Amp, Rapid Bolt (faster ranged attacks), and Piercing Shots.
• Progressive Difficulty: Survive increasingly challenging waves of enemies.
• Visual Feedback: Rich visual effects including hit flashes, particle effects for attacks and abilities, sprite-based animations, and distinct enemy/power-up designs.
• Responsive UI: Clear display of player health, energy, ability cooldowns, score, and current wave.
• Pause Functionality: Take a break during intense action.

How to Play

• Movement:
  • WASD keys or Arrow Keys
• Dodge:
  • Shift key
• Melee Attack (Slash):
  • Spacebar
• Ranged Attack (Energy Bolt):
  • F key
• Pause/Unpause Game:
  • P key
• Menu Navigation:
  • Enter key to start the game or restart after Game Over.
  • Number keys (1, 2, etc.) to select power-ups between waves.

Objective: Survive as many waves as possible and achieve the highest score!

Technical Overview

• Engine: Custom-built using HTML5 Canvas API for rendering and vanilla JavaScript for game logic.
• Game Loop: Frame-rate independent update logic using requestAnimationFrame and delta time.
• Object-Oriented Design: Code is structured into classes for Player, Enemy (with subclasses for each type), Projectile, Particle, PowerUp, GameManager, and UI.
• Asset Management: Loads custom sprites for the player (idle, melee, ranged, dash, projectile), enemies (idle, attack/active states, projectiles, effects), and power-ups.
• Collision Detection: Uses Axis-Aligned Bounding Box (AABB) for rectangle-rectangle collisions and distance checks for circular interactions.
• Object Pooling: Implemented for Particle and Projectile objects to optimize performance and reduce garbage collection.
• State Management: A GameManager controls various game states such as loading, start menu, playing, wave transitions, paused, and game over.

Project Structure

.
├── assets/ # Contains all image sprites for the game
│ ├── ideal_gas_enemy_expanded_sprite.png
│ ├── ideal_gas_enemy_sprite.png
│ ├── magnetic_enemy_active_sprite.png
│ ├── magnetic_enemy_sprite.png
│ ├── magnetic_field_effect_sprite.png
│ ├── nuclear_enemy_ranged_attack_effect.png
│ ├── nuclear_enemy_sprite.png
│ ├── nuclear_projectile_sprite.png
│ ├── player_dash_sprite.png
│ ├── player_melee_attack_sprite.png
│ ├── player_projectile_sprite.png
│ ├── player_ranged_attack_sprite.png
│ ├── player_sprite.png
│ ├── thermal_enemy_attack_sprite.png
│ ├── thermal_enemy_sprite.png
│ ├── health_pack_sprite.png
│ ├── energy_cell_sprite.png
│ ├── speed_surge_sprite.png
│ ├── damage_amp_sprite.png
│ ├── rapid_bolt_sprite.png
│ └── piercing_shots_sprite.png
├── js/
│ ├── constants.js # Game-wide constants and configurations
│ ├── inputHandler.js # Manages keyboard input
│ ├── main.js # Main game loop initialization
│ ├── utils.js # Utility functions (math, collision)
│ ├── utils/
│ │ └── PoolManager.js # Generic object pooling class
│ └── game/
│ ├── GameManager.js # Core game logic and state machine
│ ├── Particle.js # Particle effects system
│ ├── Player.js # Player character logic
│ ├── PowerUp.js # Power-up item logic
│ ├── Projectile.js # Projectile logic for player and enemies
│ ├── UI.js # Handles rendering all UI elements
│ └── enemies/ # Enemy-specific logic
│ ├── BaseEnemy.js
│ ├── IdealGasEnemy.js
│ ├── MagneticEnemy.js
│ ├── NuclearEnemy.js
│ └── ThermalEnemy.js
├── index.html # Main HTML file for the game
├── style.css # Basic styling for the page and canvas
└── README.md

Future Development Ideas (Potential Enhancements)

• Sound effects and background music.
• More enemy types with unique mechanics.
• Boss battles at the end of certain wave milestones.
• Additional power-ups and upgrade paths.
• Varied arena layouts or environments.
• Difficulty settings.
• Touch controls for mobile playability.