improve stuff
This commit is contained in:
parent
5870275ea9
commit
e477a9faf1
19
css/main.css
19
css/main.css
@ -311,6 +311,22 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.item_consumable_fish1 {
|
||||
background: url(../img/items.png) -268px -146px;
|
||||
width: 30px;
|
||||
background-size: 476px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.item_consumable_fish2 {
|
||||
background: url(../img/items.png) -298px -148px;
|
||||
width: 30px;
|
||||
background-size: 476px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.item_item_dimond1 {
|
||||
background: url(../img/items.png) -350px -150px;
|
||||
width: 50px;
|
||||
@ -333,8 +349,7 @@
|
||||
background: url(../img/items.png) -100px 0px;
|
||||
width: 50px;
|
||||
background-size: 800px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
opacity: 25%;
|
||||
}
|
||||
|
||||
.slot_chest {
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</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_weapon"><span style="position: absolute; top:8px; left: 8px; font-family: monospace; font-size: 1.2em; font-weight: bold; color: gray;">Space</span></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>
|
||||
|
||||
40
js/main.js
40
js/main.js
@ -40,6 +40,8 @@ var tooltiptexts = {
|
||||
"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_consumable_fish1": "Erhöht deine Lebenspunkte um 20",
|
||||
"item_consumable_fish2": "Erhöht deine Lebenspunkte um 10",
|
||||
"item_item_dimond1": "Verkaufe den Diamand für 10 Siegpunkte! Bewegungsgeschwindigkeit verlangsamt!",
|
||||
"item_item_woods1": "Bündel Holz: Schiff verstärken +1"
|
||||
}
|
||||
@ -109,11 +111,13 @@ socket.on('stopAction', function (socketId) {
|
||||
socket.on('removeUtil', function (obj) {
|
||||
console.log(obj);
|
||||
$("." + obj["mapY"] + '-' + obj["mapX"] + '.' + obj["name"]).removeClass(obj["name"])
|
||||
utilMap[obj["mapY"]][obj["mapX"]] = "";
|
||||
});
|
||||
|
||||
socket.on('replaceUtil', function (obj) {
|
||||
console.log(obj);
|
||||
$("." + obj["mapY"] + '-' + obj["mapX"] + '.' + obj["name"]).removeClass(obj["name"]).addClass(obj["newName"]);
|
||||
utilMap[obj["mapY"]][obj["mapX"]] = obj["newName"];
|
||||
});
|
||||
|
||||
socket.on('dropItem', function (obj) {
|
||||
@ -250,7 +254,10 @@ socket.on('setpos', function (allPlayers) {
|
||||
});
|
||||
playerImg.addClass("guy" + top2Btn + "-" + left2right + "-" + picStep);
|
||||
}
|
||||
|
||||
}
|
||||
playerImg.attr("top2Btn", top2Btn)
|
||||
playerImg.attr("left2right", left2right)
|
||||
playerElement.css({ "top": player["y"], "left": player["x"], "-webkit-transform": "rotate(" + angle + "rad)" });
|
||||
}
|
||||
}
|
||||
@ -276,6 +283,10 @@ socket.on('displayMsg', function (msg) {
|
||||
showDisplayMsg(msg);
|
||||
});
|
||||
|
||||
socket.on('showHitAnimation', function (playerId) {
|
||||
showHitAnimation(playerId);
|
||||
});
|
||||
|
||||
function showDisplayMsg(msg) {
|
||||
$(".msgDiv").remove();
|
||||
|
||||
@ -289,10 +300,30 @@ function showDisplayMsg(msg) {
|
||||
function showHitAnimation(playerId) {
|
||||
let player = g_allPlayers[playerId];
|
||||
if (player) {
|
||||
let picWidth = 30;
|
||||
let y = player["y"];
|
||||
let x = player["x"];
|
||||
let hitImg = $('<img style="z-index: 101; position:absolute; top: '+y+'px; left: '+x+'px; opacity: 50%; width:50px; transform: rotate(-20deg); transform-origin: top right;" src="/img/hit.png">');
|
||||
let x = player["x"] - picWidth;
|
||||
|
||||
var playerElement = $("#" + playerId);
|
||||
var playerImg = playerElement.find("img");
|
||||
let top2Btn = playerImg.attr("top2Btn");
|
||||
let left2right = playerImg.attr("left2right");
|
||||
var angle = Math.atan2(top2Btn, left2right);
|
||||
|
||||
console.log(top2Btn, left2right)
|
||||
// $(".hitbox").remove();
|
||||
// $("#main").append('<div class="hitbox" style="z-index: 10; height: '+picWidth*2+'px; width:'+picWidth*2+'px; position:absolute; top:'+(y-picWidth)+'px; left:'+(x)+'px; border-radius:50%; border: 1px solid black;"></div>')
|
||||
let hitImg = $('<img style="z-index: 101; position:absolute; border-spacing: ' + (angle + Math.PI / 2+0.5) + 'px; top: ' + y + 'px; left: ' + x + 'px; opacity: 40%; width:' + picWidth + 'px; transform: rotate(' + (angle + Math.PI / 2+0.5) + 'rad); transform-origin: top right;" src="/img/hit.png">');
|
||||
$("#main").append(hitImg);
|
||||
hitImg.animate({ borderSpacing: (angle + Math.PI / 2 + Math.PI) }, {
|
||||
step: function (now, fx) {
|
||||
$(this).css('transform', 'rotate(' + now + 'rad)');
|
||||
},
|
||||
duration: 150,
|
||||
complete : function () {
|
||||
hitImg.hide();
|
||||
}
|
||||
}, 'swing');
|
||||
}
|
||||
}
|
||||
|
||||
@ -317,6 +348,7 @@ $(document).ready(function () {
|
||||
}
|
||||
|
||||
$(document).keydown(function (event) {
|
||||
//console.log(event.which)
|
||||
if (event.ctrlKey == true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189')) {
|
||||
event.preventDefault();
|
||||
}
|
||||
@ -326,7 +358,7 @@ $(document).ready(function () {
|
||||
event.preventDefault();
|
||||
if (!keys[key]) {
|
||||
|
||||
if (key == 32) {
|
||||
if (key == 69) {
|
||||
socket.emit("actionKey", key);
|
||||
} else {
|
||||
socket.emit("keyDown", key);
|
||||
@ -338,7 +370,7 @@ $(document).ready(function () {
|
||||
$(document).keyup(function (event) {
|
||||
var key = event.which;
|
||||
socket.emit("keyUp", key);
|
||||
if (key == 32) {
|
||||
if (key == 69) {
|
||||
$("#animationDiv").remove();
|
||||
}
|
||||
keys[key] = false;
|
||||
|
||||
177
server.js
177
server.js
@ -66,95 +66,99 @@ var itemAttrs = {
|
||||
},
|
||||
"item_head_head1": {
|
||||
lvl: 1,
|
||||
armor: 200
|
||||
armor: 10
|
||||
},
|
||||
"item_head_head2": {
|
||||
lvl: 2,
|
||||
armor: 300
|
||||
armor: 18
|
||||
},
|
||||
"item_head_head3": {
|
||||
lvl: 3,
|
||||
armor: 400
|
||||
armor: 23
|
||||
},
|
||||
"item_head_head4": {
|
||||
lvl: 4,
|
||||
armor: 500
|
||||
armor: 25
|
||||
},
|
||||
"item_head_head5": {
|
||||
lvl: 5,
|
||||
armor: 600
|
||||
armor: 30
|
||||
},
|
||||
"item_chest_chest1": {
|
||||
lvl: 1,
|
||||
armor: 200
|
||||
armor: 10
|
||||
},
|
||||
"item_chest_chest2": {
|
||||
lvl: 2,
|
||||
armor: 300
|
||||
armor: 18
|
||||
},
|
||||
"item_chest_chest3": {
|
||||
lvl: 3,
|
||||
armor: 400
|
||||
armor: 23
|
||||
},
|
||||
"item_chest_chest4": {
|
||||
lvl: 4,
|
||||
armor: 500
|
||||
armor: 25
|
||||
},
|
||||
"item_chest_chest5": {
|
||||
lvl: 5,
|
||||
armor: 600
|
||||
armor: 30
|
||||
},
|
||||
"item_legs_legs1": {
|
||||
lvl: 1,
|
||||
armor: 200
|
||||
armor: 10
|
||||
},
|
||||
"item_legs_legs2": {
|
||||
lvl: 2,
|
||||
armor: 300
|
||||
armor: 18
|
||||
},
|
||||
"item_legs_legs3": {
|
||||
lvl: 3,
|
||||
armor: 400
|
||||
armor: 23
|
||||
},
|
||||
"item_legs_legs4": {
|
||||
lvl: 4,
|
||||
armor: 500
|
||||
armor: 28
|
||||
},
|
||||
"item_legs_legs5": {
|
||||
lvl: 5,
|
||||
armor: 600
|
||||
},
|
||||
"item_legs_legs5": {
|
||||
lvl: 5,
|
||||
armor: 600
|
||||
armor: 30
|
||||
},
|
||||
"item_weapon_sword1": {
|
||||
lvl: 1,
|
||||
armor: 200
|
||||
dmg: 40
|
||||
},
|
||||
"item_weapon_sword2": {
|
||||
lvl: 2,
|
||||
armor: 300
|
||||
dmg: 60
|
||||
},
|
||||
"item_weapon_sword3": {
|
||||
lvl: 3,
|
||||
armor: 400
|
||||
dmg: 80
|
||||
},
|
||||
"item_weapon_sword4": {
|
||||
lvl: 4,
|
||||
armor: 500
|
||||
dmg: 100
|
||||
},
|
||||
"item_weapon_sword5": {
|
||||
lvl: 5,
|
||||
armor: 600
|
||||
dmg: 130
|
||||
},
|
||||
"item_weapon_stick1": {
|
||||
lvl: 1,
|
||||
armor: 50
|
||||
dmg: 20
|
||||
},
|
||||
"item_item_bone1": {
|
||||
lvl: 1,
|
||||
},
|
||||
"item_consumable_fish1": {
|
||||
lvl: 3,
|
||||
hp: 30,
|
||||
},
|
||||
"item_consumable_fish2": {
|
||||
lvl: 1,
|
||||
hp: 10
|
||||
},
|
||||
"item_item_dimond1": {
|
||||
lvl: 10,
|
||||
changeMovementSpeed: -0.5
|
||||
@ -183,6 +187,8 @@ io.on('connection', function (socket) {
|
||||
x: 10,
|
||||
y: 10,
|
||||
mvnt: defaultMvnt,
|
||||
lookingLeft : 0,
|
||||
lookingUp : 0,
|
||||
special: {},
|
||||
mode: 0, //0 = ship //1 foot
|
||||
slots: {
|
||||
@ -190,10 +196,11 @@ io.on('connection', function (socket) {
|
||||
chest: null,
|
||||
legs: null,
|
||||
boots: null,
|
||||
weapon: null,
|
||||
weapon: 'item_weapon_sword2',
|
||||
tool: null,
|
||||
item: null
|
||||
}
|
||||
},
|
||||
hp : 100
|
||||
};
|
||||
var player = allPlayers[socket.id];
|
||||
io.sockets.emit("newPlayer", {
|
||||
@ -205,6 +212,7 @@ io.on('connection', function (socket) {
|
||||
for (var i in player.slots) {
|
||||
if (player.slots[i]) {
|
||||
let nearFieldCoords = getNearEmptyField(Math.floor(player["x"] / 32), Math.floor(player["y"] / 32));
|
||||
if(nearFieldCoords) {
|
||||
let newObj = {
|
||||
mapY: nearFieldCoords["y"],
|
||||
mapX: nearFieldCoords["x"],
|
||||
@ -214,6 +222,7 @@ io.on('connection', function (socket) {
|
||||
io.sockets.emit("dropItem", newObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
userCnt--;
|
||||
delete allSockets[socket.id];
|
||||
delete allPlayers[socket.id];
|
||||
@ -230,7 +239,7 @@ io.on('connection', function (socket) {
|
||||
|
||||
socket.on('keyUp', function (key) {
|
||||
allPlayers[socket.id]["keys"][key] = false;
|
||||
if (key == 32) { //space
|
||||
if (key == 69) { //space
|
||||
player["action"] = false;
|
||||
if (playerActionTimer) {
|
||||
clearTimeout(playerActionTimer);
|
||||
@ -242,6 +251,23 @@ io.on('connection', function (socket) {
|
||||
|
||||
socket.on('keyDown', function (key) {
|
||||
allPlayers[socket.id]["keys"][key] = true;
|
||||
if(key == 32) { //Space HIT SOMEONE
|
||||
//if(allPlayers[socket.id]["mode"] == 1) { // On land
|
||||
if(!allPlayers[socket.id]["hitPending"]) {
|
||||
io.sockets.emit("showHitAnimation", socket.id);
|
||||
allPlayers[socket.id]["hitPending"] = true;
|
||||
let allPlayersWithCollision = checkHitWithOtherPlayers(socket.id);
|
||||
for(var i=0;i<allPlayersWithCollision.length;i++) {
|
||||
calcDmgAndHitPlayer(allPlayers[socket.id], allPlayers[allPlayersWithCollision[i]])
|
||||
}
|
||||
console.log(allPlayersWithCollision);
|
||||
|
||||
setTimeout(function() {
|
||||
allPlayers[socket.id]["hitPending"] = false;
|
||||
}, 500)
|
||||
}
|
||||
//}
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('actionKey', function (key) {
|
||||
@ -316,7 +342,7 @@ io.on('connection', function (socket) {
|
||||
socket.emit("stopAnimation", 500);
|
||||
|
||||
//Drop a random Item
|
||||
let randomItem = "item_tool_axe5"; // getRandomItem(1, 2);
|
||||
let randomItem = getRandomItem(1, 2);
|
||||
let nearFieldCoords = getNearEmptyField(obj["mapX"], obj["mapY"]);
|
||||
|
||||
utilMap[nearFieldCoords["y"]][nearFieldCoords["x"]] = randomItem;
|
||||
@ -346,10 +372,15 @@ io.on('connection', function (socket) {
|
||||
//console.log("drop", newObj)
|
||||
}
|
||||
|
||||
console.log(slotArt)
|
||||
if(slotArt == "consumable") {
|
||||
let hp = itemAttrs[obj["name"]]["hp"];
|
||||
allPlayers[socket.id]["hp"] += hp;
|
||||
socket.emit("displayMsg", "Lebenspunkte +"+hp);
|
||||
} else {
|
||||
allPlayers[socket.id]["slots"][slotArt] = itemName;
|
||||
socket.emit("addItemToInventar", itemName);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
io.sockets.emit("objAction", obj);
|
||||
@ -361,11 +392,11 @@ io.on('connection', function (socket) {
|
||||
function getNearEmptyField(x, y) {
|
||||
x = Math.round(x);
|
||||
y = Math.round(y);
|
||||
for (var j = 0; j < 10; j++) {
|
||||
for (var j = 0; j < 20; 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") {
|
||||
//console.log("check", i, k, y + i, x + k)
|
||||
if (utilMap[y + i] && utilMap[y + i][x + k] == "" && cssMap[y + i] && cssMap[y + i][x + k] != "water") {
|
||||
return {
|
||||
y: y + i,
|
||||
x: x + k
|
||||
@ -376,11 +407,28 @@ function getNearEmptyField(x, y) {
|
||||
}
|
||||
}
|
||||
|
||||
function calcDmgAndHitPlayer(player1, player2) {
|
||||
let dmg = 1;
|
||||
dmg += parseFloat(player1["slots"]["weapon"] ? itemAttrs[player1["slots"]["weapon"]]["dmg"] : 0 );
|
||||
|
||||
let armor = 1;
|
||||
for(var k in player2["slots"]) {
|
||||
if(k == "head" || k=="chest" || k == "legs") {
|
||||
armor+= parseFloat(player1["slots"][k] ? itemAttrs[player1["slots"][k]]["armor"] : 0);
|
||||
}
|
||||
}
|
||||
let hitDmg = dmg * (armor/100) * 100
|
||||
player2["hp"] -= hitDmg;
|
||||
console.log(hitDmg, dmg, armor, player1, player2)
|
||||
}
|
||||
|
||||
function getRandomItem(minLvl, maxLvl) {
|
||||
//console.log("rnd", items.length, getRandomNumber(0, items.length), items)
|
||||
while (1) {
|
||||
let item = items[getRandomNumber(0, items.length)];
|
||||
console.log(item)
|
||||
if (item && (typeof (maxLvl) == "undefined" || typeof (minLvl) == "undefined" || (itemAttrs[item]["lvl"] >= minLvl && itemAttrs[item]["lvl"] <= maxLvl))) {
|
||||
|
||||
return item;
|
||||
}
|
||||
}
|
||||
@ -415,7 +463,7 @@ function getNearestObject(x, y) {
|
||||
}
|
||||
}
|
||||
|
||||
if (utilMap[mapY + sY][mapX + sX] != "") {
|
||||
if (utilMap[mapY + sY] && utilMap[mapY + sY][mapX + sX] != "") {
|
||||
obj = {
|
||||
mapY: mapY + sY,
|
||||
mapX: mapX + sX,
|
||||
@ -447,6 +495,10 @@ setInterval(function () {
|
||||
ty = mvnt;
|
||||
}
|
||||
|
||||
player.lookingLeft = tx > 0 ? -1 : (tx < 0 ? 1 : player.lookingLeft)
|
||||
player.lookingUp = ty > 0 ? -1 : (ty < 0 ? 1 : player.lookingUp)
|
||||
|
||||
//console.log(player)
|
||||
if (!player["action"]) {
|
||||
var newX = player["x"] + tx;
|
||||
var newY = player["y"] + ty;
|
||||
@ -544,3 +596,58 @@ function getPlayerMvnt(player, groundUnderPlayer) {
|
||||
function getRandomNumber(min, max) { //min (inclusive) and max (exclusive)
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function checkHitWithOtherPlayers(socketId) {
|
||||
let playersWithCollision = [];
|
||||
let mainPlayer = allPlayers[socketId];
|
||||
for(var sid in allPlayers) {
|
||||
if(sid != socketId) { //Dont check collision with self
|
||||
let targetPlayer = allPlayers[sid];
|
||||
let bottom = mainPlayer.keys["40"];
|
||||
let left = mainPlayer.keys["37"];
|
||||
//console.log(mainPlayer.x, mainPlayer.y, 28, targetPlayer.x, targetPlayer.y, 8)
|
||||
if(isCircleCircleCollision(mainPlayer.x, mainPlayer.y, 28, targetPlayer.x, targetPlayer.y, 8)) {
|
||||
let hit = false;
|
||||
console.log(mainPlayer.lookingLeft, mainPlayer.lookingUp , mainPlayer.x, mainPlayer.y, targetPlayer.x, targetPlayer.y)
|
||||
if(mainPlayer.lookingLeft == 1 && mainPlayer.x >= targetPlayer.x) {
|
||||
hit = true;
|
||||
} else if(mainPlayer.lookingLeft == -1 && mainPlayer.x <= targetPlayer.x) {
|
||||
hit = true;
|
||||
} else if(mainPlayer.lookingUp == 1 && mainPlayer.y >= targetPlayer.y) {
|
||||
hit = true;
|
||||
} else if(mainPlayer.lookingUp == -1 && mainPlayer.y <= targetPlayer.y) {
|
||||
hit = true;
|
||||
}
|
||||
|
||||
if(hit) {
|
||||
playersWithCollision.push(sid);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return playersWithCollision;
|
||||
}
|
||||
|
||||
function isCircleRecCollision(cx, cy, cr, rx, ry, rw, rh) {
|
||||
var cDistx = Math.abs(cx - rx);
|
||||
var cDisty = Math.abs(cy - ry);
|
||||
if (cDistx > rw / 2 + cr)
|
||||
return false;
|
||||
if (cDisty > rh / 2 + cr)
|
||||
return false;
|
||||
if (cDistx <= rw / 2)
|
||||
return true;
|
||||
if (cDisty <= rh / 2)
|
||||
return false;
|
||||
return (cDistx - rw / 2) * (cDistx - rw / 2) + (cDisty - rh / 2) * (cDisty - rh / 2) <= cr * cr;
|
||||
}
|
||||
|
||||
function isCircleCircleCollision(x1, y1, r1, x2, y2, r2) {
|
||||
var dx = x1 - x2;
|
||||
var dy = y1 - y2;
|
||||
var sr = r1 + r2;
|
||||
if (Math.abs(dx) <= sr && Math.abs(dy) <= sr) { //Check main condition
|
||||
return Math.sqrt(dx * dx + dy * dy) < sr // true = collision detected!
|
||||
}
|
||||
return false;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user