Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Physics Hack & Slash: A 2D arena survival game built with HTML5 Canvas and JavaScript. Battle physics-themed enemies, collect power-ups, and survive waves of increasing difficulty. Playable in your browser!

NotificationsYou must be signed in to change notification settings

gnurtuv/physics-hack-and-slash

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Physics Hack & Slash Gameplay Screenshot

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 orArrow 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 usingrequestAnimationFrame and delta time.
  • Object-Oriented Design: Code is structured into classes forPlayer,Enemy (with subclasses for each type),Projectile,Particle,PowerUp,GameManager, andUI.
  • 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 forParticle andProjectile objects to optimize performance and reduce garbage collection.
  • State Management: AGameManager 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.

About

Physics Hack & Slash: A 2D arena survival game built with HTML5 Canvas and JavaScript. Battle physics-themed enemies, collect power-ups, and survive waves of increasing difficulty. Playable in your browser!

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages


[8]ページ先頭

©2009-2025 Movatter.jp