Icon for TCJSgame

tcjsgame.js Documentation

Version: 2.0 | Date: March 12, 2025

Description: tcjsgame.js is a lightweight JavaScript game engine for creating 2D games with a canvas-based rendering system. It includes classes for managing display, components, cameras, sounds, and sprites, along with utility objects (move and state) for manipulating game entities.

Classes

Display

Description: Manages the game canvas, handles rendering, input events, and the game loop.

Constructor

new Display() - Initializes a new display object with a canvas, context, and camera.

Methods

start(width = 480, height = 270, no = document.body)

Description: Starts the game loop and sets up the canvas.

Parameters:

  • width (number, optional): Canvas width (default: 480).
  • height (number, optional): Canvas height (default: 270).
  • no (HTMLElement, optional): Parent element to append the canvas to (default: document.body).

Returns: None.

addEventListeners()

Description: Adds event listeners for keyboard, mouse, and touch input.

Parameters: None.

Returns: None.

clear()

Description: Clears the canvas.

Parameters: None.

Returns: None.

borderStyle(borderStyle)

Description: Sets the canvas border style (e.g., "solid", "dashed").

Parameters: borderStyle (string).

Returns: None.

stop()

Description: Stops the game loop.

Parameters: None.

Returns: None.

borderSize(borderSize)

Description: Sets the canvas border size (e.g., "1px").

Parameters: borderSize (string).

Returns: None.

backgroundColor(color)

Description: Sets the canvas background color (e.g., "black").

Parameters: color (string).

Returns: None.

borderColor(color)

Description: Sets the canvas border color (e.g., "red").

Parameters: color (string).

Returns: None.

fontColor(color)

Description: Sets the canvas font color (e.g., "white").

Parameters: color (string).

Returns: None.

scale(width, height)

Description: Resizes the canvas.

Parameters:

  • width (number): New canvas width.
  • height (number): New canvas height.

Returns: None.

add(x)

Description: Adds a component to the rendering list.

Parameters: x (Component): The component to add.

Returns: None.

updat()

Description: Updates and renders all components, applying camera translation.

Parameters: None.

Returns: None.

Component

Description: Represents a game object (e.g., player, enemy) with position, size, and movement properties.

Constructor

new Component(width = 0, height = 0, color = null, x = 0, y = 0, type)

Parameters:

  • width (number, optional): Width of the component (default: 0).
  • height (number, optional): Height of the component (default: 0).
  • color (string, optional): Color or image source (default: null).
  • x (number, optional): Initial x-coordinate (default: 0).
  • y (number, optional): Initial y-coordinate (default: 0).
  • type (string, optional): Type of component ("image" or "text", default: undefined).

Returns: New Component instance.

Methods

update(ctx = display.context)

Description: Renders the component on the canvas.

Parameters: ctx (CanvasRenderingContext2D, optional): Context to render on.

Returns: None.

moveAngle()

Description: Moves the component based on angle and gravity.

Parameters: None.

Returns: None.

move()

Description: Updates the component's position based on speed and physics.

Parameters: None.

Returns: None.

hitBottom()

Description: Checks and handles collision with the canvas bottom.

Parameters: None.

Returns: None.

stopMove()

Description: Stops the component's movement.

Parameters: None.

Returns: None.

clicked()

Description: Checks if the component was clicked, accounting for rotation.

Parameters: None.

Returns: Boolean.

crashWith(otherobj)

Description: Checks for collision with another component, accounting for rotation.

Parameters: otherobj (Component): The other component to check.

Returns: Boolean.

Sound

Description: Manages audio playback.

Constructor

new Sound(src)

Parameters: src (string): URL of the audio file.

Returns: New Sound instance.

Methods

play()

Description: Plays the sound.

Parameters: None.

Returns: None.

stop()

Description: Pauses the sound.

Parameters: None.

Returns: None.

Camera

Description: Manages the camera's position to follow a target.

Constructor

new Camera(x = 0, y = 0)

Parameters:

  • x (number, optional): Initial x-coordinate (default: 0).
  • y (number, optional): Initial y-coordinate (default: 0).

Returns: New Camera instance.

Methods

follow(target, smooth = false)

Description: Moves the camera to follow a target component.

Parameters:

  • target (Component): The component to follow.
  • smooth (boolean, optional): Whether to use smooth interpolation (default: false).

Returns: None.

Sprite

Description: Handles animated sprites using a sprite sheet.

Constructor

new Sprite(image, frameWidth, frameHeight, frameCount, frameSpeed)

Parameters:

  • image (Image): The sprite sheet image.
  • frameWidth (number): Width of each frame.
  • frameHeight (number): Height of each frame.
  • frameCount (number): Number of frames in the animation.
  • frameSpeed (number): Frames per update interval.

Returns: New Sprite instance.

Methods

update()

Description: Updates the current frame of the animation.

Parameters: None.

Returns: None.

draw(ctx, x, y)

Description: Renders the current frame at the specified position.

Parameters:

  • ctx (CanvasRenderingContext2D): Context to render on.
  • x (number): X-coordinate.
  • y (number): Y-coordinate.

Returns: None.

Global Objects

move

Description: Provides methods to manipulate component movement and behavior.

backward(id, steps)

Description: Moves the component backward diagonally.

Parameters:

  • id (Component): The component to move.
  • steps (number): Speed of movement.

Returns: None.

teleport(id, x, y)

Description: Teleports the component to a specific position.

Parameters:

  • id (Component): The component to teleport.
  • x (number): Target x-coordinate.
  • y (number): Target y-coordinate.

Returns: None.

