This content originally appeared on DEV Community and was authored by Kehinde Owolabi
🎮 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 = trueto 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.
This content originally appeared on DEV Community and was authored by Kehinde Owolabi
Kehinde Owolabi | Sciencx (2025-09-18T09:43:55+00:00) 🎮 Getting Started with TCJSgame v3. Retrieved from https://www.scien.cx/2025/09/18/%f0%9f%8e%ae-getting-started-with-tcjsgame-v3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.