Program 5 2023: Putting it all together — Frogger!

   

Due: 

• 461: during final period — Wednesday, December 13, 12-2:30pm
• 561: during final period — Monday, December 11, 12-2: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.

BASIC GRADING:
The main components of this programming assignment are:

• 5% Part 1: properly turned in program (new requirements!)
• 20% Part 2: display road, river, frogs, cars, turtles, logs and homes
• 25% Part 3: animate the frog
• 20% Part 4: animate cars, turtles and logs
• 20% Part 5: homes and winning
• 10% Part 6: make it your own
• Participation credit: Receive participation credit (outside of this assignment) for posting your resulting imagery and video, good or bad, on the class forum!

Note that there is no partial turn in for this assignment.

General:
Our suggested game is a 3D version of Frogger. 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 December 1. 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 Frogger 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.

We prefer you continue to improve your mastery by using WebGL. You may use any 3rd party game or graphics libraries you find, including three.js and Unity, but with a penalty (461: -5%; 561: -10%). You may not use code from any implementation of Frogger you find online. We are aware of several such implementations and will be comparing them to your code.

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 you schedule by emailing our TAs. If you do not demo your game during the final, your program mark will be reduced by 20%; if you do not demo at all, you will forfeit 30%. If you fail to demo an assignment that is not browser based, your assignment will not be accepted. Late demos are not possible, and 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 a competition for a $20 Amazon gift card. You will win if your fellow students vote your game the best. Students in teams will be in a separate competition from individuals.

Part 2: Display road, river, frogs, cars, turtles, logs and homes
Create and render road, river, frogs, cars, turtles, logs and five "frog homes". Models should be 3D, and the projection must be perspective, with a view that creates at least a little foreshortening (shrinking with distance). Fancy modeling is not necessary; cubes, spheres etc. are enough. Nothing needs to move. 

Part 3: Animate the frog
The frog can move up, down, left or right — on an invisible grid. On the road, when it touches a car, it dies. On the river, when it doesn't touch a log or turtle, it dies. All motion is 2D on the ground plane.

Part 4: Animate cars, turtles and logs
Cars, logs and turtles now move either left or right. Each lane moves at a different speed, but all within the lane move at the same speed. Certain turtles will periodically submerge. If the frog is struck by a moving car, it dies. If it is on a log or turtle that reaches the window edge, it dies. If it is on a turtle that submerges, it dies. 

Part 5: Homes and winning
Frogs jumping off the uppermost logs/turtles can jump into their "frog homes" where they remain, while a new frog appears at the bottom. Frogs that miss their jump into a home die. When all five homes are filled, the game is over. 

Part 6: Make it your own
In Parts 1-5, you strove to make your game work "right". Now you should use the techniques you have learned to make the game "different". To earn full credit, all that you must achieve is to make your game substantially different from the standard game, visually or behaviorally, from the standard game, and from your fellow students' games. Your "different" game version should appear after you press the exclamation mark (!).

EXTRA CREDIT GRADING:
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. The standard scoring system is described here.
• (1, ⅓)% — add a "first-" or "third-person" view, with the camera attached to the frog.
• (1, ⅓)% — add animated effects, which appear when a frog dies, or when a turtle dives.
• (2, ½)% — play music, and on game events play a sound, e.g. when a frog jumps or dies.
• (2, ½)% — add at least one more level, which increases difficulty. In Frogger, this typically means faster car/log/turtle motion, or added NPCs such as crocs or snakes.
• (2, ½)% — add two power ups, e.g. a temporary freeze, or brief invulnerability. 
• (2, ½)% — support a second player, either with different keys or the mouse.
• (4, 1)% — add better/different physics, e.g. 3D movement, or acceleration/deceleration.
• (20, 5)% — 3D Frogger: a field of play with different elevations, jumping up or down, 3D view control. Viewing QBert gameplay may be inspiring.