Canvas + Sockets

Paint

# Online Paint

There are many [collaborative drawing tools](http://www.webdistortion.com/2011/01/22/best-online-collaborative-drawing-tools/) and today you'll create one more. In short, these applications allow multiple people to draw on the same canvas simultaneously.

## 1. Lone drawing

Start off by creating the barebones of your tool. Create a canvas you can paint black curves on by dragging the mouse. The easiest way to do that is draw small circles whenever the mouse is pressed and moving i.e.:

```javascript
function onMouseMove(){
    if (isLeftMouseButtonDown()) {
        var coords = getMouseCoordinates();
        context.drawSmallCircleAround(coords);
    }
}
```

This approach will save you some headaches.

## 2. Settings time!

What good is a sketching application if you can only draw black curves? Add options to switch the current tool with various other tools such as drawing a straight line between two points, a rectangle between 4 points, a circle around a point with a given radius. Add a color palette to choose the color to draw with and a slider to select the width of the current brush.

## 3. Go online

Allows users to create multi-user sketches. Add a `Make Sketch Multi-user` button. When clicked, `prompt` the user for a sketch name. Allow others to see a list of all multi-user sketches and click the elements of the list in order to join the sketch. Whenever someone joins a multi-user sketch, the application must replace the current sketch with whatever has been drawn on the multi-user sketch. From then on, everything everyone draws on the sketch should be visible to everyone else.

## 4. Finishing touches

*   Allow the users to save their sketch as an image file.
*   Add an undo / redo buttons and shortcut them to `ctrl-Z, ctrl-Y`.

Pong

# Online Pong

If you need a reminder about what precisely Pong is, [wikipedia can help][pong-wiki]

## 1. Implement a single-player pong
You should be able to move your paddle top-to-bottom and hit the ball. The ball must start at the center and move in a random direction at first. It should be moving with a constant speed and upon hitting a wall or a paddle it should reflect its trajectory. Your enemy can be static for now. The game should end whenever someone successfully scores 5 goals. Implement winning conditions and visualize the score and victory (i.e. `alert("OMG, YOU WIN")`).

## 2. Implement the online component.
When starting the game, `prompt` players for their name. Create a `Find Opponent` button that searches for other players waiting to play the game. When a matching opponent is found, the game should start after 5 seconds (visualize the countdown). After the 5 seconds have passed, launch the ball from the center with a random direction and allow both players to move their paddles.

## 3. Finishing touches
* Instead of moving the ball with a constant speed use an accelerated motion. Simple school physics and [this link][acceleration-wiki] should get you started. For a start, use constant acceleration.
* Let the player choose whether he wants to play single or multi-player
* Add several behaviours for the AI in the single-player version such a static enemy, one that follows the ball, one that moves in a random direction.
* Add settings to the game that allow the players to change their name, the color of the paddle, the AI behaviour, the speed / acceleration of the ball, the number of goals needed for victory. When in multiplayer, choose randomly from the settings of either player.

[acceleration-wiki]: http://bg.wikipedia.org/wiki/%D0%A3%D1%81%D0%BA%D0%BE%D1%80%D0%B5%D0%BD%D0%B8%D0%B5#.D0.9F.D1.80.D0.B0.D0.B2.D0.BE.D0.BB.D0.B8.D0.BD.D0.B5.D0.B9.D0.BD.D0.BE_.D0.B4.D0.B2.D0.B8.D0.B6.D0.B5.D0.BD.D0.B8.D0.B5
[pong-wiki]: http://en.wikipedia.org/wiki/Pong