Going Real Time - HTML5 Mobile Game Development - page 410

</body>
</html>
You need to create a public/js/ subdirectory underneath public/ that contains the three dependencies
listed earlier: jquery.min.js , underscore.js , and quintus.js . You can pull these from the chapter
code.
Notice one special script tag at the end:
<script src="/socket.io/socket.io.js"></script>
This is a path created by Socket.io that provides a number of conveniences. First, it sets the default WebSock-
et path and server to match the requested file to make connecting easier and prevent any issues determining
the correct address between development and production environments. It also automatically determines which
transport mechanism to use: straight WebSockets or one of the fallbacks.
Next, create the scribble.js file mentioned in Listing 21-4 in the public/ directory. Add the code in Listing
21-5 .
Listing 21-5: scribble.js
$(function() {
var Q = Quintus().setup('quintus', { maximize: true }),
socket = io.connect(),
start = {},
move = {};
function getTouch(e) {
var touch = e.originalEvent.changedTouches ?
e.originalEvent.changedTouches[0] : e,
canvasPos = Q.el.offset(),
canvasX = (touch.pageX - canvasPos.left) / Q.el.width() *
Q.width,
canvasY = (touch.pageY - canvasPos.top) / Q.el.height() *
Q.height;
e.preventDefault();
return { x: canvasX, y: canvasY };
}
function drawLine(from,to) {
Q.ctx.strokeStyle= "#000";
Q.ctx.beginPath();
Q.ctx.moveTo(from.x,from.y);
Q.ctx.lineTo(to.x,to.y);
Q.ctx.stroke();
}
Q.el.on('touchstart mousedown',function(e) {
start = getTouch(e);
});
Q.el.on('touchmove mousemove',function(e) {
if(!start.x) return;