227 lines
6.8 KiB
JavaScript
227 lines
6.8 KiB
JavaScript
|
|
var socket = io();
|
|
var cssMap, utilMap, domMap;
|
|
var ownId;
|
|
var visibleMap = [];
|
|
var range = 18; //Sichtweite
|
|
|
|
socket.on('connect', function () {
|
|
ownId = socket.io.engine.id;
|
|
console.log("connect!");
|
|
socket.emit("getmap");
|
|
});
|
|
|
|
socket.on('disconnect', function () {
|
|
$(".player").remove();
|
|
});
|
|
|
|
socket.on('getmap', function (conent) {
|
|
cssMap = conent["cssMap"];
|
|
$("#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");
|
|
|
|
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<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);
|
|
for(var id in allPlayers) {
|
|
addNewPlayer(allPlayers[id], id);
|
|
}
|
|
});
|
|
|
|
function addNewPlayer(player, id) {
|
|
if($("#"+id).length==0) {
|
|
var modeClass = "default_ship";
|
|
var modeImg = "./img/default_ship.png";
|
|
if(player["mode"]==1) {
|
|
var modeClass = "guy";
|
|
var modeImg = "./img/plain.png";
|
|
}
|
|
$("#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>');
|
|
}
|
|
}
|
|
|
|
var oldmapX = null;
|
|
var oldmapY = null;
|
|
var picStep = 0;
|
|
var cnt = 0;
|
|
socket.on('setpos', function (allPlayers) {
|
|
window.requestAnimationFrame(function() {
|
|
for(var id in allPlayers) {
|
|
var player = allPlayers[id];
|
|
var playerElement = $("#"+id);
|
|
var playerImg = playerElement.find("img");
|
|
|
|
for(var i in player["special"]) {
|
|
if(i == "modechange") {
|
|
if(player["mode"] == 0) { //ship
|
|
playerElement.find("img").attr("src","./img/default_ship.png");
|
|
playerImg.removeClass (function (index, className) {
|
|
return (className.match (/(^|\s)guy\S+/g) || []).join(' ');
|
|
});
|
|
playerElement.find("img").removeClass("guy");
|
|
playerElement.find("img").addClass("default_ship");
|
|
} else { //land
|
|
|
|
playerElement.find("img").removeClass("default_ship");
|
|
playerElement.find("img").addClass("guy");
|
|
playerElement.find("img").attr("src","./img/plain.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
if(playerElement.length==1) {
|
|
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+100);
|
|
var mapX = Math.floor(playerX/32);
|
|
var mapY = Math.floor(playerY/32);
|
|
|
|
if(oldmapX != mapX || oldmapY != mapY) {
|
|
oldmapX = mapX;
|
|
oldmapY = mapY;
|
|
|
|
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) {
|
|
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) {
|
|
top2Btn = -1;
|
|
} else if(oldPosY < playerY) {
|
|
top2Btn = 1;
|
|
}
|
|
if(oldPosX > playerX) {
|
|
left2right = -1;
|
|
} else if(oldPosX < playerX) {
|
|
left2right = 1;
|
|
}
|
|
var angle = 0;
|
|
if(player["mode"] == 0) { //ship
|
|
var angle = Math.atan2(top2Btn, left2right);
|
|
} else { //land
|
|
cnt++;
|
|
if(cnt%3==0)
|
|
picStep++;
|
|
if(picStep >= 3)
|
|
picStep = 0;
|
|
if(!playerImg.hasClass("guy"+top2Btn+"-"+left2right+"-"+picStep)) {
|
|
playerImg.removeClass (function (index, className) {
|
|
return (className.match (/(^|\s)guy\S+/g) || []).join(' ');
|
|
});
|
|
playerImg.addClass("guy"+top2Btn+"-"+left2right+"-"+picStep);
|
|
}
|
|
}
|
|
playerElement.css({"top":player["y"],"left":player["x"], "-webkit-transform" : "rotate("+angle+"rad)"});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
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"];
|
|
addNewPlayer(player, id);
|
|
});
|
|
|
|
socket.on('playerDisc', function (id) {
|
|
$("#"+id).remove();
|
|
});
|
|
|
|
|
|
$(document).ready(function() {
|
|
var viewportmeta = document.querySelector('meta[name="viewport"]');
|
|
viewportmeta.content = 'user-scalable=NO, width=device-width, initial-scale=1.0';
|
|
window.scrollTo(0, 0);
|
|
var keys = {};
|
|
|
|
$(document).keydown(function(event) {
|
|
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189' ) ) {
|
|
event.preventDefault();
|
|
}
|
|
var key = event.which;
|
|
if(key==37||key==38||key==39||key==40)
|
|
event.preventDefault();
|
|
if(!keys[key]) {
|
|
|
|
if(key == 32) {
|
|
socket.emit("actionKey", key);
|
|
} else {
|
|
socket.emit("keyDown", key);
|
|
}
|
|
keys[key] = true;
|
|
}
|
|
});
|
|
|
|
$( document ).keyup(function( event ) {
|
|
var key = event.which;
|
|
socket.emit("keyUp", key );
|
|
keys[key] = false;
|
|
});
|
|
|
|
$(window).bind('mousewheel DOMMouseScroll', function (event) {
|
|
if (event.ctrlKey == true) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
|
|
}); |