add moving guy and fix some bugs

css/main.css

@@ -49,6 +49,102 @@
     transform-origin: 0;
 }
 
+.guy1-0-0 {
+    background: url(../img/guy_sprite.png) 0px 0px;
+}
+
+.guy1-0-1 {
+    background: url(../img/guy_sprite.png) -32px 0px;
+}
+
+.guy1-0-2 {
+    background: url(../img/guy_sprite.png) -64px 0px;
+}
+
+.guy0--1-0 {
+    background: url(../img/guy_sprite.png) 0px -32px;
+}
+
+.guy0--1-1 {
+    background: url(../img/guy_sprite.png) -32px -32px;
+}
+
+.guy0--1-2 {
+    background: url(../img/guy_sprite.png) -64px -32px;
+}
+
+.guy0-1-0 {
+    background: url(../img/guy_sprite.png) 0px 192px;
+}
+
+.guy0-1-1 {
+    background: url(../img/guy_sprite.png) -32px 192px;
+}
+
+.guy0-1-2 {
+    background: url(../img/guy_sprite.png) -64px 192px;
+}
+
+.guy-1-0-0 {
+    background: url(../img/guy_sprite.png) 0px 160px;
+}
+
+.guy-1-0-1 {
+    background: url(../img/guy_sprite.png) -32px 160px;
+}
+
+.guy-1-0-2 {
+    background: url(../img/guy_sprite.png) -64px 160px;
+}
+
+.guy-1--1-0 {
+    background: url(../img/guy_sprite.png) -96px 224px;
+}
+
+.guy-1--1-1 {
+    background: url(../img/guy_sprite.png) -128px 224px;
+}
+
+.guy-1--1-2 {
+    background: url(../img/guy_sprite.png) -160px 224px;
+}
+
+.guy-1-1-0 {
+    background: url(../img/guy_sprite.png) -96px 160px;
+}
+
+.guy-1-1-1 {
+    background: url(../img/guy_sprite.png) -128px 160px;
+}
+
+.guy-1-1-2 {
+    background: url(../img/guy_sprite.png) -160px 160px;
+}
+
+.guy1-1-0 {
+    background: url(../img/guy_sprite.png) -96px -64px;
+}
+
+.guy1-1-1 {
+    background: url(../img/guy_sprite.png) -128px -64px;
+}
+
+.guy1-1-2 {
+    background: url(../img/guy_sprite.png) -160px -64px;
+}
+
+.guy1--1-0 {
+    background: url(../img/guy_sprite.png) -96px 0px;
+}
+
+.guy1--1-1 {
+    background: url(../img/guy_sprite.png) -128px 0px;
+}
+
+.guy1--1-2 {
+    background: url(../img/guy_sprite.png) -160px 0px;
+}
+
 html {
   -webkit-transform: scale(1.5);
   transform: scale(2);

js/main.js

@@ -47,23 +47,35 @@ socket.on('getmap', function (conent) {
 });
 
 function addNewPlayer(player, id) {
-	if($("#"+id).length==0)
+	if($("#"+id).length==0) {
-		$("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 modeClass = "default_ship";
+		var modeImg = "./img/default_ship.png";
+		if(player["mode"]==1) {
+			var modeClass = "guy";
+			var modeImg = "./img/plain.png";
+		}
+		$("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="'+modeClass+'" src="'+modeImg+'"></div>');
+	}
 }
 
 var oldmapX = null;
 var oldmapY = null;
-
+var picStep = 0;
+var cnt = 0;
 socket.on('setpos', function (allPlayers) {
 	window.requestAnimationFrame(function() {
 		for(var id in allPlayers) {
 			var player = allPlayers[id];
 			var playerElement = $("#"+id);
+			var playerImg = playerElement.find("img");
 
 			for(var i in player["special"]) {
 				if(i == "modechange") {
 					if(player["mode"] == 0) { //ship
 						playerElement.find("img").attr("src","./img/default_ship.png");
+						playerImg.removeClass (function (index, className) {
+						    return (className.match (/(^|\s)guy\S+/g) || []).join(' ');
+						});
 						playerElement.find("img").removeClass("guy");
 						playerElement.find("img").addClass("default_ship");
 					} else { //land
@@ -138,8 +150,21 @@ socket.on('setpos', function (allPlayers) {
 						left2right = 1;
 					}
 					var angle = 0;
-					if(player["mode"] == 0) {
+					if(player["mode"] == 0) { //ship
 						var angle = Math.atan2(top2Btn, left2right);
+					} else { //land
+						cnt++;
+						if(cnt%3==0)
+							picStep++;
+						if(picStep >= 3)
+							picStep = 0;
+						console.log(top2Btn+"-"+left2right)
+						if(!playerImg.hasClass("guy"+top2Btn+"-"+left2right+"-"+picStep)) {
+							playerImg.removeClass (function (index, className) {
+							    return (className.match (/(^|\s)guy\S+/g) || []).join(' ');
+							});
+							playerImg.addClass("guy"+top2Btn+"-"+left2right+"-"+picStep);
+						}
 					}
 					playerElement.css({"top":player["y"],"left":player["x"], "-webkit-transform" : "rotate("+angle+"rad)"});
 				}

server.js

@@ -64,7 +64,7 @@ io.on('connection', function(socket){
 	socket.on('actionKey', function (key) {
 		var groundUnder = getGroundUnderPlayer(player["x"], player["y"]);
 		if(player["mode"] == 0) { //ship
-			if(groundUnder>=0) { //its nearly land
+			if(groundUnder>=1) { //its nearly land
 				player["mode"] = 1;
 				player["special"]["modechange"] = true;
 			}