able to turn ship and drive

css/main.css

@@ -26,6 +26,13 @@
     background: url(../img/objectlayer.png) 158px -65px;
 }
 
+.default_ship {
+    width: 70px;
+    position: relative;
+    top: -24px;
+    left: -33px;
+}
+
 .fass{
     width: 32px;
     height: 43px;

js/main.js

@@ -34,8 +34,19 @@ socket.on('getmap', function (conent) {
 			}
 		}
 	}
+
+	var allPlayers = conent["allPlayers"];
+	console.log(allPlayers);
+	for(var id in allPlayers) {
+		addNewPlayer(allPlayers[id], id);
+	}
 });
 
+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>');
+}
+
 socket.on('setpos', function (allPlayers) {
 	window.requestAnimationFrame(function() {
 		for(var id in allPlayers) {
@@ -43,7 +54,30 @@ socket.on('setpos', function (allPlayers) {
 			if(ownId === id) {
 				window.scrollTo(player["x"]-$(window).width()/2, player["y"]-$(window).height()/3);
 			}
-			$("#"+id).css({"top":player["y"],"left":player["x"]});
+			var playerElement = $("#"+id);
+			if(playerElement.length==1) {
+				var oldPosY = Math.floor(parseFloat($("#"+id).css("top").split("px")[0]));
+				var oldPosX = Math.floor(parseFloat($("#"+id).css("left").split("px")[0]));
+				var playerX = Math.floor(player["x"]);
+				var playerY = Math.floor(player["y"]);
+				
+				if(oldPosY != playerY || oldPosX != playerX) {
+					var top2Btn = 0;
+					var left2right = 0;
+					if(oldPosY > playerY) {
+						top2Btn = -1;
+					} else if(oldPosY < playerY) {
+						top2Btn = 1;
+					}
+					if(oldPosX > playerX) {
+						left2right = -1;
+					} else if(oldPosX < playerX) {
+						left2right = 1;
+					}
+					var angle = Math.atan2(top2Btn, left2right);
+					playerElement.css({"top":player["y"],"left":player["x"], "-webkit-transform" : "rotate("+angle+"rad)"});
+				}
+			}
 		}
 	});
 });
@@ -51,9 +85,7 @@ socket.on('setpos', function (allPlayers) {
 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>');
-	});
+	addNewPlayer(player, id);
 });	
 
 socket.on('playerDisc', function (id) {
@@ -75,7 +107,6 @@ $(document).ready(function() {
 		if(key==37||key==38||key==39||key==40)
 			event.preventDefault();
 		if(!keys[key]) {
-			console.log("down");
 			socket.emit("keyDown",  key);
 			keys[key] = true;
 		}		
@@ -83,7 +114,6 @@ $(document).ready(function() {
 
 	$( document ).keyup(function( event ) {
 		var key = event.which;
-		console.log("up");
 		socket.emit("keyUp", key );
 		keys[key] = false;
 	});
@@ -95,4 +125,3 @@ $(document).ready(function() {
 	});
 
 });
-

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 = 100;
-var mapHeight = 100;
+var mapWidth = 200;
+var mapHeight = 200;
 var maxX = mapWidth * 32;
 var maxY = mapHeight * 32;
 var newmap = map.generateMap(mapWidth,mapHeight);
@@ -24,7 +24,6 @@ var defaultMvnt = 2;
 server.listen(PORT);
 
 console.log("Pirate running on port:"+PORT);
-console.log();
 io.on('connection', function(socket){
 	userCnt++;
 	console.log("New user", socket.id);
@@ -33,7 +32,8 @@ io.on('connection', function(socket){
 		keys : {},
 		x : 10,
 		y : 10,
-		mvnt : defaultMvnt
+		mvnt : defaultMvnt,
+		mode : 0 //0 = ship
 	};
 	io.sockets.emit("newPlayer", { player : allPlayers[socket.id], id : socket.id });
 
@@ -47,7 +47,7 @@ io.on('connection', function(socket){
 
 	socket.on('getmap', function () {
 		
-		//console.log("getmap",newmap);
+		newmap["allPlayers"] = allPlayers;
 		socket.emit("getmap", newmap);
 	});
 
@@ -85,11 +85,10 @@ setInterval(function() {
 				var newY = player["y"]+ty;
 				
 				var groundUnderPlayer = getGroundUnderPlayer(newX, newY);
-				if(checkPlayerPosition(newX, newY, groundUnderPlayer)) {
+				if(checkPlayerPosition(newX, newY, groundUnderPlayer, player)) {
 					player["x"] = newX;
 					player["y"] = newY;
-					player["mvnt"] = getPlayerMvnt(groundUnderPlayer);
-					console.log(player["mvnt"], groundUnderPlayer);
+					player["mvnt"] = getPlayerMvnt(player, groundUnderPlayer);
 				}
 			}
 		}
@@ -97,17 +96,25 @@ setInterval(function() {
 	io.sockets.emit("setpos", allPlayers);
 },20);
 
-function checkPlayerPosition(newX, newY, groundUnderPlayer) {
+function checkPlayerPosition(newX, newY, groundUnderPlayer, player) {
 	if(newX <0 || newY<0 || newX > maxX || newY > maxY) {
 		return false;
 	}
-	if(groundUnderPlayer < 0 || groundUnderPlayer > 2) {
-		return 0;
+	if(player["mode"]==0) { //ship
+		if(groundUnderPlayer < 0 || groundUnderPlayer > 2) { //dont move with ship on land
+			return false;
 		}
+	} else {
+
+	}
+	
 	return true;
 }
 
 function getGroundUnderPlayer(newX, newY) { //0 = water; 10 = hard ground
+	if(newX <0 || newY<0 || newX > maxX || newY > maxY) {
+		return 0;
+	}
 	var mapX = Math.floor(newX/32);
 	var mapY = Math.floor(newY/32);
 	var ground = cssMap[mapY][mapX];
@@ -121,11 +128,22 @@ function getGroundUnderPlayer(newX, newY) { //0 = water; 10 = hard ground
 	return parseFloat(groundSplit[1]);
 }
 
-function getPlayerMvnt(groundUnderPlayer) { 
+function getPlayerMvnt(player, groundUnderPlayer) { 
+	if(player["mode"]==0) { //ship
 		if(groundUnderPlayer===1) { 
 			return 0.5;
 		} else if(groundUnderPlayer===2) { 
 			return 0.1;
 		}
+	} else {
+		if(groundUnderPlayer===0) { 
+			return 0.1;
+		} else if(groundUnderPlayer===1) {
+			return 0.5;
+		} else if(groundUnderPlayer===2) {
+			return 0.8;
+		}
+		return 1;
+	}
 	return defaultMvnt;
 }