Showcase of an Academic Project for Interactive Graphics Systems Course at FEUP

A interactive scene developed with Three.js.

Project information

This game is a car game set in a candyland inspired scene. It contains 3 types of cars for the user to choose from, and has 3 modes of difficulty for the opponent, distinguished by 3 different types of car.

Choosing Player’s Car

The first thing the user needs to do is pick a car for the player. The player has 3 cars to choose from that differ only by design, and have no influence on the functionalities of the car. The cars available for the player to choose are the green, turquoise and blue cars present on the scene.

Choosing Opponent’s Car

After choosing a car for the player, the user needs to pick a car for the opponent. There are 3 different cars to choose from, and the car the user chooses determines the difficulty of the opponent.

  • Purple car - easy mode
  • Pink car - medium mode
  • Red car - hard mode

After picking the opponent’s car, both cars should appear on the start line, and the camera should change to the third-person camera following the player’s car.

Starting the Race

After both the cars being chosen, the game is ready to start. To actually start the race, the user should press the “Space” key. The race starts immediately after.

Game Controls

The keyboard keys to control the player’s car during the race are the following:

  • W - accelerate (increase velocity)
  • S - slow down and reverse (decrease velocity)
  • D - turn right
  • A - turn left

Project's Strong Points

  • State Machine implemented (states: INITIAL, READY, PLAY, END)
  • Fireworks
  • Picking the opponent's and player's car
  • Animations (specially the wheel spinning animation)
  • 3D Models for cars utilizing Blender
  • The track and obstacles/power ups design
  • The route animation by the opponent
  • The variation in the opponent's difficulty
  • Keyboard event listener
  • Code organization and documentation