TCJSGAME

TCJSgame

Version: 3.0 | Date: September 3, 2025

Description: tcjsgame-v3.js is the latest version of the 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. It also includes utility objects (move and state) to handle entity movement, physics, collisions, and state checks with minimal code. View documentation here

Terra Codes

Introduction

TCJSGAME

Version: 2.0 | Date: March 12, 2025

Description: tcjsgame.js is a lightweight JavaScript game engine for creating 2D games with a canvas-based rendering system. It includes classes for managing display, components, cameras, sounds, and sprites, along with utility objects (move and state) for manipulating game entities.

Build the Dino Game using TCJSgame

1. Files & includes
   Create (or confirm) these files in your project:
   • tcjsgame-v2.js — the engine
   • dino.js — your game logic
   • dino.html — the page that loads them
   In your HTML include the engine first, then your game file:

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

See more...
Start the display (canvas)
In dino.js create a Display and start it near the top of the file:
// in dino.js
const display = new Display();
display.start(480, 270); // width, height (optional)
The engine creates and inserts the canvas and begins calling update() each frame.
Score & highscore
Create variables and add text components to show score and highscore:
let s = 0;
let hs = Number(localStorage.getItem('hs')) || 0;

const score = new Component("25px", "Cambria Math", "red", 10, 40, "text");
const hst = new Component("20px", "Consolas", "black", 240, 40, "text");
display.add(score);
display.add(hst);
Use localStorage so the highscore persists across reloads.
Create the Dino (player)
Make Dino as an image component, enable physics & gravity:
const dino = new Component(37.5, 75, "img/dino.png", 0, display.canvas.height - 100, "image");
dino.physics = true;
dino.gravity = 1; // normal downward gravity
display.add(dino);
Notes: gravity is a number (positive pulls down). We'll set a negative jump value when jumping.
Create the obstacle
Place it at the right edge and give it a negative X speed so it moves left:
const obt = new Component(75/4, 75/2, "img/obt.png",
  display.canvas.width, display.canvas.height - 75/2, "image");
obt.speedX = -1; // leftward movement
display.add(obt);
You can later increase obt.speedX over time to make the game harder.
Increment score over time
Add a timer to reward survival:
setInterval(() => {
  s += 1;
}, 1000); // +1 every second
Jump controls (keyboard + button)
Implement a reusable jump function and wire the spacebar and any on-screen button to it:
function jump() {
  // only jump if on the ground
  if (dino.y >= display.canvas.height - dino.height) {
    dino.gravity = -6;          // b upward acceleration (tweak value)
    setTimeout(() => { dino.gravity = 1; }, 200); // restore gravity quickly
  }
}

window.addEventListener('keydown', (e) => {
  if (e.key === ' ') jump(); // spacebar
});
For a mobile button, use: <button onclick="jump()">Jump</button>.
The update() game loop
The engine calls update() every frame. Put logic to update UI, handle ground, recycle obstacles, detect collisions, and save highscores here:
function update() {
  // update text
  score.text = `Score : ${s}`;
  hst.text = `Highscore : ${hs}`;

  // keep dino on ground
  if (dino.y >= display.canvas.height - dino.height) {
    dino.y = display.canvas.height - dino.height;
    dino.gravitySpeed = 0;
  }

  // recycle obstacle when offscreen
  if (obt.x <= -obt.width) {
    obt.x = display.canvas.width;
  }

  // collision detection
  if (dino.crashWith(obt)) {
    alert("You lose!");
    s = 0;
    // move obstacle away or reset it
    obt.x = display.canvas.width;
  }

  // highscore
  if (s > hs) {
    hs = s;
    localStorage.setItem('hs', hs);
  }
}
Notes: keep update() fast — it runs every frame.
Polish & difficulty
A few ideas to improve gameplay:
• Increase obt.speedX or reduce the interval between spawns as s grows.
• Add multiple obstacles, random heights, or gaps.
• Add images and a sprite sheet for animated Dino frames (use the engine's Sprite class).
• Add sounds using the Sound class.
Common bugs & tips
• Gravity type: Use numbers for gravity (e.g. 1), not booleans — the engine does gravitySpeed += gravity.
• Jump tuning: If the Dino feels floaty, increase negative jump (e.g. -8) and shorten the time you keep negative gravity.
• Responsive canvas: change canvas size in display.start() and adjust game coordinates when size changes.
• Debugging: add console.log() for positions and collision checks while tuning.

// Minimal core (put into dino.js after including the engine)
const display = new Display();
display.start(480,270);

let s = 0;
let hs = Number(localStorage.getItem('hs')) || 0;

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

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

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

setInterval(()=> s += 1, 1000);

function jump(){
  if(dino.y >= display.canvas.height - dino.height){
    dino.gravity = -8;
    setTimeout(()=> dino.gravity = 1, 180);
  }
}
window.addEventListener('keydown', e => { if(e.key === ' ') jump(); });

function update(){
  score.text = `Score : ${s}`; hst.text = `Highscore : ${hs}`;
  if(dino.y >= display.canvas.height - dino.height){ dino.y = display.canvas.height - dino.height; dino.gravitySpeed = 0; }
  if(obt.x <= -obt.width) obt.x = display.canvas.width;
  if(dino.crashWith(obt)){ alert('You lose'); s = 0; obt.x = display.canvas.width; }
  if(s > hs){ hs = s; localStorage.setItem('hs', hs); }
}

TCJSGAME

Version: 2.0 | Date: March 12, 2025

Description: tcjsgame.js is a lightweight JavaScript game engine for creating 2D games with a canvas-based rendering system. It includes classes for managing display, components, cameras, sounds, and sprites, along with utility objects (move and state) for manipulating game entities.

Version: 1.0 | Date: March 12, 2025

Description: tcjsgame.js is a lightweight JavaScript game engine for creating 2D games with a canvas-based rendering system. It includes classes for managing display, components, sounds, and sprites, along with utility objects (move and state) for manipulating game entities.

History