diff --git a/css/main.css b/css/main.css index 3bc1716..c50cb8a 100644 --- a/css/main.css +++ b/css/main.css @@ -33,6 +33,12 @@ left: -33px; } +html { + -webkit-transform: scale(1.5); + transform: scale(2); + transform-origin: 0; +} + .fass{ width: 32px; height: 43px; diff --git a/index.html b/index.html index 730e143..e42ef02 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,10 @@ - + - + Pirate!!!
diff --git a/js/main.js b/js/main.js index eeb3d30..1879f1d 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,8 @@ var socket = io(); -var cssMap, utilMap; +var cssMap, utilMap, domMap; var ownId; +var visibleMap = []; socket.on('connect', function () { ownId = socket.io.engine.id; console.log("connect!"); @@ -14,26 +15,27 @@ socket.on('disconnect', function () { socket.on('getmap', function (conent) { cssMap = conent["cssMap"]; + $("body").append('
'); utilMap = conent["utilMap"]; //console.log(map); - var domMap = $("#map"); + domMap = $("#map"); domMap.empty(); - for(var w=0;w'); - } - } + // for(var w=0;w'); + // } + // } - for(var w=0;w'); - } - } - } + // for(var w=0;w'); + // } + // } + // } var allPlayers = conent["allPlayers"]; console.log(allPlayers); @@ -47,21 +49,67 @@ function addNewPlayer(player, id) { $("body").append('
'); } +var oldmapX = null; +var oldmapY = null; + socket.on('setpos', function (allPlayers) { 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); - } + 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"]); - + var oldPosY = Math.floor(parseFloat($("#"+id).css("top").split("px")[0])); + var oldPosX = Math.floor(parseFloat($("#"+id).css("left").split("px")[0])); if(oldPosY != playerY || oldPosX != playerX) { + if(ownId === id) { + window.scrollTo(playerElement.offset().left-$(window).width()/2, playerElement.offset().top-$(window).height()/2); + var mapX = Math.floor(playerX/32); + var mapY = Math.floor(playerY/32); + + if(oldmapX != mapX || oldmapY != mapY) { + oldmapX = mapX; + oldmapY = mapY; + var range = 18; + + for(var x=mapX-range;x= 0 && x < cssMap.length) { + for(var y=mapY-range;y= 0 && y < cssMap[0].length) { + if(!visibleMap[x] || !visibleMap[x][y]) { + var dist = getCoordDist(x,y,mapX,mapY); + if(dist<=range) { + console.log("NEW",dist); + domMap.append(''); + var utilTitle = utilMap[y][x]; + if(utilTitle!="") { + domMap.append(''); + } + if(!visibleMap[x]) { + visibleMap[x] = []; + } + visibleMap[x][y] = true; + } + } + } + } + } + } + for(var x in visibleMap) { + for(var y in visibleMap[x]) { + if(visibleMap[x][y]) { + var dist = getCoordDist(x,y,mapX,mapY); + if(dist > range) { + domMap.find("."+y+'-'+x).remove(); + visibleMap[x][y] = false; + } + } + } + } + } + } var top2Btn = 0; var left2right = 0; if(oldPosY > playerY) { @@ -82,6 +130,10 @@ socket.on('setpos', function (allPlayers) { }); }); +function getCoordDist(x1,y1,x2,y2) { + return Math.abs(Math.sqrt(Math.pow(y2-y1,2)+Math.pow(x2-x1,2))); +} + socket.on('newPlayer', function (newPlayer) { var player = newPlayer["player"]; var id = newPlayer["id"];