pnj

public_html/css/game.css

@@ -0,0 +1,13 @@
+html, body{
+	margin: 0px;
+	padding: 0px;
+	background-color: #2b2c2e;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#canvas{
+	max-height: 100vh;
+	max-width: 100vw;
+}

public_html/js/class.js

@@ -1,6 +1,7 @@
 const playerSize = 50.;
 const carSize = 40.;
 const playerSpeed=.2;
+const PNJSpeed=.02;
 const bulletSpeed=playerSpeed*2;
 const halfSqrtTwo=0.70710678118;
 const defaulthealth=10;
@@ -364,4 +365,67 @@ class Car
             }
         }
     }
+}
+
+class PNJ{
+    constructor(x, y){
+        this.x=x;
+        this.y=y;
+        this.dir=1;
+    }
+
+    checkCollisions(x,y){
+        let colliding = false;
+        squares.forEach((square) => {
+            if(square.collide(x,y))
+            {
+                colliding = true;
+                return;
+            }
+        });
+        circles.forEach((circle) => {
+            if(circle.collide(x,y))
+            {
+                colliding=true;
+                return;
+            }
+        });
+        return colliding;
+    }
+
+    changeDirection(){
+        let newDir = this.dir;
+        while(newDir == this.dir){
+            newDir = Math.floor(Math.random()*8);
+        }
+        this.dir = newDir;
+    }
+
+    update(dt)
+    {
+        let dx,dy;
+        switch(this.dir)
+        {
+            case 1: dx=0.;dy=-PNJSpeed;break;
+            case 2: dx=halfSqrtTwo*PNJSpeed;dy=-halfSqrtTwo*PNJSpeed;break;
+            case 3: dx=PNJSpeed;dy=0.;break;
+            case 4: dx=halfSqrtTwo*PNJSpeed;dy=halfSqrtTwo*PNJSpeed;break;
+            case 5: dx=0.;dy=PNJSpeed;break;
+            case 6: dx=-halfSqrtTwo*PNJSpeed;dy=halfSqrtTwo*PNJSpeed;break;
+            case 7: dx=-PNJSpeed;dy=0.;break;
+            case 8: dx=-halfSqrtTwo*PNJSpeed;dy=-halfSqrtTwo*PNJSpeed;break;
+            default: dx=0;dy=0;break;
+        }
+        if(!this.checkCollisions(this.x + dx*dt, this.y + dy*dt)){
+            this.x += dx*dt;
+            this.y += dy*dt;
+        }else{
+            this.changeDirection();
+        }
+
+        if(Math.random()<=0.001){
+            this.changeDirection();
+        }
+        
+    }
 }

public_html/js/game.js

@@ -6,7 +6,12 @@ let cars = [new Car(renderer, 0, 0),
 		new Car(renderer, 0, 15)];
 
 
-let dt = 1.;
+
+
+PNJS.push(new PNJ(500, 100));
+PNJS.push(new PNJ(700, 100));
+PNJS.push(new PNJ(500, 600));
+PNJS.push(new PNJ(200, 700));
 
 function updateBullets(dt)
 {
@@ -21,6 +26,7 @@ function updateBullets(dt)
 	}
 }
 
+let dt = 1.;
 let currentTime = new Date();
 function game() {
 	if(player==null)
@@ -41,7 +47,11 @@ function game() {
 			player.health=10;
 		}
 	});
-	
+
+	PNJS.forEach((pnj)=>{
+		pnj.update(dt);
+	})
+
 	updateBullets(dt);
 	renderer.ReloadAff();
 	LB.ReloadAff();

public_html/js/global.js

@@ -9,6 +9,7 @@ let inp = new Input("canvas");
 let bullets = [];
 let circles = [];
 let squares = [];
+let PNJS = [];
 
 function updatePlayer(data)
 {

public_html/js/render.js

@@ -1,12 +1,16 @@
 const imgPlayer = new Image();
 const imgBullet = new Image();
 const imgCar = new Image();
+const imgPnj = new Image();
+const imgPnj2 = new Image();
 const map = new Image();
 const map_night = new Image();
 const map2 = new Image();
 imgPlayer.src = "./assets/body.png";
 imgBullet.src = "./assets/bullet.png";
 imgCar.src = "./assets/car.png";
+imgPnj.src = "./assets/pnj.png";
+imgPnj2.src = "./assets/pnj1.png";
 map.src = "./assets/map/map_principale.png"
 map_night.src = "./assets/map/map_principale_nuit.png"
 map2.src = "./assets/map/map_secondaire.png";
@@ -70,6 +74,20 @@ class Render {
 	    this.ctx.restore();
 	}
 
+	RenderPnj(x, y, angle, moving){
+		
+		this.ctx.save();
+	    this.ctx.translate(x, y);
+	    this.ctx.rotate(angle);
+		if((new Date)%1000>=500 || moving==false){
+	    	this.ctx.drawImage(imgPnj, -30 / 2, -30 / 2, 30, 30);
+	    }else{
+	    	this.ctx.drawImage(imgPnj2, -30 / 2, -30 / 2, 30, 30);
+	    }
+
+	    this.ctx.restore();
+	}
+
 	ReloadAff() {
 		
 		//const fond = new Image();
@@ -109,5 +127,8 @@ class Render {
 		bullets.forEach((bullet) => {
 			this.RenderBullet(bullet.x,bullet.y);
 		});
+		PNJS.forEach((pnj)=>{
+			this.RenderPnj(pnj.x, pnj.y, (pnj.dir-1)*Math.PI/4, pnj.dir!=0);
+		})
 	}
 }