Prog 5 2022: Putting it all together — Breakout!



  • Partial due: Monday, December 5 11:59pm
  • Final due: 
    • 461: during final period — Friday, December 9 3:30pm
    • 561: during final period — Monday, December 12 3:30pm

Goal: In this assignment you will apply what you've learned of basic WebGL and GLSL to build a simple game.

Submission: Submit your partial and final assignment using this Google Form, and demo your assignment during the final exam period.

The main components of this programming assignment are:
  • 5% Part 0: partial turn in and feedback
  • 5% Part 1: properly turned in program (new requirements!)
  • 20% Part 2: display the bricks, ball and paddle
  • 25% Part 3: animate the ball
  • 25% Part 4: interaction and disappearing bricks
  • Participation credit: Receive participation credit (outside of this assignment) for posting your resulting imagery and video, good or bad, on the class forum!

Our suggested game is a 3D version of Breakout. If you are not familiar with the game, you can play it online here or here, view some historic gameplay on arcade or console, and find more information about the game at its Wikipedia entry here. There are also many other sources online.

If you would rather implement a different game, you may do so, providing you ask for instructor's approval by Wednesday November 23. To obtain that approval, submit your proposal using this form. Small teams are also acceptable, but the scope of the project must increase to match. Use the same form if you wish to propose a group project. For example, we will approve two-person teams that propose building Breakout as described below along with all extra credits to earn 100%. 

Unlike previous programs, your game is not required to load specific assets (models, textures or lighting). You are free to hard-code paths to the assets your game requires.

You may use any 3rd party game or graphics libraries you find, including three.js and Unity, to earn full assignment credit — or you may use only WebGL. This is in contrast to previous years, which penalized use of 3rd party libraries slightly. You may not use code from any implementation of Breakout you find online. We are aware of several such implementations and will be comparing them to your code.

Part 0: Partial feedback
You should turn in an "ugly," incomplete version of your program by the date noted above. If you simply turn in something that makes an image, you will receive full marks (5%), and receive comments on what you've done. We will not otherwise grade the assignment at this point, only comment on it.

Part 1: Properly turned in program
Remember that 5% of your assignment grade is for correctly submitting your work! For more information about how to correctly submit, see this page on the class website. Since we encourage variation in your games, make sure to include a readme file.

For this assignment only, you can also earn extra credit (461: 2%; 561: 1%) by allowing us to make your assignment public, and providing us with some extra material to aid us in that. We will pick a few of the best assignments and publish them on our course website. If you wish to allow us, please also deliver:
  • a description: your game in four sentences or less
  • a screencast: a video walking us through your game within a few minutes. 
Assignment material is due online by the time of your final, as noted above. You must also demo your game live to teaching staff during the final period, or if you are in the distance class, a remote meeting. In exceptional circumstances, earlier live demonstrations may be arranged with the approval of staff. Late demos are not possible. If you do not demo your game, you will forfeit the full 5% for proper turn in. Late improvements of assignments will not be accepted.

During the final exam period, you may optionally demo your game in front of the class (without a separate demo to staff). If you do, you will enter the competition for a $20 Amazon gift card. You will win if your fellow students vote your game the best. Students in teams cannot enter the competition.

Part 2: Display bricks, ball and paddle
Create and render bricks, ball and paddle. Models should be 3D, and the projection must be perspective. Fancy modeling is not necessary; cubes or spheres are enough. Nothing needs to move. 

Part 3: Animate the ball
The ball should move at a constant speed. When it strikes the wall, brick or paddle, it should bounce off with the reflected arrival angle (like specular!). All motion is 2D. Restart the ball in a random direction if it misses the paddle.

Part 4: Interaction and disappearing bricks
The user can move the paddle left and right. Bricks disappear when the ball strikes them. When all bricks disappear, the  

Extra credit opportunities include the following, with values in format (461, 561)%. Other extra credits are possible, but must be approved by teaching staff in advance to ensure credit:
  • (1, ⅓)% — track and display score. You can choose any scoring scale you want. Typically, one scores in Breakout by striking bricks, and clearing levels.
  • (1, ⅓)% — add a "first-" or "third-person" view, with the camera attached to the paddle.
  • (1, ⅓)% — add animated effects, which appear when the when a brick is destroyed, or when layers of bricks are cleared.
  • (2, ½)% — play music, and on game events play a sound, e.g. on ball collisions and clearing levels.
  • (2, ½)% — add at least one level, which increases difficulty. In Breakout, this typically means more and different bricks, perhaps faster balls or smaller paddles.
  • (2, ½)% — add two power ups, e.g. explosive bricks, or larger paddles. 
  • (2, ½)% — support a second player, either with different keys or the mouse.
  • (4, 1)% — add better/different physics, e.g. randomness in bounces, acceleration/deceleration.
  • (8, 2)% — use only WebGL; no game engine.
  • (20, 5)% — 3D Breakout: a cubic field of play, bricks and translation of paddle in 2D, 3D view control to enable 3D play.