HW 5 | Front end Development

You have a choice of three assignments this week. At the beginning of next lecture, you'll partner up with someone who did a different assignment and discuss the challenges you faced and the solutions you came up with.

Remember, homework is now due on GitHub by 1am on Tuesday (late Monday night, really). If you have not submitted an assignment on Lore before or if you have any doubt that I have your GitHub account, please send me an email with a link to it. Anyone who submits homework on time will get feedback from me before class the next day.

As always, let me know if you have any questions. In total, I spent four hours creating these assignments and their example implementations (server and client), so no one assignment should take you more than that. If you find you're taking a long time, please email me with questions and make sure your code is on GitHub.

For the socket.io assignments, remember to include socket.io from your HTML file after jquery like so:

<script type="text/javascript" src="http://alexreinking.com/socket.io.js"></script>

and connect to my assignment server by creating a socket like so (make this the first line of your javascript file, before window.onload).

var socket = io.connect("http://alexreinking.com:5349");

Assignment 1: Snake

You've already gotten a chance to move boxes around in response to keyboard input, now it's time to make it into a game. You should try to make a snake move around the screen collecting food. When it gets some food, the snake should get longer.

If you touch the edge of the screen, of if the snake crashes into itself, the game is over. You should provide a "game over" message with alert(), and the snake should stop moving when this happens.

Additionally, you should display a scoreboard of some sort. You can score however you want... length of the snake, time spent alive, whatever.

You can see an example here on my website.

Assignment 2: Chat Room

Using socket.io, create a chat room webpage that should do the following:

1. Allow the user to select a username and log in. The server will not allow you to use a name that is already in use by someone else.
2. Allow the user to send messages from an <input> box by pressing ENTER (or RETURN on a mac).
3. Receive messages and automatically update some kind of display for them. Messages are received along with the name of the user that sent them, so that should be displayed, too. The server does not do any kind of sanitization of the messages you send/receive, so make sure that you replace <'s and >'s with their associated html entities.

Here are the messages you can emit or receive:

1. You can send 'login' along with an object containing a username field. For example: socket.emit('login', { username: "Alex" });
2. Once you do this, if you've logged in successfully, the server will send you success, otherwise, it will send you error along with an object containing a field called message. To catch errors, use this code:

socket.on('error', function (data) {
    console.log(data.message); // a field called "message"
});

This same pattern will work for anything the server sends you. 3. Once you've logged in you'll be able to send messages. You can send a message like so: socket.emit('send', { message: "Hi, there!" }); 4. When someone else sends a message, the server will send you message along with an object containing a field called message which has the string that someone else sent. It will also contain a field called user that contains the username of the sender.

You don't need to worry about logging out. The server discards your username when you refresh the page.

That's everything you need to know for the chat server. You can test your code by going to my implementation and checking whether the messages you send appear there.

Assignment 3: Tic-Tac-Toe

This is a little more straightforward socket.io-wise. All you need to do is create a game of tic-tac-toe with two modes: Player-vs-Player and Player-vs-CPU.

To make Player-vs-CPU easier, my server will accept a string representing the tic-tac-toe board and the letter assigned to the computer player ('X' or 'O') and will return a board with the computer's move in-place.

The board format is simple. Read the board off row-by-row, left-to-right, and put an 'X' in the string if there's an 'X', an 'O' if there's an 'O', and a ' ' (space) if there's nothing.

For example, if your tic-tac-toe board is

 X | O | 
---+---+---
   | X |
---+---+---
   |   | O

Then your string should be: "XO X O" that's: "XO(space)(space)X(space)(space)(space)O". It should always be exactly 9 characters long.

If the computer is player 'X', you can ask the server for its move by writing socket.emit('tictactoe', {board: "XO X O", cpu: 'X'});

The server will reply with a message of move which sends an object containing the field board that is a similar string, but containing an extra letter where its move goes. In the example above, the server will send back: "XO X X O"

Additionally, if you send the server a board that is full, or has a winner, it will send you gameover along with a data.message that has a string saying whether you won, the computer won, or the game is a tie.

You can see a working example of Player-vs-CPU here.