Started developing Projectiles (client-side)

public/index.html

@@ -32,6 +32,7 @@ <h1>Scoreboard</h1>
 
 	<script type="text/javascript" src="./js/Fps.js"></script>
 	<script type="text/javascript" src="./js/Player.js"></script>
+	<script type="text/javascript" src="./js/Projectile.js"></script>
 	<script type="text/javascript" src="./js/Viewport.js"></script>
 	<script type="text/javascript" src="./js/requestAnimationFrame.js"></script>
 	<script type="text/javascript" src="./js/keycodes.js"></script>

public/js/Mangonel.js

@@ -1,6 +1,8 @@
 (function(exports) {
 
 	var Mangonel = function() {
+		var tick = 0;
+
 		var desiredFPS = 60,
 			allowSendEvery = 75,
 			isReady = true,
@@ -27,7 +29,166 @@
 		var vp = new Viewport(canvasWidth, canvasHeight);
 
 		var gameBg = new Image();
-			gameBg.src = '/img/starfield.png';
+			gameBg.src = '/img/starfield.pnga'; // FIXME
+
+		// @TODO REFACTOR VARS
+		var projectiles = [],
+			angularSpeed = 10,
+			projectile_speed = 5,
+			projectile_damage = 12,
+			projectile_dtl = 200,
+			mouseX,
+			mouseY,
+			mouseSize = 10,
+			mousePressed = false,
+			lastShot = Date.now(),
+			allowed = 100;
+
+		function calcDistance(point1, point2) {
+			var dx = point2.x - point1.x;
+			var dy = point2.y - point1.y;
+
+			return Math.sqrt(dx * dx + dy * dy);
+		}
+
+		function calcAngle(point1, point2) {
+			//var dx = Math.abs(point2.x - point1.x);
+			//var dy = Math.abs(point2.y - point1.y);
+
+			var dx = point2.x - point1.x;
+			var dy = point2.y - point1.y;
+
+			return Math.atan2(dy, dx);
+		}
+
+		function shootProjectile() {
+			var nowShot = Date.now();
+			if (nowShot - lastShot > allowed) {
+				var coords = mapToVp(player.x, player.y);
+				var vangle = calcAngle({ x: coords.x + player.centerX, y: coords.y + player.centerY }, { x: mouseX, y: mouseY });
+				var projectile = new Projectile(player.x + player.centerX, player.y + player.centerY, vangle);
+				projectiles.push(projectile);
+
+				lastShot = Date.now();
+			}
+		}
+
+		$(canvas).bind("mousedown", function(e) {
+			e.preventDefault();
+			mousePressed = true;
+
+			mouseX = e.offsetX || e.layerX;
+			mouseY = e.offsetY || e.layerY;
+
+			shootProjectile();
+		});
+
+		$(canvas).bind("mousemove", function(e) {
+			mouseX = e.offsetX || e.layerX;
+			mouseY = e.offsetY || e.layerY;
+		});
+
+		$(canvas).bind("mousepress", function(e) {
+			shootProjectile();
+		});
+
+		$(canvas).bind("mouseup", function(e) {
+			mousePressed = false;
+		});
+
+		function updateProjectilesMapBounds() {
+			//remove projectiles outside canvas
+			projectiles = $.map(projectiles, function(p) {
+				if ((p.x + p.centerX >= 0) && (p.x + p.centerX < canvasWidth) &&
+					(p.y + p.centerY >= 0) && (p.y + p.centerY < canvasHeight)) {
+					return p;
+				}
+			});
+		}
+
+		function updateProjectilesDtl() {
+			//remove projectiles farer than distance to live
+			projectiles = $.map(projectiles, function(p) {
+				if (p.dtl <= projectile_dtl) {
+					return p;
+				}
+			});
+		}
+
+		function updateProjectiles() {
+			var length = projectiles.length;
+			for(var i = 0; i < length; i++) {
+				var stepX = Math.cos(projectiles[i].angle) * projectile_speed;
+				var stepY = Math.sin(projectiles[i].angle) * projectile_speed;
+				projectiles[i].x += stepX;
+				projectiles[i].y += stepY;
+				projectiles[i].dtl += Math.sqrt(stepX * stepX + stepY * stepY);
+				// ctx.fillText(projectiles[i].dtl, 10, 50);
+			}
+
+			updateProjectilesDtl();
+			updateProjectilesMapBounds();
+		}
+
+		function drawClick() {
+			if (mousePressed) {
+				var coords = mapToVp(player.x, player.y);
+
+				ctx.save();
+				ctx.strokeStyle = "rgb(0, 0, 255)";
+				ctx.fillRect(mouseX - mouseSize / 2, mouseY - mouseSize / 2, mouseSize, mouseSize);
+				ctx.beginPath();
+				ctx.moveTo(coords.x + player.centerX, coords.y + player.centerY);
+				ctx.lineTo(mouseX, mouseY);
+				ctx.stroke();
+				ctx.restore();
+			}
+		}
+
+		function toRadians(alpha) {
+			return alpha * (Math.PI / 180);
+		}
+
+		function toDegrees(alpha) {
+			return alpha * (180 / Math.PI);
+		}
+
+		function drawProjectiles() {
+			drawClick();
+
+			var length = projectiles.length;
+			for(var i = 0; i < length; i++) {
+				ctx.save();
+
+				var coords = mapToVp(projectiles[i].x, projectiles[i].y);
+				ctx.translate(coords.x + projectiles[i].centerX, coords.y + projectiles[i].centerY);
+				ctx.rotate(projectiles[i].angle);
+				ctx.fillStyle = "#FF0000";
+				ctx.fillRect(- projectiles[i].width / 2, - projectiles[i].height / 2, projectiles[i].width, projectiles[i].height);
+				ctx.fillStyle = "rgb(255, 255, 0)";
+				// ctx.fillRect(0, 0, 1, 1);
+				ctx.restore();
+
+				//debug
+				//ctx.fillText(toDegrees(projectiles[i].angle) , coords.x, coords.y - 10);
+				//ctx.fillText((coords.x + projectiles[i].centerX - player.centerX) +" "+ (coords.y + projectiles[i].centerY - player.centerY), 10, 40);
+			}
+		}
+
+		function isAlive(actor) {
+			return (actor.HP > 0 ? true : false);
+		}
+
+		function checkCollisions(enemy) {
+			projectiles = $.map(projectiles, function(p) {
+				if (((p.x + p.centerX >= enemy.x) && (p.x + p.centerX <= enemy.x + enemy.width)) &&
+					((p.y + p.centerY >= enemy.y) && (p.y + p.centerY <= enemy.y + enemy.height))) {
+					enemy.HP -= projectile_damage;
+				} else {
+					return p;
+				}
+			});
+		}
 
 		var debug = function(msg) {
 			console.log(msg);
@@ -261,6 +422,21 @@
 
 				drawMapBG();
 				drawMapBounds();
+
+				if (mousePressed) {
+					shootProjectile();
+				}
+
+				updateProjectiles();
+
+
+				var length = players.length;
+				for(var i = 0; i < length; i++) {
+					if (players[i].id != player.id) {
+						checkCollisions(players[i]);
+					}
+				}
+
 				drawPlayer(player);
 
 				var length = players.length;
@@ -270,8 +446,10 @@
 					}
 				}
 
-				fps.count++;
+				drawProjectiles();
 
+				fps.count++;
+				tick++;
 				requestAnimationFrame(loop);
 				//setTimeout(loop, desiredFPS); //debug
 			}

public/js/Player.js

@@ -25,7 +25,7 @@
 	};
 
 	Player.prototype.toString = function() {
-		return /*this.id +' '+ */this.nick +' '+ this.x +':'+ this.y +' '+ this.ping +'ms';
+		return /*this.id +' '+ */this.nick +' ('+ this.HP +') '+ this.x +':'+ this.y +' '+ this.ping +'ms';
 	};
 
 	Player.prototype.hasMoved = function() {

public/js/Projectile.js

@@ -0,0 +1,24 @@
+(function(exports) {
+
+	var Projectile = function(x, y, angle, owner) {
+		this.owner = owner || null;
+        this.x = x || 0;
+        this.y = y || 0;
+        this.angle = angle || 0;
+        this.angularVelocity = 0;
+
+        this.dtl = 0;
+
+        this.width = 10;
+        this.height = 5;
+
+        this.centerX = this.width / 2;
+        this.centerY = this.height / 2;
+    };
+
+	Projectile.prototype.toString = function() {
+		return this.owner +' '+ this.x +':'+ this.y +' '+ this.angle +'°';
+	};
+
+	exports.Projectile = Projectile;
+})(typeof global === "undefined" ? window : exports);