Objectives
In this assignment you will write a multiplayer game and demonstrate your new knowledge of distributed applications, webservers, socket communication, and asynchronous programming.
Instructions
Implement the game described below in a public GitHub repository with a meaningful and creative name. Get into teams of two or three for this one if you like. There will be only one repository per team, but each student is responsible for understanding the entire game. Unbalanced group work negatively impacts the learning experience of the less-participatory team members. Therefore, for teams, I will require your GitHub commit loads to be “about even.”
The scaffolding of this project will be built during class as a code-along, but it will be very basic. You will have plenty of opportunity to learn and practice as you build out required and optional features.
Readings and Preparation
You should:
- Go back and read or watch any of the readings or videos you did not read or watch from the previous homework assignments.
- Find a couple YouTube Videos on p5.js presented by The Coding Train that look interesting to you. If you find a video that is particularly good, share it on the class Slack or Discord channel. (If you decide to go with the voice or gesture commands for your projects, watch the videos on Teachable machine—starting with this one.)
- Play K'tah. What is the highest level you can achieve? This game was written by four LMU students for a class in the fall semester of 2011. It is written almost entirely in JavaScript. Browse the code for the game.
The Project
You are to write a two-dimensional version of a single level of the zombie-avoidance game K'tah. If you do not like zombies, you may change the setting to one in which a protagonist (friendly herbivore, resistance fighter, dog rescue worker, etc.) tries to avoid some enemies (predators, regime police, puppy mill henchmen, etc.) but the basic game play rules that follow will be the same. You must complete at least the following requirements:
- Play the game on (at least) an 800 × 800 two-dimensional canvas. I strongly suggest using p5.js for this. You may use my p5.js starter application.
- The canvas background may be a solid color, a textured image, or any image you like (it just can’t be plain).
- You only need to implement a single two-player game; you do not need a lobby. When the server starts up, it waits for two players to join, then the fun begins. Anyone trying to join the server while a game is in progress will have to wait until the current game finishes.
- You need at least three enemies.
- Your players and enemies can be simple circles or other shapes. If you use sprites, make the backgrounds be translucent so they don’t look like rectangular blocks.
- Move the player by having it move toward the (mouse) cursor. You may ALSO move with the keyboard arrows or W, A, S, D keys.
- The enemies should chase the player.
- Each time an enemy hits a player, the player's health decreases.
- Illustrate the player’s (declining) health using some HTML, CSS, and JavaScript of your choice, outside the canvas area. Progress bars work for this.
- When the first player's health reaches zero, that player can no longer move and is dead. When the second player dies, the game is over. Pop up an alert, or (better) write a message floating over the canvas saying that “K'tah has claimed more victims” or some such text. You may wish to find some (free) zombie-ish looking fonts on the web, or any font that has the right feel for your setting. When the game ends, you must actually stop the drawing of frames, and stop any timers or intervals you may have running. Keep the game-over message up for at least 10 seconds, then start accepting new clients.
- Your player must be able to set a scarecrow. This is a “fake player” that lasts for only 5 seconds, during which the enemies move toward it and not the real player. (In real K'Tah, only the Herder can place scarecrows.) During the 5 seconds that the scarecrow is up, no new scarecrows can be set. After the 5 seconds are up, enemies resume chasing the real player. Scarecrows should have a glowing white ghostly look.
- Collision detection must be implemented.
You must add one or more of the following optional game embellishments:
- Powerups (health boxes)
- Teleportation (because magic, right?)
- Multiple levels in the game. Each level can last a few minutes (your choice). If any players are still alive at the end of the level, all existing enemies die, and you get a quick few seconds breather before the next level begins. Each increasing level has more and/or faster enemies. Rendering the current level and time remaining in each level with nice HTML and CSS.
- Vary the number of enemies. You might have a key that kills all enemies within a certain number of pixels from the player, or drops three random enemies, for example.
- Sound, appropriate for your game theme.
- Fixed walls, which players and enemies can bump into but not go through. The walls should not move.
- Voice commands: Move your player by speaking commands such as “up”, “down”, “left”, and “right”. Consider using Teachable Machine to train your app to recognize your commands.
- Gesture commands: Move your player by arm, hand, and/or finger gestures to represent “up”, “down”, “left”, and “right”. Consider using Teachable Machine to train your app to recognize your commands.
Consider adding more than one embellishment, not for extra credit, but because the programming skills you gain by implementing them will benefit you a great deal. And your game will be part of your public GitHub portfolio which prospective employers will be able to see. Do what you can without cutting into your other responsibilites.
Pay attention to creating beautiful code. It is fine to ask TAs and classmates to comment on your code quality during development. Pay attention to good naming, keep functions short, separate concerns, don't repeat yourself. This is your chance to bring together all of the programming skills and conceptual understanding you’ve developed this term. Use tools to help you write clean code.
How to Turn it in
You are to submit for grading the following:
- The project as a single GitHub repository, with excellent code and a proper README file. The submission is the state of your repository at 11:59 pm, America/Los Angeles time, on the due date.
Pay attention to the grading rubric at the end of this assignment page; you will see some additional requirements snuck in.
Be Creative!
The best projects are the ones that tell a story. Your artwork and game play and chosen sounds and messaging you give to your users matter! You are not expected to have had a class in Game Design, but you and your partner(s) should spend at least some time deciding how to build a world around your game. Don’t take this part of the assignment lightly; instead, look at these projects from students in past CMSI 185 courses:
- Skeleton Attack! by Maddie Louis • GitHub • Play it Online
- High Speed Strike by Nico Raymundo • GitHub • Play it Online
- Optics by Sage Strieker • GitHub • Play it Online
- shark bait by Megan Richardson and Booker Martin • GitHub • Play it Online
Grading
Here’s the rubric I’ll use to score your submission.
| Requirement | Out Of | You got |
|---|---|---|
| GitHub repo exists | 2 | |
| README file is complete, descriptive (talks about your game), and uses good English | 3 | |
| README file has names of all students | 1 | |
| README file has link to where the game can be played | 2 | |
| Game actually can be played from some public site | 3 | |
| Commit history is reasonable (and balanced, if applicable) | 4 | |
| Your code was tidied (perfection demanded) | 10 | |
| Code is well-organized into multiple files | 5 | |
| Code is internally well organized (functions, classes, ...) | 10 | |
| Code uses good names | 5 | |
| Played game has nice look-and-feel (colors, backgrounds, sprites) | 3 | |
| Game shows a title | 2 | |
| Game starts by waiting for two players | 2 | |
| Game begins only when two players have entered | 2 | |
| Game shows health score (progress bar, perhaps) | 2 | |
| Game plays nice (not jerky, not too fast, not too slow) | 4 | |
| Enemies move toward player | 4 | |
| Multiplayer aspect actually works | 4 | |
| Health is decremented on collision | 4 | |
| Second player can continue after first player dies | 4 | |
| Game has clear ending, visually | 4 | |
| If you used timers, they are turned off when game ends | 4 | |
| Your game has a story, or theme | 4 | |
| Collision detection works | 4 | |
| Scarecrow works | 4 | |
| Your optional embellishment works | 4 | |
| Misc. Bonus points or penalties at discretion of Prof. | 0 | |
| Total | 100 |