setX(id, x)

Description: Sets the component's x-coordinate.

Parameters:

  • id (Component): The component.
  • x (number): New x-coordinate.

Returns: None.

setY(id, y)

Description: Sets the component's y-coordinate.

Parameters:

  • id (Component): The component.
  • y (number): New y-coordinate.

Returns: None.

stamp(id)

Description: Creates a copy of the component at its current position.

Parameters: id (Component): The component to stamp.

Returns: Component.

circle(id, speed)

Description: Moves the component in a circular path.

Parameters:

  • id (Component): The component.
  • speed (number): Angular speed in degrees per frame.

Returns: None.

dot(id)

Description: Draws a dot at the component's position.

Parameters: id (Component): The component.

Returns: None.

clearStamp(id)

Description: Disables rendering of the component.

Parameters: id (Component): The component.

Returns: None.

turnLeft(id, steps)

Description: Rotates the component left.

Parameters:

  • id (Component): The component.
  • steps (number): Rotation angle in radians.

Returns: None.

turnRight(id, steps)

Description: Rotates the component right.

Parameters:

  • id (Component): The component.
  • steps (number): Rotation angle in radians.

Returns: None.

bound(id)

Description: Keeps the component within the canvas x-bounds.

Parameters: id (Component): The component.

Returns: None.

hitObject(id, otherid)

Description: Handles collision with another object, applying bounce.

Parameters:

  • id (Component): The component.
  • otherid (Component): The other component.

Returns: None.

glideX(id, t, x)

Description: Moves the component to a target x-coordinate over time.

Parameters:

  • id (Component): The component.
  • t (number): Time in seconds.
  • x (number): Target x-coordinate.

Returns: None.

glideY(id, t, y)

Description: Moves the component to a target y-coordinate over time.

Parameters:

  • id (Component): The component.
  • t (number): Time in seconds.
  • y (number): Target y-coordinate.

Returns: None.

glideTo(id, t, x, y)

Description: Moves the component to a target position over time.

Parameters:

  • id (Component): The component.
  • t (number): Time in seconds.
  • x (number): Target x-coordinate.
  • y (number): Target y-coordinate.

Returns: None.

project(id, initialVelocity, angle, gravity)

Description: Projects the component with initial velocity and gravity.

Parameters:

  • id (Component): The component.
  • initialVelocity (number): Starting speed.
  • angle (number): Launch angle in degrees.
  • gravity (number): Gravity acceleration.

Returns: None.

pointTo(id, targetX, targetY)

Description: Rotates the component to face a target point.

Parameters:

  • id (Component): The component.
  • targetX (number): Target x-coordinate.
  • targetY (number): Target y-coordinate.

Returns: None.

accelerate(id, accelX, accelY, maxSpeedX = Infinity, maxSpeedY = Infinity)

Description: Accelerates the component with optional speed limits.

Parameters:

  • id (Component): The component.
  • accelX (number): X-acceleration.
  • accelY (number): Y-acceleration.
  • maxSpeedX (number, optional): Maximum x-speed (default: Infinity).
  • maxSpeedY (number, optional): Maximum y-speed (default: Infinity).

Returns: None.

decelerate(id, decelX, decelY)

Description: Decelerates the component to a stop.

Parameters:

  • id (Component): The component.
  • decelX (number): X-deceleration rate.
  • decelY (number): Y-deceleration rate.

Returns: None.

position(id, direction, offset = 0)

Description: Positions the component relative to a canvas edge.

Parameters:

  • id (Component): The component to position.
  • direction (string): Edge to position against ("top", "bottom", "left", "right").
  • offset (number, optional): Distance from edge (default: 0).

Returns: None.

Example:


move.position(player, "top", 10); // Places player 10px from the top, centered horizontally
move.position(player, "right", 20); // Places player 20px from the right, centered vertically

state

Description: Provides methods to query component states.

distance(id, otherid)

Description: Calculates the distance between two components.

Parameters:

  • id (Component): First component.
  • otherid (Component): Second component.

Returns: Number.

rect(id)

Description: Returns the component's bounding box.

Parameters: id (Component): The component.

Returns: Array [x, y, width, height].

physics(id)

Description: Checks if physics is enabled.

Parameters: id (Component): The component.

Returns: Boolean.

changeAngle(id)

Description: Checks if angle changes are enabled.

Parameters: id (Component): The component.

Returns: Boolean.

Angle(id)

Description: Gets the component's rotation angle.

Parameters: id (Component): The component.

Returns: Number (radians).

pos(id)

Description: Gets the component's position as a string.

Parameters: id (Component): The component.

Returns: String (e.g., "x,y").

comm

Description: Global array to store all components for rendering.

Type: Array.

Usage: Managed by display.add().

Usage Example


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game Example</title>
</head>
<body>
    <script src="tcjsgame.js"></script>
    <script>
        var display = new Display();
        display.start();

        var player = new Component(20, 20, "blue", 240, 135);
        display.add(player);

        function update() {
            if (display.keys[37]) move.accelerate(player, -0.5, 0, 5);
            else if (display.keys[39]) move.accelerate(player, 0.5, 0, 5);
            else move.decelerate(player, 0.3, 0);
            if (display.keys[38]) move.accelerate(player, 0, -0.5, Infinity, 5);
            else if (display.keys[40]) move.accelerate(player, 0, 0.5, Infinity, 5);
            else move.decelerate(player, 0, 0.3);
            display.camera.follow(player, false);
        }

        // Position player at top with 10px offset
        move.position(player, "top", 10);
    </script>
</body>
</html>