diff --git a/css/main.css b/css/main.css index f5893d7..3bc1716 100644 --- a/css/main.css +++ b/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; diff --git a/img/default_ship.png b/img/default_ship.png new file mode 100644 index 0000000..d993481 Binary files /dev/null and b/img/default_ship.png differ diff --git a/img/ground_tiles.png b/img/ground_tiles.png index 80ccd33..3ddc319 100644 Binary files a/img/ground_tiles.png and b/img/ground_tiles.png differ diff --git a/img/pirate_ship.png b/img/pirate_ship.png new file mode 100644 index 0000000..53a5d2b Binary files /dev/null and b/img/pirate_ship.png differ diff --git a/js/main.js b/js/main.js index ab6f84e..eeb3d30 100644 --- a/js/main.js +++ b/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('
'); +} + 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('
'); - }); + 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; }); @@ -94,5 +124,4 @@ $(document).ready(function() { } }); -}); - +}); \ No newline at end of file diff --git a/server.js b/server.js index 6b6423c..d806b46 100644 --- a/server.js +++ b/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,10 +32,11 @@ 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 }); - + socket.on('disconnect', function () { userCnt--; delete allSockets[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) { - if(groundUnderPlayer===1) { - return 0.5; - } else if(groundUnderPlayer===2) { - return 0.1; +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; } \ No newline at end of file