diff --git a/public_html/assets/PNJS b/public_html/assets/PNJS new file mode 100644 index 0000000..4a607c4 Binary files /dev/null and b/public_html/assets/PNJS differ diff --git a/public_html/assets/blue_portal.webp b/public_html/assets/blue_portal.webp new file mode 100644 index 0000000..d66d314 Binary files /dev/null and b/public_html/assets/blue_portal.webp differ diff --git a/public_html/assets/concord_images/carrey.jpg b/public_html/assets/concord_images/carrey.jpg new file mode 100644 index 0000000..29bd1ca Binary files /dev/null and b/public_html/assets/concord_images/carrey.jpg differ diff --git a/public_html/assets/concord_images/elon.jpg b/public_html/assets/concord_images/elon.jpg new file mode 100644 index 0000000..037c138 Binary files /dev/null and b/public_html/assets/concord_images/elon.jpg differ diff --git a/public_html/assets/concord_images/esquirol.jpg b/public_html/assets/concord_images/esquirol.jpg new file mode 100644 index 0000000..7fb87b2 Binary files /dev/null and b/public_html/assets/concord_images/esquirol.jpg differ diff --git a/public_html/assets/concord_images/gournay.jpg b/public_html/assets/concord_images/gournay.jpg new file mode 100644 index 0000000..e872239 Binary files /dev/null and b/public_html/assets/concord_images/gournay.jpg differ diff --git a/public_html/assets/concord_images/jyf.jpg b/public_html/assets/concord_images/jyf.jpg new file mode 100644 index 0000000..24e1da4 Binary files /dev/null and b/public_html/assets/concord_images/jyf.jpg differ diff --git a/public_html/assets/concord_images/lepen.jpg b/public_html/assets/concord_images/lepen.jpg new file mode 100644 index 0000000..c257f0a Binary files /dev/null and b/public_html/assets/concord_images/lepen.jpg differ diff --git a/public_html/assets/concord_images/macron.jpg b/public_html/assets/concord_images/macron.jpg new file mode 100644 index 0000000..7c36449 Binary files /dev/null and b/public_html/assets/concord_images/macron.jpg differ diff --git a/public_html/assets/concord_images/melanchon.jpg b/public_html/assets/concord_images/melanchon.jpg new file mode 100644 index 0000000..2f1b335 Binary files /dev/null and b/public_html/assets/concord_images/melanchon.jpg differ diff --git a/public_html/assets/concord_images/melanchon.png b/public_html/assets/concord_images/melanchon.png new file mode 100644 index 0000000..b813d2b Binary files /dev/null and b/public_html/assets/concord_images/melanchon.png differ diff --git a/public_html/assets/concord_images/nicomette.jpg b/public_html/assets/concord_images/nicomette.jpg new file mode 100644 index 0000000..bfe6b0c Binary files /dev/null and b/public_html/assets/concord_images/nicomette.jpg differ diff --git a/public_html/assets/concord_images/patrickseb.jpg b/public_html/assets/concord_images/patrickseb.jpg new file mode 100644 index 0000000..90bcc5d Binary files /dev/null and b/public_html/assets/concord_images/patrickseb.jpg differ diff --git a/public_html/assets/concord_images/poutine.jpg b/public_html/assets/concord_images/poutine.jpg new file mode 100644 index 0000000..4e16e6f Binary files /dev/null and b/public_html/assets/concord_images/poutine.jpg differ diff --git a/public_html/assets/concord_images/raquet.jpg b/public_html/assets/concord_images/raquet.jpg new file mode 100644 index 0000000..ba12cf8 Binary files /dev/null and b/public_html/assets/concord_images/raquet.jpg differ diff --git a/public_html/assets/concord_images/rebillard.jpg b/public_html/assets/concord_images/rebillard.jpg new file mode 100644 index 0000000..33eac28 Binary files /dev/null and b/public_html/assets/concord_images/rebillard.jpg differ diff --git a/public_html/assets/concord_images/trump.jpg b/public_html/assets/concord_images/trump.jpg new file mode 100644 index 0000000..216148d Binary files /dev/null and b/public_html/assets/concord_images/trump.jpg differ diff --git a/public_html/assets/concord_images/vieu.jpg b/public_html/assets/concord_images/vieu.jpg new file mode 100644 index 0000000..a76d721 Binary files /dev/null and b/public_html/assets/concord_images/vieu.jpg differ diff --git a/public_html/assets/concord_images/zemmour.jpg b/public_html/assets/concord_images/zemmour.jpg new file mode 100644 index 0000000..f841c08 Binary files /dev/null and b/public_html/assets/concord_images/zemmour.jpg differ diff --git a/public_html/assets/map/map_principale_nuit.jpeg b/public_html/assets/map/map_principale_nuit.jpeg new file mode 100644 index 0000000..20ec152 Binary files /dev/null and b/public_html/assets/map/map_principale_nuit.jpeg differ diff --git a/public_html/assets/map/map_principale_nuit.png b/public_html/assets/map/map_principale_nuit.png new file mode 100644 index 0000000..a7ab8c4 Binary files /dev/null and b/public_html/assets/map/map_principale_nuit.png differ diff --git a/public_html/assets/map/map_principale_plage.png b/public_html/assets/map/map_principale_plage.png new file mode 100644 index 0000000..f1ff2db Binary files /dev/null and b/public_html/assets/map/map_principale_plage.png differ diff --git a/public_html/assets/orange_portal.webp b/public_html/assets/orange_portal.webp new file mode 100644 index 0000000..dfdd842 Binary files /dev/null and b/public_html/assets/orange_portal.webp differ diff --git a/public_html/assets/phone.png b/public_html/assets/phone.png new file mode 100644 index 0000000..33a80df Binary files /dev/null and b/public_html/assets/phone.png differ diff --git a/public_html/assets/phone/concord.png b/public_html/assets/phone/concord.png new file mode 100644 index 0000000..c5388fa Binary files /dev/null and b/public_html/assets/phone/concord.png differ diff --git a/public_html/assets/phone/facebook.png b/public_html/assets/phone/facebook.png new file mode 100644 index 0000000..75bca12 Binary files /dev/null and b/public_html/assets/phone/facebook.png differ diff --git a/public_html/assets/phone/fond_ecran.jpeg b/public_html/assets/phone/fond_ecran.jpeg new file mode 100644 index 0000000..28191a6 Binary files /dev/null and b/public_html/assets/phone/fond_ecran.jpeg differ diff --git a/public_html/assets/phone/fond_ecran.jpg b/public_html/assets/phone/fond_ecran.jpg new file mode 100644 index 0000000..1006634 Binary files /dev/null and b/public_html/assets/phone/fond_ecran.jpg differ diff --git a/public_html/assets/phone/vbucks.webp b/public_html/assets/phone/vbucks.webp new file mode 100644 index 0000000..dee71f2 Binary files /dev/null and b/public_html/assets/phone/vbucks.webp differ diff --git a/public_html/assets/phone/webview/fb.html b/public_html/assets/phone/webview/fb.html new file mode 100644 index 0000000..c339d3d --- /dev/null +++ b/public_html/assets/phone/webview/fb.html @@ -0,0 +1,11 @@ + + + + + + FakeBook + + + + + \ No newline at end of file diff --git a/public_html/assets/phone/webview/free_vbucks.jpeg b/public_html/assets/phone/webview/free_vbucks.jpeg new file mode 100644 index 0000000..525a2a0 Binary files /dev/null and b/public_html/assets/phone/webview/free_vbucks.jpeg differ diff --git a/public_html/assets/phone/webview/hairinsa.png b/public_html/assets/phone/webview/hairinsa.png new file mode 100644 index 0000000..030ae26 Binary files /dev/null and b/public_html/assets/phone/webview/hairinsa.png differ diff --git a/public_html/assets/phone/webview/rickroll.gif b/public_html/assets/phone/webview/rickroll.gif new file mode 100644 index 0000000..b744b1e Binary files /dev/null and b/public_html/assets/phone/webview/rickroll.gif differ diff --git a/public_html/assets/phone/webview/vbucks.html b/public_html/assets/phone/webview/vbucks.html new file mode 100644 index 0000000..a59d820 --- /dev/null +++ b/public_html/assets/phone/webview/vbucks.html @@ -0,0 +1,17 @@ + + + + + + Free Vbucks + + + + + + + \ No newline at end of file diff --git a/public_html/assets/pnj.png b/public_html/assets/pnj.png new file mode 100644 index 0000000..e9a7a3e Binary files /dev/null and b/public_html/assets/pnj.png differ diff --git a/public_html/assets/pnj1.png b/public_html/assets/pnj1.png new file mode 100644 index 0000000..8b8e19f Binary files /dev/null and b/public_html/assets/pnj1.png differ diff --git a/public_html/assets/sounds/drift.mp3 b/public_html/assets/sounds/drift.mp3 index 2929b23..992c811 100644 Binary files a/public_html/assets/sounds/drift.mp3 and b/public_html/assets/sounds/drift.mp3 differ diff --git a/public_html/assets/sounds/shoot.mp3 b/public_html/assets/sounds/shoot.mp3 index 55a0df1..d869ef3 100644 Binary files a/public_html/assets/sounds/shoot.mp3 and b/public_html/assets/sounds/shoot.mp3 differ diff --git a/public_html/assets/water_background.jpg b/public_html/assets/water_background.jpg new file mode 100644 index 0000000..d0ddfb1 Binary files /dev/null and b/public_html/assets/water_background.jpg differ diff --git a/public_html/assets/water_background2.jpg b/public_html/assets/water_background2.jpg new file mode 100644 index 0000000..172ef89 Binary files /dev/null and b/public_html/assets/water_background2.jpg differ diff --git a/public_html/css/game.css b/public_html/css/game.css new file mode 100644 index 0000000..2a132b4 --- /dev/null +++ b/public_html/css/game.css @@ -0,0 +1,133 @@ +html, body{ + margin: 0px; + padding: 0px; + background-color: #2b2c2e; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + width: 100vw; + height: 100vh; +} + +#canvas{ + max-height: 100vh; + max-width: 100vw; +} + +#phoneContainer.hidden{ + position: absolute; + right: 20px; + top: 100%; +} + +#phoneContainer.visible{ + position: absolute; + right: 20px; + bottom: 5%; + user-select: none; +} + +#phoneDiv{ + position: relative; +} + +#phone{ + width: 200px; +} +#phoneScreen{ + background-color: #322b2a; + position: absolute; + left: 7%; + top: 12%; + right: 7%; + bottom: 13%; +} + +#chatHeader{ + height: 10%; + width: 100%; + border-bottom: 1px solid black; + text-align: center; + color: white; + line-height: 7%; + padding: 0px; + overflow: hidden; + font-weight: bold; + background-color: #232120 ; +} + +#chatHeader > p{ + line-height: 10%; +} + +#chatMessages{ + height: 80%; + width: 100%; + overflow-y: scroll; + overflow-x: hidden; + +} + +#chatMessages::-webkit-scrollbar{ + display: none; +} + +#chatInputDiv{ + height: 10%; + width: 100%; + text-align: center; +} + +#chatInput{ + width: 90%; + box-sizing: border-box; + appearance: none; + background-color: transparent; + border-radius: 10px; + border: 1px solid black; + color: white; + padding-left: 10px; + height: 85%; + margin-bottom: 15%; + outline: none; +} + +.message{ + color: white; + font-family: sans-serif; + margin: 3%; +} + +.messageTitle{ + font-size: 75%; + margin: 0px; +} + +.messageContent{ + margin: 0px; + font-size: 60%; +} + +.messageImage{ + width: 100%; +} + +#content { + height:90%; + width:100%; + background-image: url("../assets/phone/fond_ecran.jpeg"); + background-size: cover; +} + +.icon { + background-color: rgba(0,0,0, 0.7); + width: 40px; + height: 40px; + padding: 5px; + border-radius: 10px; + margin: 3.5px; + margin-right: 0; + display: inline-block; + cursor:pointer; +} \ No newline at end of file diff --git a/public_html/game.html b/public_html/game.html index f18497d..0c10630 100644 --- a/public_html/game.html +++ b/public_html/game.html @@ -2,16 +2,54 @@ + + - + + + + - + + + + diff --git a/public_html/index.html b/public_html/index.html index 4f58ba8..edb8748 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -40,4 +40,4 @@ window.addEventListener('keyup', (event) => { document.cookie = "pseudo=" + pseudo.value }) - \ No newline at end of file + diff --git a/public_html/js/class.js b/public_html/js/class.js index 9fa9690..e88d46e 100644 --- a/public_html/js/class.js +++ b/public_html/js/class.js @@ -1,59 +1,50 @@ -let mapWidth = 210.; -let mapHeith = 100.; const playerSize = 50.; const carSize = 40.; const playerSpeed=.2; +const PNJSpeed=.02; const bulletSpeed=playerSpeed*2; const halfSqrtTwo=0.70710678118; -const defaulthealth=10.; +const defaulthealth=10; +const portalSize=40; +const affPortal = true; class Player { - constructor (id,x,y,name, dir) + constructor (id,x,y,z,name,dir) { this.name=name; this.x=x; this.y=y; + this.z=z;//correspond to the map. Ex: 0=>main; 1=>arena this.id=id; this.visibleDir=1; - this.dir=dir;//0=standStill - //1=North - //2=North-East - //3=East - //4=South-East - //5=South - //6=South-West - //7=West - //8=North-West + this.dir=dir;//0=stand Still + //1=North + //2=North-East + //3=East + //4=South-East + //5=South + //6=South-West + //7=West + //8=North-West this.ammo=10; this.health=defaulthealth; 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); - this.health=10; + this.health=defaulthealth; + + net.died(this.id,killerId); } } - /*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){ @@ -83,7 +74,7 @@ class Player this.y += dy*dt; squares.forEach(square => { - if(square.collide(this)) + if(square.collide(this.x,this.y,this.z)) { this.x-=dx*dt; this.y-=dy*dt; @@ -93,7 +84,7 @@ class Player }); circles.forEach(circle => { - if(circle.collide(this)) + if(circle.collide(this.x,this.y,this.z)) { this.x-=dx*dt; this.y-=dy*dt; @@ -111,15 +102,17 @@ class Player class Bullet { - constructor (x,y,dx,dy,id, sound) + constructor (x,y,z,dx,dy,id) { - sound.shoot(); + if(z==player.z) + bulletSound.play(); this.x=x; this.y=y; + this.z=z; this.dx=dx; this.dy=dy; this.deleted=false; - this.parentId=id; + this.shooterId=id; } update(dt) @@ -131,76 +124,75 @@ 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.z==this.z && player.id!=this.shooterId && Math.sqrt((player.x-this.x)**2+(player.y-this.y)**2) { + if(square.collide(this.x,this.y,this.z)) { - 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.z)) + { + this.deleted=true; + return; + } + }); } } class Square { - constructor(x,y,width,heigth) + constructor(x,y,z,width,heigth) { this.x=x; this.y=y; + this.z=z; this.w=width; this.h=heigth; } - collide(point) + collide(x,y,z) { - return (this.x<=point.x && point.x<=this.x+this.w && this.y<=point.y && point.y<=this.y+this.h); + return this.z==z && this.x<=x && x<=this.x+this.w && this.y<=y && y<=this.y+this.h; } } class Circle { - constructor(x,y,radius) + constructor(x,y,z,radius) { this.x=x; this.y=y; + this.z=z; this.r=radius; } - collide(point) + collide(x,y,z) { - return ((point.x-this.x)**2+(point.y-this.y)**2<=this.r**2); + return this.z==z && (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 - + this.z=0; if(this.type == 1) { //vers le bas this.x=1247; this.y=-40; @@ -215,34 +207,37 @@ class Car this.drift=0; - this.spawn=spawn + this.spawn=spawn; this.tick=0; - this.Renderer=Renderer; - //1247,-40 - //947,1000 } - collide(x,y) + collide(x,y,z) { + if(this.z!=z) { + return false; + } let cx=this.x-carSize/2; let cy=this.y-carSize/2; let collide = (cx<=x && x<=cx+carSize && cy<=y && y<=cy+carSize); if(collide) { - this.sound.drift() - this.drift=300; + driftSound.play() + this.drift=1000; } - return collide + return collide; } - Update() + Update(dt) { - if(this.tick==0) { - if(new Date().getSeconds()%20==this.spawn) { - this.tick=1 - } + if(this.tick==0 && (new Date()).getSeconds()%20==this.spawn) { + this.tick=1; } - this.ChangeDirection() + + if(this.tick==0) + return; + + this.ChangeDirection(); + switch (this.dir) { case 1: this.x=this.x+this.tick @@ -258,10 +253,9 @@ class Car break; } if(this.drift > 0) { - this.Renderer.RenderCar(this.x,this.y, this.angle+90) - this.drift-- - } else { - this.Renderer.RenderCar(this.x,this.y, this.angle) + this.drift-=dt; + }else{ + this.drift = 0; } } @@ -327,7 +321,9 @@ class Car this.dir=4 this.angle=Math.PI/2 } else if(this.y>1000) { - //tp + if(this.drift > 0) { + this.drift-- + } //tp this.x=1247 this.y=-40 this.tick=0; @@ -382,4 +378,104 @@ class Car } } } +} + +class PNJ{ + constructor(x, y, z){ + this.x=x; + this.y=y; + this.z=z; + this.dir=1; + } + + checkCollisions(){ + squares.forEach((square) => { + if(square.collide(this.x,this.y,this.z)) + { + return true; + } + }); + circles.forEach((circle) => { + if(circle.collide(this.x,this.y,this.z)) + { + return true; + } + }); + return false; + } + + changeDirection(){ + let newDir = Math.floor(Math.random()*8); + if(newDir == this.dir){ + newDir = (this.dir+3)%4+1; + } + this.dir = newDir; + } + + update(dt) + { + if(this.z!=player.z){ + return; + } + 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; + } + this.x+=dx*dt; + this.y+=dy*dt; + if(this.checkCollisions()){ + this.x -= dx*dt; + this.y -= dy*dt; + this.changeDirection(); + } + + if(Math.random()<=0.001){ + this.changeDirection(); + } + + } +} + +class Portal +{ + constructor(xIn,yIn,zIn,xOut,yOut,zOut) + { + this.in={x:xIn,y:yIn,z:zIn}; + this.out={x:xOut,y:yOut,z:zOut}; + } + + update() + { + if(player.z==this.in.z && player.x>this.in.x && player.xthis.in.y && player.y {if(p.in.z!=z){console.log("WRONG PORTAL DEFINITION FOR MAP",z,", portal :",p);}}); + this.z=z; + } + + update() + { + this.portalsOut.forEach((p)=>p.update()); + } } \ No newline at end of file diff --git a/public_html/js/cookies.js b/public_html/js/cookies.js new file mode 100644 index 0000000..9f0f73e --- /dev/null +++ b/public_html/js/cookies.js @@ -0,0 +1,10 @@ +function getCookie(name) {//Code from OpenClassroom + nom = name + "="; + 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; +} \ No newline at end of file diff --git a/public_html/js/game.js b/public_html/js/game.js index bc1e6b0..b871655 100644 --- a/public_html/js/game.js +++ b/public_html/js/game.js @@ -1,200 +1,42 @@ -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), - 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("wss://ws.gta6.insat.fr:8080?name="+CookiePseudo(), 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; - -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 { - console.log("New player: ",p.id); - players.push(p); - Renderer.AddPlayer(p); - }); -} - -function remPlayers() -{ - let playerToRemove = Net.getPlayersToRemove(); - for(let i=0;i { - bullets.push(b); - Renderer.addBullet(b); - }); - -} - -function updateBullets(dt) -{ - for(let i = bullets.length-1;i>=0;i--) - { - bullets[i].update(dt); - bullets[i].checkCollisions(player,squares,circles,Net); - if(bullets[i].deleted) - { - Renderer.remBullet(bullets[i]); - 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 { - 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); + if(player==null) + return; + + player.update(squares, circles, dt); + for (let i = 0;i { + c.Update(); + if(c.collide(player.x,player.y,player.z)) + { + net.died(player.id,-1); + player.z=-1; + player.deaths++; + players[0].kill++; + player.health=10; + } + }); + + PNJS.forEach((pnj)=>{ + pnj.update(dt); + }) + + maps.forEach((m) => {m.update();}); + + updateBullets(dt); + renderer.ReloadAff(); + LB.ReloadAff(); + let newTime = new Date(); dt=newTime - currentTime; 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); \ No newline at end of file +setInterval(game, 16); diff --git a/public_html/js/global.js b/public_html/js/global.js new file mode 100644 index 0000000..b3ae65f --- /dev/null +++ b/public_html/js/global.js @@ -0,0 +1,106 @@ +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("wss://ws.gta6.insat.fr:8080?name=" + getCookie("pseudo")); +let inp = new Input("canvas"); +let phone = new Phone(); +let bullets = []; +let circles = []; +let squares = []; + +let PNJS = [new PNJ(500, 100,0), + new PNJ(700, 100,0), + new PNJ(500, 600,0), + new PNJ(200, 700,0)]; + +let cars = [new Car(0, 0), + new Car(1, 7), + new Car(1, 13), + new Car(1, 14), + new Car(0, 7), + new Car(0, 15)]; +let portals = [new Portal(250,457,0,500,500,0),//O + new Portal(344,758,0,500,500,0), // SO + new Portal(1190,211,0,500,500,0),// NE + new Portal(862,213,0,500,500,0), // N + new Portal(1126,472,0,500,500,0),// E + new Portal(1076,768,0,500,500,0),// SE + new Portal(721,767,0,500,500,0), // S + new Portal(970,476,0,500,500,0)];//Mid + +let maps = [new Map(portals.slice(0),0)]; + +players.push(new Player(-1,-50,-50,-1,"VOITURES",0)); + +function updatePlayer(data) +{ + if(data.id==player.id) + { + player.x=data.x; + player.y=data.y; + player.z=data.z; + } + else + { + for(let i=0;i { + if(p.id==idKilled) + p.death++; + if(p.id==idKiller) + p.kill++; + }); +} + +function updateBullets(dt) +{ + for(let i = bullets.length-1;i>=0;i--) + { + bullets[i].update(dt); + bullets[i].checkCollisions(squares,circles); + if(bullets[i].deleted) + { + bullets.splice(i,1); + } + } +} diff --git a/public_html/js/input.js b/public_html/js/input.js index 8c25ee1..e9528a8 100644 --- a/public_html/js/input.js +++ b/public_html/js/input.js @@ -1,56 +1,62 @@ 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 bounds = this.canvas.getBoundingClientRect(); + + let mouseX = (e.clientX - bounds.x)*this.canvas.width/bounds.width; + let mouseY = (e.clientY - bounds.y)*this.canvas.height/bounds.height; + //console.log(Math.round(mouseX),",",Math.round(mouseY)); //for debug - 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); - this.bullets.push(b); - this.renderer.addBullet(b); - this.network.newBullet(b.x,b.y,b.dx,b.dy,b.parentId); + let b = new Bullet(player.x,player.y,player.z,dx/norm,dy/norm,player.id); + bullets.push(b); + net.newBullet(b.x,b.y,b.z,b.dx,b.dy,b.shooterId); }); window.addEventListener("keydown", (e)=>{ + //blocks the action of the key (cf. Killian) + if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.code)) { + e.preventDefault(); + } this.keysDown.add(e.key.toLowerCase()) this.updateDir(); }) + document.getElementById("retour_menu").addEventListener("click", (e) => { + phone.changeWindow(1) + }); + window.addEventListener("keyup", (e)=>{ this.keysDown.delete(e.key.toLowerCase()) this.updateDir(); }) + + window.addEventListener("keypress", (e)=>{ + if(e.key.toLowerCase()=="p"){ + phone.changePosition(); + } + }) } updateDir(){ - if(this.player==null) + if(player==null) return; + let oldDir=this.dir; + this.dir=0; if(this.keysDown.has('z') || this.keysDown.has('arrowup')){ if(this.keysDown.has('d') || this.keysDown.has('arrowright')){ @@ -71,7 +77,7 @@ class Input { this.dir = 3; } }else if(this.keysDown.has('s') || this.keysDown.has('arrowdown')){ - if(this.keysDown.has('q') || this.keysDown.has('arrowLeft')){ + if(this.keysDown.has('q') || this.keysDown.has('arrowleft')){ this.dir = 6; }else{ this.dir = 5; @@ -81,23 +87,14 @@ class Input { } if(oldDir!=this.dir) { - this.player.changeDirection(this.dir); - this.network.update(this.player); + player.changeDirection(this.dir); + net.update(player); } } - 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); } -} \ No newline at end of file + */ +} diff --git a/public_html/js/leaderboard.js b/public_html/js/leaderboard.js index 7ae29ee..3940447 100644 --- a/public_html/js/leaderboard.js +++ b/public_html/js/leaderboard.js @@ -1,29 +1,28 @@ 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 + this.px=10; + this.py=10; } - ReloadAff(players, player) { - this.px=10 - this.py=10 - this.players=[] + ReloadAff() { + 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.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+LBplayers.length*20); + this.nbjoueur=0; this.ctx.font = '20px Arial'; this.ctx.fillStyle = '#000000'; this.ctx.fillText('Leaderboard', this.px+80, this.py+30); @@ -38,7 +37,7 @@ class LeaderBoard { this.ctx.lineTo(this.px+250, this.py+100); this.ctx.stroke(); - //donné user + //donnee user this.ctx.fillStyle = '#000000'; this.ctx.font = '15px Arial'; this.ctx.fillText('#', this.px+10, this.py+80); @@ -48,7 +47,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 +55,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++; } }); diff --git a/public_html/js/network.js b/public_html/js/network.js index 9ea65dc..ae4ff3f 100644 --- a/public_html/js/network.js +++ b/public_html/js/network.js @@ -1,49 +1,50 @@ 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= 0; i--) { +for (let i=0; i= 0; i--) { +for (let i=0; i { + this.changeWindow(2) + }); + document.getElementById("appli-gta6").addEventListener("click", (e) => { + this.webviewName = "GTA 6" + this.changeWindow("game.html") + }); + document.getElementById("appli-vbuks").addEventListener("click", (e) => { + this.webviewName = "Free Vbucks" + this.changeWindow("assets/phone/webview/vbucks.html") + }); + document.getElementById("appli-fb").addEventListener("click", (e) => { + this.webviewName = "FakeBook" + this.changeWindow("assets/phone/webview/fb.html") + }); + } + + changeWindow(window) { + //1 main view phone.changeWindow( + //2 concorde + //other webview + this.content.style.display="none"; + this.contentmsg.style.display="none"; + this.inputDiv.style.display="none"; + this.webview.style.display = "none"; + this.webview.src=""; + + switch (window) { + case 1: + this.name.innerText = "Pear phone" + this.content.style.display="block"; + break; + case 2: + this.name.innerText = "Concord" + this.contentmsg.style.display="block"; + this.inputDiv.style.display="block"; + break; + default: + this.name.innerText = this.webviewName + this.webview.style.display = "block"; + this.webview.style.width="100%"; + this.webview.style.height="90%"; + this.webview.style.border="0"; + this.webview.src=window; + break; + } + } + + addMessage(message){ + this.messages.push(message); + + let msg = document.createElement("div"); + msg.className = "message"; + + let h2 = document.createElement("h2"); + h2.className = "messageTitle"; + h2.innerText = message.title; + + let p; + let match = message.content.match(/:(\w+):/); + if(match){ + p = document.createElement("img"); + p.className = "messageImage"; + p.src = "assets/concord_images/" + match[1] + '.jpg'; + }else{ + p = document.createElement("p"); + p.className = "messageContent"; + p.innerText = message.content; + } + + msg.appendChild(h2); + msg.appendChild(p); + + this.contentmsg.appendChild(msg); + this.contentmsg.scrollTop = this.contentmsg.scrollHeight; + } + + sendMessage(title, content){ + let message = { + title: player.name, + content: content + } + this.addMessage(message); + net.sendMessage(title, content); + } + + keyPress(input){ + if(event.key=='Enter'){ + if(input.value!=''){ + this.sendMessage(player.name, input.value); + input.value = ''; + input.blur() + } + } + } + + changePosition(){ + if(!document.getElementById("phoneContainer").contains(document.activeElement)){ + if(this.position == 0){ + document.getElementById("phoneContainer").className = "visible"; + this.position = 1; + }else{ + document.getElementById("phoneContainer").className = "hidden"; + this.position = 0; + } + } + + } +} \ No newline at end of file diff --git a/public_html/js/render.js b/public_html/js/render.js index 4619bf3..391235d 100644 --- a/public_html/js/render.js +++ b/public_html/js/render.js @@ -1,84 +1,60 @@ 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(); +const orange_portal = new Image(); +const blue_portal = 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"; +orange_portal.src = "./assets/orange_portal.webp"; +blue_portal.src = "./assets/blue_portal.webp"; + +const mapImages = [map,map2]; class Render { - - constructor(id, mapsrc, map2src) { - this.canvas = document.getElementById(id); + constructor(idCanvas) { + let canvas = document.getElementById(idCanvas); this.ctx = canvas.getContext("2d"); - this.players = []; - this.bullets = []; - this.mapsrc=mapsrc; - this.map2src=map2src; - this.ReloadAff(); - this.playerid=0; - this.map=0 + this.ctx.imageSmoothingEnabled=false;//does not lerp pixels } - SetPlayerId(id) { - this.playerid=id - } - - AddPlayer(player) { - this.players.push(player); - } - - addBullet(bullet) { - this.bullets.push(bullet); - } - - remBullet(bullet) { - for(let i=0;i=2000 && y>=2000 && this.map==1) { - x=player.x-2000 - y=player.y-2000 - } - - //this.map==1 && (x<2000 || y<2000) - if((this.map==1 && player.x>=2000 && player.y>=2000) || (this.map==0 && x<2000 && y <2000)) { this.ctx.save(); this.ctx.translate(x, y); - this.ctx.rotate(player.angle); + this.ctx.rotate(p.angle); this.ctx.drawImage(imgPlayer, -playerSize / 2, -playerSize / 2, playerSize, playerSize); this.ctx.restore(); this.ctx.fillStyle = 'white'; this.ctx.font="10pt arial"; - this.ctx.fillText(player.name,x-name.length*10/3,y-playerSize/1.8); - if(player.id==this.playerid) { + this.ctx.fillText(p.name,x-p.name.length*10/3,y-playerSize/1.8); + if(isClient) { this.ctx.fillStyle = 'red'; this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, playerSize+10, 5); this.ctx.fillStyle = '#7AFF33'; - this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, player.health*(playerSize+10)/defaulthealth, 5); + this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, p.health*(playerSize+10)/defaulthealth, 5); } } } - RenderCar(x,y,angle) { - if(this.map==0) { + RenderCar(x,y,z,angle) { + if(z==player.z) { this.ctx.save(); this.ctx.translate(x, y); this.ctx.rotate(angle); @@ -87,47 +63,87 @@ class Render { } } - RenderBullet(bullet) { - let x = bullet.x - let y = bullet.y - if(this.map==1) { - x = x-2000 - y = y-2000 + RenderBullet(x,y,z) { + if(z==player.z) + { + this.ctx.save(); + this.ctx.translate(x, y); + this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20); + this.ctx.restore(); } - this.ctx.save(); - this.ctx.translate(x, y); - this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20); - this.ctx.restore(); + } + + RenderPnj(x, y, z, angle, moving) + { + if(z==player.z) + { + this.ctx.save(); + this.ctx.translate(x, y); + this.ctx.rotate(angle); + if(moving == false || (new Date().getMilliseconds())%1000>=500){ + this.ctx.drawImage(imgPnj, -30 / 2, -30 / 2, 30, 30); + }else{ + this.ctx.drawImage(imgPnj2, -30 / 2, -30 / 2, 30, 30); + } + this.ctx.restore(); + } + } + + RenderPortal(x,y,orange) + { + this.ctx.save(); + this.ctx.translate(x,y); + if(orange) + this.ctx.drawImage(orange_portal,0,0,portalSize,portalSize); + else + this.ctx.drawImage(blue_portal,0,0,portalSize,portalSize); + this.ctx.restore(); } ReloadAff() { - const fond = new Image(); - this.players.forEach((p) => { - if(p.id==this.playerid) { - //console.log(p) - if(p.x >= 2000 && p.y >=2000) { - this.map=1 - } else { - this.map=0 - } - } - }) + let background; - if(this.map==0) { - fond.src = this.mapsrc; - } else { - fond.src = this.map2src; + if(player.z<=0) + { + let date = new Date(); + if(date.getMinutes()%10>=5){ + background = map; + }else{ + background = map_night; + } } - mapWidth = fond.width; - mapHeith = fond.height; + else + { + background=mapImages[player.z]; + } + + let mapWidth = background.width; + let mapHeight = background.height; this.ctx.canvas.width = mapWidth; - this.ctx.canvas.height = mapHeith; - this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith); - this.players.forEach((player) => { - this.RenderPlayer(player); + this.ctx.canvas.height = mapHeight; + this.ctx.drawImage(background, 0, 0, mapWidth, mapHeight); + this.RenderPlayer(player,true); + + cars.forEach((car) => { + this.RenderCar(car.x,car.y,car.angle+(car.drift>0?car.drift/150:0)); + }); + players.forEach((player) => { + this.RenderPlayer(player,false); }) - this.bullets.forEach((bullet) => { - this.RenderBullet(bullet); + bullets.forEach((bullet) => { + this.RenderBullet(bullet.x,bullet.y,bullet.z); }); + PNJS.forEach((pnj)=>{ + this.RenderPnj(pnj.x, pnj.y, pnj.z, (pnj.dir-1)*Math.PI/4, pnj.dir!=0); + }) + if(affPortal) + { + portals.forEach((portal) => { + if(portal.in.z==player.z) + this.RenderPortal(portal.in.x,portal.in.y,true); + if(portal.out.z==player.z) + this.RenderPortal(portal.out.x,portal.out.y,false); + }); + } } -} \ No newline at end of file +} diff --git a/public_html/js/sound.js b/public_html/js/sound.js index 5d1f254..76ae72b 100644 --- a/public_html/js/sound.js +++ b/public_html/js/sound.js @@ -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(){ - this.shootSound.pause() - this.shootSound.currentTime=0; - this.shootSound.play() - } - - drift(){ - this.driftsound.pause() - this.driftsound.currentTime=0; - this.driftsound.play() + play(){ + //this.sound.pause() + this.sound.currentTime=0; + this.sound.play() } } \ No newline at end of file diff --git a/server/server.js b/server/server.js index 1dd24d4..72c8580 100644 --- a/server/server.js +++ b/server/server.js @@ -121,6 +121,10 @@ function deletePlayer(socket){ connections.delete(socket); } +function recievemessage(msg, socket){ + broadcast(JSON.stringify(msg), socket.id); +} + function broadcast(message, exceptId = -1) { connections.forEach((socket) => { if (socket.readyState === WebSocket.OPEN && socket.id != exceptId) { @@ -155,6 +159,10 @@ wss.on('connection', (socket, req) => { died(message, socket); break; + case "message": + recievemessage(message, socket); + break; + default: break; } @@ -174,4 +182,4 @@ const PORT = 8080; server.listen(PORT, () => { console.log(`WebSocket listening on port ${PORT}.`); -}); \ No newline at end of file +});