TCJSgame - Lightweight JavaScript Game Engine

About TCJSgame

Latest Version: 3.0 | Release Date: September 3, 2025

TCJSgame is a lightweight JavaScript game engine for creating 2D games directly in the browser. It uses a canvas-based rendering system and provides essential classes for Display, Components, Camera, Sound, Sprites, and TileMaps.

History & Development

TCJSgame was created by Owolabi Kehinde as a learning project that evolved into a full-featured game engine. Starting as Jgame in 2023, it became TCgame in 2024, and was rebranded to TCJSgame in 2025.

Version 3 introduces improved movement utilities, angle-based motion, TileMap rendering, a camera system, and a more robust Component class.

View Documentation

TCJSgame Playground

Experiment with TCJSgame directly in your browser using the official playground. Test code, create prototypes, and see results in real-time!

The playground supports both V3 and V2 of the TCJSgame engine with an intuitive interface for rapid development.

Open Playground

Quick Start

Get started with TCJSgame in minutes. Here's a simple example to create a basic game scene:

// Create a display (canvas)

const display = new Display();

display.start(800, 600);

// Create a player component

const player = new Component(50, 50, "blue", 100, 100, "rectangle");

player.speedX = 5;

// Add to display

display.add(player);

// Game loop

function update() {

  // Move player with arrow keys

  if (state.key("ArrowRight")) player.x += player.speedX;

  if (state.key("ArrowLeft")) player.x -= player.speedX;

}

Download Engine

Tutorials & Examples

Learn TCJSgame with step-by-step tutorials and examples:

View All Tutorials

Terra Codes

Terra Codes is a software company focused on creating tools for developers, designers, and computer enthusiasts.

About Terra Codes

Founded by a Nigerian teenager at age 16, Terra Codes aims to gather developers and create innovative software solutions.

Learn More

Dino Game Tutorial

Build a Chrome Dino-style game with TCJSgame V2. This step-by-step tutorial covers:

Setting up the game display
Creating player and obstacles
Implementing physics and collisions
Adding score tracking

View Code Snippet

// Create player with physics

const dino = new Component(37.5, 75, "img/dino.png", 0, display.canvas.height - 100, "image");

dino.physics = true;

dino.gravity = 1;

display.add(dino);

// Jump function

function jump() {

  if (dino.y >= display.canvas.height - dino.height) {

    dino.gravity = -8;

    setTimeout(() => { dino.gravity = 1; }, 180);

  }

}

View Full Tutorial

Dino Game - Complete Tutorial

🎮 Live Demo

Try the actual Dino game built with TCJSgame:

Play Dino Game Live

HTML File (index.html)

