After a good day attending the Google HTML5 Hackathon at the University of Ottawa, our team (4 complete stranger) were able to produce a very special version of pong

Our pong game, nicknamed HTML5Pong!, was entirely build within 7 hours from the ground-up and is freely available at: https://github.com/masom/Google-Hackathon

Technology

HTML5Pong! was made possible by:

• Node.js
• HTML5 Canvas
• HTML5 WebSockets
• Scalable Vector Graphics
• CSS3

The first aim of the project was to build something simple with any HTML5 technologies made available by Google Chrome and Pong seemed simple enough. To add some challenge, we decided to make it fully multiplayer. JSON was the chosen "protocol" of data format as both Node.js and Chrome supported native encoding and parsing.

Using websocket in conjunction with Node.js ended up to be more easy than initially thought; WebSockets pretty much expose the same API as XMLHTTPRequest.

Using HTML5 was a first for everybody in the team, and none of us ever used Node.js. At the end of the day, we where quite pleased by results.

Known Problems

As HTML5Pong! was built within 7 hours by a team of 4 strangers, we had to cut many corners so we could demo it at the end of the day:

• The ball is not the same on both clients. We did not have the time to do server-side trajectory calculations and enforcing them (ex: Resync the clients). This makes both client rendering a competely different game as soon as the ball hits a paddle or exits the screen. It is possible to play the same game using a single screen (As we did during the demo).
• No scores. We currently couldn't implement scores due to not having the ability to track the ball position server-side.
• No notification of opponent leaving. This can easily be added as the message is sent to the remaining client. It is simply not yet handled.
• Player 2 Client Paddle Control Bug: Currently, there is a bug with Player 1. The player ends up controlling both paddles, but only on his client. The server messages are okay...