|
@ -26,6 +26,9 @@ |
|
|
{ |
|
|
{ |
|
|
var socket = io('http://localhost:3000'); |
|
|
var socket = io('http://localhost:3000'); |
|
|
io.connect(); |
|
|
io.connect(); |
|
|
|
|
|
|
|
|
|
|
|
socket.emit('register', "Jrtechs"); |
|
|
|
|
|
|
|
|
var canvas = document.getElementById("mycanvas"); |
|
|
var canvas = document.getElementById("mycanvas"); |
|
|
canvas.addEventListener('keydown', doKeyDown, true); |
|
|
canvas.addEventListener('keydown', doKeyDown, true); |
|
|
canvas.addEventListener('keyup', doKeyUp, true); |
|
|
canvas.addEventListener('keyup', doKeyUp, true); |
|
@ -36,7 +39,9 @@ |
|
|
|
|
|
|
|
|
var players = {}; |
|
|
var players = {}; |
|
|
|
|
|
|
|
|
var blocks = {}; |
|
|
|
|
|
|
|
|
var blocks = new Array(); |
|
|
|
|
|
|
|
|
|
|
|
var name = "Jrtechs"; |
|
|
|
|
|
|
|
|
socket.on("connected", function(data) |
|
|
socket.on("connected", function(data) |
|
|
{ |
|
|
{ |
|
@ -46,9 +51,10 @@ |
|
|
blocks = data.blocks; |
|
|
blocks = data.blocks; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
socket.on("update",function(data) |
|
|
|
|
|
|
|
|
socket.on("updateClient",function(data) |
|
|
{ |
|
|
{ |
|
|
|
|
|
|
|
|
|
|
|
console.log(data); |
|
|
|
|
|
players[data.name] = data.player; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function doKeyUp(e) |
|
|
function doKeyUp(e) |
|
@ -67,27 +73,48 @@ |
|
|
context.fillStyle = "#000000"; |
|
|
context.fillStyle = "#000000"; |
|
|
context.fillRect(0, 0, width, height); |
|
|
context.fillRect(0, 0, width, height); |
|
|
|
|
|
|
|
|
|
|
|
console.log(blocks); |
|
|
for(var i = 0; i< blocks.length; i++) |
|
|
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.fillStyle = "rgba(255, 0, 199, 1)"; //pink |
|
|
context.fillRect(blocks[i].x, blocks[i].y, 10,10); |
|
|
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 () |
|
|
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(); |
|
|
draw(); |
|
|
}, 1000/60); |
|
|
}, 1000/60); |
|
|
|
|
|
|
|
|