debut opti

This commit is contained in:
Atsuyo-INSA 2023-12-08 13:50:49 +01:00
parent b12548d46b
commit bf703acd56
9 changed files with 176 additions and 208 deletions

View file

@ -1,15 +1,13 @@
let mapWidth = 210.;
let mapHeith = 100.;
const playerSize = 50.;
const carSize = 40.;
const playerSpeed=.2;
const bulletSpeed=playerSpeed*2;
const halfSqrtTwo=0.70710678118;
const defaulthealth=10.;
class Player
{
constructor (id,x,y,name, dir)
constructor (id,x,y,name,dir)
{
this.name=name;
this.x=x;
@ -26,34 +24,22 @@ class Player
//7=West
//8=North-West
this.ammo=10;
this.health=defaulthealth;
this.health=10;
this.kill=0;
this.death=0;
}
takeDamage(amount,killerId,network)
takeDamage(amount,killerId)
{
this.health-=amount;
if(this.health<=0)
{
this.death++;
network.died(this.id,killerId);
net.died(this.id,killerId);
this.health=10;
}
}
/*retrieveServerInfo(id,x,y,dir)
{
if(this.id==id)
{
this.x=x;
this.y=y;
this.dir=dir;
if(dir!=0)
this.visibleDir=dir;
}
}*/
changeDirection(newDirection){
this.dir = newDirection;
if(this.dir!=0){
@ -111,7 +97,7 @@ class Player
class Bullet
{
constructor (x,y,dx,dy,id, sound)
constructor (x,y,dx,dy,id)
{
sound.shoot();
this.x=x;
@ -119,7 +105,7 @@ class Bullet
this.dx=dx;
this.dy=dy;
this.deleted=false;
this.parentId=id;
this.shooterId=id;
}
update(dt)
@ -131,33 +117,31 @@ class Bullet
}
}
checkCollisions(player,squares,circles,network)//only the client's player /!\
checkCollisions(squares,circles)//only the client's player /!\
{
if(!this.deleted)
if(this.deleted)
return;
if(player!=null && player.id!=this.parentId && Math.sqrt((player.x-this.x)**2+(player.y-this.y)**2)<playerSize/2)
{
if(player!=null && player.id!=this.parentId && Math.sqrt((player.x-this.x)**2+(player.y-this.y)**2)<playerSize/2)
player.takeDamage(1,this.parentId);
this.deleted=true;
return;
}
squares.forEach((square) => {
if(square.collide(this.x,this.y))
{
player.takeDamage(1,this.parentId,network);
this.deleted=true;
return;
}
squares.forEach((square) => {
if(square.collide(this))
{
this.deleted=true;
return;
}
});
circles.forEach((circle) => {
if(circle.collide(this))
{
this.deleted=true;
return;
}
});
}
});
circles.forEach((circle) => {
if(circle.collide(this.x,this.y))
{
this.deleted=true;
return;
}
});
}
}
@ -172,9 +156,9 @@ class Square
this.h=heigth;
}
collide(point)
collide(x,y)
{
return (this.x<=point.x && point.x<=this.x+this.w && this.y<=point.y && point.y<=this.y+this.h);
return this.x<=x && x<=this.x+this.w && this.y<=y && y<=this.y+this.h;
}
}
@ -187,18 +171,17 @@ class Circle
this.r=radius;
}
collide(point)
collide(x,y)
{
return ((point.x-this.x)**2+(point.y-this.y)**2<=this.r**2);
return (x-this.x)**2+(y-this.y)**2 <= this.r**2;
}
}
class Car
{
constructor(Renderer, type, spawn, sound)
constructor(type, spawn)
{
this.sound=sound
this.type=type // 0 circule vers le haut
this.type=type; // 0 circule vers le haut
// 1 circule vers le bas
if(this.type == 1) { //vers le bas
@ -215,12 +198,9 @@ class Car
this.drift=0;
this.spawn=spawn
this.spawn=spawn;
this.tick=0;
this.Renderer=Renderer;
//1247,-40
//947,1000
}
collide(x,y)
@ -229,20 +209,19 @@ class Car
let cy=this.y-carSize/2;
let collide = (cx<=x && x<=cx+carSize && cy<=y && y<=cy+carSize);
if(collide) {
this.sound.drift()
driftSound.play()
this.drift=300;
}
return collide
return collide;
}
Update()
{
if(this.tick==0) {
if(new Date().getSeconds()%20==this.spawn) {
this.tick=1
}
if(this.tick==0 && date.getSeconds()%20==this.spawn) {
this.tick=1;
}
this.ChangeDirection()
this.ChangeDirection();
switch (this.dir) {
case 1:
this.x=this.x+this.tick
@ -258,7 +237,7 @@ class Car
break;
}
if(this.drift > 0) {
this.Renderer.RenderCar(this.x,this.y, this.angle+90)
this.Renderer.RenderCar(this.x,this.y, this.angle+2.1)
this.drift--
} else {
this.Renderer.RenderCar(this.x,this.y, this.angle)
@ -266,7 +245,7 @@ class Car
}
pseudoaleatoire() {
return Math.floor(Date.now()/1000)%10
return Math.floor(date.now()/1000)%10
}
ChangeDirection()

View file

@ -1,39 +1,13 @@
function CookiePseudo() {
nom = "pseudo=";
var liste = document. cookie. split (';');
for (var i = 0; i < liste.length; i++) {
var c = liste[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nom) == 0) return c.substring(nom.length, c.length);
}
return null;
}
Renderer = new Render("canvas", "./assets/map/map_principale.png", "./assets/map/map_secondaire.png");
LB = new LeaderBoard("canvas");
let sound = new Sound("./assets/sounds/");
sound.loadSounds();
cars = [new Car(Renderer, 0, 0, sound),
let cars = [new Car(Renderer, 0, 0, sound),
new Car(Renderer, 0, 7, sound),
new Car(Renderer, 1, 7, sound),
new Car(Renderer, 1, 13, sound),
new Car(Renderer, 1, 14, sound),
new Car(Renderer, 0, 15, sound)]
let Net = new Network("ws://129.151.227.50:8080?name="+CookiePseudo(), sound);
new Car(Renderer, 0, 15, sound)];
let playerId = null; //id of client player
let players = [];
let bullets = [];
let player = null;
Inp = new Input("canvas", Net,Renderer, sound);
playerId=Net.playerId;
player=Net.clientPlayer;
players=Net.getPlayersToAdd();
let dt = 1;
let dt = 1;
function update()
{

74
public_html/js/global.js Normal file
View file

@ -0,0 +1,74 @@
function CookiePseudo() {
nom = "pseudo=";
var liste = document.cookie.split (';');
for (var i = 0; i < liste.length; i++) {
var c = liste[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nom) == 0) return c.substring(nom.length, c.length);
}
return null;
}
let player = null;
let players = [];
let renderer = new Render("canvas");
let LB = new LeaderBoard("canvas");
let bulletSound = new Sound("./assets/sounds/shoot.mp3");
let driftSound = new Sound("./assets/sounds/drift.mp3");
let net = new Network("ws://129.151.227.50:8080?name="+CookiePseudo());
let inp = new Input("canvas");
let date = new Date();
let bullets = [];
function updatePlayer(data)
{
if(data.id==player.id)
{
player.x=data.x;
player.y=data.y;
}
else
{
for(let i=0;i<players.length;i++)
{
if(data.id==players[i].id)
{
players[i].x=data.x;
players[i].y=data.y;
players[i].dir=data.dir;
players[i].visibleDir=data.visibleDir;
break;
}
}
}
}
function addPlayer(data)
{
let np = new Player(data.id, data.x, data.y, data.name, data.dir);
players.push(np);
}
function removePlayer(id)
{
for(let i=0;i<players.length;i++)
{
if(players[i].id==id)
{
players.splice(i,1);
break;
}
}
}
function addKill(idKilled,idKiller)
{
if(player.id==idKiller)
player.kill++;
players.forEach((p) => {
if(p.id==idKilled)
p.death++;
if(p.id==idKiller)
p.kill++;
});
}

View file

@ -1,39 +1,32 @@
class Input {
constructor(id, net,renderer, sound) {
constructor(idCanvas) {
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
this.network = net
// Event listener pour la position de la souris
this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
this.canvas = document.getElementById(idCanvas);
this.canvas.addEventListener("click", (e) => {
if(this.player==null || this.bullets==null){
if(player==null || bullets==null){
return;
}
if(this.player.x>=2000 && this.player.y>=2000 && this.mouseX<2000 && this.mouseY<2000) {
this.mouseX=this.mouseX+2000;
this.mouseY=this.mouseY+2000;
let mouseX = e.clientX - this.canvas.getBoundingClientRect().left;
let mouseY = e.clientY - this.canvas.getBoundingClientRect().top;
if(player.x>=2000 && player.y>=2000) {
mouseX+=2000;
mouseY+=2000;
}
let dx = this.mouseX-this.player.x;
let dy = this.mouseY-this.player.y;
let dx = mouseX-player.x;
let dy = mouseY-player.y;
let norm = Math.sqrt(dx*dx+dy*dy);
let b = new Bullet(this.player.x,this.player.y,dx/norm,dy/norm,this.player.id, sound);
let b = new Bullet(player.x,player.y,dx/norm,dy/norm,player.id);
this.bullets.push(b);
this.renderer.addBullet(b);
this.network.newBullet(b.x,b.y,b.dx,b.dy,b.parentId);
bullets.push(b);
renderer.addBullet(b);
network.newBullet(b.x,b.y,b.dx,b.dy,b.parentId);
});
window.addEventListener("keydown", (e)=>{
@ -86,18 +79,9 @@ class Input {
}
}
get getDirection() {
return this.dir;
}
handleMouseMove(event) {
let mX = event.clientX - this.canvas.getBoundingClientRect().left;
let mY = event.clientY - this.canvas.getBoundingClientRect().top;
this.mouseX = mX;
this.mouseY = mY;
}
/*
calculateAngle(playerX, playerY) {
return Math.atan2(this.mouseY - playerY, this.mouseX - playerX);
}
*/
}

View file

@ -1,29 +1,29 @@
class LeaderBoard {
constructor(id) {
this.canvas = document.getElementById(id);
constructor(idCanvas) {
this.canvas = document.getElementById(idCanvas);
this.ctx = this.canvas.getContext("2d");
this.nbjoueur=0
}
ReloadAff(players, player) {
this.px=10
this.py=10
this.players=[]
ReloadAff() {
let px=10;
let py=10;
let LBplayers=[];
players.forEach((p) => {
if(p != null) {
this.players.push(p)
LBplayers.push(p);
}
})
this.players.push(player);
LBplayers.push(player);
this.players.sort(function (a, b) {
LBplayers.sort(function (a, b) {
return b.kill - a.kill;
});
// tableau du leaderboard (le fonc "blanc")
this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+this.nbjoueur*20);
this.nbjoueur=0
this.nbjoueur=0;
this.ctx.font = '20px Arial';
this.ctx.fillStyle = '#000000';
this.ctx.fillText('Leaderboard', this.px+80, this.py+30);
@ -48,7 +48,7 @@ class LeaderBoard {
this.ctx.fillText('K/D', this.px+220, this.py+80);
this.ctx.font = '10px Arial';
this.players.forEach((p) => {
LBplayers.forEach((p) => {
if(p != null) {
this.ctx.fillText((this.nbjoueur+1), this.px+10, this.py+120+20*this.nbjoueur);
this.ctx.fillText(p.name, this.px+30, this.py+120+20*this.nbjoueur);
@ -56,7 +56,7 @@ class LeaderBoard {
this.ctx.fillText(p.death, this.px+200, this.py+120+20*this.nbjoueur);
this.ctx.fillText(Math.round(10*p.kill/p.death)/10, this.px+220, this.py+120+20*this.nbjoueur);
this.nbjoueur++
this.nbjoueur++;
}
});

View file

@ -1,49 +1,46 @@
class Network{
constructor(adress, bulletsound){
constructor(adress){
this.adress = adress;
this.connected = false;
this.playerId = null;
this.clientPlayer=null;
this.playersToAdd = [];
this.playersToRemove = [];
this.playersToUpdate = [];
this.bulletsToAdd = [];
this.deathToAdd = [];
this.sound=bulletsound;
}
message(data){
switch(data.type){
case 'connect':
this.playerId = data.data.playerId;
for (var i = data.data.players.length - 1; i >= 0; i--) {
if(data.data.players[i].id==this.playerId)
this.clientPlayer=new Player(data.data.players[i].id, data.data.players[i].x, data.data.players[i].y, data.data.players[i].name, data.data.players[i].dir);
for (let i = 0; i<data.data.players.length; i++) {
let p = data.data.players[i];
if(p.id==this.playerId)
player=new Player(p.id,p.x,p.y,p.name,p.dir);
else
this.playersToAdd.push(new Player(data.data.players[i].id, data.data.players[i].x, data.data.players[i].y, data.data.players[i].name, data.data.players[i].dir))
players.push(new Player(p.id,p.x,p.y,p.name,p.dir));
}
break;
case 'update':
this.playersToUpdate.push(data.data);
updatePlayer(data.data);
break;
case "newplayer":
this.playersToAdd.push(new Player(data.data.id, data.data.x, data.data.y, data.data.name, data.data.dir));
players.push(new Player(data.id, data.x, data.y, data.name, data.dir));
break;
case "removePlayer":
this.playersToRemove.push(data.data.id);
removePlayer(data.data.id);
break;
case "newBullet":
this.bulletsToAdd.push(new Bullet(data.data.x,data.data.y,data.data.dx,data.data.dy,data.data.id, this.sound));
bullets.push(new Bullet(data.data.x,data.data.y,data.data.dx,data.data.dy,data.data.id, this.sound));
break;
case "died":
console.log("player",data.data.id,"was killed by",data.data.killerId);
this.deathToAdd.push(data.data);
addKill(data.data.id,data.data.killerId);
break;
default:
console.log("received unknown data:",data);
break;
}
}
@ -59,7 +56,6 @@ class Network{
}
died(id, killerId){
this.deathToAdd.push({id:id,killerId:killerId});
this.socket.send(JSON.stringify({type:"died",data:{id: id, killerId: killerId}}));
}
@ -74,35 +70,4 @@ class Network{
{
this.socket.send(JSON.stringify({type:"newBullet",data:{x: x,y: y,dx: dx,dy: dy,id:parentId}}));
}
getPlayersToAdd(){ //returns the list of new players
let tmp = this.playersToAdd;
this.playersToAdd = [];
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 = [];
return tmp;
}
getPlayersToUpdate(){ //return a list of all updates recieved from the server
let tmp = this.playersToUpdate;
this.playersToUpdate = [];
return tmp;
}
getDeathToAdd()
{
let tmp = this.deathToAdd;
this.deathToAdd=[];
return tmp;
}
}

View file

@ -1,14 +1,11 @@
let objects = {"squares":[{"x":1162,"y":115,"w":144,"h":125},{"x":120,"y":906,"w":1228,"h":21},{"x":127,"y":0,"w":1225,"h":14},{"x":297,"y":114,"w":78,"h":93},{"x":169,"y":243,"w":62,"h":250},{"x":313,"y":243,"w":62,"h":253},{"x":228,"y":257,"w":96,"h":222},{"x":792,"y":113,"w":176,"h":126},{"x":1017,"y":113,"w":143,"h":81},{"x":1160,"y":241,"w":143,"h":-129},{"x":1065,"y":372,"w":127,"h":124},{"x":697,"y":372,"w":319,"h":126},{"x":697,"y":498,"w":159,"h":111},{"x":697,"y":628,"w":160,"h":158},{"x":1001,"y":628,"w":191,"h":158},{"x":281,"y":629,"w":175,"h":156},{"x":0,"y":0,"w":137,"h":616},{"x":0,"y":615,"w":136,"h":310},{"x":1337,"y":1,"w":130,"h":581},{"x":1337,"y":573,"w":131,"h":356},{"x":586,"y":153,"w":15,"h":24},{"x":651,"y":153,"w":12,"h":24},{"x":700,"y":187,"w":12,"h":22},{"x":1020,"y":194,"w":10,"h":47},{"x":1019,"y":227,"w":56,"h":14},{"x":1101,"y":227,"w":62,"h":13},{"x":654,"y":128,"w":105,"h":17},{"x":748,"y":129,"w":12,"h":49},{"x":748,"y":193,"w":12,"h":47},{"x":654,"y":223,"w":105,"h":16},{"x":521,"y":129,"w":106,"h":14},{"x":521,"y":140,"w":13,"h":38},{"x":521,"y":194,"w":13,"h":46},{"x":521,"y":225,"w":108,"h":16}],"circles":[{"x":552,"y":163,"r":13.601470508735444},{"x":608,"y":190,"r":20.248456731316587},{"x":569,"y":212,"r":11.704699910719626},{"x":680,"y":213,"r":12.041594578792296},{"x":727,"y":164,"r":14.212670403551895}]}
let squares = [];
let circles = [];
for (var i = objects.squares.length - 1; i >= 0; i--) {
for (let i=0; i<objects.squares.length;i++) {
let current = objects.squares[i]
squares.push(new Square(current.x, current.y, current.w, current.h));
}
for (var i = objects.circles.length - 1; i >= 0; i--) {
for (let i=0; i<objects.circles.length; i++) {
let current = objects.circles[i]
circles.push(new Circle(current.x, current.y, current.r));
}

View file

@ -1,13 +1,20 @@
const imgPlayer = new Image();
const imgBullet = new Image();
const imgCar = new Image();
const map = new Image();
const map2 = new Image();
imgPlayer.src = "./assets/body.png";
imgBullet.src = "./assets/bullet.png";
imgCar.src = "./assets/car.png";
map.src = "./assets/map_principale.png"
map2.src = "./assets/map_secondaire.png";
//#######################################
class Render {
constructor(id, mapsrc, map2src) {
constructor(id) {
this.canvas = document.getElementById(id);
this.ctx = canvas.getContext("2d");
this.players = [];

View file

@ -1,24 +1,12 @@
class Sound{
constructor(url){
this.assetsUrl = url;
this.sound = new Audio(url);
this.sound.type = "audio/mp3";
}
loadSounds(){
this.shootSound = new Audio(this.assetsUrl + "shoot.mp3");
this.shootSound.type = "audio/mp3";
this.driftsound = new Audio(this.assetsUrl + "drift.mp3");
this.driftsound.type = "audio/mp3";
}
shoot(){
play(){
this.shootSound.pause()
this.shootSound.currentTime=0;
this.shootSound.play()
}
drift(){
this.driftsound.pause()
this.driftsound.currentTime=0;
this.driftsound.play()
}
}