Operators

Mathematical · String Operations · Boolean Expressions

Operators are the actual computations that run every frame to produce the game's behavior. The boss physically moves because of += (dx/distance) * moveSpeed. The laser system works because of vector math. The fight logic branches because of boolean comparisons.

➕ Mathematical

Every frame, mathematical operators update positions, calculate distances, and clamp values. The boss's chase AI is entirely arithmetic — subtract centers, divide by distance, multiply by speed.

Physics calculations — gravity, velocity, collision

// Boss movement — normalize direction vector, scale by speed
const dx = (target.position.x + target.width  / 2) - myCenterX;  // -
const dy = (target.position.y + target.height / 2) - myCenterY;  // -
const distance = Math.hypot(dx, dy);   // √(dx² + dy²)

this.position.x += (dx / distance) * this.moveSpeed;  // / * +=
this.position.y += (dy / distance) * this.moveSpeed;  // / * +=

// Laser position update each frame (+= velocity)
L.x += L.vx;   // +=
L.y += L.vy;   // +=
L.life -= 1;   // -=

// Math.max() prevents health from going negative
this.health = Math.max(0, this.health - amount);  // - inside max()

// Score calculation — time bonus + HP bonus
const score = baseScore + (timeRemaining * 10) + (playerHealth * 25);  // + *

🔤 String Operations

String operators build file paths, construct console messages, and create the CSS values that control visual effects. Template literals are the primary tool — they concatenate strings and variable values in one readable expression.

Path concatenation, text display

// Template literals — build asset paths dynamically
src: `${path}/images/gamify/${config.enemyImage}`

// String concatenation in HUD messages
hudText = `${config.enemyName} — HP: ${boss.health}/${boss.maxHealth}`;

// Template literal for console debug output
console.log(`[Boss] Hit! HP: ${this.health}/${this.maxHealth}`);
console.log(`[Hitbox] pos=(${Math.round(this.position.x)},${Math.round(this.position.y)})`);

// String used as CSS filter value
this.canvas.style.filter = 'grayscale(1) brightness(0.8)';

// encodeURIComponent() — string operation for API URL building
const url = `https://itunes.apple.com/search?term=${encodeURIComponent(searchTerm)}&entity=song`;

🔀 Boolean Expressions

Boolean expressions combine comparison operators (===, <, >, <=) with logical operators (&&, ||, !) to create compound conditions. The AABB collision check is the most complex: four comparisons joined by && to detect rectangle overlap.

Compound conditions in game logic

// AABB collision — all FOUR conditions must be true simultaneously with &&
if (hitLeft              <  boss.position.x + boss.width  &&   // left edge
    hitLeft + hitW        >  boss.position.x               &&   // right edge
    hitTop               <  boss.position.y + boss.height  &&   // top edge
    hitTop  + hitH        >  boss.position.y) {                  // bottom edge
  boss.takeDamage(1);
  this.lasers.splice(i, 1);
}

// || — fallback value, prevents divide-by-zero
const len = Math.hypot(dx, dy) || 1;

// ! — invert boolean flag to check "not defeated"
if (!boss.isDefeated && now - this.lastAttackAt >= cooldown) {
  this.spawnLaser();
}

// === comparison for exact equality checks
if (this.health === 0) { this.isDefeated = true; }
if (event.code === 'Space') { this.attackRequested = true; }

Summary table — operators in context

📚 Related Homework: Mathematical Expressions

Mathematical Expressions Homework — Shows understanding of mathematical operations used in position calculations, collision detection, and score computations.

▶ Operators Practice

Run the code below to see all three operator types in action — vector math for boss movement, a template literal HUD string, and a boolean AABB collision check.