Read, Watch, or Skim

I’ve selected some good materials to complement the lectures, problem sets, and programming projects; don’t skip them. (Short on time? Watch videos at 1.5x or faster.)

Please watch:

• No videos for this assignment.

Please skim:

• Chapters 5, 6, 7, 12, and 13 of this book.
• Slides 23-103 from this deck.
• All Slides from this deck.

Please read:

• Chapters 18, 21, 23, and 24, of this book.

Instructions

You may work in groups of three for this assignment, but the usual rules apply: do not split the work. Everyone in the group needs to proofread every short answer, and everyone in the group should look over and review all of the code.

You will be adding to repository you created earlier, ending up with the following structure:

  .
  ├── README.md
  ├── .gitignore
  ├── homework1
  │   └── Files for Homework 1
  ├── homework2
  │   └── Files for Homework 2
  └── homework3/
      ├── short-answer-problems.md
      └── littlektah/
          ├── app.js
          ├── (other files like package.json, etc.)
          └── public
              ├── littlektah.html
              ├── littlektah.css
              └── littlektah.js

Submit your work as a GitHub Pull Request. Make sure the PR is produced by 23:59 in the America/Los Angeles time zone on the due date. (You can produce the PR by doing all your work on a branch, then clicking the New Pull Request button in GitHub.) I will grade by commenting on your PR.

Project Setup

Since your GitHub repo was set up in an earlier assignment, there are only a few things you need to do for this one.

1. Create the homework3 folder
2. Add to your .gitignore as necessary. (Please don’t be that person who commits node_modules 😰)
3. Continue by answering the problems and writing the assigned scripts below. Work on a branch and make a PR before submitting.

Make sure you use an IDE with a built-in linter or use VSCode or Atom with the proper plugins and linters. You are too experienced to be turning in un-linted code.

Short Answer Problems

Write the answers to the following in nice markdown format and submit in short-answer-problems.md

In Comer, 5th edition, do 6.20, 7.2, 7.8, 7.23, 13.8, 13.11, 18.12, 21.4-21.13, 23.2, 23.5, 23.22, 24.3, and 24.9.

A Multiplayer Zombie Avoidance Game

In the notes on WebSockets, we saw a little application called Party, in which multiple “players” mindlessly ran around a shared canvas, without purpose. Everyone in the party could see everyone else. WebSockets are fun.

For this assignment, extend the application to a game as follows:

• The home page of the app should show a welcome screen (a pretty logo is nice but not required) with a form to enter your name. Your name is submitted and checked to see if it is unique among the current players, and if so, it is added to the list of current players and you are allowed to proceed to the game screen. If not, you “stay on” the home page. To keep the assignment simple, there is no login and no user database.
• The home page endpoint should be / and the game page should be /game.
• SECURITY NOTE: If a user tries to directly go to /game without having first entered a unique name, the user should be silently redirected to the home page.
• Players only move toward the cursor, they do not live on the cursor. (At each mousemove event, move the player from its current position 1/10th of the distance to the cursor.)
• There are 5 zombies in the world. Zombies can not die. Zombies move toward the nearest player. Zombies move 24 times per second. You will probably be using JavaScript or TypeScript for your server, so take advantage of setInterval here.
• If a player collides with a Zombie 20 times, the player dies, and is removed from the game. All players are notified when a player dies. The front-end should display something when this happens. Be creative. (Maybe some bloody looking text which fades out after a couple seconds.)
• Players accumulate points: 1 point per second they are alive.

You may enhance the game with beautiful artwork as time permits. I understand that this is a networking class, not a UI/UX course, but a little pride in your work, and a little practice, can’t hurt. Don’t go overboard though; get help from an artistically-minded fried if you like.

If you need some inspiration and perhaps some stealable code, check out:

• This non-networked, single-player version with collision detection, that first-year LMU students get to write.
• The famous Coin Game, which does the enter-your-name-on-the-home-page thing. However, please note that it does the name check via Socket.io; for this assignment you are to use plain HTTP for the name check.

Don’t forget to make use of office hours and even class time to ask questions if you get stuck.

What’s with the name?

The name “Little K'tah” is an homage to the famous K'tah, which you might want to play someday. The version you are writing is 2-d only, does not require a lobby, nor capabilities, nor levels.