bullets

js/class.js

@@ -2,6 +2,7 @@ let mapWidth = 210.;
 let mapHeith = 100.;
 const playerSize = 50.;
 const playerSpeed=.2;
+const bulletSpeed=playerSpeed*2;
 const halfSqrtTwo=0.70710678118;
 class Player
 {
@@ -118,12 +119,12 @@ class Bullet
         this.deleted=false;
     }
 
-    update()
+    update(dt)
     {
         if(!this.deleted)
         {
-            this.x+=this.dx;
-            this.y+=this.dy;
+            this.x+=this.dx*dt*bulletSpeed;
+            this.y+=this.dy*dt*bulletSpeed;
         }
     }
 
@@ -131,30 +132,28 @@ class Bullet
     {
         if(!this.deleted)
         {
-            if(dist(player,this)<playerSize/2)
+            if(player!=null && dist(player,this)<playerSize/2)
             {
                 player.takeDamage(1);
                 this.deleted=true;
                 return;
             }
 
-            for(let square in squares)
-            {
+            squares.forEach((square) => {
                 if(square.collide(this))
                 {
                     this.deleted=true;
                     return;
                 }
-            }
+            });
 
-            for(let circle in circles)
-            {
+            circles.forEach((circle) => {
                 if(circle.collide(this))
                 {
                     this.deleted=true;
                     return;
                 }
-            }
+            });
         }
     }
 

js/game.js

@@ -16,9 +16,11 @@ let Net = new Network("ws://129.151.227.50:8080?name="+CookiePseudo(), Renderer)
 
 let playerId = null; //id of client player
 let players = [];
+let bullets = [];
+let selfBullets = [];
 let player = null;
 
-Inp = new Input("canvas", Net);
+Inp = new Input("canvas", Net,Renderer);
 
 playerId=Net.playerId;
 player=Net.clientPlayer;
@@ -52,10 +54,10 @@ function addPlayers()
 	let playersToAdd = Net.getPlayersToAdd();
 	if (playersToAdd.length==0)
 		return;
-	
+	console.log(playersToAdd);
 	playersToAdd.forEach((p) => {
-		console.log("New player: ",playersToAdd[0].id);
-		players.push(playersToAdd[0]);
+		console.log("New player: ",p.id);
+		players.push(p);
 		Renderer.AddPlayer(p);
 	});
 }
@@ -81,6 +83,32 @@ function remPlayers()
 	}
 }
 
