no more crash?

This commit is contained in:
Atsuyo-INSA 2023-12-08 18:02:42 +01:00
parent b4541b2698
commit f0817769a4
6 changed files with 69 additions and 187 deletions

View file

@ -3,11 +3,12 @@
<head> <head>
<script type="text/javascript" src="./js/sound.js"></script> <script type="text/javascript" src="./js/sound.js"></script>
<script type="text/javascript" src="./js/class.js"></script> <script type="text/javascript" src="./js/class.js"></script>
<script type="text/javascript" src="./js/objects.js"></script>
<script type="text/javascript" src="./js/render.js"></script> <script type="text/javascript" src="./js/render.js"></script>
<script type="text/javascript" src="./js/input.js"></script> <script type="text/javascript" src="./js/input.js"></script>
<script type="text/javascript" src="./js/network.js"></script> <script type="text/javascript" src="./js/network.js"></script>
<script type="text/javascript" src="./js/leaderboard.js"></script> <script type="text/javascript" src="./js/leaderboard.js"></script>
<script type="text/javascript" src="./js/global.js" defer></script>
<script type="text/javascript" src="./js/objects.js" defer></script>
<script type="text/javascript" src="./js/game.js" defer></script> <script type="text/javascript" src="./js/game.js" defer></script>
</head> </head>
<body> <body>

View file

@ -40,4 +40,4 @@
window.addEventListener('keyup', (event) => { window.addEventListener('keyup', (event) => {
document.cookie = "pseudo=" + pseudo.value document.cookie = "pseudo=" + pseudo.value
}) })
</script> </script>

View file

