Compare commits
87 commits
aaf755a871
...
f9a5ffbe45
Author | SHA1 | Date | |
---|---|---|---|
|
f9a5ffbe45 | ||
|
6f8f16db30 | ||
|
f2fd427483 | ||
|
6d8261cc94 | ||
45df158980 | |||
da84ad04fe | |||
|
89b277111a | ||
|
49b578405e | ||
|
5da12aea1a | ||
|
8592e8eece | ||
|
6f94d2a6cb | ||
|
b76d85c773 | ||
|
9589907cb9 | ||
|
700d571b9f | ||
|
8fd6b7f7d8 | ||
|
76d52eeaa7 | ||
|
2d98ff1f58 | ||
|
6b0e00d1f9 | ||
|
bbeb66ff83 | ||
85690cf305 | |||
655ccde173 | |||
e907afa4de | |||
0b89679d4a | |||
|
291b41553e | ||
|
f6cd4c30b7 | ||
|
cdcbfb4102 | ||
|
5060d0594d | ||
|
a7014b48ec | ||
|
9f88b162ea | ||
|
7411743481 | ||
|
da44834191 | ||
|
6250f367ef | ||
|
b4cd2a8517 | ||
|
1c220d8950 | ||
|
f6cbebe532 | ||
|
5e83426ebd | ||
|
3f811fca5d | ||
|
df7db329c5 | ||
|
d0a3a207bd | ||
|
f9205c0849 | ||
|
5546f3dc6e | ||
|
50a47fcf6d | ||
|
862fee0cf3 | ||
|
fc3f261030 | ||
|
8555a4cb38 | ||
|
506cc28899 | ||
|
ac31e08b01 | ||
68539426a7 | |||
|
cc5d19ea91 | ||
|
539ccd2213 | ||
1ef94e22df | |||
|
3b939ae37e | ||
|
f6bdd4b51d | ||
|
565f6d4c19 | ||
|
b7e546c67f | ||
|
8f337c1960 | ||
|
bd2195de5f | ||
|
491195e7d3 | ||
|
c1bb21a291 | ||
|
3f3dc185b9 | ||
|
c7cbc8b9ba | ||
|
7cd3c8e8dd | ||
|
45902fd0f1 | ||
eec1013c6c | |||
3103b0974f | |||
a99fca358f | |||
7ab6ed5262 | |||
|
17357ee472 | ||
|
41b830e179 | ||
|
1c9a2b9702 | ||
|
1fe8d6befd | ||
|
022ee45637 | ||
|
8e79098a63 | ||
|
f0817769a4 | ||
|
4ab6f5da50 | ||
|
b4b3e4142e | ||
|
76eaa2e262 | ||
|
3bde151ff3 | ||
|
01f2e1d983 | ||
|
20ba98fa72 | ||
|
b4541b2698 | ||
|
dd0edfe290 | ||
|
f1592aa542 | ||
|
c2b0cf43d7 | ||
|
bf703acd56 | ||
|
b12548d46b | ||
|
07fdebfcd8 |
BIN
public_html/assets/PNJS
Normal file
BIN
public_html/assets/blue_portal.webp
Normal file
After Width: | Height: | Size: 432 B |
BIN
public_html/assets/bullet2.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
public_html/assets/concord_images/carrey.jpg
Normal file
After Width: | Height: | Size: 99 KiB |
BIN
public_html/assets/concord_images/elon.jpg
Normal file
After Width: | Height: | Size: 82 KiB |
BIN
public_html/assets/concord_images/esquirol.jpg
Normal file
After Width: | Height: | Size: 6.1 KiB |
BIN
public_html/assets/concord_images/gournay.jpg
Normal file
After Width: | Height: | Size: 3.9 KiB |
BIN
public_html/assets/concord_images/jyf.jpg
Normal file
After Width: | Height: | Size: 5 KiB |
BIN
public_html/assets/concord_images/lepen.jpg
Normal file
After Width: | Height: | Size: 4.1 MiB |
BIN
public_html/assets/concord_images/macron.jpg
Normal file
After Width: | Height: | Size: 192 KiB |
BIN
public_html/assets/concord_images/melanchon.jpg
Normal file
After Width: | Height: | Size: 68 KiB |
BIN
public_html/assets/concord_images/melanchon.png
Normal file
After Width: | Height: | Size: 370 KiB |
BIN
public_html/assets/concord_images/nicomette.jpg
Normal file
After Width: | Height: | Size: 9.5 KiB |
BIN
public_html/assets/concord_images/patrickseb.jpg
Normal file
After Width: | Height: | Size: 87 KiB |
BIN
public_html/assets/concord_images/poutine.jpg
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
public_html/assets/concord_images/raquet.jpg
Normal file
After Width: | Height: | Size: 41 KiB |
BIN
public_html/assets/concord_images/rebillard.jpg
Normal file
After Width: | Height: | Size: 605 KiB |
BIN
public_html/assets/concord_images/trump.jpg
Normal file
After Width: | Height: | Size: 17 KiB |
BIN
public_html/assets/concord_images/vieu.jpg
Normal file
After Width: | Height: | Size: 790 KiB |
BIN
public_html/assets/concord_images/zemmour.jpg
Normal file
After Width: | Height: | Size: 115 KiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
BIN
public_html/assets/map/map2.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
public_html/assets/map/map3.png
Normal file
After Width: | Height: | Size: 231 KiB |
Before Width: | Height: | Size: 520 KiB After Width: | Height: | Size: 520 KiB |
BIN
public_html/assets/map/map_principale_nuit.jpeg
Normal file
After Width: | Height: | Size: 248 KiB |
BIN
public_html/assets/map/map_principale_nuit.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
public_html/assets/map/map_principale_plage.png
Normal file
After Width: | Height: | Size: 818 KiB |
BIN
public_html/assets/orange_portal.webp
Normal file
After Width: | Height: | Size: 504 B |
BIN
public_html/assets/phone.png
Normal file
After Width: | Height: | Size: 7.6 KiB |
BIN
public_html/assets/phone/concord.png
Normal file
After Width: | Height: | Size: 81 KiB |
BIN
public_html/assets/phone/facebook.png
Normal file
After Width: | Height: | Size: 338 KiB |
BIN
public_html/assets/phone/fond_ecran.jpeg
Normal file
After Width: | Height: | Size: 9.8 KiB |
BIN
public_html/assets/phone/fond_ecran.jpg
Normal file
After Width: | Height: | Size: 959 KiB |
BIN
public_html/assets/phone/gogole.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
public_html/assets/phone/utube.png
Normal file
After Width: | Height: | Size: 48 KiB |
BIN
public_html/assets/phone/vbucks.webp
Normal file
After Width: | Height: | Size: 23 KiB |
11
public_html/assets/phone/webview/fb.html
Normal file
|
@ -0,0 +1,11 @@
|
|||
<!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>
|
BIN
public_html/assets/phone/webview/free_vbucks.jpeg
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
public_html/assets/phone/webview/hairinsa.png
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
public_html/assets/phone/webview/rickroll.gif
Normal file
After Width: | Height: | Size: 5.7 MiB |
19
public_html/assets/phone/webview/utube.html
Normal file
|
@ -0,0 +1,19 @@
|
|||
<!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>
|
17
public_html/assets/phone/webview/vbucks.html
Normal file
|
@ -0,0 +1,17 @@
|
|||
<!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>
|
BIN
public_html/assets/pnj.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
public_html/assets/pnj1.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
public_html/assets/water_background.jpg
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
public_html/assets/water_background2.jpg
Normal file
After Width: | Height: | Size: 49 KiB |
133
public_html/css/game.css
Normal file
|
@ -0,0 +1,133 @@
|
|||
html, body{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background-color: #2b2c2e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#canvas{
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
#phoneContainer.hidden{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
#phoneContainer.visible{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 5%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#phoneDiv{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#phone{
|
||||
width: 200px;
|
||||
}
|
||||
#phoneScreen{
|
||||
background-color: #322b2a;
|
||||
position: absolute;
|
||||
left: 7%;
|
||||
top: 12%;
|
||||
right: 7%;
|
||||
bottom: 13%;
|
||||
}
|
||||
|
||||
#chatHeader{
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid black;
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: 7%;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
background-color: #232120 ;
|
||||
}
|
||||
|
||||
#chatHeader > p{
|
||||
line-height: 10%;
|
||||
}
|
||||
|
||||
#chatMessages{
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
|
||||
#chatMessages::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chatInputDiv{
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#chatInput{
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
border: 1px solid black;
|
||||
color: white;
|
||||
padding-left: 10px;
|
||||
height: 85%;
|
||||
margin-bottom: 15%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.message{
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
margin: 3%;
|
||||
}
|
||||
|
||||
.messageTitle{
|
||||
font-size: 75%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.messageContent{
|
||||
margin: 0px;
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
.messageImage{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content {
|
||||
height:90%;
|
||||
width:100%;
|
||||
background-image: url("../assets/phone/fond_ecran.jpeg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-color: rgba(0,0,0, 0.7);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
margin: 3.5px;
|
||||
margin-right: 0;
|
||||
display: inline-block;
|
||||
cursor:pointer;
|
||||
}
|
|
@ -2,16 +2,56 @@
|
|||
<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" style="border: 1px;"></canvas>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
@ -1,22 +1,24 @@
|
|||
let mapWidth = 210.;
|
||||
let mapHeith = 100.;
|
||||
const playerSize = 50.;
|
||||
const carSize = 40.;
|
||||
const playerSpeed=.2;
|
||||
const PNJSpeed=.02;
|
||||
const bulletSpeed=playerSpeed*2;
|
||||
const halfSqrtTwo=0.70710678118;
|
||||
const defaulthealth=10.;
|
||||
const defaulthealth=10;
|
||||
const portalSize=40;
|
||||
const affPortal = true;
|
||||
|
||||
class Player
|
||||
{
|
||||
constructor (id,x,y,name, dir)
|
||||
constructor (id,x,y,z,name,dir)
|
||||
{
|
||||
this.name=name;
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.z=z;//correspond to the map. Ex: 0=>main; 1=>arena
|
||||
this.id=id;
|
||||
this.visibleDir=1;
|
||||
this.dir=dir;//0=standStill
|
||||
this.dir=dir;//0=stand Still
|
||||
//1=North
|
||||
//2=North-East
|
||||
//3=East
|
||||
|
@ -31,28 +33,17 @@ class Player
|
|||
this.death=0;
|
||||
}
|
||||
|
||||
takeDamage(amount,killerId,network)
|
||||
takeDamage(amount,killerId)
|
||||
{
|
||||
this.health-=amount;
|
||||
if(this.health<=0)
|
||||
{
|
||||
this.death++;
|
||||
network.died(this.id,killerId);
|
||||
this.health=10;
|
||||
}
|
||||
}
|
||||
this.health=defaulthealth;
|
||||
|
||||
/*retrieveServerInfo(id,x,y,dir)
|
||||
{
|
||||
if(this.id==id)
|
||||
{
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.dir=dir;
|
||||
if(dir!=0)
|
||||
this.visibleDir=dir;
|
||||
net.died(this.id,killerId);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
changeDirection(newDirection){
|
||||
this.dir = newDirection;
|
||||
|
@ -83,7 +74,7 @@ class Player
|
|||
this.y += dy*dt;
|
||||
|
||||
squares.forEach(square => {
|
||||
if(square.collide(this))
|
||||
if(square.collide(this.x,this.y,this.z))
|
||||
{
|
||||
this.x-=dx*dt;
|
||||
this.y-=dy*dt;
|
||||
|
@ -93,7 +84,7 @@ class Player
|
|||
});
|
||||
|
||||
circles.forEach(circle => {
|
||||
if(circle.collide(this))
|
||||
if(circle.collide(this.x,this.y,this.z))
|
||||
{
|
||||
this.x-=dx*dt;
|
||||
this.y-=dy*dt;
|
||||
|
@ -111,15 +102,17 @@ class Player
|
|||
|
||||
class Bullet
|
||||
{
|
||||
constructor (x,y,dx,dy,id, sound)
|
||||
constructor (x,y,z,dx,dy,id)
|
||||
{
|
||||
sound.shoot();
|
||||
if(z==player.z)
|
||||
bulletSound.play();
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.z=z;
|
||||
this.dx=dx;
|
||||
this.dy=dy;
|
||||
this.deleted=false;
|
||||
this.parentId=id;
|
||||
this.deleted=(z<0);
|
||||
this.shooterId=id;
|
||||
}
|
||||
|
||||
update(dt)
|
||||
|
@ -131,76 +124,75 @@ class Bullet
|
|||
}
|
||||
}
|
||||
|
||||
checkCollisions(player,squares,circles,network)//only the client's player /!\
|
||||
checkCollisions(squares,circles)//only the client's player /!\
|
||||
{
|
||||
if(!this.deleted)
|
||||
if(this.deleted)
|
||||
return;
|
||||
|
||||
if(player!=null && player.z==this.z && player.id!=this.shooterId && Math.sqrt((player.x-this.x)**2+(player.y-this.y)**2)<playerSize/2)
|
||||
{
|
||||
if(player!=null && player.id!=this.parentId && Math.sqrt((player.x-this.x)**2+(player.y-this.y)**2)<playerSize/2)
|
||||
{
|
||||
player.takeDamage(1,this.parentId,network);
|
||||
player.takeDamage(1,this.shooterId);
|
||||
this.deleted=true;
|
||||
return;
|
||||
}
|
||||
|
||||
squares.forEach((square) => {
|
||||
if(square.collide(this))
|
||||
if(square.collide(this.x,this.y,this.z))
|
||||
{
|
||||
this.deleted=true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
circles.forEach((circle) => {
|
||||
if(circle.collide(this))
|
||||
if(circle.collide(this.x,this.y,this.z))
|
||||
{
|
||||
this.deleted=true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class Square
|
||||
{
|
||||
constructor(x,y,width,heigth)
|
||||
constructor(x,y,z,width,heigth)
|
||||
{
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.z=z;
|
||||
this.w=width;
|
||||
this.h=heigth;
|
||||
}
|
||||
|
||||
collide(point)
|
||||
collide(x,y,z)
|
||||
{
|
||||
return (this.x<=point.x && point.x<=this.x+this.w && this.y<=point.y && point.y<=this.y+this.h);
|
||||
return this.z==z && this.x<=x && x<=this.x+this.w && this.y<=y && y<=this.y+this.h;
|
||||
}
|
||||
}
|
||||
|
||||
class Circle
|
||||
{
|
||||
constructor(x,y,radius)
|
||||
constructor(x,y,z,radius)
|
||||
{
|
||||
this.x=x;
|
||||
this.y=y;
|
||||
this.z=z;
|
||||
this.r=radius;
|
||||
}
|
||||
|
||||
collide(point)
|
||||
collide(x,y,z)
|
||||
{
|
||||
return ((point.x-this.x)**2+(point.y-this.y)**2<=this.r**2);
|
||||
return this.z==z && (x-this.x)**2+(y-this.y)**2 <= this.r**2;
|
||||
}
|
||||
}
|
||||
|
||||
class Car
|
||||
{
|
||||
constructor(Renderer, type, spawn, sound)
|
||||
constructor(type, spawn)
|
||||
{
|
||||
this.sound=sound
|
||||
this.type=type // 0 circule vers le haut
|
||||
this.type=type; // 0 circule vers le haut
|
||||
// 1 circule vers le bas
|
||||
|
||||
this.z=0;
|
||||
if(this.type == 1) { //vers le bas
|
||||
this.x=1247;
|
||||
this.y=-40;
|
||||
|
@ -215,34 +207,35 @@ class Car
|
|||
|
||||
this.drift=0;
|
||||
|
||||
this.spawn=spawn
|
||||
this.spawn=spawn;
|
||||
|
||||
this.tick=0;
|
||||
this.Renderer=Renderer;
|
||||
//1247,-40
|
||||
//947,1000
|
||||
}
|
||||
|
||||
collide(x,y)
|
||||
collide(x,y,z)
|
||||
{
|
||||
if(this.z!=z) {
|
||||
return false;
|
||||
}
|
||||
let cx=this.x-carSize/2;
|
||||
let cy=this.y-carSize/2;
|
||||
let collide = (cx<=x && x<=cx+carSize && cy<=y && y<=cy+carSize);
|
||||
if(collide) {
|
||||
this.sound.drift()
|
||||
this.drift=300;
|
||||
driftSound.play()
|
||||
this.drift=1000;
|
||||
}
|
||||
return collide
|
||||
return collide;
|
||||
}
|
||||
|
||||
Update()
|
||||
Update(dt)
|
||||
{
|
||||
if(this.tick==0) {
|
||||
if(new Date().getSeconds()%20==this.spawn) {
|
||||
this.tick=1
|
||||
if(this.tick==0 && (new Date()).getSeconds()%60==this.spawn) {
|
||||
this.tick=1;
|
||||
}
|
||||
}
|
||||
this.ChangeDirection()
|
||||
|
||||
if(this.tick>0) {
|
||||
this.ChangeDirection();
|
||||
|
||||
switch (this.dir) {
|
||||
case 1:
|
||||
this.x=this.x+this.tick
|
||||
|
@ -258,10 +251,10 @@ class Car
|
|||
break;
|
||||
}
|
||||
if(this.drift > 0) {
|
||||
this.Renderer.RenderCar(this.x,this.y, this.angle+90)
|
||||
this.drift--
|
||||
} else {
|
||||
this.Renderer.RenderCar(this.x,this.y, this.angle)
|
||||
this.drift-=dt;
|
||||
}else{
|
||||
this.drift = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -327,7 +320,9 @@ class Car
|
|||
this.dir=4
|
||||
this.angle=Math.PI/2
|
||||
} else if(this.y>1000) {
|
||||
//tp
|
||||
if(this.drift > 0) {
|
||||
this.drift--
|
||||
} //tp
|
||||
this.x=1247
|
||||
this.y=-40
|
||||
this.tick=0;
|
||||
|
@ -383,3 +378,105 @@ 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());
|
||||
}
|
||||
}
|
10
public_html/js/cookies.js
Normal file
|
@ -0,0 +1,10 @@
|
|||
function getCookie(name) {//Code from OpenClassroom
|
||||
nom = name + "=";
|
||||
var liste = document.cookie.split (';');
|
||||
for (var i = 0; i < liste.length; i++) {
|
||||
var c = liste[i];
|
||||
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
|
||||
if (c.indexOf(nom) == 0) return c.substring(nom.length, c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
|
@ -1,193 +1,43 @@
|
|||
function CookiePseudo() {
|
||||
nom = "pseudo=";
|
||||
var liste = document. cookie. split (';');
|
||||
for (var i = 0; i < liste.length; i++) {
|
||||
var c = liste[i];
|
||||
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
|
||||
if (c.indexOf(nom) == 0) return c.substring(nom.length, c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
Renderer = new Render("canvas", "./assets/map/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);
|
||||
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
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++;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let dt = 0;
|
||||
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)
|
||||
if(player==null)
|
||||
return;
|
||||
|
||||
console.log("Connected as id ",playerId);
|
||||
Inp.player=player;
|
||||
Inp.bullets=bullets;
|
||||
|
||||
players.forEach((p) => {
|
||||
Renderer.AddPlayer(p)
|
||||
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);
|
||||
});
|
||||
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))
|
||||
c.Update(dt);
|
||||
if(c.collide(player.x,player.y,player.z))
|
||||
{
|
||||
Net.died(player.id,-1);
|
||||
player.x=-50;
|
||||
player.deaths++;
|
||||
net.died(player.id,-1);
|
||||
player.z=-1;
|
||||
player.death++;
|
||||
players[0].kill++;
|
||||
player.health=10;
|
||||
}
|
||||
});
|
||||
|
||||
PNJS.forEach((pnj)=>{
|
||||
pnj.update(dt);
|
||||
})
|
||||
|
||||
maps.forEach((m) => {m.update();});
|
||||
|
||||
updateBullets(dt);
|
||||
LB.ReloadAff(players, player);
|
||||
}
|
||||
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);
|
||||
setInterval(game, 16);
|
||||
|
|
130
public_html/js/global.js
Normal file
|
@ -0,0 +1,130 @@
|
|||
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,50 +1,86 @@
|
|||
class Input {
|
||||
constructor(id, net,renderer, sound) {
|
||||
constructor(idCanvas) {
|
||||
this.keysDown = new Set()
|
||||
this.dir = 0;
|
||||
this.player=null;
|
||||
this.bullets=null;
|
||||
this.canvas = document.getElementById(id);
|
||||
this.renderer=renderer;
|
||||
|
||||
this.mouseX = 0
|
||||
this.mouseY = 0
|
||||
this.canvas = document.getElementById(idCanvas);
|
||||
|
||||
this.network = net
|
||||
|
||||
// Event listener pour la position de la souris
|
||||
|
||||
this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
|
||||
//for debug/creation of collisions only
|
||||
this.dmx=0;
|
||||
this.dmy=0;
|
||||
this.parity=true;
|
||||
this.toPrint="";
|
||||
//
|
||||
|
||||
this.canvas.addEventListener("click", (e) => {
|
||||
if(this.player==null || this.bullets==null){
|
||||
if(player==null || bullets==null){
|
||||
return;
|
||||
}
|
||||
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);
|
||||
|
||||
this.bullets.push(b);
|
||||
this.renderer.addBullet(b);
|
||||
this.network.newBullet(b.x,b.y,b.dx,b.dy,b.parentId);
|
||||
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 norm = Math.sqrt(dx*dx+dy*dy);
|
||||
|
||||
let b = new Bullet(player.x,player.y,player.z,dx/norm,dy/norm,player.id);
|
||||
bullets.push(b);
|
||||
net.newBullet(b.x,b.y,b.z,b.dx,b.dy,b.shooterId);
|
||||
});
|
||||
|
||||
window.addEventListener("keydown", (e)=>{
|
||||
//blocks the action of the key (cf. Killian)
|
||||
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.code)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
this.keysDown.add(e.key.toLowerCase())
|
||||
this.updateDir();
|
||||
})
|
||||
|
||||
document.getElementById("retour_menu").addEventListener("click", (e) => {
|
||||
phone.changeWindow(1)
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", (e)=>{
|
||||
this.keysDown.delete(e.key.toLowerCase())
|
||||
this.updateDir();
|
||||
})
|
||||
|
||||
window.addEventListener("keypress", (e)=>{
|
||||
if(e.key.toLowerCase()=="p"){
|
||||
phone.changePosition();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
updateDir(){
|
||||
if(this.player==null)
|
||||
if(player==null)
|
||||
return;
|
||||
|
||||
let oldDir=this.dir;
|
||||
|
||||
this.dir=0;
|
||||
if(this.keysDown.has('z') || this.keysDown.has('arrowup')){
|
||||
if(this.keysDown.has('d') || this.keysDown.has('arrowright')){
|
||||
|
@ -65,7 +101,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;
|
||||
|
@ -75,23 +111,14 @@ class Input {
|
|||
}
|
||||
if(oldDir!=this.dir)
|
||||
{
|
||||
this.player.changeDirection(this.dir);
|
||||
this.network.update(this.player);
|
||||
player.changeDirection(this.dir);
|
||||
net.update(player);
|
||||
}
|
||||
}
|
||||
|
||||
get getDirection() {
|
||||
return this.dir;
|
||||
}
|
||||
|
||||
handleMouseMove(event) {
|
||||
let mX = event.clientX - this.canvas.getBoundingClientRect().left;
|
||||
let mY = event.clientY - this.canvas.getBoundingClientRect().top;
|
||||
this.mouseX = mX;
|
||||
this.mouseY = mY;
|
||||
}
|
||||
|
||||
/*
|
||||
calculateAngle(playerX, playerY) {
|
||||
return Math.atan2(this.mouseY - playerY, this.mouseX - playerX);
|
||||
}
|
||||
*/
|
||||
}
|
|
@ -1,29 +1,28 @@
|
|||
class LeaderBoard {
|
||||
constructor(id) {
|
||||
this.canvas = document.getElementById(id);
|
||||
constructor(idCanvas) {
|
||||
this.canvas = document.getElementById(idCanvas);
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.nbjoueur=0
|
||||
this.px=10;
|
||||
this.py=10;
|
||||
}
|
||||
|
||||
ReloadAff(players, player) {
|
||||
this.px=10
|
||||
this.py=10
|
||||
this.players=[]
|
||||
ReloadAff() {
|
||||
let LBplayers=[];
|
||||
players.forEach((p) => {
|
||||
if(p != null) {
|
||||
this.players.push(p)
|
||||
LBplayers.push(p);
|
||||
}
|
||||
})
|
||||
this.players.push(player);
|
||||
LBplayers.push(player);
|
||||
|
||||
this.players.sort(function (a, b) {
|
||||
LBplayers.sort(function (a, b) {
|
||||
return b.kill - a.kill;
|
||||
});
|
||||
|
||||
// tableau du leaderboard (le fonc "blanc")
|
||||
this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
|
||||
this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+this.nbjoueur*20);
|
||||
this.nbjoueur=0
|
||||
this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+LBplayers.length*20);
|
||||
this.nbjoueur=0;
|
||||
this.ctx.font = '20px Arial';
|
||||
this.ctx.fillStyle = '#000000';
|
||||
this.ctx.fillText('Leaderboard', this.px+80, this.py+30);
|
||||
|
@ -38,7 +37,7 @@ class LeaderBoard {
|
|||
this.ctx.lineTo(this.px+250, this.py+100);
|
||||
this.ctx.stroke();
|
||||
|
||||
//donné user
|
||||
//donnee user
|
||||
this.ctx.fillStyle = '#000000';
|
||||
this.ctx.font = '15px Arial';
|
||||
this.ctx.fillText('#', this.px+10, this.py+80);
|
||||
|
@ -48,7 +47,7 @@ class LeaderBoard {
|
|||
this.ctx.fillText('K/D', this.px+220, this.py+80);
|
||||
this.ctx.font = '10px Arial';
|
||||
|
||||
this.players.forEach((p) => {
|
||||
LBplayers.forEach((p) => {
|
||||
if(p != null) {
|
||||
this.ctx.fillText((this.nbjoueur+1), this.px+10, this.py+120+20*this.nbjoueur);
|
||||
this.ctx.fillText(p.name, this.px+30, this.py+120+20*this.nbjoueur);
|
||||
|
@ -56,7 +55,7 @@ class LeaderBoard {
|
|||
this.ctx.fillText(p.death, this.px+200, this.py+120+20*this.nbjoueur);
|
||||
this.ctx.fillText(Math.round(10*p.kill/p.death)/10, this.px+220, this.py+120+20*this.nbjoueur);
|
||||
|
||||
this.nbjoueur++
|
||||
this.nbjoueur++;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -1,50 +1,49 @@
|
|||
class Network{
|
||||
constructor(adress, bulletsound){
|
||||
constructor(adress){
|
||||
this.adress = adress;
|
||||
this.connected = false;
|
||||
|
||||
this.playerId = null;
|
||||
this.clientPlayer=null;
|
||||
this.playersToAdd = [];
|
||||
this.playersToRemove = [];
|
||||
this.playersToUpdate = [];
|
||||
this.bulletsToAdd = [];
|
||||
this.deathToAdd = [];
|
||||
this.sound=bulletsound;
|
||||
}
|
||||
|
||||
message(data){
|
||||
switch(data.type){
|
||||
case 'connect':
|
||||
this.playerId = data.data.playerId;
|
||||
for (var i = data.data.players.length - 1; i >= 0; i--) {
|
||||
if(data.data.players[i].id==this.playerId)
|
||||
this.clientPlayer=new Player(data.data.players[i].id, data.data.players[i].x, data.data.players[i].y, data.data.players[i].name, data.data.players[i].dir);
|
||||
for (let i = 0; i<data.data.players.length; i++) {
|
||||
let p = data.data.players[i];
|
||||
if(p.id==this.playerId)
|
||||
player=new Player(p.id,p.x,p.y,0,p.name,p.dir);
|
||||
else
|
||||
this.playersToAdd.push(new Player(data.data.players[i].id, data.data.players[i].x, data.data.players[i].y, data.data.players[i].name, data.data.players[i].dir))
|
||||
players.push(new Player(p.id,p.x,p.y,0,p.name,p.dir));
|
||||
}
|
||||
break;
|
||||
|
||||
case 'update':
|
||||
this.playersToUpdate.push(data.data);
|
||||
updatePlayer(data.data);
|
||||
break;
|
||||
|
||||
case "newplayer":
|
||||
this.playersToAdd.push(new Player(data.data.id, data.data.x, data.data.y, data.data.name, data.data.dir));
|
||||
players.push(new Player(data.data.id, data.data.x, data.data.y, 0, data.data.name, data.data.dir));
|
||||
break;
|
||||
|
||||
case "removePlayer":
|
||||
this.playersToRemove.push(data.data.id);
|
||||
removePlayer(data.data.id);
|
||||
break;
|
||||
|
||||
case "newBullet":
|
||||
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));
|
||||
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));
|
||||
break;
|
||||
|
||||
case "died":
|
||||
console.log("player",data.data.id,"was killed by",data.data.killerId);
|
||||
this.deathToAdd.push(data.data);
|
||||
addKill(data.data.id,data.data.killerId);
|
||||
break;
|
||||
|
||||
case "message":
|
||||
phone.addMessage(data.data);
|
||||
|
||||
default:
|
||||
console.log("received unknown data:",data);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
@ -60,7 +59,6 @@ class Network{
|
|||
}
|
||||
|
||||
died(id, killerId){
|
||||
this.deathToAdd.push({id:id,killerId:killerId});
|
||||
this.socket.send(JSON.stringify({type:"died",data:{id: id, killerId: killerId}}));
|
||||
}
|
||||
|
||||
|
@ -71,39 +69,12 @@ class Network{
|
|||
}));
|
||||
}
|
||||
|
||||
newBullet(x,y,dx,dy,parentId)
|
||||
newBullet(x,y,z,dx,dy,parentId)
|
||||
{
|
||||
this.socket.send(JSON.stringify({type:"newBullet",data:{x: x,y: y,dx: dx,dy: dy,id:parentId}}));
|
||||
this.socket.send(JSON.stringify({type:"newBullet",data:{x: x,y: y,z: z,dx: dx,dy: dy,id:parentId}}));
|
||||
}
|
||||
|
||||
getPlayersToAdd(){ //returns the list of new players
|
||||
let tmp = this.playersToAdd;
|
||||
this.playersToAdd = [];
|
||||
return tmp;
|
||||
}
|
||||
|
||||
getBulletsToAdd(){ //returns the list of new players
|
||||
let tmp = this.bulletsToAdd;
|
||||
this.bulletsToAdd = [];
|
||||
return tmp;
|
||||
}
|
||||
|
||||
getPlayersToRemove(){ //returns the list of player who have left the game
|
||||
let tmp = this.playersToRemove;
|
||||
this.playersToRemove = [];
|
||||
return tmp;
|
||||
}
|
||||
|
||||
getPlayersToUpdate(){ //return a list of all updates recieved from the server
|
||||
let tmp = this.playersToUpdate;
|
||||
this.playersToUpdate = [];
|
||||
return tmp;
|
||||
}
|
||||
|
||||
getDeathToAdd()
|
||||
{
|
||||
let tmp = this.deathToAdd;
|
||||
this.deathToAdd=[];
|
||||
return tmp;
|
||||
sendMessage(title, content){
|
||||
this.socket.send(JSON.stringify({type: "message", data: {title: title, content: content}}));
|
||||
}
|
||||
}
|
|
@ -1,14 +1,11 @@
|
|||
let objects = {"squares":[{"x":1162,"y":115,"w":144,"h":125},{"x":120,"y":906,"w":1228,"h":21},{"x":127,"y":0,"w":1225,"h":14},{"x":297,"y":114,"w":78,"h":93},{"x":169,"y":243,"w":62,"h":250},{"x":313,"y":243,"w":62,"h":253},{"x":228,"y":257,"w":96,"h":222},{"x":792,"y":113,"w":176,"h":126},{"x":1017,"y":113,"w":143,"h":81},{"x":1160,"y":241,"w":143,"h":-129},{"x":1065,"y":372,"w":127,"h":124},{"x":697,"y":372,"w":319,"h":126},{"x":697,"y":498,"w":159,"h":111},{"x":697,"y":628,"w":160,"h":158},{"x":1001,"y":628,"w":191,"h":158},{"x":281,"y":629,"w":175,"h":156},{"x":0,"y":0,"w":137,"h":616},{"x":0,"y":615,"w":136,"h":310},{"x":1337,"y":1,"w":130,"h":581},{"x":1337,"y":573,"w":131,"h":356},{"x":586,"y":153,"w":15,"h":24},{"x":651,"y":153,"w":12,"h":24},{"x":700,"y":187,"w":12,"h":22},{"x":1020,"y":194,"w":10,"h":47},{"x":1019,"y":227,"w":56,"h":14},{"x":1101,"y":227,"w":62,"h":13},{"x":654,"y":128,"w":105,"h":17},{"x":748,"y":129,"w":12,"h":49},{"x":748,"y":193,"w":12,"h":47},{"x":654,"y":223,"w":105,"h":16},{"x":521,"y":129,"w":106,"h":14},{"x":521,"y":140,"w":13,"h":38},{"x":521,"y":194,"w":13,"h":46},{"x":521,"y":225,"w":108,"h":16}],"circles":[{"x":552,"y":163,"r":13.601470508735444},{"x":608,"y":190,"r":20.248456731316587},{"x":569,"y":212,"r":11.704699910719626},{"x":680,"y":213,"r":12.041594578792296},{"x":727,"y":164,"r":14.212670403551895}]}
|
||||
let 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 squares = [];
|
||||
let circles = [];
|
||||
|
||||
for (var i = objects.squares.length - 1; i >= 0; i--) {
|
||||
for (let i=0; i<objects.squares.length;i++) {
|
||||
let current = objects.squares[i]
|
||||
squares.push(new Square(current.x, current.y, current.w, current.h));
|
||||
squares.push(new Square(current.x, current.y, current.z, current.w, current.h));
|
||||
}
|
||||
|
||||
for (var i = objects.circles.length - 1; i >= 0; i--) {
|
||||
for (let i=0; i<objects.circles.length; i++) {
|
||||
let current = objects.circles[i]
|
||||
circles.push(new Circle(current.x, current.y, current.r));
|
||||
circles.push(new Circle(current.x, current.y, current.z, current.r));
|
||||
}
|
135
public_html/js/phone.js
Normal file
|
@ -0,0 +1,135 @@
|
|||
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,101 +1,164 @@
|
|||
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/bullet.png";
|
||||
imgBullet.src = "./assets/bullet2.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(id, mapsrc, map2src) {
|
||||
this.canvas = document.getElementById(id);
|
||||
constructor(idCanvas) {
|
||||
let canvas = document.getElementById(idCanvas);
|
||||
this.ctx = canvas.getContext("2d");
|
||||
this.players = [];
|
||||
this.bullets = [];
|
||||
this.mapsrc=mapsrc;
|
||||
this.ReloadAff();
|
||||
this.playerid=0;
|
||||
this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
|
||||
}
|
||||
|
||||
SetPlayerId(id) {
|
||||
this.playerid=id
|
||||
}
|
||||
RenderPlayer(p,isClient) {
|
||||
if(p==null)
|
||||
return;
|
||||
let x=p.x
|
||||
let y=p.y
|
||||
|
||||
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(p.z==player.z)
|
||||
{
|
||||
if(this.players[i].id==id)
|
||||
{
|
||||
this.players.splice(i,1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RenderPlayer(player) {
|
||||
this.ctx.save();
|
||||
this.ctx.translate(player.x, player.y);
|
||||
this.ctx.rotate(player.angle);
|
||||
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(player.name,player.x-player.name.length*10/3,player.y-playerSize/1.8);
|
||||
if(player.id==this.playerid) {
|
||||
this.ctx.fillText(p.name,x-p.name.length*10/3,y-playerSize/1.8);
|
||||
if(isClient) {
|
||||
this.ctx.fillStyle = 'red';
|
||||
this.ctx.fillRect(player.x-playerSize/2-5, player.y-playerSize/2, playerSize+10, 5);
|
||||
this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, playerSize+10, 5);
|
||||
this.ctx.fillStyle = '#7AFF33';
|
||||
this.ctx.fillRect(player.x-playerSize/2-5, player.y-playerSize/2, player.health*(playerSize+10)/defaulthealth, 5);
|
||||
this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, p.health*(playerSize+10)/defaulthealth, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RenderCar(x,y,angle) {
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
RenderBullet(bullet) {
|
||||
RenderBullet(x,y,z) {
|
||||
if(z==player.z)
|
||||
{
|
||||
this.ctx.save();
|
||||
this.ctx.translate(bullet.x, bullet.y);
|
||||
this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
|
||||
this.ctx.translate(x, y);
|
||||
this.ctx.drawImage(imgBullet, -10 / 2, -10 / 2, 10, 10);
|
||||
this.ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
RenderPnj(x, y, z, angle, moving)
|
||||
{
|
||||
if(z==player.z)
|
||||
{
|
||||
this.ctx.save();
|
||||
this.ctx.translate(x, y);
|
||||
this.ctx.rotate(angle);
|
||||
if(moving == false || (new Date().getMilliseconds())%1000>=500){
|
||||
this.ctx.drawImage(imgPnj, -30 / 2, -30 / 2, 30, 30);
|
||||
}else{
|
||||
this.ctx.drawImage(imgPnj2, -30 / 2, -30 / 2, 30, 30);
|
||||
}
|
||||
this.ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
RenderPortal(x,y,orange)
|
||||
{
|
||||
this.ctx.save();
|
||||
this.ctx.translate(x,y);
|
||||
if(orange)
|
||||
this.ctx.drawImage(orange_portal,0,0,portalSize,portalSize);
|
||||
else
|
||||
this.ctx.drawImage(blue_portal,0,0,portalSize,portalSize);
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
ReloadAff() {
|
||||
/*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;
|
||||
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.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);
|
||||
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);
|
||||
})
|
||||
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(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,25 +1,12 @@
|
|||
class Sound{
|
||||
constructor(url){
|
||||
this.assetsUrl = url;
|
||||
this.sound = new Audio(url);
|
||||
this.sound.type = "audio/mp3";
|
||||
}
|
||||
|
||||
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()
|
||||
play(){
|
||||
//this.sound.pause()
|
||||
this.sound.currentTime=0;
|
||||
this.sound.play()
|
||||
}
|
||||
}
|
160
server/server.js
|
@ -1,66 +1,49 @@
|
|||
const express = require('express');
|
||||
const http = require('http');
|
||||
const https = require('https').createServer;
|
||||
const WebSocket = require('ws');
|
||||
const url = require('url');
|
||||
const fs = require('fs');
|
||||
const objectsModule = require('./objects');
|
||||
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
|
||||
|
||||
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 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 norm(x1, x2, y1, y2) {
|
||||
return Math.sqrt((x1 - x2) ** 2 + (y1 + y2) ** 2);
|
||||
}
|
||||
|
||||
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 index = Math.floor(Math.random()*spawnPoints.length);
|
||||
return [spawnPoints[index].x, spawnPoints[index].y];
|
||||
}
|
||||
|
||||
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;
|
||||
function getUsername(req){
|
||||
let username = url.parse(req.url, true).query.name;
|
||||
if (username === undefined || username == null || username == "null") {
|
||||
username = "Soldat Inconnu"
|
||||
}
|
||||
if (username.length > NAME_MAXLEN) {
|
||||
username = username.substring(0, NAME_MAXLEN);
|
||||
}
|
||||
return [x, y];
|
||||
return username;
|
||||
}
|
||||
|
||||
function createNewPlayer(socket, name) {
|
||||
|
@ -93,38 +76,20 @@ function createNewPlayer(socket, name) {
|
|||
connections.add(socket);
|
||||
}
|
||||
|
||||
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"
|
||||
}
|
||||
if (username.length > NAME_MAXLEN) {
|
||||
username = username.substring(0, NAME_MAXLEN);
|
||||
}
|
||||
createNewPlayer(socket, username);
|
||||
|
||||
socket.on('message', (message) => {
|
||||
message = JSON.parse(message);
|
||||
switch (message.type) {
|
||||
case 'ping':
|
||||
socket.send("pong");
|
||||
break;
|
||||
|
||||
case "update":
|
||||
function update(message, socket){
|
||||
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;
|
||||
}
|
||||
|
||||
case "newBullet":
|
||||
function newBullet(message, socket){
|
||||
broadcast(JSON.stringify(message), socket.id);
|
||||
break;
|
||||
}
|
||||
|
||||
case "died":
|
||||
function died(message, socket){
|
||||
broadcast(JSON.stringify(message), socket.id);
|
||||
for (var i = players.length - 1; i >= 0; i--) {
|
||||
|
||||
|
@ -139,14 +104,9 @@ wss.on('connection', (socket, req) => {
|
|||
}))
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('close', () => {
|
||||
function deletePlayer(socket){
|
||||
for (var i = players.length - 1; i >= 0; i--) {
|
||||
broadcast(JSON.stringify({
|
||||
type: "removePlayer",
|
||||
|
@ -159,8 +119,11 @@ wss.on('connection', (socket, req) => {
|
|||
}
|
||||
}
|
||||
connections.delete(socket);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function recievemessage(msg, socket){
|
||||
broadcast(JSON.stringify(msg), socket.id);
|
||||
}
|
||||
|
||||
function broadcast(message, exceptId = -1) {
|
||||
connections.forEach((socket) => {
|
||||
|
@ -170,8 +133,53 @@ 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(`Serveur WebSocket écoutant sur le port ${PORT}`);
|
||||
console.log(`WebSocket listening on port ${PORT}.`);
|
||||
});
|
|
@ -2,7 +2,7 @@ var ctx = document.getElementById("canvas").getContext("2d");
|
|||
var cv = document.getElementById("canvas");
|
||||
|
||||
const fond = new Image();
|
||||
fond.src = "../../assets/map/map7_recadr.png";
|
||||
fond.src = "../../public_html/assets/map/map_principale.png";
|
||||
var mapWidth = fond.width
|
||||
var mapHeith = fond.height
|
||||
ctx.canvas.width = mapWidth
|
||||
|
|