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; background: url(../img/guy_sprite.png) -160px 0px;
} }
html { #main {
-webkit-transform: scale(1.5); -webkit-transform: scale(1.5);
transform: scale(2); transform: scale(2);
transform-origin: 0; 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" /> --> <!-- <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"> <link rel="stylesheet" href="./css/main.css">
</head> </head>
<body style="overflow:hidden; background: black;"> <body style="overflow:hidden; background: black; margin: 0; position: relative;">
<div id="main">
Pirate!!! Pirate!!!
<div id="map"> <div id="map">
</div> </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 --> <!-- jQuery and co -->
<script src="./js/jquery.min.js"></script> <script src="./js/jquery.min.js"></script>
<script src="./js/socket.io-1.3.5.js"></script> <script src="./js/socket.io-1.3.5.js"></script>
<script src="./js/main.js"></script> <script src="./js/main.js"></script>
</body> </body>
</html> </html>

7
js/main.js
View File

@ -17,7 +17,7 @@ socket.on('disconnect', function () {
socket.on('getmap', function (conent) { socket.on('getmap', function (conent) {
cssMap = conent["cssMap"]; 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"]; utilMap = conent["utilMap"];
//console.log(map); //console.log(map);
domMap = $("#map"); domMap = $("#map");
@ -54,7 +54,7 @@ function addNewPlayer(player, id) {
var modeClass = "guy"; var modeClass = "guy";
var modeImg = "./img/plain.png"; 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])); var oldPosX = Math.floor(parseFloat($("#"+id).css("left").split("px")[0]));
if(oldPosY != playerY || oldPosX != playerX) { if(oldPosY != playerY || oldPosX != playerX) {
if(ownId === id) { 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 mapX = Math.floor(playerX/32);
var mapY = Math.floor(playerY/32); var mapY = Math.floor(playerY/32);
@ -224,4 +224,5 @@ $(document).ready(function() {
} }
}); });
}); });