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

add items with attr

Browse Source
This commit is contained in:
Raphael 2021-11-01 22:36:11 +01:00
parent c409b5e5e9
commit 00884b1062
7 changed files with 744 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
css/main.css
View File

@ -55,7 +55,7 @@
} }
/* Items */ /* Items */
.boots1 { .item_boots_boots1 {
background: url(../img/items.png) 0px -95px; background: url(../img/items.png) 0px -95px;
width: 30px; width: 30px;
background-size: 500px; background-size: 500px;
@ -63,7 +63,7 @@
margin-top: 5px; margin-top: 5px;
} }
.boots2 { .item_boots_boots2 {
background: url(../img/items.png) -32px -95px; background: url(../img/items.png) -32px -95px;
width: 30px; width: 30px;
background-size: 500px; background-size: 500px;
@ -71,15 +71,15 @@
margin-top: 5px; margin-top: 5px;
} }
.boots3 { .item_boots_boots3 {
background: url(../img/items.png) -64px -95px; background: url(../img/items.png) -64px -94px;
width: 30px; width: 30px;
background-size: 500px; background-size: 500px;
margin-left: 5px; margin-left: 5px;
margin-top: 5px; margin-top: 5px;
} }
.boots4 { .item_boots_boots4 {
background: url(../img/items.png) -96px -95px; background: url(../img/items.png) -96px -95px;
width: 30px; width: 30px;
background-size: 500px; background-size: 500px;
@ -87,14 +87,288 @@
margin-top: 5px; margin-top: 5px;
} }
.boots5 { .item_boots_boots5 {
background: url(../img/items.png) -128px -95px; background: url(../img/items.png) -125px -94px;
width: 30px; width: 30px;
background-size: 500px; background-size: 500px;
margin-left: 5px; margin-left: 5px;
margin-top: 5px; margin-top: 5px;
} }
.item_tool_axe1 {
background: url(../img/items.png) 0px -208px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_tool_axe2 {
background: url(../img/items.png) -28px -208px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_tool_axe3 {
background: url(../img/items.png) -60px -208px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_tool_axe4 {
background: url(../img/items.png) -90px -208px;
width: 30px;
background-size: 477px;
margin-left: 5px;
margin-top: 5px;
}
.item_tool_axe5 {
background: url(../img/items.png) -119px -208px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_head_head1 {
background: url(../img/items.png) -1px 0px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_head_head2 {
background: url(../img/items.png) -30px 0px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_head_head3 {
background: url(../img/items.png) -60px 0px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_head_head4 {
background: url(../img/items.png) -90px 0px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_head_head5 {
background: url(../img/items.png) -120px 0px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_legs_legs1 {
background: url(../img/items.png) 0px -59px;
width: 30px;
background-size: 480px;
margin-left: 5px;
margin-top: 5px;
}
.item_legs_legs5 {
background: url(../img/items.png) -120px -59px;
width: 30px;
background-size: 480px;
margin-left: 5px;
margin-top: 5px;
}
.item_legs_legs4 {
background: url(../img/items.png) -90px -59px;
width: 30px;
background-size: 480px;
margin-left: 5px;
margin-top: 5px;
}
.item_legs_legs3 {
background: url(../img/items.png) -60px -59px;
width: 30px;
background-size: 480px;
margin-left: 5px;
margin-top: 5px;
}
.item_legs_legs2 {
background: url(../img/items.png) -30px -59px;
width: 30px;
background-size: 480px;
margin-left: 5px;
margin-top: 5px;
}
.item_chest_chest1 {
background: url(../img/items.png) 0px -28px;
width: 30px;
background-size: 480px;
margin-left: 5px;
margin-top: 5px;
}
.item_chest_chest2 {
background: url(../img/items.png) -30px -28px;
width: 30px;
background-size: 480px;
margin-left: 5px;
margin-top: 5px;
}
.item_chest_chest3 {
background: url(../img/items.png) -59px -28px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_chest_chest4 {
background: url(../img/items.png) -89px -28px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_chest_chest5 {
background: url(../img/items.png) -120px -28px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_weapon_sword1 {
background: url(../img/items.png) 0px -120px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_weapon_sword2 {
background: url(../img/items.png) -29px -120px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_weapon_sword3 {
background: url(../img/items.png) -60px -120px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_weapon_sword4 {
background: url(../img/items.png) -90px -120px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_weapon_sword5 {
background: url(../img/items.png) -120px -120px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_weapon_stick1 {
background: url(../img/items.png) -150px -91px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_item_bone1 {
background: url(../img/items.png) -356px -29px;
width: 30px;
background-size: 476px;
margin-left: 5px;
margin-top: 5px;
}
.item_item_dimond1 {
background: url(../img/items.png) -350px -150px;
width: 50px;
background-size: 800px;
opacity: 25%;
}
/* Slot Imgs */
.slot_head {
background: url(../img/items.png) -100px 0px;
width: 50px;
background-size: 800px;
opacity: 25%;
}
.slot_chest {
background: url(../img/items.png) -50px -48px;
width: 50px;
background-size: 800px;
opacity: 25%;
}
.slot_legs {
background: url(../img/items.png) -50px -98px;
width: 50px;
background-size: 800px;
opacity: 25%;
}
.slot_boots {
background: url(../img/items.png) -50px -150px;
width: 50px;
background-size: 800px;
opacity: 25%;
}
.slot_weapon {
background: url(../img/items.png) 0px -200px;
width: 50px;
background-size: 800px;
opacity: 25%;
}
.slot_tool {
background: url(../img/items.png) 0px -348px;
width: 50px;
background-size: 800px;
opacity: 25%;
}
.slot_item {
background: url(../img/items.png) -350px -150px;
width: 50px;
background-size: 800px;
opacity: 25%;
}
/* Guy */ /* Guy */
.guy1-0-0 { .guy1-0-0 {
background: url(../img/guy_sprite.png) 0px 0px; background: url(../img/guy_sprite.png) 0px 0px;

BIN
img/items.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 662 KiB

After

Width:  |  Height:  |  Size: 687 KiB

BIN
img/items.psd Normal file
View File

Binary file not shown.

70
index.html
View File

@ -1,30 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<!-- Required meta tags always come first -->
<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,minimum-scale=1, maximum-scale=1, user-scalable=no" /> -->
<link rel="stylesheet" href="./css/main.css">
</head>
<body style="overflow:hidden; background: black; margin: 0; position: relative;">
<div id="main">
Pirate!!!
<div id="map">
</div>
<head>
</div> <!-- Required meta tags always come first -->
<div id="bottomHud" style="position: fixed; bottom: 0; width: 100%; left: 0; height: 150px; background: rgba(218, 218, 218, 0); z-index: 1000;"> <meta charset="utf-8">
</div> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery and co --> <meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="./js/jquery.min.js"></script> <!-- <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no" /> -->
<script src="./js/socket.io-2.2.0.js"></script> <link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script> </head>
</body>
<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: 5px; left: 0px; left: 5px; z-index: 1000;">
<table style="margin-bottom: 5px; padding: 5px; border-radius: 5px; border: 3px solid #0000002e; background: rgb(26 26 26 / 49%); border-bottom-right-radius: 0px;">
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_head"></td>
</tr>
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_chest"></td>
</tr>
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_legs"></td>
</tr>
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_boots"></td>
</tr>
</table>
<table style="position: absolute; bottom:0px; left:72px; margin-bottom: 5px; padding: 5px; border-radius: 5px; border: 3px solid #0000002e; border-left: 0px; background: rgb(26 26 26 / 49%); border-bottom-left-radius: 0px; border-top-left-radius: 0px;">
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_weapon"></td>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_tool"></td>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_item"></td>
</tr>
</table>
</div>
<!-- jQuery and co -->
<script src="./js/jquery.min.js"></script>
<script src="./js/socket.io-2.2.0.js"></script>
<script src="./js/main.js"></script>
</body>
</html> </html>

258
js/main.js
View File

@ -5,6 +5,44 @@ var ownId;
var visibleMap = []; var visibleMap = [];
var range = 18; //Sichtweite var range = 18; //Sichtweite
var tooltiptexts = {
"treasure-closed": "Kiste!",
"treasure-open": "Kiste geöffnet!",
"item_boots_boots1": "Schuhe: Geschwindigkeit an Land +1",
"item_boots_boots2": "Schuhe: Geschwindigkeit an Land +2",
"item_boots_boots3": "Schuhe: Geschwindigkeit an Land +3",
"item_boots_boots4": "Schuhe: Geschwindigkeit an Land +4",
"item_boots_boots5": "Schuhe: Geschwindigkeit an Land +5",
"item_tool_axe1" : "Axt: Bäume fällen +1",
"item_tool_axe2" : "Axt: Bäume fällen +2",
"item_tool_axe3" : "Axt: Bäume fällen +3",
"item_tool_axe4" : "Axt: Bäume fällen +4",
"item_tool_axe5" : "Axt: Bäume fällen +5",
"item_head_head1" : "Kopf: Rüstung erhöht +200",
"item_head_head2" : "Kopf: Rüstung erhöht +300",
"item_head_head3" : "Kopf: Rüstung erhöht +400",
"item_head_head4" : "Kopf: Rüstung erhöht +500",
"item_head_head5" : "Kopf: Rüstung erhöht +600",
"item_chest_chest1" : "Brust: Rüstung erhöht +200",
"item_chest_chest2" : "Brust: Rüstung erhöht +300",
"item_chest_chest3" : "Brust: Rüstung erhöht +400",
"item_chest_chest4" : "Brust: Rüstung erhöht +500",
"item_chest_chest5" : "Brust: Rüstung erhöht +600",
"item_legs_legs1" : "Beine: Rüstung erhöht +200",
"item_legs_legs2" : "Beine: Rüstung erhöht +300",
"item_legs_legs3" : "Beine: Rüstung erhöht +400",
"item_legs_legs4" : "Beine: Rüstung erhöht +500",
"item_legs_legs5" : "Beine: Rüstung erhöht +600",
"item_weapon_sword1" : "Schwert: Schaden erhöht 200",
"item_weapon_sword2" : "Schwert: Schaden erhöht 300",
"item_weapon_sword3" : "Schwert: Schaden erhöht 400",
"item_weapon_sword4" : "Schwert: Schaden erhöht 500",
"item_weapon_sword5" : "Schwert: Schaden erhöht 600",
"item_weapon_stick1" : "Stock: Schaden erhöht 50",
"item_item_bone1" : "Mach nix, ehöht aber dein Level um 1",
"item_item_dimond1" : "Verkaufe den Diamand für 10 Siegpunkte! Bewegungsgeschwindigkeit verlangsamt!"
}
socket.on('connect', function () { socket.on('connect', function () {
ownId = socket.io.engine.id; ownId = socket.io.engine.id;
console.log("connect!"); console.log("connect!");
@ -17,13 +55,13 @@ socket.on('disconnect', function () {
socket.on('getmap', function (conent) { socket.on('getmap', function (conent) {
cssMap = conent["cssMap"]; 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>'); $("#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"];
var chestCoords = [0,0]; var chestCoords = [0, 0];
for (var w = 0; w < utilMap.length; w++) { //get chest coords for (var w = 0; w < utilMap.length; w++) { //get chest coords
for (var h = 0; h < utilMap[w].length; h++) { for (var h = 0; h < utilMap[w].length; h++) {
if(utilMap[w][h]=="treasure-closed") { if (utilMap[w][h] == "treasure-closed") {
chestCoords = [w,h]; chestCoords = [w, h];
} }
} }
} }
@ -35,19 +73,19 @@ socket.on('getmap', function (conent) {
var allPlayers = conent["allPlayers"]; var allPlayers = conent["allPlayers"];
console.log(allPlayers); console.log(allPlayers);
for(var id in allPlayers) { for (var id in allPlayers) {
addNewPlayer(allPlayers[id], id); addNewPlayer(allPlayers[id], id);
} }
}); });
socket.on('animation', function (timer) { socket.on('animation', function (timer) {
timer = timer / 1000; timer = timer / 1000;
var loader = $('<div id="animationDiv" style="width: 17px; height: 4px; position: absolute; background: linear-gradient(to right, green 50%, rgba(255, 0, 0, 0) 50%); background-size: 200% 100%; background-position:right bottom; top: -16px; left: -12px; border: 1px solid black; border-radius: 5px; transition: all ease '+timer+'s;"></div>'); var loader = $('<div id="animationDiv" style="width: 17px; height: 4px; position: absolute; background: linear-gradient(to right, green 50%, rgba(255, 0, 0, 0) 50%); background-size: 200% 100%; background-position:right bottom; top: -16px; left: -12px; border: 1px solid black; border-radius: 5px; transition: all ease ' + timer + 's;"></div>');
$("#"+ownId).append(loader); $("#" + ownId).append(loader);
setTimeout(function() { setTimeout(function () {
$("#animationDiv").addClass("animate"); $("#animationDiv").addClass("animate");
}, 100); }, 100);
}); });
socket.on('stopAnimation', function (timer) { socket.on('stopAnimation', function (timer) {
@ -56,41 +94,52 @@ socket.on('stopAnimation', function (timer) {
socket.on('objAction', function (obj) { socket.on('objAction', function (obj) {
console.log(obj); console.log(obj);
var mapX = obj["mapX"]*32; var mapX = obj["mapX"] * 32;
var mapY = obj["mapY"]*32+3; var mapY = obj["mapY"] * 32 + 3;
$(".overlay"+obj["socketId"]).remove(); $(".overlay" + obj["socketId"]).remove();
$("#main").append('<div class="overlay'+obj["socketId"]+'" id="" style="background: rgba(206, 0, 104, 0.45); width:32px; height:32px; z-index:2; position:absolute; top:'+mapY+'px; left:'+mapX+'px;"></div>'); $("#main").append('<div class="overlay' + obj["socketId"] + '" id="" style="background: rgba(206, 0, 104, 0.45); width:32px; height:32px; z-index:2; position:absolute; top:' + mapY + 'px; left:' + mapX + 'px;"></div>');
}); });
socket.on('stopAction', function (socketId) { socket.on('stopAction', function (socketId) {
$(".overlay"+socketId).remove(); $(".overlay" + socketId).remove();
}); });
socket.on('removeUtil', function (obj) { socket.on('removeUtil', function (obj) {
console.log(obj); console.log(obj);
$("."+obj["mapY"]+'-'+obj["mapX"]+'.'+obj["name"]).remove(); $("." + obj["mapY"] + '-' + obj["mapX"] + '.' + obj["name"]).remove();
}); });
socket.on('replaceUtil', function (obj) { socket.on('replaceUtil', function (obj) {
console.log(obj); console.log(obj);
$("."+obj["mapY"]+'-'+obj["mapX"]+'.'+obj["name"]).removeClass(obj["name"]).addClass(obj["newName"]); $("." + obj["mapY"] + '-' + obj["mapX"] + '.' + obj["name"]).removeClass(obj["name"]).addClass(obj["newName"]);
}); });
socket.on('dropItem', function (obj) { socket.on('dropItem', function (obj) {
console.log(obj); console.log(obj);
domMap.append('<img style="top:'+((obj["mapY"]*32))+'px; left:'+((obj["mapX"]*32))+'px; z-index:3; position:absolute;" src="./img/plain.png" i="'+obj["newName"]+'" class="'+obj["mapY"]+'-'+obj["mapX"]+' spriteItem spriteUtils '+obj["newName"]+'">'); var utilTitle = tooltiptexts[obj["newName"]] ? tooltiptexts[obj["newName"]] : "";
domMap.append('<img title="' + utilTitle + '" style="top:' + ((obj["mapY"] * 32)) + 'px; left:' + ((obj["mapX"] * 32)) + 'px; z-index:3; position:absolute;" src="./img/plain.png" class="' + obj["mapY"] + '-' + obj["mapX"] + ' spriteItem spriteUtils ' + obj["newName"] + '">');
});
socket.on('addItemToInventar', function (obj) {
console.log("addItemToInventar",obj);
let itemArt = obj.split("_")[1];
$("#slot_"+itemArt).empty();
$("#slot_"+itemArt).append('<img style="zoom: 1.3; position: relative; left: -2px;" title="'+tooltiptexts[obj]+'" src="./img/plain.png" class="'+obj+'">');
// var utilTitle = tooltiptexts[obj["newName"]] ? tooltiptexts[obj["newName"]] : "";
// domMap.append('<img title="' + utilTitle + '" style="top:' + ((obj["mapY"] * 32)) + 'px; left:' + ((obj["mapX"] * 32)) + 'px; z-index:3; position:absolute;" src="./img/plain.png" class="' + obj["mapY"] + '-' + obj["mapX"] + ' spriteItem spriteUtils ' + obj["newName"] + '">');
}); });
function addNewPlayer(player, id) { function addNewPlayer(player, id) {
if($("#"+id).length==0) { if ($("#" + id).length == 0) {
var modeClass = "default_ship"; var modeClass = "default_ship";
var modeImg = "./img/default_ship.png"; var modeImg = "./img/default_ship.png";
if(player["mode"]==1) { if (player["mode"] == 1) {
var modeClass = "guy"; var modeClass = "guy";
var modeImg = "./img/plain.png"; 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>'); $("#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>');
} }
} }
@ -99,18 +148,18 @@ var oldmapY = null;
var picStep = 0; var picStep = 0;
var cnt = 0; var cnt = 0;
socket.on('setpos', function (allPlayers) { socket.on('setpos', function (allPlayers) {
window.requestAnimationFrame(function() { window.requestAnimationFrame(function () {
for(var id in allPlayers) { for (var id in allPlayers) {
var player = allPlayers[id]; var player = allPlayers[id];
var playerElement = $("#"+id); var playerElement = $("#" + id);
var playerImg = playerElement.find("img"); var playerImg = playerElement.find("img");
for(var i in player["special"]) { for (var i in player["special"]) {
if(i == "modechange") { if (i == "modechange") {
if(player["mode"] == 0) { //ship if (player["mode"] == 0) { //ship
playerElement.find("img").attr("src","./img/default_ship.png"); playerElement.find("img").attr("src", "./img/default_ship.png");
playerImg.removeClass (function (index, className) { playerImg.removeClass(function (index, className) {
return (className.match (/(^|\s)guy\S+/g) || []).join(' '); return (className.match(/(^|\s)guy\S+/g) || []).join(' ');
}); });
playerElement.find("img").removeClass("guy"); playerElement.find("img").removeClass("guy");
playerElement.find("img").addClass("default_ship"); playerElement.find("img").addClass("default_ship");
@ -118,39 +167,37 @@ socket.on('setpos', function (allPlayers) {
playerElement.find("img").removeClass("default_ship"); playerElement.find("img").removeClass("default_ship");
playerElement.find("img").addClass("guy"); playerElement.find("img").addClass("guy");
playerElement.find("img").attr("src","./img/plain.png"); playerElement.find("img").attr("src", "./img/plain.png");
} }
} }
} }
if(playerElement.length==1) { if (playerElement.length == 1) {
var playerX = Math.floor(player["x"]); var playerX = Math.floor(player["x"]);
var playerY = Math.floor(player["y"]); var playerY = Math.floor(player["y"]);
var oldPosY = Math.floor(parseFloat($("#"+id).css("top").split("px")[0])); var oldPosY = Math.floor(parseFloat($("#" + id).css("top").split("px")[0]));
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+100); 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);
if(oldmapX != mapX || oldmapY != mapY) { if (oldmapX != mapX || oldmapY != mapY) {
oldmapX = mapX; oldmapX = mapX;
oldmapY = mapY; oldmapY = mapY;
for(var x=mapX-range;x<mapX+range;x++) { for (var x = mapX - range; x < mapX + range; x++) {
if(x >= 0 && x < cssMap.length) { if (x >= 0 && x < cssMap.length) {
for(var y=mapY-range;y<mapY+range;y++) { for (var y = mapY - range; y < mapY + range; y++) {
if(y >= 0 && y < cssMap[0].length) { if (y >= 0 && y < cssMap[0].length) {
if(!visibleMap[x] || !visibleMap[x][y]) { if (!visibleMap[x] || !visibleMap[x][y]) {
var dist = getCoordDist(x,y,mapX,mapY); var dist = getCoordDist(x, y, mapX, mapY);
if(dist<=range) { 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]+'">'); 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]; var utilTitle = tooltiptexts[utilMap[y][x]] ? tooltiptexts[utilMap[y][x]] : "";
if(utilTitle!="") { domMap.append('<img style="top:' + ((y * 32) - 5) + 'px; left:' + (x * 32) + 'px; z-index:2;" src="./img/plain.png" title="' + utilTitle + '" class="' + y + '-' + x + ' spriteUtils ' + utilMap[y][x] + '">');
domMap.append('<img style="top:'+((y*32)-5)+'px; left:'+(x*32)+'px; z-index:2;" src="./img/plain.png" i="'+utilTitle+'" class="'+y+'-'+x+' spriteUtils '+utilTitle+'">'); if (!visibleMap[x]) {
}
if(!visibleMap[x]) {
visibleMap[x] = []; visibleMap[x] = [];
} }
visibleMap[x][y] = true; visibleMap[x][y] = true;
@ -160,12 +207,12 @@ socket.on('setpos', function (allPlayers) {
} }
} }
} }
for(var x in visibleMap) { for (var x in visibleMap) {
for(var y in visibleMap[x]) { for (var y in visibleMap[x]) {
if(visibleMap[x][y]) { if (visibleMap[x][y]) {
var dist = getCoordDist(x,y,mapX,mapY); var dist = getCoordDist(x, y, mapX, mapY);
if(dist > range) { if (dist > range) {
domMap.find("."+y+'-'+x).remove(); domMap.find("." + y + '-' + x).remove();
visibleMap[x][y] = false; visibleMap[x][y] = false;
} }
} }
@ -175,92 +222,105 @@ socket.on('setpos', function (allPlayers) {
} }
var top2Btn = 0; var top2Btn = 0;
var left2right = 0; var left2right = 0;
if(oldPosY > playerY) { if (oldPosY > playerY) {
top2Btn = -1; top2Btn = -1;
} else if(oldPosY < playerY) { } else if (oldPosY < playerY) {
top2Btn = 1; top2Btn = 1;
} }
if(oldPosX > playerX) { if (oldPosX > playerX) {
left2right = -1; left2right = -1;
} else if(oldPosX < playerX) { } else if (oldPosX < playerX) {
left2right = 1; left2right = 1;
} }
var angle = 0; var angle = 0;
if(player["mode"] == 0) { //ship if (player["mode"] == 0) { //ship
var angle = Math.atan2(top2Btn, left2right); var angle = Math.atan2(top2Btn, left2right);
} else { //land } else { //land
cnt++; cnt++;
if(cnt%3==0) if (cnt % 3 == 0)
picStep++; picStep++;
if(picStep >= 3) if (picStep >= 3)
picStep = 0; picStep = 0;
if(!playerImg.hasClass("guy"+top2Btn+"-"+left2right+"-"+picStep)) { if (!playerImg.hasClass("guy" + top2Btn + "-" + left2right + "-" + picStep)) {
playerImg.removeClass (function (index, className) { playerImg.removeClass(function (index, className) {
return (className.match (/(^|\s)guy\S+/g) || []).join(' '); return (className.match(/(^|\s)guy\S+/g) || []).join(' ');
}); });
playerImg.addClass("guy"+top2Btn+"-"+left2right+"-"+picStep); playerImg.addClass("guy" + top2Btn + "-" + left2right + "-" + picStep);
} }
} }
playerElement.css({"top":player["y"],"left":player["x"], "-webkit-transform" : "rotate("+angle+"rad)"}); playerElement.css({ "top": player["y"], "left": player["x"], "-webkit-transform": "rotate(" + angle + "rad)" });
} }
} }
} }
}); });
}); });
function getCoordDist(x1,y1,x2,y2) { function getCoordDist(x1, y1, x2, y2) {
return Math.abs(Math.sqrt(Math.pow(y2-y1,2)+Math.pow(x2-x1,2))); return Math.abs(Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2)));
} }
socket.on('newPlayer', function (newPlayer) { socket.on('newPlayer', function (newPlayer) {
var player = newPlayer["player"]; var player = newPlayer["player"];
var id = newPlayer["id"]; var id = newPlayer["id"];
addNewPlayer(player, id); addNewPlayer(player, id);
}); });
socket.on('playerDisc', function (id) { socket.on('playerDisc', function (id) {
$("#"+id).remove(); $("#" + id).remove();
}); });
let defaultSlots = {
slot_head: $('<img title="Platz für Kopfteile" src="./img/plain.png" class="slot_head">'),
slot_chest: $('<img title="Platz für Brustteile" src="./img/plain.png" class="slot_chest">'),
slot_legs: $('<img title="Platz für Beinteile" src="./img/plain.png" class="slot_legs">'),
slot_boots: $('<img title="Platz für Schuhe" src="./img/plain.png" class="slot_boots">'),
slot_weapon: $('<img title="Platz für Waffen" src="./img/plain.png" class="slot_weapon">'),
slot_tool: $('<img title="Platz für Werkzeuge" src="./img/plain.png" class="slot_tool">'),
slot_item: $('<img title="Platz für Gegenstände" src="./img/plain.png" class="slot_item">'),
}
$(document).ready(function() { $(document).ready(function () {
var viewportmeta = document.querySelector('meta[name="viewport"]'); var viewportmeta = document.querySelector('meta[name="viewport"]');
viewportmeta.content = 'user-scalable=NO, width=device-width, initial-scale=1.0'; viewportmeta.content = 'user-scalable=NO, width=device-width, initial-scale=1.0';
window.scrollTo(0, 0); window.scrollTo(0, 0);
var keys = {}; var keys = {};
$(document).keydown(function(event) { for (var i in defaultSlots) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189' ) ) { $("#" + i).append(defaultSlots[i]);
event.preventDefault(); }
}
$(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; var key = event.which;
//console.log(key); //console.log(key);
if(key==37||key==38||key==39||key==40) if (key == 37 || key == 38 || key == 39 || key == 40)
event.preventDefault(); event.preventDefault();
if(!keys[key]) { if (!keys[key]) {
if(key == 32) { if (key == 32) {
socket.emit("actionKey", key); socket.emit("actionKey", key);
} else { } else {
socket.emit("keyDown", key); socket.emit("keyDown", key);
} }
keys[key] = true; keys[key] = true;
} }
}); });
$( document ).keyup(function( event ) { $(document).keyup(function (event) {
var key = event.which; var key = event.which;
socket.emit("keyUp", key ); socket.emit("keyUp", key);
if(key == 32) { if (key == 32) {
$("#animationDiv").remove(); $("#animationDiv").remove();
} }
keys[key] = false; keys[key] = false;
}); });
$(window).bind('mousewheel DOMMouseScroll', function (event) { $(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey == true) { if (event.ctrlKey == true) {
event.preventDefault(); event.preventDefault();
} }
}); });

2
s_map.js
View File

@ -120,7 +120,7 @@ module.exports = {
utilMap[w][h] = "tree1"; utilMap[w][h] = "tree1";
} else if (Math.random() < 0.011) { } else if (Math.random() < 0.011) {
utilMap[w][h] = "stone1"; utilMap[w][h] = "stone1";
} else if (Math.random() < 0.011) { } else if (Math.random() < 0.04) {
utilMap[w][h] = "fass"; utilMap[w][h] = "fass";
} }
} }

318
server.js
View File

@ -1,6 +1,9 @@
var PORT = 8080; var PORT = 8080;
var gameMode = true; var gameMode = true;
const mapWidth = 50;
const mapHeight = 50;
var allSockets = {}; var allSockets = {};
var allPlayers = {}; var allPlayers = {};
var userCnt = 0; var userCnt = 0;
@ -11,8 +14,7 @@ app.use(express.static(__dirname + '/'));
var server = require('http').Server(app); var server = require('http').Server(app);
var io = require('socket.io')(server); var io = require('socket.io')(server);
var map = require("./s_map.js"); var map = require("./s_map.js");
var mapWidth = 20;
var mapHeight = 20;
var maxX = mapWidth * 32; var maxX = mapWidth * 32;
var maxY = mapHeight * 32; var maxY = mapHeight * 32;
var newmap = map.generateMap(mapWidth, mapHeight); var newmap = map.generateMap(mapWidth, mapHeight);
@ -21,35 +23,147 @@ var map = newmap["map"];
var utilMap = newmap["utilMap"]; var utilMap = newmap["utilMap"];
var defaultMvnt = 2; var defaultMvnt = 2;
var items = [ var itemAttrs = {
"boots1", "item_boots_boots1": {
"boots2", lvl: 1,
"boots3", changeMovementLand: 0.1
"boots4", },
"boots5", "item_boots_boots2": {
]; lvl: 2,
changeMovementLand: 0.15
},
"item_boots_boots3": {
lvl: 3,
changeMovementLand: 0.2
},
"item_boots_boots4": {
lvl: 4,
changeMovementLand: 0.25
},
"item_boots_boots5": {
lvl: 5,
changeMovementLand: 0.3
},
"item_tool_axe1": {
lvl: 1,
reduceTreeCutSpeed: 300
},
"item_tool_axe2": {
lvl: 2,
reduceTreeCutSpeed: 550
},
"item_tool_axe3": {
lvl: 3,
reduceTreeCutSpeed: 700
},
"item_tool_axe4": {
lvl: 4,
reduceTreeCutSpeed: 900
},
"item_tool_axe5": {
lvl: 5,
reduceTreeCutSpeed: 1300
},
"item_head_head1": {
lvl: 1,
armor: 200
},
"item_head_head2": {
lvl: 2,
armor: 300
},
"item_head_head3": {
lvl: 3,
armor: 400
},
"item_head_head4": {
lvl: 4,
armor: 500
},
"item_head_head5": {
lvl: 5,
armor: 600
},
"item_chest_chest1": {
lvl: 1,
armor: 200
},
"item_chest_chest2": {
lvl: 2,
armor: 300
},
"item_chest_chest3": {
lvl: 3,
armor: 400
},
"item_chest_chest4": {
lvl: 4,
armor: 500
},
"item_chest_chest5": {
lvl: 5,
armor: 600
},
"item_legs_legs1": {
lvl: 1,
armor: 200
},
"item_legs_legs2": {
lvl: 2,
armor: 300
},
"item_legs_legs3": {
lvl: 3,
armor: 400
},
"item_legs_legs4": {
lvl: 4,
armor: 500
},
"item_legs_legs5": {
lvl: 5,
armor: 600
},
"item_legs_legs5": {
lvl: 5,
armor: 600
},
"item_weapon_sword1": {
lvl: 1,
armor: 200
},
"item_weapon_sword2": {
lvl: 2,
armor: 300
},
"item_weapon_sword3": {
lvl: 3,
armor: 400
},
"item_weapon_sword4": {
lvl: 4,
armor: 500
},
"item_weapon_sword5": {
lvl: 5,
armor: 600
},
"item_weapon_stick1": {
lvl: 1,
armor: 50
},
"item_item_bone1": {
lvl: 1,
},
"item_item_dimond1": {
lvl: 10,
changeMovementSpeed : -0.5
},
}
var itemPlayerChanges = { var items = [];
"boots1" : { for (var i in itemAttrs) {
changeMovementLand : 1, items.push(i)
text : "Geschwindigkeit an Land +1"
},
"boots2" : {
changeMovementLand : 2,
text : "Geschwindigkeit an Land +2"
},
"boots3" : {
changeMovementLand : 3,
text : "Geschwindigkeit an Land +3"
},
"boots4" : {
changeMovementLand : 4,
text : "Geschwindigkeit an Land +4"
},
"boots5" : {
changeMovementLand : 5,
text : "Geschwindigkeit an Land +5"
},
} }
server.listen(PORT); server.listen(PORT);
@ -67,29 +181,41 @@ io.on('connection', function (socket) {
mvnt: defaultMvnt, mvnt: defaultMvnt,
special: {}, special: {},
mode: 0, //0 = ship //1 foot mode: 0, //0 = ship //1 foot
items: { slots: {
slot1: null, head: null,
slot2: null, chest: null,
slot3: null legs: null,
} boots: null,
weapon: null,
tool: null,
item: null
}
}; };
var player = allPlayers[socket.id]; var player = allPlayers[socket.id];
io.sockets.emit("newPlayer", { io.sockets.emit("newPlayer", {
player: allPlayers[socket.id], player: allPlayers[socket.id],
id: socket.id, id: socket.id
items: {
slot1: null,
slot2: null,
slot3: null
}
}); });
socket.on('disconnect', function () { socket.on('disconnect', function () {
for (var i in player.slots) {
if (player.slots[i]) {
let nearFieldCoords = getNearEmptyField(Math.floor(player["x"] / 32), Math.floor(player["y"] / 32));
let newObj = {
mapY: nearFieldCoords["y"],
mapX: nearFieldCoords["x"],
newName: player.slots[i]
}
utilMap[nearFieldCoords["y"]][nearFieldCoords["x"]] = newObj["newName"];
io.sockets.emit("dropItem", newObj);
}
}
userCnt--; userCnt--;
delete allSockets[socket.id]; delete allSockets[socket.id];
delete allPlayers[socket.id]; delete allPlayers[socket.id];
console.log("User Disconnected:", socket.id); console.log("User Disconnected:", socket.id);
io.sockets.emit("playerDisc", socket.id); io.sockets.emit("playerDisc", socket.id);
}); });
socket.on('getmap', function () { socket.on('getmap', function () {
@ -127,7 +253,7 @@ io.on('connection', function (socket) {
player["special"]["modechange"] = true; player["special"]["modechange"] = true;
} }
}; };
console.log(player["mode"], groundUnder); //console.log(player["mode"], groundUnder);
var obj = getNearestObject(player["x"], player["y"]); var obj = getNearestObject(player["x"], player["y"]);
if (obj) { if (obj) {
obj["socketId"] = socket.id; obj["socketId"] = socket.id;
@ -136,12 +262,18 @@ io.on('connection', function (socket) {
playerActionTimer = null; playerActionTimer = null;
} }
if (obj["name"] == "forest") { if (obj["name"] == "forest") {
let cutTime = 2000; //2 Secs
if (player["slots"]["tool"] && itemAttrs[player["slots"]["tool"]] && itemAttrs[player["slots"]["tool"]]["reduceTreeCutSpeed"] > 0) {
cutTime -= itemAttrs[player["slots"]["tool"]]["reduceTreeCutSpeed"];
}
playerActionTimer = setTimeout(function () { playerActionTimer = setTimeout(function () {
utilMap[obj["mapY"]][obj["mapX"]] = ""; utilMap[obj["mapY"]][obj["mapX"]] = "";
io.sockets.emit("removeUtil", obj); io.sockets.emit("removeUtil", obj);
socket.emit("stopAnimation", 2000); socket.emit("stopAnimation", cutTime);
}, 2000); //2 Secs }, cutTime);
socket.emit("animation", 2000); socket.emit("animation", cutTime);
} else if (obj["name"] == "treasure-closed") { } else if (obj["name"] == "treasure-closed") {
playerActionTimer = setTimeout(function () { playerActionTimer = setTimeout(function () {
utilMap[obj["mapY"]][obj["mapX"]] = "treasure-open"; utilMap[obj["mapY"]][obj["mapX"]] = "treasure-open";
@ -149,7 +281,8 @@ io.on('connection', function (socket) {
io.sockets.emit("replaceUtil", obj); io.sockets.emit("replaceUtil", obj);
socket.emit("stopAnimation", 2000); socket.emit("stopAnimation", 2000);
let randomItem = getRandomItem(); //Drop a random Item
let randomItem = getRandomItem(2, 5);
let nearFieldCoords = getNearEmptyField(obj["mapX"], obj["mapY"]); let nearFieldCoords = getNearEmptyField(obj["mapX"], obj["mapY"]);
utilMap[nearFieldCoords["y"]][nearFieldCoords["x"]] = randomItem; utilMap[nearFieldCoords["y"]][nearFieldCoords["x"]] = randomItem;
@ -159,11 +292,51 @@ io.on('connection', function (socket) {
newName: randomItem newName: randomItem
} }
io.sockets.emit("dropItem", newObj); io.sockets.emit("dropItem", newObj);
console.log("newObj", newObj)
}, 2000); //2 Secs }, 2000); //2 Secs
socket.emit("animation", 2000); socket.emit("animation", 2000);
} else if (obj["name"] == "fass") {
playerActionTimer = setTimeout(function () {
utilMap[obj["mapY"]][obj["mapX"]] = "";
io.sockets.emit("removeUtil", obj);
socket.emit("stopAnimation", 500);
//Drop a random Item
let randomItem = getRandomItem(1, 2);
let nearFieldCoords = getNearEmptyField(obj["mapX"], obj["mapY"]);
utilMap[nearFieldCoords["y"]][nearFieldCoords["x"]] = randomItem;
let newObj = {
mapY: nearFieldCoords["y"],
mapX: nearFieldCoords["x"],
newName: randomItem
}
io.sockets.emit("dropItem", newObj);
}, 500); //2 Secs
socket.emit("animation", 500);
} else if (obj["name"].split("_")[0] == "item") {
let itemName = obj["name"];
utilMap[obj["mapY"]][obj["mapX"]] = "";
io.sockets.emit("removeUtil", obj);
let slotArt = obj["name"].split("_")[1];
if (allPlayers[socket.id]["slots"][slotArt]) { //Slot is not empty so drop it
let nearFieldCoords = getNearEmptyField(Math.floor(player["x"] / 32), Math.floor(player["y"] / 32));
let newObj = {
mapY: nearFieldCoords["y"],
mapX: nearFieldCoords["x"],
newName: allPlayers[socket.id]["slots"][slotArt]
}
utilMap[nearFieldCoords["y"]][nearFieldCoords["x"]] = newObj["newName"];
io.sockets.emit("dropItem", newObj);
//console.log("drop", newObj)
}
allPlayers[socket.id]["slots"][slotArt] = itemName;
socket.emit("addItemToInventar", itemName);
} }
io.sockets.emit("objAction", obj); io.sockets.emit("objAction", obj);
} }
player["action"] = true; player["action"] = true;
@ -171,22 +344,31 @@ io.on('connection', function (socket) {
}); });
function getNearEmptyField(x, y) { function getNearEmptyField(x, y) {
for(var i=-1;i<2;i++) { x = Math.round(x);
for(var k=-1;k<2;k++) { y = Math.round(y);
console.log("check",i, k, y+i, x+k, utilMap[y+i][x+k]) for (var j = 0; j < 10; j++) {
if(utilMap[y+i][x+k] == "") { for (var i = -1 - j; i < 2 + j; i++) {
return { for (var k = -1; k < 2; k++) {
y : y+i, //console.log("check", i, k, y + i, x + k, utilMap[y + i][x + k])
x : x+k if (utilMap[y + i][x + k] == "" && cssMap[y + i][x + k] != "water") {
return {
y: y + i,
x: x + k
}
} }
} }
} }
} }
} }
function getRandomItem() { function getRandomItem(minLvl, maxLvl) {
console.log("rnd", items.length, getRandomNumber(0, items.length), items) //console.log("rnd", items.length, getRandomNumber(0, items.length), items)
return items[getRandomNumber(0, items.length)]; while (1) {
let item = items[getRandomNumber(0, items.length)];
if (item && (typeof (maxLvl) == "undefined" || typeof (minLvl) == "undefined" || (itemAttrs[item]["lvl"] >= minLvl && itemAttrs[item]["lvl"] <= maxLvl))) {
return item;
}
}
} }
function getNearestObject(x, y) { function getNearestObject(x, y) {
@ -258,8 +440,20 @@ setInterval(function () {
if (checkPlayerPosition(newX, newY, groundUnderPlayer, player)) { if (checkPlayerPosition(newX, newY, groundUnderPlayer, player)) {
player["x"] = newX; player["x"] = newX;
player["y"] = newY; player["y"] = newY;
player["mvnt"] = getPlayerMvnt(player, groundUnderPlayer); let mvnt = getPlayerMvnt(player, groundUnderPlayer);
if (player["slots"]["boots"] && groundUnderPlayer != 0) { //Not water
player["mvnt"] = mvnt + itemAttrs[player["slots"]["boots"]]["changeMovementLand"];
//console.log(groundUnderPlayer, player["mvnt"])
} else {
player["mvnt"] = mvnt;
}
if(player["slots"]["item"] && player["slots"]["item"]["changeMovementSpeed"]) {
player["mvnt"] = mvnt + itemAttrs[player["slots"]["item"]]["changeMovementSpeed"];
}
} }
} }
} }
} }
@ -293,6 +487,10 @@ function getGroundUnderPlayer(newX, newY) { //0 = water; 10 = hard ground
} }
var mapX = Math.floor(newX / 32); var mapX = Math.floor(newX / 32);
var mapY = Math.floor(newY / 32); var mapY = Math.floor(newY / 32);
if (!cssMap[mapY] || !cssMap[mapY][mapX]) {
return false;
}
var ground = cssMap[mapY][mapX]; var ground = cssMap[mapY][mapX];
var util = utilMap[mapY][mapX]; var util = utilMap[mapY][mapX];
if (util == "forest") { if (util == "forest") {
@ -329,5 +527,5 @@ function getPlayerMvnt(player, groundUnderPlayer) {
} }
function getRandomNumber(min, max) { //min (inclusive) and max (exclusive) function getRandomNumber(min, max) { //min (inclusive) and max (exclusive)
return Math.floor(Math.random() * (max - min + 1)) + min; return Math.floor(Math.random() * (max - min + 1)) + min;
} }