diff --git a/js/main.js b/js/main.js index c55ce5b..ab6f84e 100644 --- a/js/main.js +++ b/js/main.js @@ -1,14 +1,20 @@ var socket = io(); - +var cssMap, utilMap; +var ownId; socket.on('connect', function () { + ownId = socket.io.engine.id; console.log("connect!"); socket.emit("getmap"); }); +socket.on('disconnect', function () { + $(".player").remove(); +}); + socket.on('getmap', function (conent) { - var cssMap = conent["cssMap"]; - var utilMap = conent["utilMap"]; + cssMap = conent["cssMap"]; + utilMap = conent["utilMap"]; //console.log(map); var domMap = $("#map"); @@ -31,11 +37,30 @@ socket.on('getmap', function (conent) { }); socket.on('setpos', function (allPlayers) { - for(var player in allPlayers) { - //console.log(player); - } + window.requestAnimationFrame(function() { + for(var id in allPlayers) { + var player = allPlayers[id]; + if(ownId === id) { + window.scrollTo(player["x"]-$(window).width()/2, player["y"]-$(window).height()/3); + } + $("#"+id).css({"top":player["y"],"left":player["x"]}); + } + }); }); +socket.on('newPlayer', function (newPlayer) { + var player = newPlayer["player"]; + var id = newPlayer["id"]; + window.requestAnimationFrame(function() { + $("body").append('
'); + }); +}); + +socket.on('playerDisc', function (id) { + $("#"+id).remove(); +}); + + $(document).ready(function() { var viewportmeta = document.querySelector('meta[name="viewport"]'); viewportmeta.content = 'user-scalable=NO, width=device-width, initial-scale=1.0'; diff --git a/s_map.js b/s_map.js index 73871b9..14582e5 100644 --- a/s_map.js +++ b/s_map.js @@ -134,7 +134,7 @@ module.exports = { } var cssMap = addCssClass(map); - return {"cssMap":cssMap, "utilMap":utilMap}; + return {"map": map, "cssMap":cssMap, "utilMap":utilMap}; } }; diff --git a/server.js b/server.js index 40ac913..6b6423c 100644 --- a/server.js +++ b/server.js @@ -11,7 +11,15 @@ app.use(express.static(__dirname + '/')); var server = require('http').Server(app); var io = require('socket.io')(server); var map = require("./s_map.js"); -var newmap = map.generateMap(100,100); +var mapWidth = 100; +var mapHeight = 100; +var maxX = mapWidth * 32; +var maxY = mapHeight * 32; +var newmap = map.generateMap(mapWidth,mapHeight); +var cssMap = newmap["cssMap"]; +var map = newmap["map"]; +var utilMap = newmap["utilMap"]; +var defaultMvnt = 2; server.listen(PORT); @@ -24,14 +32,17 @@ io.on('connection', function(socket){ allPlayers[socket.id] = { keys : {}, x : 10, - y : 10 + y : 10, + mvnt : defaultMvnt }; + io.sockets.emit("newPlayer", { player : allPlayers[socket.id], id : socket.id }); socket.on('disconnect', function () { userCnt--; delete allSockets[socket.id]; delete allPlayers[socket.id]; console.log("User Disconnected:", socket.id); + io.sockets.emit("playerDisc", socket.id); }); socket.on('getmap', function () { @@ -45,7 +56,6 @@ io.on('connection', function(socket){ }); socket.on('keyDown', function (key) { - console.log(allPlayers); allPlayers[socket.id]["keys"][key] = true; }); @@ -60,7 +70,8 @@ setInterval(function() { if(player["keys"][key]) { //if key is pressed var tx = 0; var ty = 0; - var mvnt = 2; + + var mvnt = player["mvnt"]; if(key==37) { //left tx = -1 * mvnt; } else if(key==38) { //top @@ -70,10 +81,51 @@ setInterval(function() { } else if(key==40) { //bottom ty = mvnt; } - player["x"] = player["x"]+tx; - player["y"] = player["y"]+ty; + var newX = player["x"]+tx; + var newY = player["y"]+ty; + + var groundUnderPlayer = getGroundUnderPlayer(newX, newY); + if(checkPlayerPosition(newX, newY, groundUnderPlayer)) { + player["x"] = newX; + player["y"] = newY; + player["mvnt"] = getPlayerMvnt(groundUnderPlayer); + console.log(player["mvnt"], groundUnderPlayer); + } } } } io.sockets.emit("setpos", allPlayers); -},100); \ No newline at end of file +},20); + +function checkPlayerPosition(newX, newY, groundUnderPlayer) { + if(newX <0 || newY<0 || newX > maxX || newY > maxY) { + return false; + } + if(groundUnderPlayer < 0 || groundUnderPlayer > 2) { + return 0; + } + return true; +} + +function getGroundUnderPlayer(newX, newY) { //0 = water; 10 = hard ground + var mapX = Math.floor(newX/32); + var mapY = Math.floor(newY/32); + var ground = cssMap[mapY][mapX]; + var groundSplit = ground.split("_"); + if(groundSplit.length != 2) { + if(ground == "water") { + return 0; + } + return 10; //Ground + } + return parseFloat(groundSplit[1]); +} + +function getPlayerMvnt(groundUnderPlayer) { + if(groundUnderPlayer===1) { + return 0.5; + } else if(groundUnderPlayer===2) { + return 0.1; + } + return defaultMvnt; +} \ No newline at end of file