Constellators - Classes and Methods Lesson
This is the CSSE JavaScript Classes and Methods Lesson, taught by the Constellators.
Presented by the
CONSTELLATORS
Classes and Methods
In Java, classes and methods are basic concepts of Object Oriented Programming (OOPs) that are used to represent real-world concepts and entities. They’re necessary to make game code functional and more manageable.
TO FIND THIS LESSON (pages repository): Search -> “Constellators - Classes and Methods Lesson” -> Select the most recent one (should be 10/02/25)
What are Classes?
- Serves as a blueprint or a template for creating objects
- Defines the structure and behavior that objects of that class will possess
- Encapsulates data (variables), and methods (functions) will operate on that data
- Analogy: cookie cutter (class defines the shape and properties of the cookie, but not the cookie’s taste)
What are Methods?
- A function that is stored as a property of an object
- Analogy:
- Are accessed using dot notation
objectName.methodName() - The
thiskeyword within a method refers to the object itself, allowing the method to access and modify the object’s properties.
Example:
// This is a method
fullName: function() {
return this.firstName + " " + this.lastName;
},
Summary:
Classes: blueprints for creating objects, defining the properties and methods (functions) that an object will have.
Methods: functions that belong to a class, defining the behavior of an object to perform a specific action.
Popcorn Hack 1
Go to the HW file that you can access here. Download to your student/portfolio repository and complete Popcorn Hack 1.
Examples of Classes and Methods in OOP Breakout
Class: paddle
Methods: move_left(), move_right(), draw()
Class: ball
Methods: move(), bounce(), draw()
// Ball class
class Ball extends GameObject {
constructor(x, y, radius = 8) {
super(x, y);
this.radius = radius;
this.dx = 4;
this.dy = -4;
this.color = "#ad6bebff";
}
}
Class: brick
Methods: draw (), destroy ()
Class: game
Methods: check_collisions (), update (), draw ()
General Example
class Car {
// The constructor method is called when a new object is created from the class.
constructor(make, model, year) {
this.make = make; // Property
this.model = model; // Property
this.year = year; // Property
}
// A method defined within the class
drive() {
console.log(this.make + this.model + " is driving...");
}
// Another method
getCarInfo() {
console.log("This is a " + this.make + this.model + this.year);
}
}
// Creating an instance (object) of the Car class
const myCar = new Car("Toyota", "Camry", 2023);
// Calling methods on the instance
myCar.drive(); // Output: Toyota Camry is driving...
console.log(myCar.getCarInfo()); // Output: This is a 2023 Toyota Camry.
Popcorn Hack 2
Go to the HW file from before and complete Popcorn Hack 2.
Homework
Complete the homework and submit to this form. Due 10/6/25 at 11:59pm.