Compare commits
No commits in common. "f9a5ffbe45321b4a69d3b10542f60f32c0d0d63a" and "aaf755a8715b927b1f04b946dcc06fa2af33123c" have entirely different histories.
f9a5ffbe45
...
aaf755a871
64 changed files with 601 additions and 1095 deletions
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 432 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
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: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 231 KiB |
|
Before Width: | Height: | Size: 520 KiB After Width: | Height: | Size: 520 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 |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
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: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 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>
|
||||
<a href="https://airinsa.insat.fr"><img src="hairinsa.png" width="100%"></a>
|
||||
</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,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Utube</title>
|
||||
<style>
|
||||
iframe {
|
||||
display:inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<font color="white">UTube vous propose sa sélection des meilleures vidéos !</font>
|
||||
<iframe width="100%" type="text/html" src="https://www.youtube.com/embed/WiiM0jgWrC4" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="100%" type="text/html" src="https://www.youtube.com/embed/rgEuqSmdW0Q" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="100%" type="text/html" src="https://www.youtube.com/embed/l0qvxPPISuY" frameborder="0" allowfullscreen></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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,56 +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">
|
||||
<img src="./assets/phone/utube.png" class="icon" id="appli-utube">
|
||||
<img src="./assets/phone/gogole.png" class="icon" id="appli-goo">
|
||||
</div>
|
||||
<iframe id="webview" 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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=(z<0);
|
||||
this.shooterId=id;
|
||||
this.deleted=false;
|
||||
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,54 +215,53 @@ 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()%60==this.spawn) {
|
||||
this.tick=1;
|
||||
if(this.tick==0) {
|
||||
if(new Date().getSeconds()%20==this.spawn) {
|
||||
this.tick=1
|
||||
}
|
||||
}
|
||||
|
||||
if(this.tick>0) {
|
||||
this.ChangeDirection();
|
||||
|
||||
switch (this.dir) {
|
||||
case 1:
|
||||
this.x=this.x+this.tick
|
||||
break;
|
||||
case 2:
|
||||
this.y=this.y-this.tick
|
||||
break;
|
||||
case 3:
|
||||
this.x=this.x-this.tick
|
||||
break;
|
||||
case 4:
|
||||
this.y=this.y+this.tick
|
||||
break;
|
||||
}
|
||||
if(this.drift > 0) {
|
||||
this.drift-=dt;
|
||||
}else{
|
||||
this.drift = 0;
|
||||
}
|
||||
this.ChangeDirection()
|
||||
switch (this.dir) {
|
||||
case 1:
|
||||
this.x=this.x+this.tick
|
||||
break;
|
||||
case 2:
|
||||
this.y=this.y-this.tick
|
||||
break;
|
||||
case 3:
|
||||
this.x=this.x-this.tick
|
||||
break;
|
||||
case 4:
|
||||
this.y=this.y+this.tick
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -320,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,105 +383,3 @@ class Car
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
class PNJ{
|
||||
constructor(x, y, z){
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.z=z;
|
||||
this.dir=1;
|
||||
}
|
||||
|
||||
checkCollisions(){
|
||||
map0Squares.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 Game_Map
|
||||
{
|
||||
constructor(portalsOut,z,squares,circles) // 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;
|
||||
this.squares=squares;
|
||||
this.circles=circles;
|
||||
}
|
||||
|
||||
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,43 +1,193 @@
|
|||
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(maps[player.z].squares, maps[player.z].circles, dt);
|
||||
players.forEach((p)=>{
|
||||
if(p.z>=0)
|
||||
p.update(maps[p.z].squares,maps[p.z].circles);
|
||||
});
|
||||
Renderer = new Render("canvas", "./assets/map/map7_principale.png", "./assets/map/map7_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("ws://129.151.227.50:8080?name="+CookiePseudo(), sound);
|
||||
|
||||
cars.forEach((c) => {
|
||||
c.Update(dt);
|
||||
if(c.collide(player.x,player.y,player.z))
|
||||
{
|
||||
net.died(player.id,-1);
|
||||
player.z=-1;
|
||||
player.death++;
|
||||
players[0].kill++;
|
||||
player.health=10;
|
||||
|
||||
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()
|
||||
{
|
||||
let playerToUpdate = Net.getPlayersToUpdate();
|
||||
for (let i = 0;i<playerToUpdate.length;i++)
|
||||
{
|
||||
if(playerToUpdate[i].id==player.id) {
|
||||
player.x=playerToUpdate[i].x;
|
||||
player.y=playerToUpdate[i].y;
|
||||
player.dir=playerToUpdate[i].dir;
|
||||
player.visibleDir=playerToUpdate[i].visibleDir;
|
||||
} else {
|
||||
for (let j = 0;j<players.length;j++)
|
||||
{
|
||||
if(players[j].id==playerToUpdate[i].id)
|
||||
{
|
||||
|
||||
players[j].x=playerToUpdate[i].x;
|
||||
players[j].y=playerToUpdate[i].y;
|
||||
players[j].dir=playerToUpdate[i].dir;
|
||||
players[j].visibleDir=playerToUpdate[i].visibleDir;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addPlayers()
|
||||
{
|
||||
let playersToAdd = Net.getPlayersToAdd();
|
||||
playersToAdd.forEach((p) => {
|
||||
console.log("New player: ",p.id);
|
||||
players.push(p);
|
||||
Renderer.AddPlayer(p);
|
||||
});
|
||||
}
|
||||
|
||||
function remPlayers()
|
||||
{
|
||||
let playerToRemove = Net.getPlayersToRemove();
|
||||
for(let i=0;i<playerToRemove.length;i++)
|
||||
{
|
||||
let id = playerToRemove[i];
|
||||
Renderer.RemPlayer(id);
|
||||
console.log("deleting Player ",id);
|
||||
for(let i = 0;i<players.length;i++)
|
||||
{
|
||||
if (players[i].id==id)
|
||||
{
|
||||
players.splice(i,1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addBullets()
|
||||
{
|
||||
let bulletsToAdd = Net.getBulletsToAdd();
|
||||
bulletsToAdd.forEach((b) => {
|
||||
bullets.push(b);
|
||||
Renderer.addBullet(b);
|
||||
});
|
||||
|
||||
PNJS.forEach((pnj)=>{
|
||||
pnj.update(dt);
|
||||
})
|
||||
}
|
||||
|
||||
maps.forEach((m) => {m.update();});
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateBullets(dt);
|
||||
renderer.ReloadAff();
|
||||
LB.ReloadAff();
|
||||
function updateKills()
|
||||
{
|
||||
let deaths = Net.getDeathToAdd();
|
||||
deaths.forEach((object) => {
|
||||
let dead = object.id;
|
||||
let killer = object.killerId;
|
||||
if(player.id==killer)
|
||||
player.kill++;
|
||||
for(let i=0;i<players.length;i++)
|
||||
{
|
||||
if(players[i].id==dead)
|
||||
players[i].death++;
|
||||
if(players[i].id==killer)
|
||||
players[i].kill++;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let currentTime = new Date();
|
||||
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);
|
||||
}
|
||||
|
||||
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,130 +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(1, 7),
|
||||
//new Car(1, 12),
|
||||
//new Car(1, 20),
|
||||
new Car(1, 34),
|
||||
//new Car(1, 58),
|
||||
new Car(0, 20),
|
||||
//new Car(0, 7),
|
||||
//new Car(0, 18),
|
||||
//new Car(0, 26),
|
||||
//new Car(0, 45),
|
||||
new Car(0, 52)];
|
||||
let portals = [new Portal(250,457,0,516,789,1),//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,583,810,3),// E
|
||||
new Portal(1076,768,0,484,898,2),// SE
|
||||
new Portal(721,767,0,500,500,0), // S
|
||||
new Portal(970,476,0,500,500,0),//Mid
|
||||
new Portal(617,154,1,274,244,0),//out map 1
|
||||
new Portal(95,561,2,989,694,0), //out map 2
|
||||
new Portal(569,828,3,1152,519,0)];//out map 3
|
||||
|
||||
let map0Squares = [new Square(1064,371,0,126,125),new Square(1160,113,0,143,126),new Square(1017,113,0,146,80),new Square(1018,192,0,10,47),new Square(1028,227,0,45,12),new Square(1101,227,0,66,12),new Square(791,113,0,176,126),new Square(522,129,0,103,13),new Square(654,128,0,104,15),new Square(747,144,0,12,34),new Square(748,194,0,10,44),new Square(655,224,0,101,15),new Square(520,227,0,106,13),new Square(522,195,0,11,39),new Square(522,131,0,8,46),new Square(588,154,0,10,22),new Square(651,153,0,10,21),new Square(698,188,0,12,19),new Square(697,373,0,318,124),new Square(697,497,0,158,112),new Square(1001,629,0,188,155),new Square(696,626,0,159,158),new Square(281,627,0,173,156),new Square(168,243,0,61,250),new Square(229,259,0,87,218),new Square(311,242,0,62,254),new Square(296,112,0,79,95),new Square(2,0,0,1350,14),new Square(1337,2,0,130,927),new Square(119,909,0,1250,17),new Square(4,1,0,129,923),new Square(543,156,0,16,18),new Square(559,207,0,16,17),new Square(598,179,0,17,29),new Square(721,157,0,13,17),new Square(673,205,0,14,17)];
|
||||
let map1Squares = [new Square(1,0,1,1020,160),new Square(868,48,1,153,969),new Square(2,838,1,1019,182),new Square(1,0,1,148,998)];
|
||||
let map2Squares = [new Square(25,936,2,989,83),new Square(1,1,2,98,974),new Square(5,8,2,1002,250),new Square(941,10,2,80,1002),new Square(816,617,2,146,168),new Square(764,252,2,48,214),new Square(805,282,2,154,92),new Square(406,233,2,195,166),new Square(94,418,2,155,88),new Square(94,277,2,127,68),new Square(198,762,2,60,103),new Square(225,880,2,53,30),new Square(116,854,2,35,32)];
|
||||
let map3Squares = [new Square(19,836,3,857,48),new Square(706,324,3,180,531),new Square(640,321,3,75,168),new Square(832,10,3,60,325),new Square(3,2,3,843,165),new Square(354,48,3,90,302),new Square(256,321,3,287,165),new Square(1,1,3,62,374),new Square(51,320,3,109,157),new Square(4,434,3,90,436),new Square(146,680,3,124,71),new Square(92,754,3,32,88),new Square(290,554,3,220,36),new Square(708,150,3,87,68),new Square(323,206,3,39,59),new Square(50,127,3,72,93),new Square(448,648,3,61,44),new Square(578,645,3,92,45),new Square(802,236,3,36,60)];
|
||||
|
||||
let maps = [new Game_Map(portals.slice(0,8),0,map0Squares,[]),
|
||||
new Game_Map(portals.slice(8,9),1,map1Squares,[]),
|
||||
new Game_Map(portals.slice(9,10),2,map2Squares,[]),
|
||||
new Game_Map(portals.slice(10,11),3,map3Squares,[])];
|
||||
|
||||
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;
|
||||
if(data.z==undefined)
|
||||
player.z=0;
|
||||
else
|
||||
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)
|
||||
players[i].z=0;
|
||||
else
|
||||
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++;
|
||||
}
|
||||
if(player.id==idKilled){
|
||||
player.death++;
|
||||
}
|
||||
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(maps[bullets[i].z].squares,maps[bullets[i].z].circles);
|
||||
if(bullets[i].deleted)
|
||||
{
|
||||
bullets.splice(i,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +1,50 @@
|
|||
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.canvas = document.getElementById(idCanvas);
|
||||
this.mouseX = 0
|
||||
this.mouseY = 0
|
||||
|
||||
//for debug/creation of collisions only
|
||||
this.dmx=0;
|
||||
this.dmy=0;
|
||||
this.parity=true;
|
||||
this.toPrint="";
|
||||
//
|
||||
this.network = net
|
||||
|
||||
// Event listener pour la position de la souris
|
||||
|
||||
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.parity){ ////// to create collisions for a map
|
||||
// this.dmx=Math.round(mouseX);
|
||||
// this.dmy=Math.round(mouseY);
|
||||
// this.parity=!this.parity;
|
||||
//}else{
|
||||
// let mx = Math.round((e.clientX - bounds.x)*this.canvas.width/bounds.width);
|
||||
// let my = Math.round((e.clientY - bounds.y)*this.canvas.height/bounds.height);
|
||||
// let x = Math.min(mx,this.dmx);
|
||||
// let y = Math.min(my,this.dmy);
|
||||
// let w = Math.abs(mx-this.dmx);
|
||||
// let h = Math.abs(my-this.dmy);
|
||||
// this.toPrint+="new Square("+x.toString()+","+y.toString()+","+player.z.toString()+","+w.toString()+","+h.toString()+"),";
|
||||
// navigator.clipboard.writeText(this.toPrint);
|
||||
// maps[player.z].squares.push(new Square(x,y,player.z,w,h));
|
||||
// this.parity=!this.parity;
|
||||
//}
|
||||
|
||||
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')){
|
||||
|
|
@ -101,7 +65,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;
|
||||
|
|
@ -111,14 +75,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,49 +1,50 @@
|
|||
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));
|
||||
console.log(this.sound)
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -59,6 +60,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}}));
|
||||
}
|
||||
|
||||
|
|
@ -69,12 +71,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,135 +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")
|
||||
});
|
||||
document.getElementById("appli-utube").addEventListener("click", (e) => {
|
||||
this.webviewName = "uTube"
|
||||
this.changeWindow("assets/phone/webview/utube.html")
|
||||
});
|
||||
document.getElementById("appli-goo").addEventListener("click", (e) => {
|
||||
this.webviewName = "Gogole"
|
||||
this.changeWindow("https://mrdoob.com/projects/chromeexperiments/google-space/")
|
||||
});
|
||||
}
|
||||
|
||||
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,164 +1,101 @@
|
|||
let drawPortals = true;
|
||||
let drawCollisions = false;
|
||||
|
||||
const imgPlayer = new Image();
|
||||
const imgBullet = new Image();
|
||||
const imgCar = new Image();
|
||||
const imgPnj = new Image();
|
||||
const imgPnj2 = new Image();
|
||||
const map0 = new Image();
|
||||
const map0_night = new Image();
|
||||
const map1 = new Image();
|
||||
const map2 = new Image();
|
||||
const map3 = new Image();
|
||||
const orange_portal = new Image();
|
||||
const blue_portal = new Image();
|
||||
imgPlayer.src = "./assets/body.png";
|
||||
imgBullet.src = "./assets/bullet2.png";
|
||||
imgBullet.src = "./assets/bullet.png";
|
||||
imgCar.src = "./assets/car.png";
|
||||
imgPnj.src = "./assets/pnj.png";
|
||||
imgPnj2.src = "./assets/pnj1.png";
|
||||
map0.src = "./assets/map/map_principale.png"
|
||||
map0_night.src = "./assets/map/map_principale_nuit.png"
|
||||
map1.src = "./assets/map/map1.png";
|
||||
map2.src = "./assets/map/map2.png";
|
||||
map3.src = "./assets/map/map3.png";
|
||||
orange_portal.src = "./assets/orange_portal.webp";
|
||||
blue_portal.src = "./assets/blue_portal.webp";
|
||||
|
||||
const mapImages = [map0,map1,map2,map3];
|
||||
|
||||
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.ReloadAff();
|
||||
this.playerid=0;
|
||||
}
|
||||
|
||||
RenderPlayer(p,isClient) {
|
||||
if(p==null)
|
||||
return;
|
||||
let x=p.x
|
||||
let y=p.y
|
||||
SetPlayerId(id) {
|
||||
this.playerid=id
|
||||
}
|
||||
|
||||
if(p.z==player.z)
|
||||
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++)
|
||||
{
|
||||
this.ctx.save();
|
||||
this.ctx.translate(x, y);
|
||||
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(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, p.health*(playerSize+10)/defaulthealth, 5);
|
||||
}
|
||||
if(this.players[i].id==id)
|
||||
{
|
||||
this.players.splice(i,1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RenderCar(x,y,z,angle) {
|
||||
if(z==player.z) {
|
||||
this.ctx.save();
|
||||
this.ctx.translate(x, y);
|
||||
this.ctx.rotate(angle);
|
||||
this.ctx.drawImage(imgCar, -carSize*1513/750 / 2, -carSize / 2, carSize*1513/750, carSize);
|
||||
this.ctx.restore();
|
||||
}
|
||||
RenderPlayer(player) {
|
||||
this.ctx.save();
|
||||
this.ctx.translate(player.x, player.y);
|
||||
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(player.name,player.x-player.name.length*10/3,player.y-playerSize/1.8);
|
||||
if(player.id==this.playerid) {
|
||||
this.ctx.fillStyle = 'red';
|
||||
this.ctx.fillRect(player.x-playerSize/2-5, player.y-playerSize/2, playerSize+10, 5);
|
||||
this.ctx.fillStyle = '#7AFF33';
|
||||
this.ctx.fillRect(player.x-playerSize/2-5, player.y-playerSize/2, player.health*(playerSize+10)/defaulthealth, 5);
|
||||
}
|
||||
}
|
||||
|
||||
RenderBullet(x,y,z) {
|
||||
if(z==player.z)
|
||||
{
|
||||
this.ctx.save();
|
||||
this.ctx.translate(x, y);
|
||||
this.ctx.drawImage(imgBullet, -10 / 2, -10 / 2, 10, 10);
|
||||
this.ctx.restore();
|
||||
}
|
||||
RenderCar(x,y,angle) {
|
||||
this.ctx.save();
|
||||
this.ctx.translate(x, y);
|
||||
this.ctx.rotate(angle);
|
||||
this.ctx.drawImage(imgCar, -carSize*1513/750 / 2, -carSize / 2, carSize*1513/750, carSize);
|
||||
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();
|
||||
RenderBullet(bullet) {
|
||||
this.ctx.save();
|
||||
this.ctx.translate(bullet.x, bullet.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 = map0;
|
||||
}else{
|
||||
background = map0_night;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
background=mapImages[Math.min(player.z,3)];
|
||||
}
|
||||
|
||||
let mapWidth = background.width;
|
||||
let mapHeight = background.height;
|
||||
/*this.ctx.fillStyle = "red";
|
||||
this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
|
||||
*/
|
||||
const fond = new Image();
|
||||
fond.src = this.mapsrc;
|
||||
mapWidth = fond.width;
|
||||
mapHeith = fond.height;
|
||||
this.ctx.canvas.width = mapWidth;
|
||||
this.ctx.canvas.height = mapHeight;
|
||||
this.ctx.drawImage(background, 0, 0, mapWidth, mapHeight);
|
||||
this.RenderPlayer(player,true);
|
||||
|
||||
if(drawCollisions)
|
||||
{
|
||||
maps[player.z].squares.forEach((s) => {
|
||||
this.ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
|
||||
this.ctx.fillRect(s.x,s.y,s.w,s.h);
|
||||
});
|
||||
}
|
||||
|
||||
cars.forEach((car) => {
|
||||
this.RenderCar(car.x,car.y,0,car.angle+(car.drift>0?car.drift/150:0)); // lerp(f(t))
|
||||
});
|
||||
players.forEach((player) => {
|
||||
this.RenderPlayer(player,false);
|
||||
this.ctx.canvas.height = mapHeith;
|
||||
this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith);
|
||||
this.players.forEach((player) => {
|
||||
this.RenderPlayer(player);
|
||||
})
|
||||
bullets.forEach((bullet) => {
|
||||
this.RenderBullet(bullet.x,bullet.y,bullet.z);
|
||||
this.bullets.forEach((bullet) => {
|
||||
this.RenderBullet(bullet);
|
||||
});
|
||||
PNJS.forEach((pnj)=>{
|
||||
this.RenderPnj(pnj.x, pnj.y, pnj.z, (pnj.dir-1)*Math.PI/4, pnj.dir!=0);
|
||||
})
|
||||
if(drawPortals)
|
||||
{
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,25 @@
|
|||
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(){
|
||||
console.log(this.assetsUrl + "shoot.mp3")
|
||||
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()
|
||||
}
|
||||
}
|
||||
220
server/server.js
220
server/server.js
|
|
@ -1,49 +1,66 @@
|
|||
const https = require('https').createServer;
|
||||
const express = require('express');
|
||||
const http = require('http');
|
||||
const WebSocket = require('ws');
|
||||
const url = require('url');
|
||||
const fs = require('fs');
|
||||
const objectsModule = require('./objects');
|
||||
|
||||
|
||||
|
||||
const options = {
|
||||
cert: fs.readFileSync("/home/ubuntu/servers/keys/gta6/cert.pem"),
|
||||
key: fs.readFileSync("/home/ubuntu/servers/keys/gta6/privkey.pem")
|
||||
};
|
||||
|
||||
const server = https(options, (req, res)=>{
|
||||
res.end("Grand Tabernacle Auto 6")
|
||||
});
|
||||
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
const wss = new WebSocket.Server({
|
||||
server
|
||||
});
|
||||
|
||||
|
||||
|
||||
const spawnPoints = [{"x":218,"y":193},{"x":601,"y":715},{"x":1264,"y":57},{"x":274,"y":506},{"x":921,"y":854},{"x":1041,"y":442},{"x":638,"y":124},{"x":483,"y":436}]
|
||||
const connections = new Set();
|
||||
var playerCount = 0;
|
||||
var players = []
|
||||
|
||||
const NAME_MAXLEN = 25;
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.send('Grand Tabernacle Auto VI');
|
||||
});
|
||||
|
||||
|
||||
function generatePosition() {
|
||||
let index = Math.floor(Math.random()*spawnPoints.length);
|
||||
return [spawnPoints[index].x, spawnPoints[index].y];
|
||||
function norm(x1, x2, y1, y2) {
|
||||
return Math.sqrt((x1 - x2) ** 2 + (y1 + y2) ** 2);
|
||||
}
|
||||
|
||||
function getUsername(req){
|
||||
let username = url.parse(req.url, true).query.name;
|
||||
if (username === undefined || username == null || username == "null") {
|
||||
username = "Soldat Inconnu"
|
||||
function circleCollide(x, y) {
|
||||
let colliding = false;
|
||||
objectsModule.objects.circles.forEach((circle) => {
|
||||
if (norm(x, circle.x, y, circle.y) <= circle.r) {
|
||||
colliding = true;
|
||||
}
|
||||
})
|
||||
return colliding;
|
||||
}
|
||||
|
||||
function squareCollide(x, y) {
|
||||
let colliding = false;
|
||||
objectsModule.objects.squares.forEach((square) => {
|
||||
if (square.x <= x && x <= square.x + square.w && square.y <= y && y <= square.y + square.h) {
|
||||
colliding = true;
|
||||
}
|
||||
})
|
||||
return colliding;
|
||||
}
|
||||
|
||||
function generatePosition() {
|
||||
let mapWidth = 1000;
|
||||
let mapHeight = 1000;
|
||||
let count = 0;
|
||||
|
||||
let x = Math.floor(Math.random() * mapWidth);
|
||||
let y = Math.floor(Math.random() * mapHeight);
|
||||
|
||||
while ((circleCollide(x, y) || squareCollide(x, y))) {
|
||||
x = Math.floor(Math.random() * mapWidth);
|
||||
y = Math.floor(Math.random() * mapHeight);
|
||||
count++;
|
||||
if (count >= 1000) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (username.length > NAME_MAXLEN) {
|
||||
username = username.substring(0, NAME_MAXLEN);
|
||||
}
|
||||
return username;
|
||||
return [x, y];
|
||||
}
|
||||
|
||||
function createNewPlayer(socket, name) {
|
||||
|
|
@ -76,54 +93,74 @@ function createNewPlayer(socket, name) {
|
|||
connections.add(socket);
|
||||
}
|
||||
|
||||
function update(message, socket){
|
||||
for (var i = players.length - 1; i >= 0; i--) {
|
||||
if (players[i].id == message.data.id) {
|
||||
players[i] = message.data;
|
||||
}
|
||||
wss.on('connection', (socket, req) => {
|
||||
//create new player, send informations to new player and broadcast new player for all
|
||||
let username = url.parse(req.url, true).query.name;
|
||||
if (username === undefined || username == null || username == "null") {
|
||||
username = "Soldat Inconnu"
|
||||
}
|
||||
broadcast(JSON.stringify(message), socket.id);
|
||||
}
|
||||
if (username.length > NAME_MAXLEN) {
|
||||
username = username.substring(0, NAME_MAXLEN);
|
||||
}
|
||||
createNewPlayer(socket, username);
|
||||
|
||||
function newBullet(message, socket){
|
||||
broadcast(JSON.stringify(message), socket.id);
|
||||
}
|
||||
socket.on('message', (message) => {
|
||||
message = JSON.parse(message);
|
||||
switch (message.type) {
|
||||
case 'ping':
|
||||
socket.send("pong");
|
||||
break;
|
||||
|
||||
function died(message, socket){
|
||||
broadcast(JSON.stringify(message), socket.id);
|
||||
for (var i = players.length - 1; i >= 0; i--) {
|
||||
case "update":
|
||||
for (var i = players.length - 1; i >= 0; i--) {
|
||||
if (players[i].id == message.data.id) {
|
||||
players[i] = message.data;
|
||||
}
|
||||
}
|
||||
broadcast(JSON.stringify(message), socket.id);
|
||||
break;
|
||||
|
||||
if (players[i].id == message.data.id) {
|
||||
let pos = generatePosition();
|
||||
players[i].x = pos[0];
|
||||
players[i].y = pos[1];
|
||||
case "newBullet":
|
||||
broadcast(JSON.stringify(message), socket.id);
|
||||
break;
|
||||
|
||||
case "died":
|
||||
broadcast(JSON.stringify(message), socket.id);
|
||||
for (var i = players.length - 1; i >= 0; i--) {
|
||||
|
||||
if (players[i].id == message.data.id) {
|
||||
let pos = generatePosition();
|
||||
players[i].x = pos[0];
|
||||
players[i].y = pos[1];
|
||||
|
||||
broadcast(JSON.stringify({
|
||||
type: "update",
|
||||
data: players[i]
|
||||
}))
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('close', () => {
|
||||
for (var i = players.length - 1; i >= 0; i--) {
|
||||
broadcast(JSON.stringify({
|
||||
type: "update",
|
||||
data: players[i]
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function deletePlayer(socket){
|
||||
for (var i = players.length - 1; i >= 0; i--) {
|
||||
broadcast(JSON.stringify({
|
||||
type: "removePlayer",
|
||||
data: {
|
||||
id: socket.id
|
||||
type: "removePlayer",
|
||||
data: {
|
||||
id: socket.id
|
||||
}
|
||||
}));
|
||||
if (players[i].id == socket.id) {
|
||||
players.splice(i, 1);
|
||||
}
|
||||
}));
|
||||
if (players[i].id == socket.id) {
|
||||
players.splice(i, 1);
|
||||
}
|
||||
}
|
||||
connections.delete(socket);
|
||||
}
|
||||
|
||||
function recievemessage(msg, socket){
|
||||
broadcast(JSON.stringify(msg), socket.id);
|
||||
}
|
||||
connections.delete(socket);
|
||||
});
|
||||
});
|
||||
|
||||
function broadcast(message, exceptId = -1) {
|
||||
connections.forEach((socket) => {
|
||||
|
|
@ -133,53 +170,8 @@ function broadcast(message, exceptId = -1) {
|
|||
});
|
||||
}
|
||||
|
||||
wss.on('connection', (socket, req) => {
|
||||
//create new player, send informations to new player and broadcast new player for all
|
||||
let username = getUsername(req);
|
||||
createNewPlayer(socket, username);
|
||||
|
||||
//handle client's messages
|
||||
socket.on('message', (message) => {
|
||||
try{
|
||||
message = JSON.parse(message);
|
||||
switch (message.type) {
|
||||
case 'ping':
|
||||
socket.send("pong");
|
||||
break;
|
||||
|
||||
case "update":
|
||||
update(message, socket);
|
||||
break;
|
||||
|
||||
case "newBullet":
|
||||
newBullet(message, socket);
|
||||
break;
|
||||
|
||||
case "died":
|
||||
died(message, socket);
|
||||
break;
|
||||
|
||||
case "message":
|
||||
recievemessage(message, socket);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}catch(e){
|
||||
console.log('error');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//handle disconnecting
|
||||
socket.on('close', () => {
|
||||
deletePlayer(socket);
|
||||
});
|
||||
});
|
||||
|
||||
const PORT = 8080;
|
||||
|
||||
server.listen(PORT, () => {
|
||||
console.log(`WebSocket listening on port ${PORT}.`);
|
||||
console.log(`Serveur WebSocket écoutant sur le port ${PORT}`);
|
||||
});
|
||||
|
|
@ -2,7 +2,7 @@ var ctx = document.getElementById("canvas").getContext("2d");
|
|||
var cv = document.getElementById("canvas");
|
||||
|
||||
const fond = new Image();
|
||||
fond.src = "../../public_html/assets/map/map_principale.png";
|
||||
fond.src = "../../assets/map/map7_recadr.png";
|
||||
var mapWidth = fond.width
|
||||
var mapHeith = fond.height
|
||||
ctx.canvas.width = mapWidth
|
||||
|
|
|
|||
Loading…
Reference in a new issue