Skip to content

Instantly share code, notes, and snippets.

@highwaycoder
Created July 12, 2013 12:34
Show Gist options
  • Save highwaycoder/5984124 to your computer and use it in GitHub Desktop.
Save highwaycoder/5984124 to your computer and use it in GitHub Desktop.
Why I'm not a front-end developer.
var intervalID = -1,
frameNumber = 0;
var QueueNewFrame = function () {
frameNumber++;
if(frameNumber > 60) frameNumber = 0;
if (window.requestAnimationFrame)
window.requestAnimationFrame(renderLoop);
else if (window.msRequestAnimationFrame)
window.msRequestAnimationFrame(renderLoop);
else if (window.webkitRequestAnimationFrame)
window.webkitRequestAnimationFrame(renderLoop);
else if (window.mozRequestAnimationFrame)
window.mozRequestAnimationFrame(renderLoop);
else if (window.oRequestAnimationFrame)
window.oRequestAnimationFrame(renderLoop);
else {
QueueNewFrame = function () {
};
intervalID = window.setInterval(renderLoop, 16.7);
}
};
var Game = {
renderFrame: function() {
context.drawSvg('/img/ship.svg',15,15,canvas.width - 30, canvas.height - 30);
},
};
var canvas = {
width: $("#gameView").attr('width'),
height: $("#gameView").attr('height')
};
var lobbymates = [],
lobbySize = 0,
lobbyErrorMargin = 0,
queuedPlayerCount = 0;
var context = $("#gameView")[0].getContext('2d');
var gameState = 'splash',
showFPS = false,
fps = 0,
now,
lastUpdate = Date.now();
var views = {
searching: function() {
var searchingString = frameNumber < 30 ? "Searching for game..." : "",
textDimensions = context.measureText(searchingString);
context.clearRect(0,0,canvas.width,canvas.height);
context.fillStyle = "#FFFFFF";
context.font = "16pt Arial";
context.fillText(searchingString,(canvas.width / 2) - (textDimensions.width / 2),100);
},
splash: function() {
// don't do anything, the div does it at the moment (replace with a proper splash screen later)
},
game: function() {
context.fillStyle = "#FFFFFF";
context.font = "16pt Arial";
context.fillText("Game found!",(canvas.width / 2) - (context.measureText("Game found!").width / 2),canvas.height/2);
setTimeout(function() {
gameState = 'game_real';
},1500);
},
game_real: function() {
Game.renderFrame();
},
lobby: function() {
context.fillStyle = "#FFFFFF";
context.font = "14pt Arial";
for(var i = 0; i < lobbySize; i++) {
var nextName = (i < lobbymates.length ?
lobbymates[i].name + ' [' + lobbymates[i].rank + ']' :
"Waiting for player");
context.fillText(nextName,canvas.width - (15 + context.measureText(nextName).width), (i*16) + 32);
}
context.fillText("Searching within " + lobbyErrorMargin + " rank points of average lobby rank",15,29);
context.fillText("Players in queue: " + queuedPlayerCount,15,canvas.height-15);
}
}
function renderLoop() {
context.clearRect(0,0,canvas.width,canvas.height);
views[gameState]();
if(showFPS) {
context.font = "16pt Arial";
context.fillStyle = "#00FFFF";
context.fillText("FPS: " + Math.floor(fps).toString(),0,16);
}
var thisFrameFPS = 1000 / ((now = Date.now()) - lastUpdate);
fps += (thisFrameFPS - fps) / ramper();
lastUpdate = now;
QueueNewFrame();
};
var ramp = 1, target = 50;
var ramper = function() {
if(ramp < target) {
ramp += ramp/2;
}
return ramp;
}
$(function() {
var socket = io.connect('http://' + window.location.host);
$("#StartButton").on('click',function() {
socket.emit('findGame');
gameState = 'searching';
$("#splash").hide();
$("#gameView").show();
$("#gameView").css({display:"block"});
QueueNewFrame();
});
socket.on('lobby join',function(lobbyInfo) {
gameState = 'lobby';
lobbymates = lobbyInfo.players;
lobbySize = lobbyInfo.size;
});
socket.on('lobby player joined',function(playerInfo) {
lobbymates.push(playerInfo);
});
socket.on('lobby create',function(lobbyInfo) {
gameState = 'lobby';
lobbymates = lobbyInfo.players;
lobbySize = lobbyInfo.size;
});
socket.on('lobby player left',function(playerInfo) {
lobbymates.splice(lobbymates.indexOf(playerInfo),1);
});
socket.on('lobby margin update',function(newMargin) {
lobbyErrorMargin = newMargin;
});
socket.on('queue count',function(count) {
queuedPlayerCount = count;
});
socket.on('game joined',function() {
gameState = 'game';
});
$("body").on('keypress',function(event) {
console.log('key pressed');
if(event.which == 102) {
showFPS = !showFPS;
}
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment