Operators

Table of Contents

  1. Mathematical Operators
  2. String Operations
  3. Boolean Expressions
  4. Calculator Game Demo

Operators let you perform calculations and logic in your code. This includes math, string, and boolean operations.

Subrequirements

Mathematical

What was learned: Mathematical operators like +, -, *, /, and % are the foundation for calculations in any program. In our games, these operators are used to update positions, calculate scores, and handle physics like ball bounces and speed. Applying these operators in Pong and the Calculator project helped reinforce how math powers interactive features.
Evidence: 
// From hacks/pong.md — math operators throughout Game.update()
// Ball position updated with addition each frame
this.position.x += this.velocity.x;   // +=  (addition assignment)
this.position.y += this.velocity.y;

// Bumper collision uses *, /, sqrt for vector math
const dx = b.position.x - cx;
const dy = b.position.y - cy;
const dist = Math.sqrt(dx * dx + dy * dy);   // * and sqrt
const overlap = (minDist - dist) + 0.5;       // -, +

// Multi-ball triggers use modulo to detect multiples of 3
const p1Multiple = (this.scores.p1 > 0 && this.scores.p1 % 3 === 0);

Code Runner Challenge

Hit Run to see all math operators from Pong's physics — addition, subtraction, multiplication, division, modulo, and Math.sqrt — applied to real ball movement and collision calculations.

Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Quick Quiz: Mathematical Operators

  1. Which operator is used to add two numbers in JavaScript? - a) * - b) + - c) /
  2. What does the modulo operator (%) do in the Pong game?
  3. Why is Math.sqrt used in collision calculations?
Show Answers 1. b) + 2. It checks for multiples (like triggering a power-up every 3 points). 3. To calculate the distance between two points (for collision detection).

String Operations

What was learned: String operations let us join, format, and display text in our programs. In Pong, we use string concatenation to show scores and messages to players. Practicing string manipulation in both games and homeworks made it clear how important clear communication is in software.
Evidence:
  • Pong Game: Score display using string concatenation in Renderer.text()
  • Homeworks: Strings Homework
// From hacks/pong.md — string concatenation for live speed display
this.renderer.text("Speed: " + maxSpeed.toFixed(2), Config.canvas.width - 200, 30);

// Win message built with conditional string
const msg = this.scores.p1 >= Config.rules.winningScore ? "Player 1 Wins!" : "Player 2 Wins!";
this.renderer.text(msg, Config.canvas.width / 2 - 120, Config.canvas.height / 2 + 20, Config.visuals.win);

// From _notebooks/JavaScriptLessons/Strings — concatenation to build sentences
let firstName = "John";
let lastName  = "Smith";
let fullName  = firstName + " " + lastName;
console.log(fullName); // "John Smith"

Code Runner Challenge

Hit Run to see string operations — concatenation, template literals, and path building — exactly as used in Pong's HUD and the sprite path strings in localStorageDemo.js.

Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Boolean Expressions

What was learned: Boolean expressions use &&, ||, and ! to combine and invert conditions, letting us control game logic and flow. In Pong, these are used to check for win conditions, pause states, and power-up collisions. Mastering boolean logic is key to making games respond correctly to player actions and events.
Evidence: 
// From hacks/pong.md — boolean expressions for paddle hit detection (&&)
const hitLeft = b.position.x - b.radius < this.paddleLeft.width &&
    b.position.y > this.paddleLeft.position.y &&
    b.position.y < this.paddleLeft.position.y + this.paddleLeft.height;

// From hacks/pong.md — wall bounce uses || (or)
if (this.position.y + this.radius > this.boundsHeight || this.position.y - this.radius < 0) {
    this.velocity.y *= -1;
}

// From _notebooks/JavaScriptLessons/Booleans — combining operators
let hasLicense = true;
let hasCar     = false;
let canDrive   = hasLicense && hasCar;  // false — both required
let canTravel  = hasLicense || hasCar;  // true  — at least one
let noLicense  = !hasLicense;           // false — logical NOT
console.log("Can drive: " + canDrive);

Code Runner Challenge

Hit Run to see &&, ||, and ! in real game logic — paddle collision detection, wall bounces, and win checks from hacks/pong.md, plus the Booleans homework examples.

Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Gamerunner — Operators in a Calculator Game

This calculator game demonstrates all three operator types at once: mathematical (arithmetic), string (display formatting), and boolean (input validation). Click the buttons to build an expression and hit = to evaluate.

Challenge

Calculator game showing math, string, and boolean operators together

Lines: 1 Characters: 0
Game Status: Not Started