Getting Started
Include the TCJSgame v2 library in your HTML:
<script src="https://tcjsgame.vercel.app/mat/tcjsgamev2.js"></script>
Then you can use the Display, Component, move, state, and other classes/functions in your scripts.
Display
Manages the game canvas, rendering, input, and game loop.
Constructor
new Display()
Methods
| Method | Parameters | Description |
|---|---|---|
start(width, height, parent) |
width (number, default 480) height (number, default 270) parent (HTMLElement, default document.body) |
Initializes and displays the canvas, starts the game loop. |
add(component) |
component (Component) | Adds a component to the game. |
stop() |
Stops the game loop. | |
backgroundColor(color) |
color (string) | Sets the canvas background color. |
borderStyle(style) |
style (string) | Sets the canvas border style. |
Component
Represents a game object (player, enemy, obstacle, etc).
Constructor
new Component(width, height, color, x, y, type)
| Parameter | Type | Description |
|---|---|---|
| width | number | Width of the component |
| height | number | Height of the component |
| color | string | Color or image source |
| x | number | X position |
| y | number | Y position |
| type | string | "rect", "image", or "text" |
Properties
speedX,speedY: Movement speedgravity: Gravity effectbounce: Bounce factorphysics: Enable physicsangle: Rotation angle (radians)
Methods
move(): Updates position based on speed and gravityupdate(ctx): Draws the componentcrashWith(other): Collision detectionclicked(): Returns true if clicked/touched
move Object
Utility functions for moving and manipulating components.
| Function | Parameters | Description |
|---|---|---|
move.accelerate(id, accelX, accelY, maxSpeedX, maxSpeedY) |
id (Component), accelX (number), accelY (number), maxSpeedX (number, optional), maxSpeedY (number, optional) |
Accelerates a component, clamped to max speed. |
move.decelerate(id, decelX, decelY) |
id (Component), decelX (number), decelY (number) | Decelerates a component towards zero speed. |
move.position(id, direction, offset) |
id (Component), direction (string), offset (number, optional) | Positions a component at "top", "bottom", "left", "right", or "center". |
move.project(id, velocity, angle, gravity) |
id (Component), velocity (number), angle (degrees), gravity (number) | Projectile motion for a component. |
state Object
Utility functions for querying component state.
| Function | Parameters | Description |
|---|---|---|
state.distance(id, otherid) |
id (Component), otherid (Component) | Returns the distance between two components. |
state.rect(id) |
id (Component) | Returns [x, y, width, height] of the component. |
state.physics(id) |
id (Component) | Returns true if physics is enabled. |
Example: Simple Player Movement
<script src="https://tcjsgame.vercel.app/mat/tcjsgamev2.js"></script>
<script>
const display = new Display();
display.start(600, 300);
const player = new Component(30, 30, "blue", 100, 100, "rect");
display.add(player);
function update() {
if (display.keys[37]) move.accelerate(player, -0.5, 0, 5); // Left arrow
else if (display.keys[39]) move.accelerate(player, 0.5, 0, 5); // Right arrow
else move.decelerate(player, 0.3, 0);
if (display.keys[38]) move.accelerate(player, 0, -0.5, 5); // Up arrow
else if (display.keys[40]) move.accelerate(player, 0, 0.5, 5); // Down arrow
else move.decelerate(player, 0, 0.3);
}
</script>
Use arrow keys to move the blue square.
Example: Flappy Bird Clone
<script src="https://tcjsgame.vercel.app/mat/tcjsgamev2.js"></script>
<script>
const display = new Display();
display.start(480, 320);
const bird = new Component(30, 30, "yellow", 100, 150, "rect");
bird.gravity = 0.5;
bird.bounce = 0;
bird.physics = true;
display.add(bird);
let pipes = [];
let score = 0;
function createPipe() {
const gap = 90;
const topHeight = Math.random() * 120 + 40;
const bottomY = topHeight + gap;
const bottomHeight = display.canvas.height - bottomY;
const topPipe = new Component(40, topHeight, "green", display.canvas.width, 0, "rect");
const bottomPipe = new Component(40, bottomHeight, "green", display.canvas.width, bottomY, "rect");
topPipe.speedX = -2;
bottomPipe.speedX = -2;
pipes.push(topPipe, bottomPipe);
display.add(topPipe);
display.add(bottomPipe);
}
function update() {
if (display.frameNo % 90 === 1) createPipe();
pipes.forEach(pipe => {
if (bird.crashWith(pipe)) {
display.stop();
alert("Game Over! Score: " + score);
}
});
pipes = pipes.filter(pipe => pipe.x + pipe.width > 0);
score = Math.floor(display.frameNo / 60);
}
window.addEventListener('keydown', e => {
if (e.keyCode === 32) { // Spacebar
bird.gravitySpeed = -8;
}
});
</script>
Press Spacebar to flap. Avoid the pipes!
More
- See tcjsgame.vercel.app for more examples and downloads.
- Inspired by jgame-doc.vercel.app.