pnj
This commit is contained in:
parent
bd2195de5f
commit
8f337c1960
12 changed files with 111 additions and 2 deletions
BIN
public_html/assets/PNJS
Normal file
BIN
public_html/assets/PNJS
Normal file
Binary file not shown.
BIN
public_html/assets/map/map_principale_nuit.jpeg
Normal file
BIN
public_html/assets/map/map_principale_nuit.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 248 KiB |
BIN
public_html/assets/map/map_principale_nuit.png
Normal file
BIN
public_html/assets/map/map_principale_nuit.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 MiB |
BIN
public_html/assets/pnj.png
Normal file
BIN
public_html/assets/pnj.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
BIN
public_html/assets/pnj1.png
Normal file
BIN
public_html/assets/pnj1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
BIN
public_html/assets/water_background.jpg
Normal file
BIN
public_html/assets/water_background.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
BIN
public_html/assets/water_background2.jpg
Normal file
BIN
public_html/assets/water_background2.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 49 KiB |
13
public_html/css/game.css
Normal file
13
public_html/css/game.css
Normal file
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
|
@ -365,3 +366,66 @@ 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();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
|
@ -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)
|
||||
|
@ -42,6 +48,10 @@ function game() {
|
|||
}
|
||||
});
|
||||
|
||||
PNJS.forEach((pnj)=>{
|
||||
pnj.update(dt);
|
||||
})
|
||||
|
||||
updateBullets(dt);
|
||||
renderer.ReloadAff();
|
||||
LB.ReloadAff();
|
||||
|
|
|
@ -9,6 +9,7 @@ let inp = new Input("canvas");
|
|||
let bullets = [];
|
||||
let circles = [];
|
||||
let squares = [];
|
||||
let PNJS = [];
|
||||
|
||||
function updatePlayer(data)
|
||||
{
|
||||
|
|
|
@ -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);
|
||||
})
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue