Vergelijk commits
No commits in common. "2d98ff1f587538c8defb55d1cd827408e4117df7" and "17357ee4725f16b080b94c7d4324c4fdf56ac69e" have entirely different histories.
2d98ff1f58
...
17357ee472
55 changed files with 500 additions and 858 deletions
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 432 B |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6,1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3,9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4,1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 370 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9,5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 605 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 790 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 248 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1,3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 818 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 504 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7,6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 338 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9,8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 959 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
|
|
@ -1,11 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>FakeBook</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="hairinsa.png" width="100%">
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5,7 MiB |
|
|
@ -1,17 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Free Vbucks</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="free_vbucks.jpeg" width="100%" id="freevbucks">
|
||||
<img src="rickroll.gif" width="100%" id="rr" style="display:none">
|
||||
<script>
|
||||
document.getElementById("freevbucks").addEventListener("click", (e) => {
|
||||
document.getElementById("rr").style.display = "block"
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4,2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4,2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
|
|
@ -1,133 +0,0 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -2,54 +2,16 @@
|
|||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="./js/sound.js"></script>
|
||||
<script type="text/javascript" src="./js/cookies.js"></script>
|
||||
<script type="text/javascript" src="./js/phone.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/input.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/global.js" defer></script>
|
||||
<script type="text/javascript" src="./js/objects.js" defer></script>
|
||||
<script type="text/javascript" src="./js/game.js" defer></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/game.css">
|
||||
</head>
|
||||
<body>
|
||||
<canvas width="800" height="800" id="canvas"></canvas>
|
||||
|
||||
<div id="phoneContainer" class="hidden">
|
||||
<div id="phoneDiv">
|
||||
<map name="map_retour_menu">
|
||||
<area
|
||||
shape="circle"
|
||||
coords="100,380,17"
|
||||
style="cursor:pointer;"
|
||||
id="retour_menu"
|
||||
border="5px" />
|
||||
</map>
|
||||
<img id="phone" src="assets/phone.png" alt="Phone" usemap="#map_retour_menu">
|
||||
<div id="phoneScreen">
|
||||
<div id="chatHeader">
|
||||
<p id ="TitlePage"></p>
|
||||
</div>
|
||||
<div id="chatMessages">
|
||||
|
||||
</div>
|
||||
<div id="content">
|
||||
<img src="./assets/phone/concord.png" class="icon" id="appli-concord">
|
||||
<img src="./assets/logo.png" class="icon" id="appli-gta6">
|
||||
<img src="./assets/phone/vbucks.webp" class="icon" id="appli-vbuks">
|
||||
<img src="./assets/phone/facebook.png" class="icon" id="appli-fb">
|
||||
</div>
|
||||
<iframe id="webview" sandbox="allow-same-origin allow-scripts allow-forms" style="overflow: hidden;"></iframe>
|
||||
<div id="chatInputDiv">
|
||||
<input type="text" placeholder="Ecrivez un message ici" id="chatInput" onkeydown="phone.keyPress(this)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas width="800" height="800" id="canvas" style="border: 1px;"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,4 +40,4 @@
|
|||
window.addEventListener('keyup', (event) => {
|
||||
document.cookie = "pseudo=" + pseudo.value
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
|
@ -1,50 +1,59 @@
|
|||
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 portalSize=40;
|
||||
const affPortal = true;
|
||||
const defaulthealth=10.;
|
||||
|
||||
class Player
|
||||
{
|
||||
constructor (id,x,y,z,name,dir)
|
||||
constructor (id,x,y,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=stand Still
|
||||
//1=North
|
||||
//2=North-East
|
||||
//3=East
|
||||
//4=South-East
|
||||
//5=South
|
||||
//6=South-West
|
||||
//7=West
|
||||
//8=North-West
|
||||
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.ammo=10;
|
||||
this.health=defaulthealth;
|
||||
this.kill=0;
|
||||
this.death=0;
|
||||
}
|
||||
|
||||
takeDamage(amount,killerId)
|
||||
takeDamage(amount,killerId,network)
|
||||
{
|
||||
this.health-=amount;
|
||||
if(this.health<=0)
|
||||
{
|
||||
this.death++;
|
||||
this.health=defaulthealth;
|
||||
|
||||
net.died(this.id,killerId);
|
||||
network.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){
|
||||
|
|
@ -74,7 +83,7 @@ class Player
|
|||
this.y += dy*dt;
|
||||
|
||||
squares.forEach(square => {
|
||||
if(square.collide(this.x,this.y,this.z))
|
||||
if(square.collide(this))
|
||||
{
|
||||
this.x-=dx*dt;
|
||||
this.y-=dy*dt;
|
||||
|
|
@ -84,7 +93,7 @@ class Player
|
|||
});
|
||||
|
||||
circles.forEach(circle => {
|
||||
if(circle.collide(this.x,this.y,this.z))
|
||||
if(circle.collide(this))
|
||||
{
|
||||
this.x-=dx*dt;
|
||||
this.y-=dy*dt;
|
||||
|
|
@ -102,17 +111,15 @@ class Player
|
|||
|
||||
class Bullet
|
||||
{
|
||||
constructor (x,y,z,dx,dy,id)
|
||||
constructor (x,y,dx,dy,id, sound)
|
||||
{
|
||||
if(z==player.z)
|
||||
bulletSound.play();
|
||||
sound.shoot();
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.z=z;
|
||||
this.dx=dx;
|
||||
this.dy=dy;
|
||||
this.deleted=false;
|
||||
this.shooterId=id;
|
||||
this.parentId=id;
|
||||
}
|
||||
|
||||
update(dt)
|
||||
|
|
@ -124,75 +131,76 @@ class Bullet
|
|||
}
|
||||
}
|
||||
|
||||
checkCollisions(squares,circles)//only the client's player /!\
|
||||
checkCollisions(player,squares,circles,network)//only the client's player /!\
|
||||
{
|
||||
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)<playerSize/2)
|
||||
if(!this.deleted)
|
||||
{
|
||||
player.takeDamage(1,this.shooterId);
|
||||
this.deleted=true;
|
||||
return;
|
||||
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,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;
|
||||
}
|
||||
});
|
||||
}
|
||||
squares.forEach((square) => {
|
||||
if(square.collide(this.x,this.y,this.z))
|
||||
{
|
||||
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,z,width,heigth)
|
||||
constructor(x,y,width,heigth)
|
||||
{
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.z=z;
|
||||
this.w=width;
|
||||
this.h=heigth;
|
||||
}
|
||||
|
||||
collide(x,y,z)
|
||||
collide(point)
|
||||
{
|
||||
return this.z==z && this.x<=x && x<=this.x+this.w && this.y<=y && y<=this.y+this.h;
|
||||
return (this.x<=point.x && point.x<=this.x+this.w && this.y<=point.y && point.y<=this.y+this.h);
|
||||
}
|
||||
}
|
||||
|
||||
class Circle
|
||||
{
|
||||
constructor(x,y,z,radius)
|
||||
constructor(x,y,radius)
|
||||
{
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.z=z;
|
||||
this.r=radius;
|
||||
}
|
||||
|
||||
collide(x,y,z)
|
||||
collide(point)
|
||||
{
|
||||
return this.z==z && (x-this.x)**2+(y-this.y)**2 <= this.r**2;
|
||||
return ((point.x-this.x)**2+(point.y-this.y)**2<=this.r**2);
|
||||
}
|
||||
}
|
||||
|
||||
class Car
|
||||
{
|
||||
constructor(type, spawn)
|
||||
constructor(Renderer, type, spawn, sound)
|
||||
{
|
||||
this.type=type; // 0 circule vers le haut
|
||||
this.sound=sound
|
||||
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;
|
||||
|
|
@ -207,37 +215,34 @@ class Car
|
|||
|
||||
this.drift=0;
|
||||
|
||||
this.spawn=spawn;
|
||||
this.spawn=spawn
|
||||
|
||||
this.tick=0;
|
||||
this.Renderer=Renderer;
|
||||
//1247,-40
|
||||
//947,1000
|
||||
}
|
||||
|
||||
collide(x,y,z)
|
||||
collide(x,y)
|
||||
{
|
||||
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) {
|
||||
driftSound.play()
|
||||
this.drift=1000;
|
||||
this.sound.drift()
|
||||
this.drift=300;
|
||||
}
|
||||
return collide;
|
||||
return collide
|
||||
}
|
||||
|
||||
Update(dt)
|
||||
Update()
|
||||
{
|
||||
if(this.tick==0 && (new Date()).getSeconds()%20==this.spawn) {
|
||||
this.tick=1;
|
||||
if(this.tick==0) {
|
||||
if(new Date().getSeconds()%20==this.spawn) {
|
||||
this.tick=1
|
||||
}
|
||||
}
|
||||
|
||||
if(this.tick==0)
|
||||
return;
|
||||
|
||||
this.ChangeDirection();
|
||||
|
||||
this.ChangeDirection()
|
||||
switch (this.dir) {
|
||||
case 1:
|
||||
this.x=this.x+this.tick
|
||||
|
|
@ -253,9 +258,10 @@ class Car
|
|||
break;
|
||||
}
|
||||
if(this.drift > 0) {
|
||||
this.drift-=dt;
|
||||
}else{
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -321,9 +327,7 @@ class Car
|
|||
this.dir=4
|
||||
this.angle=Math.PI/2
|
||||
} else if(this.y>1000) {
|
||||
if(this.drift > 0) {
|
||||
this.drift--
|
||||
} //tp
|
||||
//tp
|
||||
this.x=1247
|
||||
this.y=-40
|
||||
this.tick=0;
|
||||
|
|
@ -378,104 +382,4 @@ 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.x<this.in.x+portalSize && player.y>this.in.y && player.y<this.in.y+portalSize)
|
||||
{
|
||||
player.z=this.out.z;
|
||||
player.x=this.out.x;
|
||||
player.y=this.out.y;
|
||||
net.update(player);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Map
|
||||
{
|
||||
constructor(portalsOut,z) // portalsIn/Out : portal teleport In/Out; z: idDimension
|
||||
{
|
||||
this.portalsOut=portalsOut;
|
||||
portalsOut.forEach((p) => {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());
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -1,42 +1,200 @@
|
|||
let dt = 0;
|
||||
let currentTime = new Date();
|
||||
function game() {
|
||||
if(player==null)
|
||||
return;
|
||||
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;
|
||||
}
|
||||
|
||||
player.update(squares, circles, dt);
|
||||
for (let i = 0;i<players.length; i++) {
|
||||
players[i].update(squares, circles, dt);
|
||||
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<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
cars.forEach((c) => {
|
||||
c.Update();
|
||||
if(c.collide(player.x,player.y,player.z))
|
||||
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++)
|
||||
{
|
||||
net.died(player.id,-1);
|
||||
player.z=-1;
|
||||
player.deaths++;
|
||||
players[0].kill++;
|
||||
player.health=10;
|
||||
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)
|
||||
{
|
||||
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<players.length;i++)
|
||||
{
|
||||
if(players[i].id==dead)
|
||||
players[i].death++;
|
||||
if(players[i].id==killer)
|
||||
players[i].kill++;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
PNJS.forEach((pnj)=>{
|
||||
pnj.update(dt);
|
||||
})
|
||||
let currentTime = new Date();
|
||||
function game() {
|
||||
if(playerId==null)
|
||||
{
|
||||
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);
|
||||
}
|
||||
|
||||
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, 16);
|
||||
setInterval(game);
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
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<players.length;i++)
|
||||
{
|
||||
if(data.id==players[i].id)
|
||||
{
|
||||
players[i].x=data.x;
|
||||
players[i].y=data.y;
|
||||
if(data.z==undefined)
|
||||
data.z=0;
|
||||
players[i].z=data.z;
|
||||
players[i].dir=data.dir;
|
||||
players[i].visibleDir=data.visibleDir;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addPlayer(data)
|
||||
{
|
||||
let np = new Player(data.id, data.x, data.y, 0, 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++;
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +1,56 @@
|
|||
class Input {
|
||||
constructor(idCanvas) {
|
||||
constructor(id, net,renderer, sound) {
|
||||
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 = document.getElementById(idCanvas);
|
||||
this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
|
||||
|
||||
this.canvas.addEventListener("click", (e) => {
|
||||
if(player==null || bullets==null){
|
||||
if(this.player==null || this.bullets==null){
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
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 dx = mouseX-player.x;
|
||||
let dy = mouseY-player.y;
|
||||
let dx = this.mouseX-this.player.x;
|
||||
let dy = this.mouseY-this.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,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);
|
||||
this.bullets.push(b);
|
||||
this.renderer.addBullet(b);
|
||||
this.network.newBullet(b.x,b.y,b.dx,b.dy,b.parentId);
|
||||
});
|
||||
|
||||
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(player==null)
|
||||
if(this.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')){
|
||||
|
|
@ -77,7 +71,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;
|
||||
|
|
@ -87,14 +81,23 @@ class Input {
|
|||
}
|
||||
if(oldDir!=this.dir)
|
||||
{
|
||||
player.changeDirection(this.dir);
|
||||
net.update(player);
|
||||
this.player.changeDirection(this.dir);
|
||||
this.network.update(this.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);
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +1,29 @@
|
|||
class LeaderBoard {
|
||||
constructor(idCanvas) {
|
||||
this.canvas = document.getElementById(idCanvas);
|
||||
constructor(id) {
|
||||
this.canvas = document.getElementById(id);
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.nbjoueur=0
|
||||
this.px=10;
|
||||
this.py=10;
|
||||
}
|
||||
|
||||
ReloadAff() {
|
||||
let LBplayers=[];
|
||||
ReloadAff(players, player) {
|
||||
this.px=10
|
||||
this.py=10
|
||||
this.players=[]
|
||||
players.forEach((p) => {
|
||||
if(p != null) {
|
||||
LBplayers.push(p);
|
||||
this.players.push(p)
|
||||
}
|
||||
})
|
||||
LBplayers.push(player);
|
||||
this.players.push(player);
|
||||
|
||||
LBplayers.sort(function (a, b) {
|
||||
this.players.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+LBplayers.length*20);
|
||||
this.nbjoueur=0;
|
||||
this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+this.nbjoueur*20);
|
||||
this.nbjoueur=0
|
||||
this.ctx.font = '20px Arial';
|
||||
this.ctx.fillStyle = '#000000';
|
||||
this.ctx.fillText('Leaderboard', this.px+80, this.py+30);
|
||||
|
|
@ -37,7 +38,7 @@ class LeaderBoard {
|
|||
this.ctx.lineTo(this.px+250, this.py+100);
|
||||
this.ctx.stroke();
|
||||
|
||||
//donnee user
|
||||
//donné user
|
||||
this.ctx.fillStyle = '#000000';
|
||||
this.ctx.font = '15px Arial';
|
||||
this.ctx.fillText('#', this.px+10, this.py+80);
|
||||
|
|
@ -47,7 +48,7 @@ class LeaderBoard {
|
|||
this.ctx.fillText('K/D', this.px+220, this.py+80);
|
||||
this.ctx.font = '10px Arial';
|
||||
|
||||
LBplayers.forEach((p) => {
|
||||
this.players.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);
|
||||
|
|
@ -55,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++
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,50 +1,49 @@
|
|||
class Network{
|
||||
constructor(adress){
|
||||
constructor(adress, bulletsound){
|
||||
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 (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,0,p.name,p.dir);
|
||||
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);
|
||||
else
|
||||
players.push(new Player(p.id,p.x,p.y,0,p.name,p.dir));
|
||||
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))
|
||||
}
|
||||
break;
|
||||
|
||||
case 'update':
|
||||
updatePlayer(data.data);
|
||||
this.playersToUpdate.push(data.data);
|
||||
break;
|
||||
|
||||
case "newplayer":
|
||||
players.push(new Player(data.data.id, data.data.x, data.data.y, 0, data.data.name, data.data.dir));
|
||||
this.playersToAdd.push(new Player(data.data.id, data.data.x, data.data.y, data.data.name, data.data.dir));
|
||||
break;
|
||||
|
||||
case "removePlayer":
|
||||
removePlayer(data.data.id);
|
||||
this.playersToRemove.push(data.data.id);
|
||||
break;
|
||||
|
||||
case "newBullet":
|
||||
bullets.push(new Bullet(data.data.x,data.data.y,data.data.z==undefined?0:data.data.z,data.data.dx,data.data.dy,data.data.id));
|
||||
this.bulletsToAdd.push(new Bullet(data.data.x,data.data.y,data.data.dx,data.data.dy,data.data.id, this.sound));
|
||||
break;
|
||||
|
||||
case "died":
|
||||
case "died":
|
||||
console.log("player",data.data.id,"was killed by",data.data.killerId);
|
||||
addKill(data.data.id,data.data.killerId);
|
||||
this.deathToAdd.push(data.data);
|
||||
break;
|
||||
|
||||
case "message":
|
||||
phone.addMessage(data.data);
|
||||
|
||||
default:
|
||||
console.log("received unknown data:",data);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -60,6 +59,7 @@ class Network{
|
|||
}
|
||||
|
||||
died(id, killerId){
|
||||
this.deathToAdd.push({id:id,killerId:killerId});
|
||||
this.socket.send(JSON.stringify({type:"died",data:{id: id, killerId: killerId}}));
|
||||
}
|
||||
|
||||
|
|
@ -70,12 +70,39 @@ class Network{
|
|||
}));
|
||||
}
|
||||
|
||||
newBullet(x,y,z,dx,dy,parentId)
|
||||
newBullet(x,y,dx,dy,parentId)
|
||||
{
|
||||
this.socket.send(JSON.stringify({type:"newBullet",data:{x: x,y: y,z: z,dx: dx,dy: dy,id:parentId}}));
|
||||
this.socket.send(JSON.stringify({type:"newBullet",data:{x: x,y: y,dx: dx,dy: dy,id:parentId}}));
|
||||
}
|
||||
|
||||
sendMessage(title, content){
|
||||
this.socket.send(JSON.stringify({type: "message", data: {title: title, content: content}}));
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
let objects = {"squares":[{"x":1162,"y":115,"z":0,"w":144,"h":125},{"x":120,"y":906,"z":0,"w":1228,"h":21},{"x":127,"y":0,"z":0,"w":1225,"h":14},{"x":297,"y":114,"z":0,"w":78,"h":93},{"x":169,"y":243,"z":0,"w":62,"h":250},{"x":313,"y":243,"z":0,"w":62,"h":253},{"x":228,"y":257,"z":0,"w":96,"h":222},{"x":792,"y":113,"z":0,"w":176,"h":126},{"x":1017,"y":113,"z":0,"w":143,"h":81},{"x":1160,"y":241,"z":0,"w":143,"h":-129},{"x":1065,"y":372,"z":0,"w":127,"h":124},{"x":697,"y":372,"z":0,"w":319,"h":126},{"x":697,"y":498,"z":0,"w":159,"h":111},{"x":697,"y":628,"z":0,"w":160,"h":158},{"x":1001,"y":628,"z":0,"w":191,"h":158},{"x":281,"y":629,"z":0,"w":175,"h":156},{"x":0,"y":0,"z":0,"w":137,"h":616},{"x":0,"y":615,"z":0,"w":136,"h":310},{"x":1337,"y":1,"z":0,"w":130,"h":581},{"x":1337,"y":573,"z":0,"w":131,"h":356},{"x":586,"y":153,"z":0,"w":15,"h":24},{"x":651,"y":153,"z":0,"w":12,"h":24},{"x":700,"y":187,"z":0,"w":12,"h":22},{"x":1020,"y":194,"z":0,"w":10,"h":47},{"x":1019,"y":227,"z":0,"w":56,"h":14},{"x":1101,"y":227,"z":0,"w":62,"h":13},{"x":654,"y":128,"z":0,"w":105,"h":17},{"x":748,"y":129,"z":0,"w":12,"h":49},{"x":748,"y":193,"z":0,"w":12,"h":47},{"x":654,"y":223,"z":0,"w":105,"h":16},{"x":521,"y":129,"z":0,"w":106,"h":14},{"x":521,"y":140,"z":0,"w":13,"h":38},{"x":521,"y":194,"z":0,"w":13,"h":46},{"x":521,"y":225,"z":0,"w":108,"h":16}],"circles":[{"x":552,"y":163,"z":0,"r":13.601470508735444},{"x":608,"y":190,"z":0,"r":20.248456731316587},{"x":569,"y":212,"z":0,"r":11.704699910719626},{"x":680,"y":213,"z":0,"r":12.041594578792296},{"x":727,"y":164,"z":0,"r":14.212670403551895}]}
|
||||
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}]}
|
||||
|
||||
for (let i=0; i<objects.squares.length;i++) {
|
||||
let squares = [];
|
||||
let circles = [];
|
||||
|
||||
for (var i = objects.squares.length - 1; i >= 0; i--) {
|
||||
let current = objects.squares[i]
|
||||
squares.push(new Square(current.x, current.y, current.z, current.w, current.h));
|
||||
squares.push(new Square(current.x, current.y, current.w, current.h));
|
||||
}
|
||||
|
||||
for (let i=0; i<objects.circles.length; i++) {
|
||||
for (var i = objects.circles.length - 1; i >= 0; i--) {
|
||||
let current = objects.circles[i]
|
||||
circles.push(new Circle(current.x, current.y, current.z, current.r));
|
||||
circles.push(new Circle(current.x, current.y, current.r));
|
||||
}
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
class Phone{
|
||||
constructor(){
|
||||
this.position = 0;
|
||||
this.messages = [];
|
||||
this.name = document.getElementById("TitlePage");
|
||||
|
||||
this.content = document.getElementById("content");
|
||||
this.contentmsg = document.getElementById("chatMessages");
|
||||
this.inputDiv = document.getElementById("chatInputDiv");
|
||||
this.webview = document.getElementById("webview");
|
||||
|
||||
this.webviewName = "Erreur"
|
||||
|
||||
this.chargeMainPage();
|
||||
this.changeWindow(1)
|
||||
}
|
||||
|
||||
chargeMainPage() {
|
||||
document.getElementById("appli-concord").addEventListener("click", (e) => {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +1,84 @@
|
|||
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(idCanvas) {
|
||||
let canvas = document.getElementById(idCanvas);
|
||||
|
||||
constructor(id, mapsrc, map2src) {
|
||||
this.canvas = document.getElementById(id);
|
||||
this.ctx = canvas.getContext("2d");
|
||||
this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
|
||||
this.players = [];
|
||||
this.bullets = [];
|
||||
this.mapsrc=mapsrc;
|
||||
this.map2src=map2src;
|
||||
this.ReloadAff();
|
||||
this.playerid=0;
|
||||
this.map=0
|
||||
}
|
||||
|
||||
RenderPlayer(p,isClient) {
|
||||
if(p==null)
|
||||
return;
|
||||
let x=p.x
|
||||
let y=p.y
|
||||
|
||||
if(p.z==player.z)
|
||||
SetPlayerId(id) {
|
||||
this.playerid=id
|
||||
}
|
||||
|
||||
AddPlayer(player) {
|
||||
this.players.push(player);
|
||||
}
|
||||
|
||||
addBullet(bullet) {
|
||||
this.bullets.push(bullet);
|
||||
}
|
||||
|
||||
remBullet(bullet) {
|
||||
for(let i=0;i<this.bullets.length;i++) {
|
||||
if(bullet==this.bullets[i]) {
|
||||
this.bullets.splice(i,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RemPlayer(id) {
|
||||
for(let i=0;i<this.players.length;i++)
|
||||
{
|
||||
if(this.players[i].id==id)
|
||||
{
|
||||
this.players.splice(i,1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RenderPlayer(player) {
|
||||
let x=player.x
|
||||
let y=player.y
|
||||
if(x>=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(p.angle);
|
||||
this.ctx.rotate(player.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(p.name,x-p.name.length*10/3,y-playerSize/1.8);
|
||||
if(isClient) {
|
||||
this.ctx.fillText(player.name,x-name.length*10/3,y-playerSize/1.8);
|
||||
if(player.id==this.playerid) {
|
||||
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, p.health*(playerSize+10)/defaulthealth, 5);
|
||||
this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, player.health*(playerSize+10)/defaulthealth, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RenderCar(x,y,z,angle) {
|
||||
if(z==player.z) {
|
||||
RenderCar(x,y,angle) {
|
||||
if(this.map==0) {
|
||||
this.ctx.save();
|
||||
this.ctx.translate(x, y);
|
||||
this.ctx.rotate(angle);
|
||||
|
|
@ -63,87 +87,47 @@ class Render {
|
|||
}
|
||||
}
|
||||
|
||||
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();
|
||||
RenderBullet(bullet) {
|
||||
let x = bullet.x
|
||||
let y = bullet.y
|
||||
if(this.map==1) {
|
||||
x = x-2000
|
||||
y = y-2000
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
this.ctx.save();
|
||||
this.ctx.translate(x, y);
|
||||
this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
ReloadAff() {
|
||||
let background;
|
||||
|
||||
if(player.z<=0)
|
||||
{
|
||||
let date = new Date();
|
||||
if(date.getMinutes()%10>=5){
|
||||
background = map;
|
||||
}else{
|
||||
background = map_night;
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
background=mapImages[player.z];
|
||||
}
|
||||
|
||||
let mapWidth = background.width;
|
||||
let mapHeight = background.height;
|
||||
this.ctx.canvas.width = mapWidth;
|
||||
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);
|
||||
})
|
||||
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);
|
||||
});
|
||||
|
||||
if(this.map==0) {
|
||||
fond.src = this.mapsrc;
|
||||
} else {
|
||||
fond.src = this.map2src;
|
||||
}
|
||||
mapWidth = fond.width;
|
||||
mapHeith = fond.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.bullets.forEach((bullet) => {
|
||||
this.RenderBullet(bullet);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,24 @@
|
|||
class Sound{
|
||||
constructor(url){
|
||||
this.sound = new Audio(url);
|
||||
this.sound.type = "audio/mp3";
|
||||
this.assetsUrl = url;
|
||||
}
|
||||
|
||||
play(){
|
||||
//this.sound.pause()
|
||||
this.sound.currentTime=0;
|
||||
this.sound.play()
|
||||
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()
|
||||
}
|
||||
}
|
||||
|
|
@ -121,10 +121,6 @@ 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) {
|
||||
|
|
@ -159,10 +155,6 @@ wss.on('connection', (socket, req) => {
|
|||
died(message, socket);
|
||||
break;
|
||||
|
||||
case "message":
|
||||
recievemessage(message, socket);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
@ -182,4 +174,4 @@ const PORT = 8080;
|
|||
|
||||
server.listen(PORT, () => {
|
||||
console.log(`WebSocket listening on port ${PORT}.`);
|
||||
});
|
||||
});
|
||||
Laden…
Reference in a new issue