Definition And Explanation

In coding, classes and variables are two very important things in your coding journey. A class is very similar to a blueprint; it defines what an object should do and how it should do it. For example, if you were to create a class named “Car”, that class isn’t just a car. It can have details like the color of the car, what brand the car is, the top speed of the car, and many more ideas. On the other hand, we have variables. These are used to store information. These can be numbers, words, or even objects created from classes. You can think of variables as of a container that holds a piece of data. When you combine these two, they both make your code more organized and easier to understand. Now, although they sound similar, they are actually different. A variable is just a single container that holds one piece of data you want. A class, on the other hand, is much bigger, as I said before, it’s just like a blueprint that can contain lots of variables and functions, but this time they are all grouped together. Instead of just holding one value like a variable, a class can describe a whole thing with multiple different variables. What this does is it makes your code a lot more organized, simple, convenient, and user-friendly.

Example of Code that shows Variables from Snake.md.I will explain the code as we go on

Heres the Entire code to look from

// Example: Only code related to variables and classes from the Snake game
let score; // variable to keep track of the score
score = 0; // initialize score
let food = {x: 0, y: 0}; // object variable for food position
food.x = Math.floor(Math.random() * ((canvas.width / BLOCK) - 1));
food.y = Math.floor(Math.random() * ((canvas.height / BLOCK) - 1));
// Example of a class (not in original Snake, but as an example)
class Snake {
    constructor() {
        this.body = [{x: 0, y: 15}];   // starting position of snake
        this.direction = 1;            // 1 = right
        this.nextDirection = 1;        // planned next move
    }
}

let score;

Why is this a variable?

  • Let is used to declare a variable in JavaScript.

  • Score is the variable’s name.

  • At first, it has no value. Later in the game, it gets updated. When you start a new game, the code sets it to 0

score = 0;

And every time the snake eats food, it increases:

altScore(++score);

The score is a variable that keeps track of the player’s points while playing the game.

Let’s go over a Little Harder Example of Variables in Snake.md from your repo

Let’s start with the Var Food

let food = {x: 0, y: 0};

Why is this a “big” example?

  • Instead of just storing one thing (like a number), food is an object variable
  • It has two properties inside it, which are different from the one
  • ** X ** the horizontal position of the food on the game board
  • ** y ** the vertical position of the food on the game board.

Randomly Made Spawns

food.x = Math.floor(Math.random() * ((canvas.width / BLOCK) - 1));
food.y = Math.floor(Math.random() * ((canvas.height / BLOCK) - 1));

Now its your job to try to find the rest and figure it out

Example Of Classes in Snake MD File

Now, Classes aren’t actually part of our Snake MD, so we made a small example of how it would look in the file

class Snake {
    constructor() {
        this.body = [{x: 0, y: 15}];   // starting position of snake
        this.direction = 1;            // 1 = right
        this.nextDirection = 1;        // planned next move
    }
}

Explanation (in simple words)

  • class Snake { … } → This is the blueprint for the snake.

  • constructor() → This special function runs when you create a new snake (new Snake()).

  • this.body → Stores the snake’s body (as an array of blocks). At the start, it’s just one block at {x: 0, y: 15}.

  • this.direction → Keeps track of which way the snake is currently moving. (1 = right).

  • this.nextDirection → Stores the next direction the snake will move (helps with arrow key input).

POPCORN HACK 1 A short program about variables

// Step 1: Make some variables
let name = "Sam";
let age = 10;

// Step 2: Print a message
console.log("Hi, my name is", name);
console.log("I am", age, "years old.");

// Step 3: Unfinished part
// TODO: Make a new variable called "nextYearAge"
// that is the age plus 1

// let nextYearAge = ???   // <-- finish this line!

// TODO: Print out the result
// Example: "Next year I will be 11 years old."
// console.log( ??? )   // <-- finish this line!

POPCORN HACK 2 A short program about classes

// Step 1: Define the Animal class
class Animal {
  // Initialize each animal with a name, sound, and type
  constructor(name, sound, kind) {
    this.name = name;
    this.sound = sound;
    this.kind = kind;
  }

  // Make the animal speak
  speak() {
    console.log(`${this.name} the ${this.kind} says ${this.sound}!`);
  }

  // Bonus method: describe the animal
  describe() {
    console.log(`${this.name} is a ${this.kind} and is very friendly!`);
  }
}

// Step 2: Create a list to hold all the animals in the zoo
let zoo = [];

// Step 3: Add animals to the zoo
// TODO: Create at least 3 animals and push them into the zoo array
// Example:
zoo.push(new Animal("Buddy", "Woof", "Dog"));
zoo.push(new Animal("Mittens", "Meow", "Cat"));
zoo.push(new Animal("Polly", "Squawk", "Parrot"));

// Step 4: Loop through all animals and make them speak
// TODO: Use a for loop (or forEach) to call speak() on each animal
zoo.forEach(animal => {
  animal.speak();
  // Step 5: Optional bonus: Call describe() too
  animal.describe();
});

// Step 5 Bonus: Let the user add a new animal (works in browser)
// Uncomment if running in browser with prompt()
// let name = prompt("Enter the animal's name:");
// let sound = prompt("Enter the sound it makes:");
// let kind = prompt("Enter the kind of animal:");
// let newAnimal = new Animal(name, sound, kind);
// zoo.push(newAnimal);
// newAnimal.speak();
// newAnimal.describe();

Homework

// Step 1: Make a list of choices
const choices = ["rock", "paper", "scissors"];

// Step 2: Ask the user for their choice (browser version with prompt)
let userChoice = prompt("Choose rock, paper, or scissors:").toLowerCase();

// Step 3: Computer picks a random choice
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
console.log("Computer chose:", computerChoice);

// Step 4: Compare userChoice and computerChoice
if (userChoice === computerChoice) {
  console.log("It's a tie!");
} else if (userChoice === "rock" && computerChoice === "scissors") {
  console.log("You win!");
} else if (userChoice === "scissors" && computerChoice === "paper") {
  console.log("You win!");
} else if (userChoice === "paper" && computerChoice === "rock") {
  console.log("You win!");
} else {
  console.log("You lose!");
}

// Bonus: Put the whole game in a loop
// Uncomment to play multiple rounds in browser
/*
while (true) {
  let userChoice = prompt("Choose rock, paper, or scissors”)

Sumbmission!

https://forms.gle/2aPP6CXFdQnNaE7GA