Movement

Movement in TCJSgame is handled by changing a component’s x and y coordinates. You can do this manually inside the update() function, or use built-in properties such as speedX and speedY. The engine automatically updates the position each frame based on these speeds, which makes smooth movement easy to implement.

For example, setting player.speedX = 2; will cause the player to move to the right at 2 pixels per frame. If you later set it back to 0, the player stops instantly. This system allows you to separate input handling from motion logic.

Syntax

component.speedX = value;
component.speedY = value;

Example

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

function update() {
  if (display.keys[39]) player.speedX = 2;
  else if (display.keys[37]) player.speedX = -2;
  else player.speedX = 0;
}

Notes

• Use speedX and speedY for smoother movement.
• You can combine with gravity for platformer physics.
• Acceleration can be added for gradual motion (see Acceleration topic).