add items with attr
This commit is contained in:
parent
c409b5e5e9
commit
00884b1062
288
css/main.css
288
css/main.css
@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
/* Items */
|
||||
.boots1 {
|
||||
.item_boots_boots1 {
|
||||
background: url(../img/items.png) 0px -95px;
|
||||
width: 30px;
|
||||
background-size: 500px;
|
||||
@ -63,7 +63,7 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.boots2 {
|
||||
.item_boots_boots2 {
|
||||
background: url(../img/items.png) -32px -95px;
|
||||
width: 30px;
|
||||
background-size: 500px;
|
||||
@ -71,15 +71,15 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.boots3 {
|
||||
background: url(../img/items.png) -64px -95px;
|
||||
.item_boots_boots3 {
|
||||
background: url(../img/items.png) -64px -94px;
|
||||
width: 30px;
|
||||
background-size: 500px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.boots4 {
|
||||
.item_boots_boots4 {
|
||||
background: url(../img/items.png) -96px -95px;
|
||||
width: 30px;
|
||||
background-size: 500px;
|
||||
@ -87,14 +87,288 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.boots5 {
|
||||
background: url(../img/items.png) -128px -95px;
|
||||
.item_boots_boots5 {
|
||||
background: url(../img/items.png) -125px -94px;
|
||||
width: 30px;
|
||||
background-size: 500px;
|
||||
margin-left: 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 */
|
||||
.guy1-0-0 {
|
||||
background: url(../img/guy_sprite.png) 0px 0px;
|
||||
|
||||
BIN
img/items.png
BIN
img/items.png
Binary file not shown.
|
Before Width: | Height: | Size: 662 KiB After Width: | Height: | Size: 687 KiB |
BIN
img/items.psd
Normal file
BIN
img/items.psd
Normal file
Binary file not shown.
64
index.html
64
index.html
@ -1,29 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
|
||||
</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-2.2.0.js"></script>
|
||||
<script src="./js/main.js"></script>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
240
js/main.js
240
js/main.js
@ -5,6 +5,44 @@ var ownId;
|
||||
var visibleMap = [];
|
||||
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 () {
|
||||
ownId = socket.io.engine.id;
|
||||
console.log("connect!");
|
||||
@ -17,13 +55,13 @@ socket.on('disconnect', function () {
|
||||
|
||||
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>');
|
||||
$("#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"];
|
||||
var chestCoords = [0,0];
|
||||
var chestCoords = [0, 0];
|
||||
for (var w = 0; w < utilMap.length; w++) { //get chest coords
|
||||
for (var h = 0; h < utilMap[w].length; h++) {
|
||||
if(utilMap[w][h]=="treasure-closed") {
|
||||
chestCoords = [w,h];
|
||||
if (utilMap[w][h] == "treasure-closed") {
|
||||
chestCoords = [w, h];
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,16 +73,16 @@ socket.on('getmap', function (conent) {
|
||||
|
||||
var allPlayers = conent["allPlayers"];
|
||||
console.log(allPlayers);
|
||||
for(var id in allPlayers) {
|
||||
for (var id in allPlayers) {
|
||||
addNewPlayer(allPlayers[id], id);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('animation', function (timer) {
|
||||
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>');
|
||||
$("#"+ownId).append(loader);
|
||||
setTimeout(function() {
|
||||
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);
|
||||
setTimeout(function () {
|
||||
$("#animationDiv").addClass("animate");
|
||||
}, 100);
|
||||
|
||||
@ -56,41 +94,52 @@ socket.on('stopAnimation', function (timer) {
|
||||
|
||||
socket.on('objAction', function (obj) {
|
||||
console.log(obj);
|
||||
var mapX = obj["mapX"]*32;
|
||||
var mapY = obj["mapY"]*32+3;
|
||||
$(".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>');
|
||||
var mapX = obj["mapX"] * 32;
|
||||
var mapY = obj["mapY"] * 32 + 3;
|
||||
$(".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>');
|
||||
|
||||
});
|
||||
|
||||
socket.on('stopAction', function (socketId) {
|
||||
$(".overlay"+socketId).remove();
|
||||
$(".overlay" + socketId).remove();
|
||||
});
|
||||
|
||||
socket.on('removeUtil', function (obj) {
|
||||
console.log(obj);
|
||||
$("."+obj["mapY"]+'-'+obj["mapX"]+'.'+obj["name"]).remove();
|
||||
$("." + obj["mapY"] + '-' + obj["mapX"] + '.' + obj["name"]).remove();
|
||||
});
|
||||
|
||||
socket.on('replaceUtil', function (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) {
|
||||
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) {
|
||||
if($("#"+id).length==0) {
|
||||
if ($("#" + id).length == 0) {
|
||||
var modeClass = "default_ship";
|
||||
var modeImg = "./img/default_ship.png";
|
||||
if(player["mode"]==1) {
|
||||
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>');
|
||||
$("#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 cnt = 0;
|
||||
socket.on('setpos', function (allPlayers) {
|
||||
window.requestAnimationFrame(function() {
|
||||
for(var id in allPlayers) {
|
||||
window.requestAnimationFrame(function () {
|
||||
for (var id in allPlayers) {
|
||||
var player = allPlayers[id];
|
||||
var playerElement = $("#"+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(' ');
|
||||
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");
|
||||
@ -118,39 +167,37 @@ socket.on('setpos', function (allPlayers) {
|
||||
|
||||
playerElement.find("img").removeClass("default_ship");
|
||||
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 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);
|
||||
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) {
|
||||
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)-5)+'px; left:'+(x*32)+'px; z-index:2;" src="./img/plain.png" i="'+utilTitle+'" class="'+y+'-'+x+' spriteUtils '+utilTitle+'">');
|
||||
}
|
||||
if(!visibleMap[x]) {
|
||||
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 = tooltiptexts[utilMap[y][x]] ? tooltiptexts[utilMap[y][x]] : "";
|
||||
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] + '">');
|
||||
if (!visibleMap[x]) {
|
||||
visibleMap[x] = [];
|
||||
}
|
||||
visibleMap[x][y] = true;
|
||||
@ -160,12 +207,12 @@ socket.on('setpos', function (allPlayers) {
|
||||
}
|
||||
}
|
||||
}
|
||||
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();
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -175,41 +222,41 @@ socket.on('setpos', function (allPlayers) {
|
||||
}
|
||||
var top2Btn = 0;
|
||||
var left2right = 0;
|
||||
if(oldPosY > playerY) {
|
||||
if (oldPosY > playerY) {
|
||||
top2Btn = -1;
|
||||
} else if(oldPosY < playerY) {
|
||||
} else if (oldPosY < playerY) {
|
||||
top2Btn = 1;
|
||||
}
|
||||
if(oldPosX > playerX) {
|
||||
if (oldPosX > playerX) {
|
||||
left2right = -1;
|
||||
} else if(oldPosX < playerX) {
|
||||
} else if (oldPosX < playerX) {
|
||||
left2right = 1;
|
||||
}
|
||||
var angle = 0;
|
||||
if(player["mode"] == 0) { //ship
|
||||
if (player["mode"] == 0) { //ship
|
||||
var angle = Math.atan2(top2Btn, left2right);
|
||||
} else { //land
|
||||
cnt++;
|
||||
if(cnt%3==0)
|
||||
if (cnt % 3 == 0)
|
||||
picStep++;
|
||||
if(picStep >= 3)
|
||||
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(' ');
|
||||
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);
|
||||
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) {
|
||||
return Math.abs(Math.sqrt(Math.pow(y2-y1,2)+Math.pow(x2-x1,2)));
|
||||
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) {
|
||||
@ -219,48 +266,61 @@ socket.on('newPlayer', function (newPlayer) {
|
||||
});
|
||||
|
||||
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"]');
|
||||
viewportmeta.content = 'user-scalable=NO, width=device-width, initial-scale=1.0';
|
||||
window.scrollTo(0, 0);
|
||||
var keys = {};
|
||||
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();
|
||||
for (var i in defaultSlots) {
|
||||
$("#" + i).append(defaultSlots[i]);
|
||||
}
|
||||
|
||||
$(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;
|
||||
//console.log(key);
|
||||
if(key==37||key==38||key==39||key==40)
|
||||
if (key == 37 || key == 38 || key == 39 || key == 40)
|
||||
event.preventDefault();
|
||||
if(!keys[key]) {
|
||||
if (!keys[key]) {
|
||||
|
||||
if(key == 32) {
|
||||
socket.emit("actionKey", key);
|
||||
if (key == 32) {
|
||||
socket.emit("actionKey", key);
|
||||
} else {
|
||||
socket.emit("keyDown", key);
|
||||
socket.emit("keyDown", key);
|
||||
}
|
||||
keys[key] = true;
|
||||
}
|
||||
});
|
||||
|
||||
$( document ).keyup(function( event ) {
|
||||
$(document).keyup(function (event) {
|
||||
var key = event.which;
|
||||
socket.emit("keyUp", key );
|
||||
if(key == 32) {
|
||||
socket.emit("keyUp", key);
|
||||
if (key == 32) {
|
||||
$("#animationDiv").remove();
|
||||
}
|
||||
keys[key] = false;
|
||||
});
|
||||
|
||||
$(window).bind('mousewheel DOMMouseScroll', function (event) {
|
||||
if (event.ctrlKey == true) {
|
||||
event.preventDefault();
|
||||
}
|
||||
if (event.ctrlKey == true) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
2
s_map.js
2
s_map.js
@ -120,7 +120,7 @@ module.exports = {
|
||||
utilMap[w][h] = "tree1";
|
||||
} else if (Math.random() < 0.011) {
|
||||
utilMap[w][h] = "stone1";
|
||||
} else if (Math.random() < 0.011) {
|
||||
} else if (Math.random() < 0.04) {
|
||||
utilMap[w][h] = "fass";
|
||||
}
|
||||
}
|
||||
|
||||
316
server.js
316
server.js
@ -1,6 +1,9 @@
|
||||
var PORT = 8080;
|
||||
var gameMode = true;
|
||||
|
||||
const mapWidth = 50;
|
||||
const mapHeight = 50;
|
||||
|
||||
var allSockets = {};
|
||||
var allPlayers = {};
|
||||
var userCnt = 0;
|
||||
@ -11,8 +14,7 @@ app.use(express.static(__dirname + '/'));
|
||||
var server = require('http').Server(app);
|
||||
var io = require('socket.io')(server);
|
||||
var map = require("./s_map.js");
|
||||
var mapWidth = 20;
|
||||
var mapHeight = 20;
|
||||
|
||||
var maxX = mapWidth * 32;
|
||||
var maxY = mapHeight * 32;
|
||||
var newmap = map.generateMap(mapWidth, mapHeight);
|
||||
@ -21,35 +23,147 @@ var map = newmap["map"];
|
||||
var utilMap = newmap["utilMap"];
|
||||
var defaultMvnt = 2;
|
||||
|
||||
var items = [
|
||||
"boots1",
|
||||
"boots2",
|
||||
"boots3",
|
||||
"boots4",
|
||||
"boots5",
|
||||
];
|
||||
var itemAttrs = {
|
||||
"item_boots_boots1": {
|
||||
lvl: 1,
|
||||
changeMovementLand: 0.1
|
||||
},
|
||||
"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 = {
|
||||
"boots1" : {
|
||||
changeMovementLand : 1,
|
||||
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"
|
||||
},
|
||||
var items = [];
|
||||
for (var i in itemAttrs) {
|
||||
items.push(i)
|
||||
}
|
||||
|
||||
server.listen(PORT);
|
||||
@ -67,29 +181,41 @@ io.on('connection', function (socket) {
|
||||
mvnt: defaultMvnt,
|
||||
special: {},
|
||||
mode: 0, //0 = ship //1 foot
|
||||
items: {
|
||||
slot1: null,
|
||||
slot2: null,
|
||||
slot3: null
|
||||
slots: {
|
||||
head: null,
|
||||
chest: null,
|
||||
legs: null,
|
||||
boots: null,
|
||||
weapon: null,
|
||||
tool: null,
|
||||
item: null
|
||||
}
|
||||
};
|
||||
var player = allPlayers[socket.id];
|
||||
io.sockets.emit("newPlayer", {
|
||||
player: allPlayers[socket.id],
|
||||
id: socket.id,
|
||||
items: {
|
||||
slot1: null,
|
||||
slot2: null,
|
||||
slot3: null
|
||||
}
|
||||
id: socket.id
|
||||
});
|
||||
|
||||
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--;
|
||||
delete allSockets[socket.id];
|
||||
delete allPlayers[socket.id];
|
||||
console.log("User Disconnected:", socket.id);
|
||||
io.sockets.emit("playerDisc", socket.id);
|
||||
|
||||
});
|
||||
|
||||
socket.on('getmap', function () {
|
||||
@ -127,7 +253,7 @@ io.on('connection', function (socket) {
|
||||
player["special"]["modechange"] = true;
|
||||
}
|
||||
};
|
||||
console.log(player["mode"], groundUnder);
|
||||
//console.log(player["mode"], groundUnder);
|
||||
var obj = getNearestObject(player["x"], player["y"]);
|
||||
if (obj) {
|
||||
obj["socketId"] = socket.id;
|
||||
@ -136,12 +262,18 @@ io.on('connection', function (socket) {
|
||||
playerActionTimer = null;
|
||||
}
|
||||
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 () {
|
||||
utilMap[obj["mapY"]][obj["mapX"]] = "";
|
||||
io.sockets.emit("removeUtil", obj);
|
||||
socket.emit("stopAnimation", 2000);
|
||||
}, 2000); //2 Secs
|
||||
socket.emit("animation", 2000);
|
||||
socket.emit("stopAnimation", cutTime);
|
||||
}, cutTime);
|
||||
socket.emit("animation", cutTime);
|
||||
} else if (obj["name"] == "treasure-closed") {
|
||||
playerActionTimer = setTimeout(function () {
|
||||
utilMap[obj["mapY"]][obj["mapX"]] = "treasure-open";
|
||||
@ -149,7 +281,8 @@ io.on('connection', function (socket) {
|
||||
io.sockets.emit("replaceUtil", obj);
|
||||
socket.emit("stopAnimation", 2000);
|
||||
|
||||
let randomItem = getRandomItem();
|
||||
//Drop a random Item
|
||||
let randomItem = getRandomItem(2, 5);
|
||||
let nearFieldCoords = getNearEmptyField(obj["mapX"], obj["mapY"]);
|
||||
|
||||
utilMap[nearFieldCoords["y"]][nearFieldCoords["x"]] = randomItem;
|
||||
@ -159,11 +292,51 @@ io.on('connection', function (socket) {
|
||||
newName: randomItem
|
||||
}
|
||||
io.sockets.emit("dropItem", newObj);
|
||||
console.log("newObj", newObj)
|
||||
|
||||
}, 2000); //2 Secs
|
||||
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);
|
||||
}
|
||||
player["action"] = true;
|
||||
@ -171,22 +344,31 @@ io.on('connection', function (socket) {
|
||||
});
|
||||
|
||||
function getNearEmptyField(x, y) {
|
||||
for(var i=-1;i<2;i++) {
|
||||
for(var k=-1;k<2;k++) {
|
||||
console.log("check",i, k, y+i, x+k, utilMap[y+i][x+k])
|
||||
if(utilMap[y+i][x+k] == "") {
|
||||
return {
|
||||
y : y+i,
|
||||
x : x+k
|
||||
x = Math.round(x);
|
||||
y = Math.round(y);
|
||||
for (var j = 0; j < 10; j++) {
|
||||
for (var i = -1 - j; i < 2 + j; i++) {
|
||||
for (var k = -1; k < 2; k++) {
|
||||
//console.log("check", i, k, y + i, x + k, utilMap[y + i][x + k])
|
||||
if (utilMap[y + i][x + k] == "" && cssMap[y + i][x + k] != "water") {
|
||||
return {
|
||||
y: y + i,
|
||||
x: x + k
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getRandomItem() {
|
||||
console.log("rnd", items.length, getRandomNumber(0, items.length), items)
|
||||
return items[getRandomNumber(0, items.length)];
|
||||
function getRandomItem(minLvl, maxLvl) {
|
||||
//console.log("rnd", items.length, getRandomNumber(0, items.length), items)
|
||||
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) {
|
||||
@ -258,8 +440,20 @@ setInterval(function () {
|
||||
if (checkPlayerPosition(newX, newY, groundUnderPlayer, player)) {
|
||||
player["x"] = newX;
|
||||
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 mapY = Math.floor(newY / 32);
|
||||
|
||||
if (!cssMap[mapY] || !cssMap[mapY][mapX]) {
|
||||
return false;
|
||||
}
|
||||
var ground = cssMap[mapY][mapX];
|
||||
var util = utilMap[mapY][mapX];
|
||||
if (util == "forest") {
|
||||
@ -329,5 +527,5 @@ function getPlayerMvnt(player, groundUnderPlayer) {
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user