Build a Racing Simulator with JavaScript Classes and Objects – CPSC1520 Tutorial

Introduction to JavaScript Classes and Objects

Object-oriented programming (OOP) is a fundamental skill for any developer. In this tutorial, we'll build a quick racing app using JavaScript classes, just like the CPSC1520 assignment. Think of it as creating a mini racing game where each car is an object with its own speed and position – similar to how characters in a popular battle royale game each have unique stats.

Setting Up Your Project

Start by downloading the provided package and running npm install to install dependencies. Once you see the node_modules folder, run npm run start to launch the app. This is a common workflow in modern JavaScript development, similar to how developers set up projects for AI apps or financial dashboards.

Creating the Car Class

Open car.js and define a class named Car. Export it so you can use it in other files. Use the following structure:

import { createCarElement } from '../dom/car.js';

class Car {
  constructor(name) {
    this.name = name;
    this.element = createCarElement(this.name);
  }

  addToRace(raceElement) {
    this.speed = Math.random() * 2;
    this.distance = 0;
    raceElement.append(this.element);
  }

  drive() {
    let s = setInterval(() => {
      this.distance += this.speed;
      this.element.style.marginLeft = this.distance + 'px';
      if (this.distance > 500) {
        clearInterval(s);
      }
    }, 10);
  }
}

export { Car };

Importing and Using the Car Class

In index.js, import the Car class and create new car objects. Loop through your racers array, instantiate each car, and call addToRace(race) to display them on the page. Then call drive() to start the race. This mirrors how you might manage players in a school project or a leaderboard for a gaming event.

Understanding the Code

The constructor sets the car's name and creates a DOM element. The addToRace method assigns a random speed and initial distance, then appends the car to the race track. The drive method uses setInterval to update the car's position every 10 milliseconds, simulating movement. When the distance exceeds 500 pixels, the interval clears, stopping the car. This is similar to how animations work in popular apps like TikTok or Instagram stories.

Testing Your Racing App

After implementing the code, refresh your page. You should see cars racing across the screen. If they stop at the right, you've succeeded! This hands-on exercise teaches you how to use classes and objects in JavaScript – a core concept for building scalable applications, whether you're developing a finance tracker or an AI-powered game.

Final Steps

Once everything works, stop the Parcel process, delete the node_modules and .parcel-cache folders, zip your project, and submit it. Remember: no extra folders! This ensures your submission is clean and follows grading criteria.

Conclusion

By completing this tutorial, you've learned to create and use JavaScript classes, export/import modules, and build a simulated racing app. These skills are essential for modern web development, from building interactive UI components to managing data in complex applications. Keep practicing with other OOP projects to solidify your understanding.