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

fix scale bug and add hud template container

Browse Source
This commit is contained in:
rofl256 2017-07-14 23:06:22 +02:00
parent d4bdf73a2d
commit 2942fb98ff
3 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/main.css
View File

@ -145,7 +145,7 @@
background: url(../img/guy_sprite.png) -160px 0px;
}
html {
#main {
-webkit-transform: scale(1.5);
transform: scale(2);
transform-origin: 0;

10
index.html
View File

@ -8,15 +8,23 @@
<!-- <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; background: black;">
<body style="overflow:hidden; background: black; margin: 0; position: relative;">
<div id="main">
Pirate!!!
<div id="map">
</div>
</div>
<div id="bottomHud" style="position: fixed; bottom: 0; width: 100%; left: 0; height: 150px; background: rgba(218, 218, 218, 0); z-index: 1000;">
</div>
<!-- jQuery and co -->
<script src="./js/jquery.min.js"></script>
<script src="./js/socket.io-1.3.5.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

7
js/main.js
View File

@ -17,7 +17,7 @@ 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>');
$("#main").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);
domMap = $("#map");
@ -54,7 +54,7 @@ function addNewPlayer(player, id) {
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>');
$("#main").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>');
}
}
@ -94,7 +94,7 @@ socket.on('setpos', function (allPlayers) {
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);
window.scrollTo(playerElement.offset().left-$(window).width()/2, playerElement.offset().top-$(window).height()/2+100);
var mapX = Math.floor(playerX/32);
var mapY = Math.floor(playerY/32);
@ -224,4 +224,5 @@ $(document).ready(function() {
}
});
});