Stick Fight
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).
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.
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.
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.
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.
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).
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.
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.
Comments
Log in with itch.io to leave a comment.
Hy cool game.
How You made the joystick.
I struggle whit my.
Can you help me out ?
For something like spritesheet.
Thank you! I appreciate the feedback. Let me break down how the joystick works and provide guidance for integrating it into your game or with a spritesheet.
How the Joystick Works:
The joystick in this code is implemented using a HTML div container and styled with CSS for a circular appearance. The core functionality is powered by touch events (touchstart, touchmove, and touchend) to capture user input and translate it into movement for the player.
1. HTML Structure:
<div class="joystick-container" id="joystickContainer">
<div class="joystick" id="joystick"></div>
</div>
• joystick-container: The outer circular boundary for joystick movement.
• joystick: The movable inner part that represents the stick itself.
2. CSS:
• joystick-container defines the static area for movement.
• joystick is the draggable portion that updates its position dynamically within the container.
3. JavaScript Logic:
• Touch Movement:
The position of the joystick is updated relative to the user’s touch input, clamped within the circular container’s radius.
• Velocity Calculation:
The joystick’s movement is translated into directional velocity (X and Y), which drives the player’s character:
const dx = x - center.x;
const dy = y - center.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx);
player.velocityX = Math.cos(angle) * (distance / radius) * player.speed;
player.velocityY = Math.sin(angle) * (distance / radius) * player.speed;
• Reset on Release:
On touchend, the joystick returns to the center, and velocity is reset to 0.
For Spritesheet
If you want to integrate a spritesheet into your game (e.g., for character animations like walking or punching), here’s how to do it:
1. Prepare a Spritesheet:
• A spritesheet is an image file containing frames of animation. Each frame represents a state (e.g., walking, punching).
• Example:
2. Load the Spritesheet in JavaScript:
const spriteImage = new Image();
spriteImage.src = 'path/to/spritesheet.png'; // Your spritesheet image path
3. Draw Frames on Canvas:
Use the drawImage method to extract and draw frames from the spritesheet.
const frameWidth = 50; // Width of a single frame
const frameHeight = 50; // Height of a single frame
let currentFrame = 0; // Current frame index
const totalFrames = 4; // Total number of frames
function drawCharacter() {
// Calculate the source X position for the current frame
const sourceX = currentFrame * frameWidth;
ctx.drawImage(
spriteImage, // Source image
sourceX, 0, // Source x, y (top-left of current frame)
frameWidth, frameHeight, // Source width and height
player.x, player.y, // Destination x, y on canvas
frameWidth, frameHeight // Destination width and height
);
// Update frame index for animation
currentFrame = (currentFrame + 1) % totalFrames;
}
4. Sync Joystick Movement with Animation:
When the joystick moves, trigger specific animations:
• Example: Switch to “walking” frames when velocityX or velocityY is non-zero.
if (player.velocityX !== 0 || player.velocityY !== 0) {
drawCharacter(); // Use walking frames
} else {
currentFrame = 0; // Reset to idle frame
}
Tips for Debugging:
1. Check your touchmove logic to ensure the joystick remains within bounds.
2. For spritesheets, ensure frame sizes match the expected width and height.
3. Use requestAnimationFrame for smooth animation updates.