Control Structures

Table of Contents

  1. Pong Game Loop Flowchart
  2. Iteration
  3. Conditionals
  4. Nested Conditions
  5. Control Structures in Pong

Pong Game Loop Flowchart

The flowchart below maps out Pong’s game loop — every box is a control structure you’ll find in the code on this page.

flowchart TD
    A([Game starts]) --> B[for each ball in balls array]
    B --> C{ball hit wall?}
    C -- yes --> D[vy *= -1]
    C -- no --> E{ball hit paddle?}
    D --> E
    E -- yes --> F[vx = reverse]
    E -- no --> G{ball out of bounds?}
    F --> G
    G -- yes --> H[score++]
    G -- no --> I[update position]
    H --> I
    I --> J{score >= 11?}
    J -- yes --> K([Game over])
    J -- no --> B

Control structures let you control the flow of your program using loops, conditionals, and nested logic. These are essential for game logic and decision-making.

Subrequirements

Iteration

What was learned: Iteration means repeating actions using loops like for, while, and forEach. In games, loops are used to update positions, check collisions, and animate objects every frame. Practicing iteration in Pong, Snake, and homeworks showed how essential loops are for building interactive programs.
Evidence: 
// From _notebooks/JavaScriptLessons/Iteration — for loop and while loop
// For loop iterating over an array — used in Pong to loop through all active balls
let fruits = ["Heart Shaped Herb", "Yami Yami no Mi", "Gomu Gomu no Mi"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// While loop — used in game engine to keep running until condition is false
let length = 1;
while (length <= 10) {
    console.log("🌿".repeat(length));
    length += 1;
}

// From hacks/pong.md — Game.update() loops through all active balls every frame
for (const b of this.balls) {
    b.update();
}

Code Runner Challenge

Hit Run to see three types of iteration in action: a for loop, a while loop, and a forEach. These are the same patterns used in the Pong game to update balls every frame.

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

Quick Quiz: Iteration

  1. What is the main purpose of a for loop in a game like Pong?
    • a) To draw graphics
    • b) To repeat actions for multiple objects
    • c) To handle user input
  2. What does the while loop in the game engine do?
  3. How does using forEach help when working with arrays?
Show Answers 1. b) To repeat actions for multiple objects 2. It keeps the game running until a certain condition is met (like a win). 3. It lets you process each item in an array without managing an index.

Conditionals

What was learned: Conditionals use if, else, and switch to make decisions in code. They let us respond to player actions, check for win conditions, and control game flow. Applying conditionals in Pong and homeworks made it clear how games react to different situations.
Evidence: 
// From hacks/pong.md — Ball.update() uses conditionals for wall bouncing and scoring
update() {
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;
    if (this.position.y + this.radius > this.boundsHeight || this.position.y - this.radius < 0) {
        this.velocity.y *= -1;
    }
}

// From hacks/pong.md — Game.checkWin()
checkWin() {
    if (this.scores.p1 >= Config.rules.winningScore || this.scores.p2 >= Config.rules.winningScore) {
        this.gameOver = true;
        return true;
    }
    return false;
}

Code Runner Challenge

Hit Run to see if/else conditionals working like they do in Pong — checking ball position, scoring, and win state. Change the score or ballY values and run again to see different outcomes.

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

Nested Conditions

What was learned: Nested conditions are when we put one conditional inside another, allowing for multi-step decisions. This is useful for handling complex game logic, like checking for power-ups and special events. Practicing nested conditions in Pong and homeworks helped me understand how to manage advanced scenarios in code.
Evidence: 
// From hacks/pong.md — nested conditionals for multi-ball power-up trigger
const p1Multiple = (this.scores.p1 > 0 && this.scores.p1 % 3 === 0);
const p2Multiple = (this.scores.p2 > 0 && this.scores.p2 % 3 === 0);

if (
    ((p1Multiple && this.multiTriggered.p1 !== this.scores.p1) ||
     (p2Multiple && this.multiTriggered.p2 !== this.scores.p2)) &&
    this.balls.length === 1
) {
    if (p1Multiple) this.multiTriggered.p1 = this.scores.p1;
    if (p2Multiple) this.multiTriggered.p2 = this.scores.p2;
    // spawn second ball...
}

Code Runner Challenge

Hit Run to see nested conditionals in action — the same logic pattern Pong uses for power-ups. An outer check (is the score a multiple of 3?) contains an inner check (which player triggered it?).

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

Gamerunner — Control Structures in Pong

Below is a live Pong game. Every frame it uses a for loop (to update each ball), if/else conditionals (wall bounce, scoring), and nested conditions (power-up trigger when score hits a multiple of 3). Use W/S and Arrow keys to play.

Challenge

Show control structures in Pong

Lines: 1 Characters: 0
Game Status: Not Started