First Game Example

The best way to learn TCJSgame is by building something simple. In this first example, you will create a blue square that moves left and right across the screen. This demonstrates how the Display and Component classes work together, as well as how the built-in keyboard input is handled. Even though the code is short, it already introduces you to the game loop, rendering, and interaction.

Every TCJSgame project follows the same structure: you start a display, add one or more components, and then define an update() function. The engine automatically calls this function every frame. In it, you control how your objects behave. This is very similar to Unity’s Update loop, but much lighter.

Syntax

const display = new Display();
display.start(width, height);

const player = new Component(width, height, color, x, y, type);
display.add(player);

function update() {
  // your game logic here
}

Complete Example

const display = new Display();
display.start(600, 400);

const player = new Component(30, 30, "blue", 50, 50, "rect");
display.add(player);

function update() {
  if (display.keys[39]) player.x += 2; // Right arrow
  if (display.keys[37]) player.x -= 2; // Left arrow
}

Notes

• The update() function is called every frame by TCJSgame.
• Use display.keys for easy keyboard handling.
• Components automatically redraw when added to the display.