TCJSGame Component Class: Complete Reference Guide
Introduction to the Component Class
The Component Class is the fundamental building block of TCJSGame, representing all game objects, characters, items, and UI elements. Every visible entity in your game is a Component instance.
🏗️ Component Creation and Initialization
Basic Component Creation
// Syntax: new Component(width, height, color, x, y, type)
// Rectangle component
const player = new Component(50, 50, "red", 100, 100, "rect");
// Image component
const enemy = new Component(64, 64, "images/enemy.png", 200, 150, "image");
// Text component
const scoreText = new Component(20, 20, "white", 10, 30, "text");
scoreText.text = "Score: 0";
// Circle (using rect type with equal dimensions)
const ball = new Component(40, 40, "blue", 300, 200, "rect");
Constructor Parameters
class Component {
constructor(
width = 0, // Width of the component
height = 0, // Height of the component
color = null, // Color or image path
x = 0, // X position
y = 0, // Y position
type // "rect", "image", or "text"
) {
// Initialization code...
}
}
⚙️ Core Properties
Position and Size Properties
const box = new Component(100, 50, "green", 200, 150, "rect");
// Position properties
box.x = 250; // Set X coordinate
box.y = 300; // Set Y coordinate
console.log(box.x); // Get X coordinate
// Size properties
box.width = 120; // Set width
box.height = 60; // Set height
console.log(box.width); // Get width
// Center point calculation
const centerX = box.x + box.width / 2;
const centerY = box.y + box.height / 2;
Physics and Movement Properties
const player = new Component(30, 30, "blue", 100, 100, "rect");
// Enable physics
player.physics = true;
// Gravity settings
player.gravity = 0.5; // Gravity strength
player.gravitySpeed = 0; // Current gravity velocity
// Movement speeds
player.speedX = 2; // Horizontal speed
player.speedY = -3; // Vertical speed
// Bounce factor (0-1)
player.bounce = 0.6; // Bounce elasticity
Visual Properties
const obj = new Component(40, 40, "red", 100, 100, "rect");
// Color and appearance
obj.color = "yellow"; // Change color
obj.color = "#FF0000"; // Hex color
obj.color = "rgba(255,0,0,0.5)"; // With transparency
// Rotation
obj.angle = 45 * Math.PI / 180; // Rotate 45 degrees (radians)
obj.changeAngle = true; // Enable rotation rendering
// For image components
if (obj.type === "image") {
console.log(obj.image.src); // Access image source
}
🎯 Core Methods
Movement Methods
const player = new Component(30, 30, "blue", 100, 100, "rect");
// Basic movement (automatically called each frame)
player.move();
// Angular movement (for rotated movement)
player.moveAngle();
// Stop all movement
player.stopMove();
// Boundary collision
player.hitBottom(); // Handle hitting bottom of canvas
Rendering Methods
const obj = new Component(50, 50, "red", 100, 100, "rect");
// Standard update (called automatically)
obj.update();
// Backup update method (for show/hide functionality)
obj.bUpdate();
// Visibility control
obj.hide(); // Make invisible
obj.show(); // Make visible again
Interaction Methods
const button = new Component(200, 50, "green", 300, 400, "rect");
// Check if component was clicked/tapped
if (button.clicked()) {
console.log("Button was clicked!");
}
// Collision detection with another component
const player = new Component(30, 30, "blue", 100, 100, "rect");
const enemy = new Component(40, 40, "red", 120, 120, "rect");
if (player.crashWith(enemy)) {
console.log("Player collided with enemy!");
}
🎮 Practical Usage Examples
Player Character with Physics
// Create player with physics
const player = new Component(30, 30, "blue", 100, 100, "rect");
player.physics = true;
player.gravity = 0.5;
player.bounce = 0.3;
// Add to display
display.add(player);
// In update function
function update() {
// Keyboard controls
if (display.keys[37]) player.speedX = -5; // Left
if (display.keys[39]) player.speedX = 5; // Right
if (display.keys[38] && player.gravitySpeed === 0) {
player.speedY = -12; // Jump
}
// Boundary checking
if (player.y > display.canvas.height - player.height) {
player.hitBottom();
}
}
Interactive UI Button
// Create a button
const startButton = new Component(200, 60, "green", 300, 250, "rect");
startButton.text = "START GAME";
display.add(startButton);
// Click handling
function update() {
if (startButton.clicked()) {
console.log("Game started!");
startButton.color = "darkgreen"; // Visual feedback
}
}
Projectile System
const bullets = [];
function shootBullet(x, y, angle) {
const bullet = new Component(10, 10, "yellow", x, y, "rect");
bullet.physics = true;
bullet.speedX = Math.cos(angle) * 10;
bullet.speedY = Math.sin(angle) * 10;
display.add(bullet);
bullets.push(bullet);
}
// Clean up off-screen bullets
function update() {
bullets.forEach((bullet, index) => {
if (bullet.x < 0 || bullet.x > display.canvas.width ||
bullet.y < 0 || bullet.y > display.canvas.height) {
bullet.hide();
bullets.splice(index, 1);
}
});
}
🔄 Advanced Movement Patterns
Following Mouse/Touch
const follower = new Component(30, 30, "purple", 200, 200, "rect");
function update() {
// Smooth follow mouse
follower.x += (mouse.x - follower.x) * 0.1;
follower.y += (mouse.y - follower.y) * 0.1;
}
Orbital Movement
const planet = new Component(20, 20, "orange", 400, 300, "rect");
const centerX = 400, centerY = 300;
let angle = 0;
function update() {
angle += 0.02;
planet.x = centerX + Math.cos(angle) * 100;
planet.y = centerY + Math.sin(angle) * 100;
}
Sine Wave Movement
const waveObj = new Component(20, 20, "cyan", 100, 300, "rect");
let time = 0;
function update() {
time += 0.1;
waveObj.x += 2;
waveObj.y = 300 + Math.sin(time) * 50;
// Reset when off screen
if (waveObj.x > display.canvas.width) {
waveObj.x = -20;
}
}
🎨 Visual Effects and Animation
Pulsating Effect
const pulsator = new Component(50, 50, "red", 200, 200, "rect");
let scale = 1;
let growing = true;
function update() {
if (growing) {
scale += 0.02;
if (scale > 1.5) growing = false;
} else {
scale -= 0.02;
if (scale < 0.5) growing = true;
}
pulsator.width = 50 * scale;
pulsator.height = 50 * scale;
}
Color Cycling
const colorChanger = new Component(50, 50, "red", 300, 200, "rect");
let hue = 0;
function update() {
hue = (hue + 1) % 360;
colorChanger.color = `hsl(${hue}, 100%, 50%)`;
}
Rotation Animation
const spinner = new Component(40, 40, "green", 400, 200, "rect");
spinner.changeAngle = true;
function update() {
spinner.angle += 0.05; // Rotate continuously
}
⚡ Performance Optimization
Object Pooling for Frequent Creation/Destruction
class ObjectPool {
constructor(createFunc) {
this.pool = [];
this.create = createFunc;
}
get() {
if (this.pool.length > 0) {
return this.pool.pop();
}
return this.create();
}
release(obj) {
obj.hide();
this.pool.push(obj);
}
}
// Usage for bullets
const bulletPool = new ObjectPool(() => {
return new Component(10, 10, "yellow", 0, 0, "rect");
});
function shootBullet(x, y) {
const bullet = bulletPool.get();
bullet.show();
bullet.x = x;
bullet.y = y;
bullet.speedX = 5;
// ... other setup
}
Efficient Collision Detection
// Spatial partitioning for better performance
const grid = {};
function updateObjectGrid(obj) {
const gridX = Math.floor(obj.x / 100);
const gridY = Math.floor(obj.y / 100);
const key = `${gridX},${gridY}`;
if (!grid[key]) grid[key] = [];
grid[key].push(obj);
}
function checkLocalCollisions(obj) {
const gridX = Math.floor(obj.x / 100);
const gridY = Math.floor(obj.y / 100);
// Only check collisions with objects in nearby cells
for (let x = gridX - 1; x <= gridX + 1; x++) {
for (let y = gridY - 1; y <= gridY + 1; y++) {
const key = `${x},${y}`;
if (grid[key]) {
grid[key].forEach(other => {
if (obj !== other && obj.crashWith(other)) {
// Handle collision
}
});
}
}
}
}
🔧 Common Patterns and Recipes
Health Bar System
class HealthBar {
constructor(x, y, width, height, maxHealth) {
this.background = new Component(width, height, "red", x, y, "rect");
this.foreground = new Component(width, height, "green", x, y, "rect");
this.maxHealth = maxHealth;
this.currentHealth = maxHealth;
}
setHealth(health) {
this.currentHealth = Math.max(0, Math.min(health, this.maxHealth));
const ratio = this.currentHealth / this.maxHealth;
this.foreground.width = this.background.width * ratio;
}
addToDisplay() {
display.add(this.background);
display.add(this.foreground);
}
}
// Usage
const healthBar = new HealthBar(50, 20, 200, 20, 100);
healthBar.addToDisplay();
healthBar.setHealth(75); // Set to 75% health
Timer Component
class GameTimer {
constructor(x, y) {
this.time = 0;
this.displayText = new Component(20, 20, "white", x, y, "text");
this.running = true;
}
update() {
if (this.running) {
this.time += 1/50; // Assuming 50 FPS
this.displayText.text = `Time: ${this.time.toFixed(1)}s`;
}
}
stop() {
this.running = false;
}
reset() {
this.time = 0;
this.running = true;
}
}
🐛 Troubleshooting Common Issues
Component Not Visible
// Check if component was added to display
const obj = new Component(50, 50, "red", 100, 100, "rect");
display.add(obj); // Don't forget this!
// Check if component is hidden
obj.show(); // Ensure it's visible
// Check if in correct scene
display.scene = 0; // Make sure scene matches
Physics Not Working
const obj = new Component(50, 50, "blue", 100, 100, "rect");
// Enable physics
obj.physics = true; // Required for gravity/movement
// Set gravity
obj.gravity = 0.5; // Add downward force
// Ensure move() is called (handled automatically by Display)
Collision Detection Issues
// Ensure both objects have proper dimensions
obj1.width = 50; obj1.height = 50;
obj2.width = 50; obj2.height = 50;
// Check positions are overlapping
console.log("Obj1:", obj1.x, obj1.y);
console.log("Obj2:", obj2.x, obj2.y);
// Use crashWith method correctly
if (obj1.crashWith(obj2)) {
// Handle collision
}
📚 Conclusion
The Component Class is the workhorse of TCJSGame, providing:
Visual representation through rectangles, images, and text
Physics and movement capabilities
Collision detection between game objects
Interaction handling for mouse/touch input
Flexible rendering with rotation and styling options
Mastering Components is essential for creating engaging TCJSGame experiences. They serve as the foundation for everything from simple UI elements to complex game characters and interactive objects.
Remember to always add your Components to the Display using display.add(component) and leverage the built-in physics and collision systems for realistic game behavior.