Stick Fight

1. HTML and Canvas for Rendering:

• The game uses an HTML <canvas> element as the primary rendering surface.

• JavaScript is used to draw stick figures, arenas, and effects dynamically on the canvas using the 2D rendering context (ctx).

2. Game State Management:

• The game state is managed in JavaScript through global objects and flags:

• player: Tracks player position, velocity, health, and actions.

• enemies: An array of enemy objects, each with their own positions, velocities, and states.

• deadBodies: An array storing ragdoll physics data for defeated players and enemies.

• Flags such as gameStarted and gameOver determine whether gameplay, overlays, or resets are active.

3. Physics System:

• Simple physics calculations manage movements and interactions:

• Gravity is applied to characters for vertical motion.

• Basic collision detection ensures characters stay within arena bounds or land on surfaces.

• Knockback effects and ragdoll mechanics are handled using velocity adjustments and rotation.

4. Input Handling:

• Keyboard: Handles movement (e.g., arrow keys or WASD) and attacks via event listeners (keydown and keyup).

• Touchscreen Joystick: Provides movement and attack controls for mobile devices using touchstart, touchmove, and touchend events.

• Gamepad: Utilizes the Gamepad API to process button presses and analog stick input dynamically, including movement and attack actions.

5. Overlays and UI:

• Start Screen: A full-screen <div> is displayed before the game starts, with a button to initiate gameplay.

• Game Over Screen: A similar <div> is displayed on player death, offering a “Try again?” option to reload the game.

• The HUD displays key information like kill counts and ranks using text drawn on the canvas.

6. Rendering System:

• Stick figures and other visuals are rendered as simple shapes (e.g., lines, arcs) on the canvas.

• Each frame, the canvas is cleared, and objects are redrawn in layers:

1. Dead bodies (with fading and ragdoll effects).

2. Active characters (player and enemies).

3. Visual effects (e.g., splatter and punch indicators).

4. HUD elements (kill count, rank).

7. Game Loop:

• The game uses requestAnimationFrame to run a continuous loop for updates and rendering.

• Key tasks per frame:

• Update player and enemy positions, states, and interactions.

• Apply physics, collision detection, and actions like attacks.

• Redraw all game elements on the canvas.

8. Dynamic Systems:

• Enemy Spawn System: Periodically spawns new enemies into the arena up to a set limit, with randomized positions and simple AI for chasing and attacking the player.

• Ragdoll Physics: Applies forces and rotations to defeated characters for natural-looking collapses, with gradual fading until removal.