Mathematical Operators — Physics in the Game

The game engine uses +, -, *, / constantly for physics. Here is a real example from Character.js showing gravity and velocity:

Code Runner Challenge

Simulate a simple gravity physics loop. Modify initialVelocity and see how height changes each frame.

View IPYNB Source 
// Character.js — gravity & position update
this.acceleration = 0.001;
this.time = 0;

// Each frame:
this.time += 1;
this.velocity.y += this.acceleration * this.time;  // gravity increases over time
this.position.x += this.velocity.x * this.scale.width;  // horizontal movement
this.position.y += this.velocity.y * this.scale.height; // vertical movement
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

And from Player.js — hitbox sizing:

Code Runner Challenge

Practice template literals. Update the player stats object and watch the scoreboard re-render.

View IPYNB Source 
// SCALE_FACTOR = 25  (1/25 of canvas height)
this.size = gameEnv.innerHeight / this.scaleFactor;
this.width  = this.size * (data.pixels.width  / data.pixels.height);
this.height = this.size;
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Code Runner Challenge

Compound boolean conditions for game logic. Toggle the flags and observe different outcomes.

View IPYNB Source 
%%js
//CODE_RUNNER: Simulate a simple gravity physics loop. Modify initialVelocity and see how height changes each frame.

let position  = { x: 0, y: 0 };   // Numbers: starting position
let velocity  = { x: 3, y: -8 };  // Numbers: initial velocity (negative y = upward)
const gravity = 0.5;               // Numbers: gravitational pull per frame
const frames  = 20;

console.log('Frame | X pos | Y pos | Y velocity');
for (let i = 0; i < frames; i++) {
    velocity.y += gravity;            // gravity adds to downward velocity each frame
    position.x += velocity.x;
    position.y += velocity.y;
    console.log(`${i + 1}`.padStart(5), '|',
        position.x.toFixed(1).padStart(5), '|',
        position.y.toFixed(1).padStart(6), '|',
        velocity.y.toFixed(2));
    if (position.y >= 0 && i > 0) {  // hit the ground
        console.log('>>> Landed at frame', i + 1);
        break;
    }
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

String Operations — Template Literals

Template literals (backtick strings) let you embed variables directly. The game uses them heavily. From login.js:

// login.js — builds HTML dynamically with template literals
loginArea.innerHTML = `
    <button class="dropbtn">${data.name}</button>
    <div>Roles: ${data.roles.map(role => role.name).join(", ")}</div>
    <a href="${baseurl}/profile">Profile</a>
`;

From config.js — conditional path building:

export const baseurl = "";
pythonURI = location.hostname === 'localhost'
    ? 'http://localhost:8587'
    : 'https://flask.opencodingsociety.com';

%%js
//CODE_RUNNER: Practice template literals. Update the player stats object and watch the scoreboard re-render.

// String & Number data types together
const player = {
    name: 'Seonyoo',
    score: 1420,
    level: 3,
    isAlive: true      // Boolean flag
};

// Template literal builds the display string
const status = `Player: ${player.name} | Score: ${player.score} | Level: ${player.level} | Alive: ${player.isAlive}`;
console.log(status);

// String concatenation vs template literal — same result, different style
const oldStyle = 'Player: ' + player.name + ' scored ' + player.score + ' points.';
const newStyle = `Player: ${player.name} scored ${player.score} points.`;
console.log('Old style:', oldStyle);
console.log('New style:', newStyle);

// Path building (like config.js / sprite paths)
const basePath = '/portfoliov19';
const spritePath = `${basePath}/images/gamify/chillguy.png`;
console.log('Sprite path:', spritePath);

Boolean Expressions — Compound Conditions

The game uses &&, ||, and ! throughout collision detection and state logic. From Player.js:

// Player.js — compound boolean conditions
if (this.pressedKeys[65] || this.pressedKeys[37]) {  // A or ←
    this.velocity.x = -this.xVelocity;
}
if (this.pressedKeys[87] && this.gravity && !this.isJumping) {  // W + gravity + not already jumping
    this.velocity.y = -this.yVelocity;
    this.isJumping = true;
}

%%js
//CODE_RUNNER: Compound boolean conditions for game logic. Toggle the flags and observe different outcomes.

const state = {
    isJumping:    false,
    hasGravity:   true,
    isVulnerable: true,
    hasPowerUp:   false,
    health:       75
};

// && — AND: both must be true
if (state.hasGravity && !state.isJumping) {
    console.log('Player can jump (gravity on, not already jumping)');
}

// || — OR: at least one must be true
if (state.hasPowerUp || state.health > 50) {
    console.log('Player is strong enough to fight the boss');
}

// Nested compound condition — like collision + power-up + direction check
const collision  = true;
const direction  = 'right';
if (collision && state.isVulnerable && !state.hasPowerUp && direction === 'right') {
    state.health -= 20;
    console.log(`Ouch! Hit from the right. Health now: ${state.health}`);
}

// Boolean short-circuit evaluation
const damage = state.hasPowerUp ? 0 : 15;   // ternary operator
console.log(`Damage taken: ${damage}`);

Summary

Operator type Symbols Game usage
Mathematical + - * / % Position, velocity, gravity, sizing
String ` ${} + .join() Sprite paths, UI display, API URLs
Boolean && \|\| ! == Collision logic, input handling, state flags