/* global $ */ var Player = require("./player.js"); var renderer = require("./game-renderer.js"); var consts = require("./game-consts.js"); var core = require("./game-core.js"); var GRID_SIZE = consts.GRID_SIZE; var CELL_WIDTH = consts.CELL_WIDTH; renderer.allowAnimation = true; /** * Provides requestAnimationFrame in a cross browser way. * @author paulirish / http://paulirish.com/ */ // window.requestAnimationFrame = function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) { // window.setTimeout( callback, 1000 / 60 ); // }; if ( !window.requestAnimationFrame ) { window.requestAnimationFrame = ( function() { return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) { window.setTimeout( callback, 1000 / 60 ); }; })(); } var user, socket, frame; //Event listeners $(document).keydown(function(e) { if (user.dead) return; var newHeading = -1; switch (e.which) { case 37: newHeading = 3; break; //LEFT case 38: newHeading = 0; break; //UP case 39: newHeading = 1; break; //RIGHT case 40: newHeading = 2; break; //DOWN default: return; //exit handler for other keys. } if (newHeading === user.currentHeading || ((newHeading % 2 === 0) ^ (user.currentHeading % 2 === 0))) { //user.heading = newHeading; if (socket) socket.emit("frame", { frame: frame, heading: newHeading }, function(success, msg) { if (!success) { //TODO: restore frames. console.error(msg); } }); } e.preventDefault(); }); $(function() { var grid = renderer.grid; var timeout = undefined; //Socket connection. socket = require('socket.io-client')('http://paper-io-thekidofarcrania.c9users.io:8081'); socket.on('connect', function(){ console.info("Connected to server."); socket.emit('hello', { name: 'Test player', type: 0, //Free-for-all gameid: -1 //Requested game-id, or -1 for anyone. }, function(success) { if (success) console.info("Connected to game!"); else console.error("Unable to connect to game."); }); }); socket.on('game', function(data) { if (timeout != undefined) clearTimeout(timeout); //Initialize game. //TODO: display data.gameid --- game id # frame = data.frame; renderer.reset(); //Load colors. var colors = data.colors || []; //Load players. data.players.forEach(function(p) { p.base = colors[p.num]; var pl = new Player(true, grid, p); renderer.addPlayer(pl); }); user = renderer.getPlayerFromNum(data.num); renderer.setUser(user); //Load grid. var gridData = new Uint8Array(data.grid); for (var r = 0; r < grid.size; r++) for (var c = 0; c < grid.size; c++) { var ind = gridData[r * grid.size + c] - 1; grid.set(r, c, ind === -1 ? null : renderer.getPlayer(ind)); } renderer.paint(); frame = data.frame; }); var paintFrames = 0; socket.on('notifyFrame', function(data, fn) { if (timeout != undefined) clearTimeout(timeout); if (data.frame - 1 !== frame) { console.error("Frames don't match up!"); socket.emit('requestFrame'); //Restore data. return; } frame++; if (data.newPlayers) { data.newPlayers.forEach(function(p) { if (p.num === user.num) return; var pl = new Player(true, grid, p); renderer.addPlayer(pl); core.initPlayer(grid, pl); }); } data.moves.forEach(function(val, i) { var player = renderer.getPlayer(i); if (!player) return; if (val.left) player.die(); player.heading = val.heading; }); paintFrames++; requestAnimationFrame(function() { paintLoop(); }); timeout = setTimeout(function() { console.warn("Server has timed-out. Disconnecting."); socket.disconnect(); }, 5000); fn(); }); socket.on('disconnect', function(){ console.info("Server has disconnected. Creating new game."); socket.disconnect(); user.die(); paintLoop(); }); var deadFrames = 0; function paintLoop() { if (paintFrames === 0) return; while (paintFrames > 0) { renderer.update(); paintFrames--; } renderer.paint(); if (user.dead) { if (timeout) clearTimeout(timeout); if (deadFrames === 120) //Two second of frames { var before = renderer.allowAnimation; renderer.allowAnimation = false; renderer.update(); renderer.paint(); renderer.allowAnimation = before; deadFrames = 0; return; } socket.disconnect(); deadFrames++; paintFrames++; requestAnimationFrame(paintLoop); } } });