99 lines
2.6 KiB
JavaScript
99 lines
2.6 KiB
JavaScript
|
|
var socket = io();
|
|
var cssMap, utilMap;
|
|
var ownId;
|
|
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"];
|
|
utilMap = conent["utilMap"];
|
|
//console.log(map);
|
|
var 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+'">');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
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);
|
|
}
|
|
$("#"+id).css({"top":player["y"],"left":player["x"]});
|
|
}
|
|
});
|
|
});
|
|
|
|
socket.on('newPlayer', function (newPlayer) {
|
|
var player = newPlayer["player"];
|
|
var id = newPlayer["id"];
|
|
window.requestAnimationFrame(function() {
|
|
$("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;"></div>');
|
|
});
|
|
});
|
|
|
|
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]) {
|
|
console.log("down");
|
|
socket.emit("keyDown", key);
|
|
keys[key] = true;
|
|
}
|
|
});
|
|
|
|
$( document ).keyup(function( event ) {
|
|
var key = event.which;
|
|
console.log("up");
|
|
socket.emit("keyUp", key );
|
|
keys[key] = false;
|
|
});
|
|
|
|
$(window).bind('mousewheel DOMMouseScroll', function (event) {
|
|
if (event.ctrlKey == true) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
});
|
|
|