rebillar/GrandTabernacleAutoVI
2
3
Fork 0
Code Issues Pull requests Releases 2 Wiki Activity

readme + clear le code #5

Merged
rebillar merged 7 commits from dev into master 2023-12-31 15:28:48 +01:00
Conversation 0 Commits 7 Files changed 8 +53 -86
8 changed files with 53 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
README.md
View file

@ -1,42 +1,44 @@
# GrandTabernacleAutoVI
Un super jeu by popstar inc. Jeu online avec un serveur nodejs. Plus sérieusement c'est un projet dans le cadre du "Projet Web" de 3MIC à l'INSA Toulouse.
un super jeu by popstar inc.
## Arborescence
* Le site se situe dans le répertoire "public_html", c'est en réalité un Client (car seulement du JS, HTML et CSS, il est dynamique car connecté a un serveur nodejs (connection internet requise).
* dans le répertoire "server" se trouve le serveur node.
* dans le répertoire tools se trouve un tools qui a partir d'une map, permet de générer le json contenant les collisions de cette map, ensuite il y a dans ce même répertoire un tool de parsing qui permet à partir de ce json de générer les variables js qui seront dans le code (à l'emplacement "public_html/js/global.js"). Ce sont des tool de dev qui ne sont absolument pas nécessaires pour faire tourner le projet.
specification:
on est en vue du dessus et on spawn dans un imeuble (avec des etages):
on a un certain nombre d'étage (4 par exemple)
a chaque étage il y a : du décor, des obstacles, un boost ,une arme spécifique
et 2 escaliers, un vers le haut et l'autre vers le bas
on bouge avec zqsd on tire avec la souris (qui est un viseur)
techniquement:
une requete pingrequest()=> on ping chaque joueur et tlm repond si il est co
une requete pingreply()=> return int player , position (int x, int y)
pour commencer: un envoi de requete init (int player_id, position (int x , int y))
pour bouger: un envoi de requete deplacement (int direction,position(int x,int y))
pour tirer : un envoi de requete tirer(int killer,position (int x , int y),position_cible(int dx, int dy), int arme)
pour mourir: un envoi de requete die(int mort, int killer).
## Explication du code côté client
En réalité tout le code se trouve côté client, ce qui n'est absolument pas idéal pour gérer la triche, mais beaucoup plus fun à coder !
Ce qu'il se passe c'est que la quasi totalité des requêtes envoyés au serveur via websocket sont broadcast à tous les joueurs.
Dans le repertoire "public_html" on retrouve la page html contenant le canvas mais également le code HTML du téléphone.
Dans le repertoire public_html/js on retrouve le code du jeu.
* global.js contient toutes les variables globales, en gros on instancies toutes les classes : le joueurs en local, un tableau contenant les autres joueurs, la connection au serveur, les portails (de tp), les voitures, les PNJ, les tableaux de collitions (mapXCircles et mapXSquares), les maps, et les fonctions globales traitant les nouveaux kills, les ajout et updates des joueurs.
* class.js contient les classes (et donc les structures) de tous les éléments : les joueurs, les voitures, les PNJ, les balles, les maps, les portails. Ce fichier contient donc naturellement tous les prototypes de ces classes (qui gère les collisions, déplacement...).
* cookies.js est juste un bout de code pris sur Open Classroom permettant d'aller chercher le nom du joueur pris dans les cookies.
* game.js est le corp du programme, il contient la boucle principale permettant de gérer chaque itérations et l'ordre d'appel des fonctions globales et de parcours des joueurs par exemple.
* input.js contient une classe qui gère les input au clavier et à la souris.
* leaderboard.js contient une classe qui gère le leaderboard et son affichage sur le canvas.
* network.js contient une classe qui gère la communication avec le websocket.
* phone.js contient une classe qui gère le téléphone (donc de l'app de message et qui gère les autres app comme des webview).
* render.js contient une classe qui gère l'affichage sur le canvas.
* sound.js contient une classe qui gère les sons.
## Spec du serveur
| Nom de la commande | Entrée | Sortie |
| ------------------ | ------------------------------------------------- | ---------------------------------------------------- |
| ping | | Répond "pong" au websocket emetteur |
| update | Information de son joueur(position, direction...) | Broadcast aux autres joueurs |
| newBullet | Info d'une nouvelle balle (position, direction...)| Broadcast aux autres joueurs |
| died | Identifiant du Killeur et du killé | Broadcast aux autres joueurs |
| message | Message envoyé via concorde | Broadcast aux autres joueurs |
pistes d'amélioration:
* le ping est une commande de débug.
* update est émis à chaque modification de direction ou a chaque tp. Le serveur emet de lui même un update dès qu'un joueur meurt afin de faire respawn le joueur(en vrai il se fait juste TP au moment ou il meurt).
* newBullet est émis a chaque fois que quelqu'un tire.
* died est émis par un joueur lorsqu'il meurt (côté client chacun check s'il a des collisions avec les balles et dès qu'il n'a plus de vie emet un "died").
* message est fait pour broadcast des messages dans le chat in game (via l'application "Concord" accessible via le téléphone (press "P"))
ammo non infini
mettre plusieurs maps
coder des perks (speed, shield)
barre de pv
## Pistes d'amélioration
* ammo non infini
* coder des perks (speed, shield)

6
public_html/css/game.css
View file

@ -44,9 +44,9 @@ html, body{
#phoneScreen{
background-color: #322b2a;
position: absolute;
left: 7%;
top: 12%;
right: 7%;
left: 6.7%;
top: 11.9%;
right: 6.7%;
bottom: 13%;
}

6
public_html/css/style.css
View file

@ -47,6 +47,8 @@ h2 {
color: rgb(255, 255, 255);
font-weight: bold;
font-family:sans-serif,calibri;
padding-left: 3vw ;
padding-right: 3vw;
}
@ -66,7 +68,7 @@ h2 {
display: none;
flex-direction: column;
background: #00000050;
height: 10vh;
/*height: 10vh;*/
margin-top: 1.29vh;
}
@ -152,7 +154,7 @@ h2 {
#logo {
display: block;
width: 100px;
width: 70px;
margin: 10px;
}

1
public_html/game.html
View file

@ -10,7 +10,6 @@
<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">

4
public_html/js/class.js
View file

@ -108,9 +108,9 @@ class Player
class Bullet
{
constructor (x,y,z,dx,dy,id)
constructor (x,y,z,dx,dy,id, silent = false)
{
if(z==player.z)
if(z==player.z && silent!=true)
bulletSound.play();
this.x=x;
this.y=y;

23
public_html/js/global.js
View file

@ -18,15 +18,8 @@ let PNJS = [new PNJ(500, 100,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,50,852,4), // SO
@ -183,8 +176,8 @@ function Donjon() {
if(player.z==10) {
if(lastbulletdonjon[1]>=7) {
lastbulletdonjon[1]=0
bullets.push(new Bullet(107,95+(Date.now()*0.1)%365,10,1,0,-2));
bullets.push(new Bullet(107,460-(Date.now()*0.1)%365,10,1,0,-2));
bullets.push(new Bullet(107,95+(Date.now()*0.1)%365,10,1,0,-2, true));
bullets.push(new Bullet(107,460-(Date.now()*0.1)%365,10,1,0,-2, true));
} else {
lastbulletdonjon[1]++
}
@ -192,12 +185,12 @@ function Donjon() {
if(Math.floor(Date.now()/1000)%60 > lastbulletdonjon[0]) {
lastbulletdonjon[0]=Math.floor(Date.now()/1000)%60
for(let i=0;i<5;i++){
bullets.push(new Bullet(235,65,10,0,2,-2));
bullets.push(new Bullet(235,491,10,0,-2,-2));
bullets.push(new Bullet(395,65,10,0,2,-2));
bullets.push(new Bullet(395,491,10,0,-2,-2));
bullets.push(new Bullet(615,178,10,0,2,-2));
bullets.push(new Bullet(615,385,10,0,-2,-2));
bullets.push(new Bullet(235,65,10,0,2,-2, true));
bullets.push(new Bullet(235,491,10,0,-2,-2, true));
bullets.push(new Bullet(395,65,10,0,2,-2, true));
bullets.push(new Bullet(395,491,10,0,-2,-2, true));
bullets.push(new Bullet(615,178,10,0,2,-2, true));
bullets.push(new Bullet(615,385,10,0,-2,-2, true));
}
}
}

18
public_html/js/input.js
View file

@ -21,24 +21,6 @@ class Input {
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;

11
public_html/js/objects.js
View file

@ -1,11 +0,0 @@
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}]}
for (let i=0; i<objects.squares.length;i++) {
let current = objects.squares[i]
squares.push(new Square(current.x, current.y, current.z, current.w, current.h));
}
for (let i=0; i<objects.circles.length; i++) {
let current = objects.circles[i]
circles.push(new Circle(current.x, current.y, current.z, current.r));
}