DEV Community

Cover image for 🎮 Getting Started with TCJSgame v3
Kehinde Owolabi
Kehinde Owolabi

Posted on

🎮 Getting Started with TCJSgame v3

#javascript #gamedev #tutorial #beginners

🎮 Getting Started with TCJSgame v3

TCJSgame v3 is a lightweight JavaScript 2D game engine designed for simplicity and speed.
It’s perfect for beginners who want to learn game development, but still powerful enough for building custom projects with components, sprites, tilemaps, sounds, and camera controls.

📦 1. Setup

Include the TCJSgame v3 script in your HTML file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My First TCJSgame v3 Project</title>
</head>
<body>
  <script src="tcjsgame-v3.js"></script>
  <script>
    // we’ll add code here
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🖥️ 2. Create a Display

The Display class manages the canvas, input events, and rendering loop.

const display = new Display();
display.start(800, 450); // width, height
Enter fullscreen mode Exit fullscreen mode

This creates a canvas of 800x450 pixels and starts the game loop.

🔲 3. Add a Component

A Component is any object in your game: rectangles, images, or text.

let player = new Component(50, 50, "blue", 100, 100, "rect");
display.add(player);
Enter fullscreen mode Exit fullscreen mode

Here we added a blue rectangle (50x50) at position (100,100).

🎮 4. Update Function

Define a global update() function to control the game:

function update() {
  // Move with arrow keys
  if (display.keys[37]) player.x -= 3; // left
  if (display.keys[39]) player.x += 3; // right
  if (display.keys[38]) player.y -= 3; // up
  if (display.keys[40]) player.y += 3; // down
}
Enter fullscreen mode Exit fullscreen mode

Now you can move the player with the keyboard!

🎨 5. Add Backgrounds

You can easily set a background:

display.backgroundColor("lightgrey");
// Or gradients:
display.lgradient("right", "skyblue", "white");
Enter fullscreen mode Exit fullscreen mode

🖼️ 6. Sprites

Use animated sprites:

let img = new Image();
img.src = "spritesheet.png";

let hero = new Sprite(img, 64, 64, 4, 10); 
// frameWidth, frameHeight, frameCount, frameSpeed

function update() {
  hero.update();
  hero.draw(display.context, 200, 200);
}
Enter fullscreen mode Exit fullscreen mode

🧱 7. Tilemaps

v3 introduces TileMap support:

display.map = [
  [1,1,0,0],
  [0,1,1,0],
  [0,0,1,1]
];

display.tile = [
  new Component(32, 32, "green", 0, 0, "rect")
];

display.tileMap();
Enter fullscreen mode Exit fullscreen mode

This draws a simple 3x4 grid using the green tiles.

🔊 8. Sounds 

let music = new Sound("background.mp3");
music.play();
Enter fullscreen mode Exit fullscreen mode

🎥 9. Camera System

The camera can follow a target:

display.camera.follow(player, true); // smooth follow
Enter fullscreen mode Exit fullscreen mode

⚙️ 10. Putting It All Together 

<script src="tcjsgame-v3.js"></script>
<script>
  const display = new Display();
  display.start(800, 450);

  let player = new Component(50, 50, "red", 100, 100, "rect");
  display.add(player);

  function update() {
    if (display.keys[37]) player.x -= 3;
    if (display.keys[39]) player.x += 3;
    if (display.keys[38]) player.y -= 3;
    if (display.keys[40]) player.y += 3;
  }
</script>
Enter fullscreen mode Exit fullscreen mode

Run it, and you’ve got a working game loop with movement!

✅ Next Steps

  • Try adding gravity and physics = true to components.
  • Experiment with spritesheets for animated characters.
  • Build tilemap levels for platformers or RPGs.
  • Use camera follow to create scrolling worlds.

🎉 Conclusion

TCJSgame v3 takes the simplicity of v2 and expands it with tilemaps, scenes, camera controls, and improved rendering.
It’s not just a teaching tool — it’s a real game engine you can use to build complete 2D games in JavaScript.

Top comments (0)