raphael/pirate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add scale and unfold map

Browse Source
This commit is contained in:
rofl256 2017-06-30 00:12:26 +02:00
parent d0f5b8b2e1
commit a9bc9a295e
3 changed files with 81 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/main.css
View File

@ -33,6 +33,12 @@
left: -33px;
}
html {
-webkit-transform: scale(1.5);
transform: scale(2);
transform-origin: 0;
}
.fass{
width: 32px;
height: 43px;

4
index.html
View File

@ -5,10 +5,10 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no" /> -->
<link rel="stylesheet" href="./css/main.css">
</head>
<body style="overflow:hidden;">
<body style="overflow:hidden; background: black;">
Pirate!!!
<div id="map">

94
js/main.js
View File

@ -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('<div style="position:absolute; top:0px;left:0px; width:'+cssMap.length*32+'px; height:'+cssMap[0].length*32+'px"></div>');
utilMap = conent["utilMap"];
//console.log(map);
var domMap = $("#map");
domMap = $("#map");
domMap.empty();
for(var w=0;w<cssMap.length;w++) {
for(var h=0;h<cssMap[w].length;h++) {
domMap.append('<img style="top:'+(w*32)+'px; left:'+(h*32)+'px; z-index:1;" src="./img/plain.png" i="'+w+'-'+h+'" class="sprite '+cssMap[w][h]+'">');
}
}
// for(var w=0;w<cssMap.length;w++) {
// for(var h=0;h<cssMap[w].length;h++) {
// domMap.append('<img style="top:'+(w*32)+'px; left:'+(h*32)+'px; z-index:1;" src="./img/plain.png" i="'+w+'-'+h+'" class="sprite '+cssMap[w][h]+'">');
// }
// }
for(var w=0;w<utilMap.length;w++) {
for(var h=0;h<utilMap[w].length;h++) {
var utilTitle = utilMap[w][h];
if(utilTitle!="") {
domMap.append('<img style="top:'+(w*32)+'px; left:'+(h*32)+'px; z-index:2;" src="./img/plain.png" i="'+utilTitle+'" class="spriteUtils '+utilTitle+'">');
}
}
}
// for(var w=0;w<utilMap.length;w++) {
// for(var h=0;h<utilMap[w].length;h++) {
// var utilTitle = utilMap[w][h];
// if(utilTitle!="") {
// domMap.append('<img style="top:'+(w*32)+'px; left:'+(h*32)+'px; z-index:2;" src="./img/plain.png" i="'+utilTitle+'" class="spriteUtils '+utilTitle+'">');
// }
// }
// }
var allPlayers = conent["allPlayers"];
console.log(allPlayers);
@ -47,21 +49,67 @@ function addNewPlayer(player, id) {
$("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>');
}
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<mapX+range;x++) {
if(x >= 0 && x < cssMap.length) {
for(var y=mapY-range;y<mapY+range;y++) {
if(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('<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!="") {
domMap.append('<img style="top:'+(y*32)+'px; left:'+(x*32)+'px; z-index:2;" src="./img/plain.png" i="'+utilTitle+'" class="'+y+'-'+x+' spriteUtils '+utilTitle+'">');
}
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"];