no more crash?
This commit is contained in:
parent
b4541b2698
commit
f0817769a4
6 changed files with 69 additions and 187 deletions
|
@ -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>
|
||||||
|
|
|
@ -40,4 +40,4 @@
|
||||||
window.addEventListener('keyup', (event) => {
|
window.addEventListener('keyup', (event) => {
|
||||||
document.cookie = "pseudo=" + pseudo.value
|
document.cookie = "pseudo=" + pseudo.value
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
|
@ -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)
|
||||||
{
|
{
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue