Data Types

Table of Contents

  1. Numbers
  2. Strings
  3. Booleans
  4. Arrays
  5. Objects (JSON)
  6. Confetti Cannon Demo

Data types are the building blocks of all programs. You use numbers, strings, booleans, arrays, and objects to store and manipulate information.

Subrequirements

Numbers

What was learned: Numbers are used to represent values like position, speed, and score in games and apps. They are the basis for all calculations, from moving a ball to keeping track of points. Working with numbers in Pong and the Calculator project showed how math drives game mechanics and user feedback.
Evidence: 
// From hacks/pong.md — Config object stores all numeric game values
const Config = {
    canvas: { width: 800, height: 500 },
    paddle: { width: 10, height: 100, speed: 10.5 },
    ball: { radius: 10, baseSpeedX: 5, maxSpeed: 15 },
    rules: { winningScore: 11 }
};

// Ball position and velocity are numbers updated every frame
// From hacks/pong.md — Ball.update()
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;

Code Runner Challenge

Hit Run to see numeric properties in action — position, velocity, and score tracking exactly as used in Pong. Change the speed value and re-run to see how it affects the ball movement simulation.

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

Quick Quiz: Numbers

  1. What data type is used to store a player’s score in Pong?
    • a) String
    • b) Number
    • c) Boolean
  2. What happens if you forget to use parseInt() when reading a number from localStorage?
  3. How does changing the ball speed value affect the game?
Show Answers 1. b) Number 2. You might get string concatenation instead of addition, causing bugs. 3. The ball moves faster or slower, changing the difficulty.

Strings

What was learned: Strings are sequences of characters used for names, messages, and game states. They let us display information to players and manage text-based data. Practicing string operations in Pong and homeworks made it clear how important clear communication is in software.
Evidence: 
// From _notebooks/JavaScriptLessons/Strings/2026-01-27-Strings.ipynb
let firstName = "John";
let lastName = "Smith";
let fullName = firstName + " " + lastName;
console.log(fullName); // "John Smith"

// From hacks/pong.md — Renderer.text() draws string score/messages on canvas
text(t, x, y, color = Config.visuals.text) {
    this.ctx.fillStyle = color;
    this.ctx.font = "30px Arial";
    this.ctx.fillText(t, x, y);
}
// Called as: this.renderer.text("Speed: " + maxSpeed.toFixed(2), canvas.width - 200, 30);

Code Runner Challenge

Hit Run to see string manipulation — concatenation, template literals, and methods — exactly as used in Pong's score display and the Strings homework. Try changing the playerName value.

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

Booleans

What was learned: Booleans are true/false values that control logic and state in programs. In games, they help track things like whether the game is paused, if a player has won, or if a collision happened. Using booleans in Pong and homeworks helped me understand how to manage game flow and decisions.
Evidence: 
// From hacks/pong.md — Boolean state flags in the Game class
this.gameOver = false;
this.paused = false;

// togglePause flips the boolean
togglePause() { this.paused = !this.paused; if (!this.paused) this.loop(); }

// From _notebooks/JavaScriptLessons/Booleans — boolean operators in game-like logic
let hasLicense = true;
let hasCar = false;
let canDrive = hasLicense && hasCar; // false — both must be true
console.log("Can drive: " + canDrive);

Code Runner Challenge

Hit Run to see boolean flags controlling game state — the same pattern as Pong's gameOver and paused flags. Watch how toggling one boolean changes which code path runs.

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

Arrays

What was learned: Arrays are lists that let us store and manage groups of related data, like game objects or scores. They make it easy to loop through and update many items at once. Using arrays in Pong and homeworks showed how to efficiently handle collections in code.
Evidence: 
// From hacks/pong.md — Game stores multiple balls in an array
this.balls = [ new Ball(Config.ball.radius, Config.canvas.width, Config.canvas.height) ];

// Loop through all balls to update them (from Game.update())
for (const b of this.balls) { b.update(); }

// From _notebooks/JavaScriptLessons/Arrays — modifying arrays
let colors = ["red", "blue", "green"];
colors.push("purple");           // add element
colors.splice(colors.indexOf("red"), 1); // remove element
console.log(colors);             // ["blue", "green", "purple"]

Code Runner Challenge

Hit Run to see array operations — push, splice, forEach, and for..of — exactly as used in Pong's multi-ball system and the Arrays homework. Try changing the starting ball count.

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

Objects (JSON)

What was learned: Objects and JSON let us organize data with named properties, making it easy to store settings, player info, or game state. They are used for configuration and to pass complex data between parts of a program. Working with objects in Pong and homeworks helped me see how to structure and access information efficiently.
Evidence: 
// From hacks/pong.md — nested Config object organizes all game settings
const Config = {
    canvas: { width: 800, height: 500 },
    paddle: { width: 10, height: 100, speed: 10.5 },
    ball: { radius: 10, baseSpeedX: 5, maxSpeed: 15 },
    powerUp: { spawnMinSec: 6, spawnMaxSec: 14, durationSec: 6 },
    visuals: { bg: "#000", fg: "#fff", text: "#fff", win: "yellow" }
};

// From _notebooks/JavaScriptLessons/JSON — JavaScript object with function property
const student = {
    name: "Alex",
    age: 16,
    enrolled: true,
    greet: function () { return "Hello!"; }
};
console.log(student.name); // "Alex"

Code Runner Challenge

Hit Run to see nested objects, property access, and JSON serialization — the same structure as Pong's Config object and the leaderboard sprite data in localStorageDemo.js.

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

Gamerunner — Confetti Cannon

Hit Start — confetti fires automatically on load, and again every time you click. Under the hood it's just an array of particle objects, each with numeric position/velocity properties, a string color, and a boolean alive flag. Every frame a forEach loop updates them all. Five data types, one fun demo.

Challenge

Confetti cannon — array of particle objects, auto-fires on load and on every click!

Lines: 1 Characters: 0
Game Status: Not Started