From bc39634a783e36dd8b601186b34e4ad1395ebb0d Mon Sep 17 00:00:00 2001 From: Jeremiah Billmann Date: Fri, 24 May 2013 21:48:07 -0400 Subject: [PATCH] Progress: client --- client/garageserver.io.js | 12 +-- example/public/javascripts/game.js | 48 ++++++++- example/public/javascripts/keyboard.min.js | 116 +++++++++++++++++++++ example/public/stylesheets/style.css | 19 +++- example/views/index.jade | 4 +- example/views/layout.jade | 1 + 6 files changed, 186 insertions(+), 14 deletions(-) create mode 100644 example/public/javascripts/keyboard.min.js diff --git a/client/garageserver.io.js b/client/garageserver.io.js index 95bbf81..2b6c41c 100644 --- a/client/garageserver.io.js +++ b/client/garageserver.io.js @@ -4,21 +4,21 @@ window.GarageServerIO = (function (window, socketio) { garageServerGame = null, + // TODO: DONE CALLBACK connectToGarageServer = function (path, options) { - io.connect(path + '/garageserver.io'); - registerSocketEvents(); + registerSocketEvents(io.connect(path + '/garageserver.io')); }, - registerSocketEvents = function () { - io.on('update', function(data) { + registerSocketEvents = function (socket) { + socket.on('update', function(data) { if(garageServerGame.addPlayerInput) { garageServerGame.addPlayerInput(data); } }); - io.on('ping', function(data) { + socket.on('ping', function(data) { }); - io.on('removePlayer', function(id) { + socket.on('removePlayer', function(id) { if(garageServerGame.removePlayer) { garageServerGame.removePlayer(id); } diff --git a/example/public/javascripts/game.js b/example/public/javascripts/game.js index 87e489c..82bbe14 100644 --- a/example/public/javascripts/game.js +++ b/example/public/javascripts/game.js @@ -1,5 +1,51 @@ $(function () { - GarageServerIO.connectToGarageServer('http://garageserver_io.jbillmann.c9.io'); + var gameCanvas = document.getElementById('gameCanvas'), + + keyboard = new THREEx.KeyboardState(), + + ctxGameCanvas = gameCanvas.getContext('2d'), + + x = 0, + + y =0, + + requestAnimFrame = (function(){ + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000/60); }; + })(); + + function handleInput(){ + if(keyboard.pressed('left')) { + x -= 1; + } + if(keyboard.pressed('right')) { + x += 1; + } + if(keyboard.pressed('down')) { + y += 1; + } + if(keyboard.pressed('up')) { + y -= 1; + } + } + + var fps = 0, now, lastUpdate = (new Date)*1 - 1; + var fpsFilter = 50; + + function update () { + requestAnimFrame(update); + handleInput(); + ctxGameCanvas.clearRect(0, 0, gameCanvas.width, gameCanvas.height); + ctxGameCanvas.fillRect(x, y, 10, 10); + + var thisFrameFPS = 1000 / ((now=new Date) - lastUpdate); + fps += (thisFrameFPS - fps) / fpsFilter; + lastUpdate = now; + + $('#fps').html('FPS: ' + Math.round(fps)); + } + + update(); + }); \ No newline at end of file diff --git a/example/public/javascripts/keyboard.min.js b/example/public/javascripts/keyboard.min.js new file mode 100644 index 0000000..b99b4c8 --- /dev/null +++ b/example/public/javascripts/keyboard.min.js @@ -0,0 +1,116 @@ +// THREEx.KeyboardState.js keep the current state of the keyboard. +// It is possible to query it at any time. No need of an event. +// This is particularly convenient in loop driven case, like in +// 3D demos or games. +// +// # Usage +// +// **Step 1**: Create the object +// +// ```var keyboard = new THREEx.KeyboardState();``` +// +// **Step 2**: Query the keyboard state +// +// This will return true if shift and A are pressed, false otherwise +// +// ```keyboard.pressed("shift+A")``` +// +// **Step 3**: Stop listening to the keyboard +// +// ```keyboard.destroy()``` +// +// NOTE: this library may be nice as standaline. independant from three.js +// - rename it keyboardForGame +// +// # Code +// + +/** @namespace */ +var THREEx = THREEx || {}; + +/** + * - NOTE: it would be quite easy to push event-driven too + * - microevent.js for events handling + * - in this._onkeyChange, generate a string from the DOM event + * - use this as event name +*/ +THREEx.KeyboardState = function() +{ + // to store the current state + this.keyCodes = {}; + this.modifiers = {}; + + // create callback to bind/unbind keyboard events + var self = this; + this._onKeyDown = function(event){ self._onKeyChange(event, true); }; + this._onKeyUp = function(event){ self._onKeyChange(event, false);}; + + // bind keyEvents + document.addEventListener("keydown", this._onKeyDown, false); + document.addEventListener("keyup", this._onKeyUp, false); +} + +/** + * To stop listening of the keyboard events +*/ +THREEx.KeyboardState.prototype.destroy = function() +{ + // unbind keyEvents + document.removeEventListener("keydown", this._onKeyDown, false); + document.removeEventListener("keyup", this._onKeyUp, false); +} + +THREEx.KeyboardState.MODIFIERS = ['shift', 'ctrl', 'alt', 'meta']; +THREEx.KeyboardState.ALIAS = { + 'left' : 37, + 'up' : 38, + 'right' : 39, + 'down' : 40, + 'space' : 32, + 'pageup' : 33, + 'pagedown' : 34, + 'tab' : 9 +}; + +/** + * to process the keyboard dom event +*/ +THREEx.KeyboardState.prototype._onKeyChange = function(event, pressed) +{ + // log to debug + //console.log("onKeyChange", event, pressed, event.keyCode, event.shiftKey, event.ctrlKey, event.altKey, event.metaKey) + + // update this.keyCodes + var keyCode = event.keyCode; + this.keyCodes[keyCode] = pressed; + + // update this.modifiers + this.modifiers['shift']= event.shiftKey; + this.modifiers['ctrl'] = event.ctrlKey; + this.modifiers['alt'] = event.altKey; + this.modifiers['meta'] = event.metaKey; +} + +/** + * query keyboard state to know if a key is pressed of not + * + * @param {String} keyDesc the description of the key. format : modifiers+key e.g shift+A + * @returns {Boolean} true if the key is pressed, false otherwise +*/ +THREEx.KeyboardState.prototype.pressed = function(keyDesc) +{ + var keys = keyDesc.split("+"); + for(var i = 0; i < keys.length; i++){ + var key = keys[i]; + var pressed; + if( THREEx.KeyboardState.MODIFIERS.indexOf( key ) !== -1 ){ + pressed = this.modifiers[key]; + }else if( Object.keys(THREEx.KeyboardState.ALIAS).indexOf( key ) != -1 ){ + pressed = this.keyCodes[ THREEx.KeyboardState.ALIAS[key] ]; + }else { + pressed = this.keyCodes[key.toUpperCase().charCodeAt(0)] + } + if( !pressed) return false; + }; + return true; +} \ No newline at end of file diff --git a/example/public/stylesheets/style.css b/example/public/stylesheets/style.css index 30e047d..f8ff6c8 100644 --- a/example/public/stylesheets/style.css +++ b/example/public/stylesheets/style.css @@ -1,8 +1,17 @@ -body { - padding: 50px; - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; +#gameCanvas { + outline: 1px solid black; + padding-left: 0; + padding-right: 0; + margin-left: auto; + margin-right: auto; + display: block; + width: 800px; } -a { - color: #00B7FF; +#fps { + padding-left: 0; + padding-right: 0; + margin-left: auto; + margin-right: auto; + width: 800px; } \ No newline at end of file diff --git a/example/views/index.jade b/example/views/index.jade index ef7b09f..9ae2f94 100644 --- a/example/views/index.jade +++ b/example/views/index.jade @@ -1,5 +1,5 @@ extends layout block content - h1= title - p Welcome to #{title} \ No newline at end of file + div#fps + canvas#gameCanvas \ No newline at end of file diff --git a/example/views/layout.jade b/example/views/layout.jade index a1b1864..ad35b8e 100644 --- a/example/views/layout.jade +++ b/example/views/layout.jade @@ -6,6 +6,7 @@ html script(src='/socket.io/socket.io.js') script(src='/garageserver.io.js') script(src='/javascripts/jquery-2.0.0.min.js') + script(src='/javascripts/keyboard.min.js') script(src='/javascripts/game.js') body block content \ No newline at end of file