improve stuff

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;
+    opacity: 25%;
-    margin-top: 5px;
 }
 
 .slot_chest {

index.html

@@ -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>

js/main.js

@@ -40,8 +40,10 @@ 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"
+	"item_item_woods1": "Bündel Holz: Schiff verstärken +1"
 }
 
 socket.on('connect', function () {
@@ -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 x = player["x"] - picWidth;
-		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">');
+
+		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;

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
+		armor: 30
-	},
-	"item_legs_legs5": {
-		lvl: 5,
-		armor: 600
 	},
 	"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])
+				//console.log("check", i, k, y + i, x + k)
-				if (utilMap[y + i][x + k] == "" && cssMap[y + i][x + k] != "water") {
+				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;
+}