tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Game

Browse Source 
- Adds points to the board when a point is scored on multiOnlineGame
    - Add request game 7
This commit is contained in:
Kum1ta
2024-09-20 23:08:51 +02:00
parent f6eb2bae27
commit a12243d15e
4 changed files with 50 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Map.js :+: :+: :+: */ /* Map.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/09/17 17:23:53 by hubourge ### ########.fr */ /* Updated: 2024/09/20 23:05:19 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -31,7 +31,6 @@ let fireworkMixer = null;
let canvasText = null; let canvasText = null;
let contextCanvasText = null; let contextCanvasText = null;
let textureCanvasText = null; let textureCanvasText = null;
let score = {player: 0, opponent: 0};
let path = [ let path = [
{name: 'goal', onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm', blob: null}, {name: 'goal', onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm', blob: null},
@ -59,6 +58,7 @@ let spacingImages = [
class Map class Map
{ {
score = {player: 0, opponent: 0};
arrObject = []; arrObject = [];
ballObject = null; ballObject = null;
mapLength = 0; mapLength = 0;
@ -338,7 +338,7 @@ class Map
groupJumper.children[i].position.set(groupJumper.children[i].position.x, groupJumper.children[i].position.y + distanceY[i], groupJumper.children[i].position.z); groupJumper.children[i].position.set(groupJumper.children[i].position.x, groupJumper.children[i].position.y + distanceY[i], groupJumper.children[i].position.z);
} }
else else
groupJumper.children[i].position.set(groupJumper.children[i].position.x, groupJumper.children[i].position.y - distanceY[i], groupJumper.children[i].position.z); groupJumper.children[i].position.set(groupJumper.children[i].position.x, groupJumper.children[i].position.y - distanceY[i], groupJumper.children[i].position.z);
} }
this.arrObject.push({mesh: groupJumper, name: name, type: typeName}); this.arrObject.push({mesh: groupJumper, name: name, type: typeName});
@ -390,7 +390,7 @@ class Map
contextCanvasText = canvasText.getContext('2d'); contextCanvasText = canvasText.getContext('2d');
canvasText.width = 512 * 2; canvasText.width = 512 * 2;
canvasText.height = 256 * 2; canvasText.height = 256 * 2;
drawScore(score); drawScore(this.score);
textureCanvasText = new THREE.CanvasTexture(canvasText); textureCanvasText = new THREE.CanvasTexture(canvasText);
materialText = new THREE.MeshBasicMaterial({ map: textureCanvasText }); materialText = new THREE.MeshBasicMaterial({ map: textureCanvasText });
@ -623,6 +623,21 @@ class Map
}, 10); }, 10);
}; };
placeObject(listObject)
{
let nbJumper = 0;
listObject.forEach(obj => {
if (obj.type == 1)
{
this.#createGravityChanger(obj.pos.x, obj.pos.y, obj.pos.z, type + i, obj.isUp ? "jumperTop" : "jumperBottom", obj.isUp);
nbJumper++;
}
else if (obj.type == 2)
scene.add(this.#createWallObstacle(obj.pos.x, obj.pos.y, obj.pos.z, obj.isUp));
});
}
#generateObstacle() #generateObstacle()
{ {
const wallPos = [ const wallPos = [
@ -752,7 +767,7 @@ class Map
reCreate(name) reCreate(name)
{ {
this.updateScore(name, score); this.updateScore(name, this.score);
ball.resetPosBall(); ball.resetPosBall();
player.resetPosPlayer(); player.resetPosPlayer();
player.reserCameraPlayer(); player.reserCameraPlayer();

24
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
View File

@ -6,12 +6,11 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ /* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/09/16 15:44:46 by edbernar ### ########.fr */ /* Updated: 2024/09/20 21:59:24 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js' import * as THREE from '/static/javascript/three/build/three.module.js'
/* /*
Explication du code : Explication du code :
- Un seul joueur peut etre instancié, sinon ça throw une erreur - Un seul joueur peut etre instancié, sinon ça throw une erreur
@ -59,9 +58,13 @@ class Player
limits = {}; limits = {};
previousTime = Date.now(); previousTime = Date.now();
deltaTime = 1; deltaTime = 1;
mapVar = null;
opponent = null;
constructor (object, map) constructor (object, map, opponent)
{ {
this.mapVar = map;
this.opponent = opponent;
if (playerExist) if (playerExist)
throw Error("Player is already init."); throw Error("Player is already init.");
playerExist = true; playerExist = true;
@ -108,6 +111,20 @@ class Player
); );
} }
makeAnimation(isOpponent)
{
if (isOpponent)
{
this.mapVar.reCreate("opponent");
this.pointOpponentAnimation(this.mapVar, this.opponent.object);
}
else
{
this.mapVar.reCreate("player");
this.pointAnimation(this.mapVar);
}
}
pointAnimation(map) pointAnimation(map)
{ {
const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000); const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
@ -179,7 +196,6 @@ class Player
this.camera = tmpCamera; this.camera = tmpCamera;
interval = setInterval(() => { interval = setInterval(() => {
tmpCamera.lookAt(oppponentObject.position); tmpCamera.lookAt(oppponentObject.position);
console.log(tmpCamera.position)
hue += 0.01; hue += 0.01;
if (hue > 1) if (hue > 1)
hue = 0; hue = 0;

8
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ /* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/20 19:15:03 by edbernar ### ########.fr */ /* Updated: 2024/09/20 22:32:09 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -80,18 +80,18 @@ class MultiOnlineGamePage
document.body.setAttribute('style', ''); document.body.setAttribute('style', '');
scene = new THREE.Scene() scene = new THREE.Scene()
map = new Map(scene, 13, true); map = new Map(scene, 13, false);
renderer = new THREE.WebGLRenderer({antialias: true}); renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.domElement.style.animation = 'fadeOutStartGames 1s'; renderer.domElement.style.animation = 'fadeOutStartGames 1s';
renderer.domElement.style.filter = 'brightness(1)'; renderer.domElement.style.filter = 'brightness(1)';
player = new Player(bar1, map); opponent = new Opponent(bar2, map);
player = new Player(bar1, map, opponent);
spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2); spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
spotLight.castShadow = true; spotLight.castShadow = true;
ambiantLight = new THREE.AmbientLight(0xffffff, 0.5); ambiantLight = new THREE.AmbientLight(0xffffff, 0.5);
ball = new Ball(scene, map); ball = new Ball(scene, map);
opponent = new Opponent(bar2, map);
scene.add(player.object); scene.add(player.object);
scene.add(opponent.object); scene.add(opponent.object);

14
docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js
View File

@ -6,12 +6,11 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */ /* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */
/* Updated: 2024/09/20 15:45:55 by edbernar ### ########.fr */ /* Updated: 2024/09/20 22:49:59 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { MultiOnlineGamePage, opponent, player, map } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js" import { MultiOnlineGamePage, opponent, ball, player } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
import { ball } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
import { WaitingGamePage } from "/static/javascript/waitingGame/main.js" import { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
import { pageRenderer } from '/static/javascript/main.js' import { pageRenderer } from '/static/javascript/main.js'
@ -29,12 +28,9 @@ function typeGame(content)
else if (content.action == 5 && pageRenderer.actualPage == MultiOnlineGamePage) else if (content.action == 5 && pageRenderer.actualPage == MultiOnlineGamePage)
ball.updatePos(content); ball.updatePos(content);
else if (content.action == 6 && pageRenderer.actualPage == MultiOnlineGamePage) else if (content.action == 6 && pageRenderer.actualPage == MultiOnlineGamePage)
{ player.makeAnimation(content.is_opponent);
if (content.is_opponent) else if (content.action == 7 && pageRenderer.actualPage == MultiOnlineGamePage)
player.pointOpponentAnimation(map, opponent.object); map.placeObject(content);
else
player.pointAnimation(map);
}
} }
export { typeGame }; export { typeGame };