@ -12,17 +12,18 @@ class Player
this.name=name; this.name=name;
this.x=x; this.x=x;
this.y=y; this.y=y;
//this.z=z;//correspond to the map. Ex: 0=>main; 1=>arena
this.id=id; this.id=id;
this.visibleDir=1; this.visibleDir=1;
this.dir=dir;//0=standStill this.dir=dir;//0=stand Still
//1=North //1=North
//2=North-East //2=North-East
//3=East //3=East
//4=South-East //4=South-East
//5=South //5=South
//6=South-West //6=South-West
//7=West //7=West
//8=North-West //8=North-West
this.ammo=10; this.ammo=10;
this.health=10; this.health=10;
this.kill=0; this.kill=0;
@ -69,7 +70,7 @@ class Player
this.y += dy*dt; this.y += dy*dt;
squares.forEach(square => { squares.forEach(square => {
if(square.collide(this)) if(square.collide(this.x,this.y))
{ {
this.x-=dx*dt; this.x-=dx*dt;
this.y-=dy*dt; this.y-=dy*dt;
@ -79,7 +80,7 @@ class Player
}); });
circles.forEach(circle => { circles.forEach(circle => {
if(circle.collide(this)) if(circle.collide(this.x,this.y))
{ {
this.x-=dx*dt; this.x-=dx*dt;
this.y-=dy*dt; this.y-=dy*dt;

View file

@ -1,174 +1,55 @@
let cars = [new Car(Renderer, 0, 0, sound), let cars = [new Car(renderer, 0, 0),
new Car(Renderer, 0, 7, sound), new Car(renderer, 0, 7),
new Car(Renderer, 1, 7, sound), new Car(renderer, 1, 7),
new Car(Renderer, 1, 13, sound), new Car(renderer, 1, 13),
new Car(Renderer, 1, 14, sound), new Car(renderer, 1, 14),
new Car(Renderer, 0, 15, sound)]; new Car(renderer, 0, 15)];
let dt = 1.;
let dt = 1;
function update()
{
if(player.y>470 && player.y<480 && player.x>237 && player.x<310) {
player.x=2510
player.y=2714
} else if (player.x>2588 && player.x<2687 && player.y>2129 && player.y<2180) {
player.x=270
player.y=250
}
let playerToUpdate = Net.getPlayersToUpdate();
for (let i = 0;i<playerToUpdate.length;i++)
{
if(playerToUpdate[i].id==player.id) {
player.x=playerToUpdate[i].x;
player.y=playerToUpdate[i].y;
player.dir=playerToUpdate[i].dir;
player.visibleDir=playerToUpdate[i].visibleDir;
} else {
for (let j = 0;j<players.length;j++)
{
if(players[j].id==playerToUpdate[i].id)
{
players[j].x=playerToUpdate[i].x;
players[j].y=playerToUpdate[i].y;
players[j].dir=playerToUpdate[i].dir;
players[j].visibleDir=playerToUpdate[i].visibleDir;
break;
}
}
}
}
}
function addPlayers()
{
let playersToAdd = Net.getPlayersToAdd();
playersToAdd.forEach((p) => {
console.log("New player: ",p.id);
players.push(p);
Renderer.AddPlayer(p);
});
}
function remPlayers()
{
let playerToRemove = Net.getPlayersToRemove();
for(let i=0;i<playerToRemove.length;i++)
{
let id = playerToRemove[i];
Renderer.RemPlayer(id);
console.log("deleting Player ",id);
for(let i = 0;i<players.length;i++)
{
if (players[i].id==id)
{
players.splice(i,1);
break;
}
}
}
}
function addBullets()
{
let bulletsToAdd = Net.getBulletsToAdd();
bulletsToAdd.forEach((b) => {
bullets.push(b);
Renderer.addBullet(b);
});
}
function updateBullets(dt) function updateBullets(dt)
{ {
for(let i = bullets.length-1;i>=0;i--) for(let i = bullets.length-1;i>=0;i--)
{ {
bullets[i].update(dt); bullets[i].update(dt);
bullets[i].checkCollisions(player,squares,circles,Net); bullets[i].checkCollisions(squares,circles);
if(bullets[i].deleted) if(bullets[i].deleted)
{ {
Renderer.remBullet(bullets[i]);
bullets.splice(i,1); bullets.splice(i,1);
} }
} }
} }
function updateKills()
{
let deaths = Net.getDeathToAdd();
deaths.forEach((object) => {
let dead = object.id;
let killer = object.killerId;
if(player.id==killer)
player.kill++;
for(let i=0;i<players.length;i++)
{
if(players[i].id==dead)
players[i].death++;
if(players[i].id==killer)
players[i].kill++;
}
});
}
let currentTime = new Date(); let currentTime = new Date();
function game() { function game() {
if(playerId==null) if(net.playerId==null)
{ return;
if (Net.playerId!=null)
{
playerId=Net.playerId;
player=Net.clientPlayer;
players=Net.getPlayersToAdd();
Renderer.AddPlayer(player)
Renderer.SetPlayerId(player.id)
console.log("Connected as id ",playerId);
Inp.player=player;
Inp.bullets=bullets;
players.forEach((p) => {
Renderer.AddPlayer(p)
});
players.push(new Player(-1,-50,-50,"VOITURE",0,null));
LB.ReloadAff(players, player);
}
}
else
{
update();
addPlayers();
remPlayers();
addBullets();
updateKills();
player.update(squares, circles, dt);
for (var i = players.length - 1; i >= 0; i--) {
players[i].update(squares, circles, dt);
}
Renderer.ReloadAff();
cars.forEach((c) => {
c.Update();
if(c.collide(player.x,player.y))
{
Net.died(player.id,-1);
player.x=-50;
player.deaths++;
player.health=10;
}
});
updateBullets(dt);
LB.ReloadAff(players, player);
}
player.update(squares, circles, dt);
for (let i = 0;i<players.length; i++) {
players[i].update(squares, circles, dt);
}
Renderer.ReloadAff();
cars.forEach((c) => {
c.Update();
if(c.collide(player.x,player.y))
{
net.died(player.id,-1);
player.x=-50;
player.deaths++;
player.health=10;
}
});
updateBullets(dt);
LB.ReloadAff();
let newTime = new Date(); let newTime = new Date();
dt=newTime - currentTime; dt=newTime - currentTime;
currentTime=newTime; currentTime=newTime;
} }
Net.connect(); //connect to server, create a player, and retrieve all players info net.connect(); //connect to server, create a player, and retrieve all players info
setInterval(game); setInterval(game);

View file

@ -1,4 +1,4 @@
function CookiePseudo() { function CookiePseudo() {//Code from OpenClassroom
nom = "pseudo="; nom = "pseudo=";
var liste = document.cookie.split (';'); var liste = document.cookie.split (';');
for (var i = 0; i < liste.length; i++) { for (var i = 0; i < liste.length; i++) {
@ -19,6 +19,8 @@ let net = new Network("ws://129.151.227.50:8080?name="+CookiePseudo());
let inp = new Input("canvas"); let inp = new Input("canvas");
let date = new Date(); let date = new Date();
let bullets = []; let bullets = [];
let circles = [];
let squares = [];
function updatePlayer(data) function updatePlayer(data)
{ {

View file

@ -11,13 +11,12 @@ map2.src = "./assets/map_secondaire.png";
class Render { class Render {
constructor(idCanvas) { constructor(idCanvas) {
this.canvas = document.getElementById(idCanvas); let canvas = document.getElementById(idCanvas);
this.ctx = canvas.getContext("2d"); this.ctx = canvas.getContext("2d");
this.ReloadAff(); //this.ReloadAff();
this.map=0
} }
RenderPlayer(player) { RenderPlayer(player,client) {
let x=player.x let x=player.x
let y=player.y let y=player.y
if(x>=2000 && y>=2000 && this.map==1) { if(x>=2000 && y>=2000 && this.map==1) {
@ -34,8 +33,8 @@ class Render {
this.ctx.restore(); this.ctx.restore();
this.ctx.fillStyle = 'white'; this.ctx.fillStyle = 'white';
this.ctx.font="10pt arial"; this.ctx.font="10pt arial";
this.ctx.fillText(player.name,x-name.length*10/3,y-playerSize/1.8); this.ctx.fillText(player.name,x-player.name.length*10/3,y-playerSize/1.8);
if(player.id==this.playerid) { if(client) {
this.ctx.fillStyle = 'red'; this.ctx.fillStyle = 'red';
this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, playerSize+10, 5); this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, playerSize+10, 5);
this.ctx.fillStyle = '#7AFF33'; this.ctx.fillStyle = '#7AFF33';
@ -54,13 +53,12 @@ class Render {
} }
} }
RenderBullet(bullet) { RenderBullet(x,y) {
let x = bullet.x /*
let y = bullet.y
if(this.map==1) { if(this.map==1) {
x = x-2000 x = x-2000;
y = y-2000 y = y-2000;
} }*/
this.ctx.save(); this.ctx.save();
this.ctx.translate(x, y); this.ctx.translate(x, y);
this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20); this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
@ -68,8 +66,8 @@ class Render {
} }
ReloadAff() { ReloadAff() {
/*
const fond = new Image(); //const fond = new Image();
if(player.x >= 2000 && player.y >=2000) { if(player.x >= 2000 && player.y >=2000) {
this.map=1; this.map=1;
} else { } else {
@ -77,21 +75,20 @@ class Render {
} }
if(this.map==0) { if(this.map==0) {
fond.src = this.mapsrc; let fond = map;
} else { } else {
fond.src = this.map2src; let fond = map2;
} }
*/
mapWidth = fond.width; this.ctx.canvas.width = fond.width;
mapHeith = fond.height; this.ctx.canvas.height = fond.height;
this.ctx.canvas.width = mapWidth;
this.ctx.canvas.height = mapHeith;
this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith); this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith);
this.players.forEach((player) => { this.RenderPlayer(player,true);
this.RenderPlayer(player); players.forEach((player) => {
this.RenderPlayer(player,false);
}) })
this.bullets.forEach((bullet) => { bullets.forEach((bullet) => {
this.RenderBullet(bullet); this.RenderBullet(bullet.x,bullet.y);
}); });
} }
} }