A downloadable asset pack

🎮 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>

🖥️ 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

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);

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 }

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");

🖼️ 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); }

🧱 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();

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

🔊 8. Sounds

let music = new Sound("background.mp3"); music.play();

🎥 9. Camera System

The camera can follow a target:

display.camera.follow(player, true); // smooth follow

⚙️ 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>

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

More information

Status	Released
Category	Assets
Author	terracodes004
Tags	2D, Game Design, Game engine
AI Disclosure	AI Assisted, Code

Download

tcjsgame-v3.js 22 kB

Install instructions

Include the TCJSgame v2 library in your HTML:

<script src="tcjsgamev3.js"></script>

Development log

TCJSgame documentations
Sep 25, 2025

TCJSgame V3