Program 5, 2020: Putting it all together — Tetris! (Nov 18: updated appt slots)


  • For 461
    • Partial due: Friday, November 13 11:59pm 
    • Final due: during final period — Thursday, November 19th 3:30pm
  • For 561
    • Partial due: Tuesday, November 17 11:59pm
    • Final due: during final period — Tuesday, November 24th 12pm

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!)
  • 10% Part 2: display the playing field
  • 10% Part 3: display the pieces
  • 20% Part 4: animate the pieces
  • 20% Part 5: add collision detection
  • 20% Part 6: make pieces interactive
  • 10% Part 7: clear layers when full
  • 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 Tetris. If you are not familiar with the game, you can play it online herehere or here, view some historic gameplay on crt, arcade and gameboy, 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 obtain instructor's approval by Friday November 6. 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 Tetris 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 most  of the assignment credit. Students in 461 will lose 5% for using such libraries, while students in 561 will lose 10%. For full credit, use only WebGL. You may not use code from any implementation of Tetris 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. We suggest using Google Meet to create the video, by starting a Meet with only yourself logged in through NCSU, presenting the tab with your game in it, and pressing record. The video will appear in the Meet Recordings folder of your NCSU G Drive.
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 one of these Google Calendar appointment slots (to appear), which you must reserve yourself. In exceptional circumstances, earlier or recorded 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. For 461 only, late improvements of assignments will be accepted online through November 24, with a late penalty of 3%.

During the final exam period, you may optionally demo your game remotely 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 the playing field
Create and render the playing environment needed for the game. You should display a rectangular field, roughly twice as tall as it is wide, with a small amount of depth. Models should be 3D, and the projection must be perspective. Fancy modeling is not necessary; cubes and spheres are enough. No motion is required for credit in this part. You may wish to display a faint grid on the back of the field.

Part 3: Display the pieces
Display at least five differently shaped tetrominoes, made up of a few smaller shapes (e.g. cubes, spheres). For this part, the tetrominoes may simply float inside the field. The player should also be able to change their view, using the keyboard or mouse.

Part 4: Animate the pieces
The tetrominoes should appear at the top of the field, and move toward the bottom, step by step. When they reach the bottom, they should stop moving.

Part 5: Add collision detection
The tetrominoes should also stop moving when they collide with another tetromino. We suggest modeling collision using an internal grid, with cells just containing the smaller shapes that make up the tetromino (e.g. a linear tetromino contains four cubes, each of which fits in a grid cell). If a falling tetromino would move into an occupied cell, it stops moving, and occupies the cells it spans. As soon as a cell at the top of the field is occupied, the game ends.

Part 6: Make pieces interactive
When the user presses the left or right key, the tetromino will translate one step to the left or right. When the user presses the up key, the tetromino will rotate through four orientations (0, 90, 180, 270 degrees), aligned with the playing field. The down key will advance the tetromino several steps downward at once. The space key will move the tetromino immediately to the bottom of the field (or to the topmost tetromino).

Part 7: Clear layers when full
When the smaller shapes in several tetrominoes have completely filled a row in the playing field, the smaller shapes disappear, and those above it move down. This delays the end of the game. 

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 Tetris by clearing a layer.
  • (1, ⅓)% — add a "first-" or "third-person" view, with the camera attached to the tetromino.
  • (1, ⅓)% — add animated effects, which appear when the tetromino advances downward with the down or space keys, and when a layer is cleared.
  • (2, ½)% — play music, and on game events play a sound, e.g. on collisions and clearing layers.
  • (2, ½)% — add at least one level, which increases difficulty after an achievement. In Tetris, this typically happens when a certain number of layers are cleared, which increases speed.
  • (2, ½)% — add two power ups, e.g. briefly slow gameplay, turn off collisions or remove an inconvenient tetromino. 
  • (2, ½)% — support a second player, either with different keys or the mouse.
  • (10, 3)% — full 3D tetris: a cubic field of play, rotation in 3D and translation in 2D, 3D view control to enable 3D play.