Create the main HTML file with game controls and layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dino game - TCJSgame</title>
    <script src="tcjsgame-v2.js"></script>
    <style>
        body {
            text-align: center;
            margin: 0;
            padding: 10px;
            background: #f0f0f0;
        }
        canvas {
            width: 75%;
            height: 75%;
            border: 2px solid #333;
            background: white;
        }
        button {
            width: 99%;
            border: none;
            padding: 12px;
            margin: 5px 0;
            background: #007BFF;
            color: white;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
        .gui {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 10px;
            max-width: 800px;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <script src="dino.js"></script>
    <div class="gui">
        <button onclick="jump()">Jump</button>
        <button onclick="resetHighscore()" accesskey="h">
            Reset Highscore
        </button>
    </div>
</body>
</html>
                

JavaScript Game Code (dino.js)

Create the game logic in a separate JavaScript file:

// Initialize game display
const display = new Display()
display.start()

// Setup highscore system
if(!localStorage.hs){
    localStorage.hs = 0
}

let s = 0  // Current score
let hs = Number(localStorage.hs)  // High score
display.backgroundColor("grey")
let jumpPower = -1

// Create UI components
const score = new Component("25px", "Cambria Math", "red", 10, 40, "text")
const hst = new Component("25px", "Consolas", "black", 240, 40, "text")
display.add(score)
display.add(hst)

// Create player character
const dino = new Component(75/2, 75, "img/dino.png", 0, display.canvas.height - 100, "image")
dino.physics = true
dino.gravity = 1
display.add(dino)

// Create obstacle
const obt = new Component(75/4, 75/2, "img/obt.png", display.canvas.width, display.canvas.height - 75/2, "image")
obt.speedX = -1
display.add(obt)

// Increase difficulty over time
setInterval(() => {
    obt.speedX -= 0.25
}, 3000)

// Score increment every second
setInterval(() => {
    s += 1
}, 1000)

// Jump function (used by both keyboard and button)
function jump() {
    if(dino.gravity == 1 && dino.y >= display.canvas.height - 75){
        dino.gravity = jumpPower
        s += 1  // Bonus points for jumping
        setTimeout(() => {
            dino.gravity = 1
        }, 250)
    }
}

// Reset highscore function
function resetHighscore() {
    let res = confirm('ARE YOU SURE YOU WANT TO RESET HIGHSCORE!!!')
    if(res){
        localStorage.hs = 0
        hs = 0
        alert('Highscore reset!')
    }
}

// Keyboard controls
window.addEventListener("keydown", function(e){
    if(e.key === " "){
        jump()
    }
})

// Main game loop
function update(){
    // Update score displays
    score.text = `Score : ${s}`
    hst.text = `Highscore : ${hs}`
    
    // Keep dino on ground
    if(dino.y >= display.canvas.height - 75){
        dino.y = display.canvas.height - 75
        dino.gravitySpeed = 0
    }
    
    // Recycle obstacles when they go off screen
    if(obt.x <= 0 - 75/2){
        obt.x = display.canvas.width
    }
    
    // Collision detection
    if(dino.crashWith(obt)){
        alert("you lose")
        obt.x = -74
        obt.speedX = -2
        s = 0  // Reset score
    }
    
    // Update highscore
    if(s > hs){
        hs = s
        localStorage.hs = s
    }
}
                

Project File Structure

Organize your files like this:

dino-game/
├── index.html          # Main HTML file
├── dino.js            # Game JavaScript code
├── tcjsgame-v2.js     # TCJSgame engine
└── img/
    ├── dino.png       # Player character (37.5x75px)
    └── obt.png        # Cactus obstacle (18.75x37.5px)
                

Enhanced Game Features

Here are some improvements you can add to your game:

// Add multiple obstacles
const obstacles = []

function createObstacle() {
    const obstacle = new Component(75/4, 75/2, "img/obt.png", 
        display.canvas.width, 
        display.canvas.height - 75/2, 
        "image")
    obstacle.speedX = -2 - Math.random() * 2
    display.add(obstacle)
    obstacles.push(obstacle)
}

// Create obstacles randomly
setInterval(createObstacle, 1500 + Math.random() * 1000)

// Enhanced update function for multiple obstacles
function update() {
    // ... existing code ...
    
    // Update all obstacles
    for(let i = obstacles.length - 1; i >= 0; i--) {
        const obstacle = obstacles[i]
        
        if(obstacle.x <= -obstacle.width) {
            display.remove(obstacle)
            obstacles.splice(i, 1)
        }
        
        if(dino.crashWith(obstacle)) {
            gameOver()
            break
        }
    }
}

function gameOver() {
    alert(`Game Over! Final Score: ${s}`)
    // Reset all obstacles
    obstacles.forEach(obs => display.remove(obs))
    obstacles.length = 0
    s = 0
}
                

🎯 What You'll Learn

🏗️ Component Creation

Creating game objects with images and physics

⚡ Physics System

Using gravity and physics for realistic movement

🎮 Input Handling

Keyboard controls and button interactions

💥 Collision Detection

Using crashWith() for game logic

📊 Data Persistence

Saving highscores with localStorage

🔄 Game Loop

Using the update() function effectively

📱 Mobile Support

Touch-friendly button controls

🎯 Progressive Difficulty

Increasing challenge over time

🖼️ Required Assets

Create an img/ folder with these images:

dino.png - Player character (37.5 × 75 pixels)
obt.png - Cactus obstacle (18.75 × 37.5 pixels)

Tip: You can use colored rectangles while testing: "green" instead of "img/dino.png"

🚀 Quick Start

Download TCJSgame V2 from the Download page
Create the three files: index.html, dino.js, and img/ folder
Copy the code above into your files
Open index.html in your browser
Press Spacebar or click the Jump button to play!

Play Live Demo Download TCJSgame Try in Playground

TCJSgame Extensions

Extend TCJSgame's capabilities with powerful official extensions. These add-ons provide specialized functionality for performance, text rendering, and advanced game features.

🚀 Performance Extensions

Optimize your games for better frame rates and smoother gameplay.

Patched Performance Extension

Performance

Complete performance overhaul with advanced optimization features.

Replaces game loop with requestAnimationFrame
Viewport culling for better rendering
Component caching system
Delta time integration
Real-time FPS monitoring

Installation:

<script src="tcjsgame-v2.js"></script>
<script src="patched-performance-extension.js"></script>
                            

Usage:

const display = new Display();
display.start(800, 600, document.body, {
    useDelta: true,        // Enable delta time
    enableCulling: true,   // Render only visible objects
    enableCaching: true    // Cache static components
});
                            

speed.js

Performance

Lightweight game loop optimization for consistent 60 FPS.

Optimized game loop timing
Frame rate stabilization
Minimal performance overhead
Easy integration

Installation:

<script src="tcjsgame-v2.js"></script>
<script src="speed.js"></script>
                            

tcjsgame-perf.js

Performance

General performance optimization with essential features.

requestAnimationFrame integration
Delta time support
Basic caching system
Viewport culling

Installation:

<script src="tcjsgame-v2.js"></script>
<script src="tcjsgame-perf.js"></script>
                            

📝 Text & UI Extensions

Enhanced text rendering and user interface components.

Tctxt Extension

Text

Advanced text rendering with background, stroke, and alignment options.

Custom font styling
Background padding
Text stroke/outline effects
Advanced alignment options
Dynamic text updates

Installation:

<script src="tcjsgame-v2.js"></script>
<script src="tcfont.js"></script>
                            

Usage:

// Create styled text with background
const scoreText = new Tctxt("20px", "Arial", "white", 50, 50, "left", 
    false, "alphabetic", "rgba(0,0,0,0.7)", 15, 10);
scoreText.text = "Score: 0";
display.add(scoreText);

// Update dynamically
function updateScore(points) {
    scoreText.text = `Score: ${points}`;
}
                            

🎵 Audio Extensions

Enhanced audio capabilities and sound management.

Advanced Audio

Audio

Extended audio features with spatial audio and effects.

Audio spatialization
Volume fading
Audio pooling
Cross-browser compatibility

Installation:

<script src="tcjsgame-v2.js"></script>
<script src="advanced-audio.js"></script>
                            

📥 Installation Guide

1. Download Extension

Get the extension file from the official repository or download link.

2. Include in HTML

Add the extension script after the main TCJSgame engine:

<script src="tcjsgame-v2.js"></script>
<script src="extension-name.js"></script>
                    

3. Initialize in Code

Use the extension features in your game code as shown in the examples.

📊 Extension Comparison

Extension	Type	Size	Browser Support	Difficulty
Patched Performance	Performance	~8KB	All modern browsers	Beginner
speed.js	Performance	~3KB	All modern browsers	Beginner
Tctxt	Text Rendering	~5KB	All modern browsers	Beginner

Easy to Learn

Lightweight

2D Game Focused

Extensible

About TCJSgame

TCJSgame Playground

Quick Start

Tutorials & Examples

Terra Codes

Dino Game Tutorial

Dino Game - Complete Tutorial

🎮 Live Demo

HTML File (index.html)

JavaScript Game Code (dino.js)

Project File Structure

Enhanced Game Features

🎯 What You'll Learn

🏗️ Component Creation

⚡ Physics System

🎮 Input Handling

💥 Collision Detection

📊 Data Persistence

🔄 Game Loop

📱 Mobile Support

🎯 Progressive Difficulty

🖼️ Required Assets

🚀 Quick Start

TCJSgame Extensions

🚀 Performance Extensions

Patched Performance Extension

Installation:

Usage:

speed.js

Installation:

tcjsgame-perf.js

Installation:

📝 Text & UI Extensions

Tctxt Extension

Installation:

Usage:

🎵 Audio Extensions

Advanced Audio

Installation:

📥 Installation Guide

1. Download Extension

2. Include in HTML

3. Initialize in Code

📊 Extension Comparison