+function addBullets()
+{
+	let bulletsToAdd = Net.getBulletsToAdd();
+	if (bulletsToAdd.length==0)
+		return;
+	bulletsToAdd.forEach((b) => {
+		console.log("new bullet");
+		bullets.push(p);
+		Renderer.addBullet(p);
+	});
+}
+
+function updateBullets(list,target,dt)
+{
+	for(let i = list.length-1;i>=0;i--)
+	{
+		list[i].update(dt);
+		list[i].checkCollisions(target,squares,circles);
+		if(list[i].deleted)
+		{
+			list.splice(i,1);
+			Renderer.remBullet(list[i]);
+		}
+	}
+}
+
 let currentTime = new Date();
 function game() {
 	if(playerId==null)
@@ -93,6 +121,7 @@ function game() {
 			//Inp.player=player; //pour connecter les input au joueur client
 			console.log("Connected as id ",playerId);
 			Inp.player=player;
+			Inp.bullets=selfBullets;
 			Renderer.AddPlayer(player)
 			players.forEach((p) => {
 				Renderer.AddPlayer(p)
@@ -104,19 +133,22 @@ function game() {
 		update();
 		addPlayers();
 		remPlayers();
+		addBullets();
 		player.update(squares, circles, dt);
 		for (var i = players.length - 1; i >= 0; i--) {
-			players[i].update(squares, circles, dt);//squares, circles
+			players[i].update(squares, circles, dt);
 		}
 		Renderer.ReloadAff();
+		updateBullets(selfBullets,null,dt);
+		updateBullets(bullets,player,dt);
 	}
 
 	let newTime = new Date();
 	dt=newTime - currentTime;
-	currentTime=newTime
+	currentTime=newTime;
 }
 
 Net.connect(); //connect to server, create a player, and retrieve all players info
 
 
-setInterval(game)
+setInterval(game);

js/input.js

@@ -1,9 +1,11 @@
 class Input {
-    constructor(id, net) {
+    constructor(id, net,renderer) {
         this.keysDown = new Set()
         this.dir = 0;
         this.player=null;
+        this.bullets=null;
         this.canvas = document.getElementById(id);
+        this.renderer=renderer;
 
         this.mouseX = 0
         this.mouseY = 0
@@ -11,10 +13,19 @@ class Input {
         this.network = net
 
         // Event listener pour la position de la souris
-        this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this))
+        
+        this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
 
-        this.canvas.addEventListener("click", function(event) {
-            console.log("Clic de la souris");
+        this.canvas.addEventListener("click", (e) => {
+            if(this.player==null || this.bullets==null)
+                return;
+            let dx = this.mouseX-this.player.x;
+            let dy = this.mouseY-this.player.y;
+            let norm = Math.sqrt(dx*dx+dy*dy);
+            let b = new Bullet(this.player.x,this.player.x,dx/norm,dy/norm);
+            this.bullets.push(b);
+            this.renderer.addBullet(b);
+            this.network.newBullet(this.player.x,this.player.y,dx/norm,dy/norm);
         });
 
         /*window.addEventListener("keydown", function(event) {

js/network.js

@@ -8,6 +8,7 @@ class Network{
 		this.playersToAdd = [];
 		this.playersToRemove = [];
 		this.playersToUpdate = [];
+		this.bulletsToAdd = [];
 	}
 
 	message(data){
@@ -33,6 +34,9 @@ class Network{
 			case "removePlayer":
 				this.playersToRemove.push(data.data.id);
 				break;
+			case "newBullet":
+				this.bulletsToAdd.push(new Bullet(data.x,data.y,data.dx,data.dy));
+				break;
 			default:
 				break;
 		}
@@ -52,7 +56,12 @@ class Network{
 		this.socket.send(JSON.stringify({
 			type: "update",
 			data: obj
-		}))
+		}));
+	}
+
+	newBullet(x_,y_,dx_,dy_)
+	{
+		this.socket.send(JSON.stringify({type:"newBullet",x: x_,y: y_,dx: dx_,dy: dy_}));
 	}
 
 	getPlayersToAdd(){  //returns the list of new players
@@ -61,6 +70,12 @@ class Network{
 		return tmp;
 	}
 
+	getBulletsToAdd(){  //returns the list of new players
+		let tmp = this.bulletsToAdd;
+		this.bulletsToAdd = [];
+		return tmp;
+	}
+
 	getPlayersToRemove(){ //returns the list of player who have left the game
 		let tmp = this.playersToRemove;
 		this.playersToRemove = [];

js/render.js

@@ -1,13 +1,15 @@
-const img = new Image();
-img.src = "./assets/body.png";
-
+const imgPlayer = new Image();
+const imgBullet = new Image();
+imgPlayer.src = "./assets/body.png";
+imgBullet.src = "./assets/body.png";
 class Render {
 
 	constructor(id, mapsrc) {
 		this.canvas = document.getElementById(id);
 		this.ctx = canvas.getContext("2d");
 		this.players = [];
-		this.mapsrc=mapsrc
+		this.bullets = [];
+		this.mapsrc=mapsrc;
 		this.ReloadAff();
 	}
 
@@ -15,6 +17,16 @@ class Render {
 		this.players.push(player);
 	}
 
+	addBullet(bullet) {
+		this.bullets.push(bullet);
+	}
+
+	remBullet(bullet) {
+		for(let i=0;i<this.bullets.length;i++)
+			if(bullet==this.bullets[i])
+				this.bullets.splice(i,1);
+	}
+
 	RemPlayer(id) {
 		for(let i=0;i<this.players.length;i++)
 		{
@@ -30,7 +42,17 @@ class Render {
 	    this.ctx.save();
 	    this.ctx.translate(player.x, player.y);
 	    this.ctx.rotate(player.angle);
-	    this.ctx.drawImage(img, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
+	    this.ctx.drawImage(imgPlayer, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
+	    this.ctx.restore();
+        //this.ctx.fillStyle="#FF0000";
+        //this.ctx.font="10pt arial";
+        //this.ctx.fillText(player.name,player.x-player.name.length*10/3,player.y-playerSize/1.8);
+	}
+
+	RenderBullet(bullet) {
+	    this.ctx.save();
+	    this.ctx.translate(bullet.x, bullet.y);
+	    this.ctx.drawImage(imgBullet, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
 	    this.ctx.restore();
         this.ctx.fillStyle = 'white';
         this.ctx.font="10pt arial";
@@ -51,5 +73,8 @@ class Render {
    		this.players.forEach((player) => {
    			this.RenderPlayer(player);
    		})
+		this.bullets.forEach((bullet) => {
+			this.RenderBullet(bullet);
+		});
 	}
 }