add player at land

js/main.js

@@ -3,6 +3,8 @@ var socket = io();
 var cssMap, utilMap, domMap;
 var ownId;
 var visibleMap = [];
+var range = 18; //Sichtweite
+
 socket.on('connect', function () {
 	ownId = socket.io.engine.id;
 	console.log("connect!");
@@ -46,7 +48,7 @@ socket.on('getmap', function (conent) {
 
 function addNewPlayer(player, id) {
 	if($("#"+id).length==0)
-		$("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;"><img class="default_ship" src="./img/default_ship.png"></div>');
+		$("body").append('<div class="player" id="'+id+'" style="position:absolute; top:'+player["y"]+'px; left:'+player["x"]+'px; width:7px; height:7px; z-index:100;"><img class="default_ship" src="./img/default_ship.png"></div>');
 }
 
 var oldmapX = null;
@@ -56,8 +58,23 @@ socket.on('setpos', function (allPlayers) {
 	window.requestAnimationFrame(function() {
 		for(var id in allPlayers) {
 			var player = allPlayers[id];
-
 			var playerElement = $("#"+id);
+
+			for(var i in player["special"]) {
+				if(i == "modechange") {
+					if(player["mode"] == 0) { //ship
+						playerElement.find("img").attr("src","./img/default_ship.png");
+						playerElement.find("img").removeClass("guy");
+						playerElement.find("img").addClass("default_ship");
+					} else { //land
+
+						playerElement.find("img").removeClass("default_ship");
+						playerElement.find("img").addClass("guy");
+						playerElement.find("img").attr("src","./img/plain.png");
+					}
+				}
+			}
+			
 			if(playerElement.length==1) {
 				var playerX = Math.floor(player["x"]);
 				var playerY = Math.floor(player["y"]);
@@ -72,7 +89,6 @@ socket.on('setpos', function (allPlayers) {
 						if(oldmapX != mapX || oldmapY != mapY) {
 							oldmapX = mapX;
 							oldmapY = mapY;
-							var range = 18;
 
 							for(var x=mapX-range;x<mapX+range;x++) {
 								if(x >= 0 && x < cssMap.length) {
@@ -81,7 +97,6 @@ socket.on('setpos', function (allPlayers) {
 											if(!visibleMap[x] || !visibleMap[x][y]) {
 												var dist = getCoordDist(x,y,mapX,mapY);
 												if(dist<=range) {
-													console.log("NEW",dist);
 													domMap.append('<img style="top:'+(y*32)+'px; left:'+(x*32)+'px; z-index:1;" src="./img/plain.png" i="'+y+'-'+x+'" class="'+y+'-'+x+' sprite '+cssMap[y][x]+'">');
 													var utilTitle = utilMap[y][x];
 													if(utilTitle!="") {
@@ -122,7 +137,10 @@ socket.on('setpos', function (allPlayers) {
 					} else if(oldPosX < playerX) {
 						left2right = 1;
 					}
-					var angle = Math.atan2(top2Btn, left2right);
+					var angle = 0;
+					if(player["mode"] == 0) {
+						var angle = Math.atan2(top2Btn, left2right);
+					}
 					playerElement.css({"top":player["y"],"left":player["x"], "-webkit-transform" : "rotate("+angle+"rad)"});
 				}
 			}
@@ -159,7 +177,12 @@ $(document).ready(function() {
 		if(key==37||key==38||key==39||key==40)
 			event.preventDefault();
 		if(!keys[key]) {
-			socket.emit("keyDown",  key);
+			
+			if(key == 32) {
+				socket.emit("actionKey",  key);
+			} else {
+				socket.emit("keyDown",  key);
+			}
 			keys[key] = true;
 		}		
 	});

server.js

@@ -11,8 +11,8 @@ app.use(express.static(__dirname + '/'));
 var server = require('http').Server(app);
 var io = require('socket.io')(server);
 var map = require("./s_map.js");
-var mapWidth = 200;
+var mapWidth = 500;
-var mapHeight = 200;
+var mapHeight = 500;
 var maxX = mapWidth * 32;
 var maxY = mapHeight * 32;
 var newmap = map.generateMap(mapWidth,mapHeight);
@@ -33,8 +33,10 @@ io.on('connection', function(socket){
 		x : 10,
 		y : 10,
 		mvnt : defaultMvnt,
-		mode : 0 //0 = ship
+		special : {},
+		mode : 0 //0 = ship //1 foot
 	};
+	var player = allPlayers[socket.id];
 	io.sockets.emit("newPlayer", { player : allPlayers[socket.id], id : socket.id });
 
 	socket.on('disconnect', function () {
@@ -59,6 +61,21 @@ io.on('connection', function(socket){
 		allPlayers[socket.id]["keys"][key] = true;
 	});
 
+	socket.on('actionKey', function (key) {
+		var groundUnder = getGroundUnderPlayer(player["x"], player["y"]);
+		if(player["mode"] == 0) { //ship
+			if(groundUnder>=0) { //its nearly land
+				player["mode"] = 1;
+				player["special"]["modechange"] = true;
+			}
+		} else {
+			if(groundUnder<=1) { //its water land
+				player["mode"] = 0;
+				player["special"]["modechange"] = true;
+			}
+		};
+		console.log(player["mode"],groundUnder)
+	});
 	
 });
 
@@ -81,6 +98,7 @@ setInterval(function() {
 				} else if(key==40) { //bottom
 					ty = mvnt;
 				}
+
 				var newX = player["x"]+tx;
 				var newY = player["y"]+ty;
 				
@@ -94,6 +112,9 @@ setInterval(function() {
 		}
 	}
 	io.sockets.emit("setpos", allPlayers);
+	for(var id in allPlayers) {
+		allPlayers[id]["special"] = {};
+	}
 },20);
 
 function checkPlayerPosition(newX, newY, groundUnderPlayer, player) {
@@ -143,7 +164,7 @@ function getPlayerMvnt(player, groundUnderPlayer) {
 		} else if(groundUnderPlayer===2) {
 			return 0.8;
 		}
-		return 1;
+		return 1.5;
 	}
 	return defaultMvnt;
 }