add diffrent speeds and more

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,10 +37,29 @@ 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('<div class="player" id="'+id+'" style="position:absolute; top:'+player["y"]+'px; left:'+player["x"]+'px; width:5px; height:5px; background:red; z-index:100;"></div>');
+	});
+});	
+
+socket.on('playerDisc', function (id) {
+	$("#"+id).remove();
+});	
+
 
 $(document).ready(function() {
 	var viewportmeta = document.querySelector('meta[name="viewport"]');

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};
   }
 };
 

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);
+},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;
+}