diff --git a/front end/index.html b/front end/index.html index 8bc993c..99be7c8 100644 --- a/front end/index.html +++ b/front end/index.html @@ -26,6 +26,9 @@ { var socket = io('http://localhost:3000'); io.connect(); + + socket.emit('register', "Jrtechs"); + var canvas = document.getElementById("mycanvas"); canvas.addEventListener('keydown', doKeyDown, true); canvas.addEventListener('keyup', doKeyUp, true); @@ -36,7 +39,9 @@ var players = {}; - var blocks = {}; + var blocks = new Array(); + + var name = "Jrtechs"; socket.on("connected", function(data) { @@ -46,9 +51,10 @@ blocks = data.blocks; }); - socket.on("update",function(data) + socket.on("updateClient",function(data) { - + console.log(data); + players[data.name] = data.player; }); function doKeyUp(e) @@ -67,27 +73,48 @@ context.fillStyle = "#000000"; context.fillRect(0, 0, width, height); + console.log(blocks); for(var i = 0; i< blocks.length; i++) { - if(bullets[i] != -1) + if(blocks[i] != -1) { context.fillStyle = "rgba(255, 0, 199, 1)"; //pink context.fillRect(blocks[i].x, blocks[i].y, 10,10); } } - for(var i = 0; i< players.length; i++) + + Object.keys(players).forEach(function(key) { - if(players[i] != -1) - { - context.fillStyle = "rgba(0, 45, 160, 1)"; //blue - context.fillRect(players[i].x, players[i].y, 25,25); - } - } + context.fillStyle = "rgba(0, 45, 160, 1)"; //blue + context.fillRect(players[key].x, players[key].y, 25,25); + }); } + + var speed = 5; setInterval(function () { + Object.keys(players).forEach(function(key) + { + console.log(key); + if(players[key].upB) + { + players[key].y -= speed; + } + else if(players[key].downB) + { + players[key].y += speed; + } + else if(players[key].leftB) + { + players[key].x -= speed; + } + else if(players[key].rightB) + { + players[key].x += speed; + } + }); draw(); }, 1000/60); diff --git a/server/server.js b/server/server.js index 9098701..c478323 100644 --- a/server/server.js +++ b/server/server.js @@ -13,14 +13,50 @@ var PORT = 3000; var players = {}; + +var sockets = {}; + var blocks = []; var Player = function() { + var name; + + var x = 350; + var y = 350; + var upB= false; + var downB = false; + var leftB = false; + var rightB = false; }; + +var blocks = function(xx, yy, ownerName) +{ + var x = xx; + var y = yy; + var owner = ownerName; + + //1 up + //2 left + //3 right + //4 down + var direction; +}; + + +var update = function(command, object) +{ + Object.keys(sockets).forEach(function(key) + { + console.log(players[key]); + sockets[key].emit(command, object); + }); +}; + + io.on('connection', function(socket) { var p = new Player(); @@ -33,21 +69,88 @@ io.on('connection', function(socket) socket.emit('connected', initialState); - socket.on('move', function(data) + socket.on('keyDown', function(data) { - + console.log("keydown"); + + if(data.direction == 38) + { + //up + p.upB = true; + } + else if (data.direction == 40) + { + //down + p.downB = true; + } + else if (data.direction == 39) + { + //right + p.leftR = true; + } + else if (data.direction == 37) + { + //left + p.leftB = true; + } + else if (data.direction == 32) + { + //space + } + + var object = new Object(); + object.name = p.name; + object.player = p; + + update("updateClient", object); }); - socket.on('shoot', function(data) + socket.on('keyUp', function(data) { + console.log("keyUp"); + + if(data.direction == 38) + { + //up + p.upB = false; + } + else if (data.direction == 40) + { + //down + p.downB = false; + } + else if (data.direction == 39) + { + //right + p.rightB = false; + } + else if (data.direction == 37) + { + //left + p.leftB = false; + } + }); + socket.on('die', function(data) + { + players.remove(p); }); + socket.on('disconnect', function() { console.log("user disconnected"); - }) + }); + socket.on('register', function(data) + { + console.log(data); + p.name = data; + players[data] = p; + sockets[data] = socket; + p.x = 300; + p.y = 300; + }); }); http.listen(PORT, function()