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

Game

Browse Source 
- fix bug vr mode
    - remove some useless function
This commit is contained in:
Kum1ta
2024-11-19 21:53:36 +01:00
parent 31146640ff
commit c2a85a8ff5
4 changed files with 76 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
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/11/19 15:10:55 by hubourge ### ########.fr */ /* Updated: 2024/11/19 16:35:13 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -802,44 +802,6 @@ class Map
} }
} }
#generateObstacle()
{
const wallPos = [
{ x: 1, y: 0, z: 1, onTop: false},
{ x: 1, y: 0, z: 1, onTop: true},
{ x: -1, y: 0, z: 1, onTop: false},
{ x: -1, y: 0, z: 1, onTop: true}
];
for (let i = 0; i < wallPos.length; i++)
{
if (Math.random() < 0.5)
scene.add(this.#createWallObstacle(wallPos[i].x, wallPos[i].y, wallPos[i].z, wallPos[i].onTop));
}
const type = "gravityChanger";
const typeNameBottom = "jumperBottom";
const typeNameTop = "jumperTop";
const jumperPos = [
{ x: -1.5, y: 0.2, z: this.mapLength / 4, type: type, typeName: typeNameBottom, onTop: false},
{ x: -1.5, y: 3.2, z: this.mapLength / 4, type: type, typeName: typeNameTop, onTop: true},
{ x: 1.5, y: 0.2, z: this.mapLength / 4, type: type, typeName: typeNameBottom, onTop: false},
{ x: 1.5, y: 3.2, z: this.mapLength / 4, type: type, typeName: typeNameTop, onTop: true},
{ x: -1.5, y: 0.2, z: -this.mapLength / 4, type: type, typeName: typeNameBottom, onTop: false},
{ x: -1.5, y: 3.2, z: -this.mapLength / 4, type: type, typeName: typeNameTop, onTop: true},
{ x: 1.5, y: 0.2, z: -this.mapLength / 4, type: type, typeName: typeNameBottom, onTop: false},
{ x: 1.5, y: 3.2, z: -this.mapLength / 4, type: type, typeName: typeNameTop, onTop: true}
];
for (let i = 0; i < jumperPos.length; i++)
{
if (Math.random() < 0.5)
{
this.#createGravityChanger(jumperPos[i].x, jumperPos[i].y, jumperPos[i].z, jumperPos[i].type + i, jumperPos[i].typeName, jumperPos[i].onTop);
if (i % 2 == 0)
i++;
}
}
};
update(ball) update(ball)
{ {
for (let i = 0; this.arrObject && i < this.arrObject.length; i++) for (let i = 0; this.arrObject && i < this.arrObject.length; i++)
@ -1016,28 +978,6 @@ function drawScore(score)
contextTextScore.fillText(score.player + " - " + score.opponent, canvasTextScore.width / 2, canvasTextScore.height - canvasTextScore.height / 4); contextTextScore.fillText(score.player + " - " + score.opponent, canvasTextScore.width / 2, canvasTextScore.height - canvasTextScore.height / 4);
}; };
function createTriangle(colorO) {
const shape = new THREE.Shape();
shape.moveTo(0, 1);
shape.lineTo(-1, -1);
shape.lineTo(1, -1);
shape.lineTo(0, 1);
const extrudeSettings = {
depth: 0.5,
bevelEnabled: false
};
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial({ color: colorO });
return new THREE.Mesh(geometry, material);
}
function createCylinder(colorO) {
const geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
const material = new THREE.MeshBasicMaterial({ color: colorO });
return new THREE.Mesh(geometry, material);
}
function createStar(colorO) { function createStar(colorO) {
const shape = new THREE.Shape(); const shape = new THREE.Shape();
const outerRadius = 0.5; const outerRadius = 0.5;

26
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js
View File

@ -3,13 +3,14 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Opponent.js :+: :+: :+: */ /* Opponent.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/21 10:34:49 by edbernar #+# #+# */ /* Created: 2024/08/21 10:34:49 by edbernar #+# #+# */
/* Updated: 2024/10/01 15:28:00 by hubourge ### ########.fr */ /* Updated: 2024/11/19 18:41:34 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { isInVrMode } from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js';
import { goalAnimation } from '/static/javascript/multiOnlineGame/Player.js' import { goalAnimation } from '/static/javascript/multiOnlineGame/Player.js'
let opponentExist = false; let opponentExist = false;
@ -56,6 +57,24 @@ class Opponent
const thisClass = this; const thisClass = this;
const speedFactor = 0.5; const speedFactor = 0.5;
if (isInVrMode)
{
if (thisClass.animationFrame)
clearInterval(thisClass.animationFrame);
const animate = () => {
this.object.position.x = lerp(this.object.position.x, content.pos, speedFactor);
if (Math.abs(this.object.position.x - content.pos) < 0.01)
{
this.object.position.x = content.pos;
clearInterval(thisClass.animationFrame);
thisClass.animationFrame = null;
}
};
thisClass.animationFrame = setInterval(animate, 5);
}
else
{
if (thisClass.animationFrame) if (thisClass.animationFrame)
cancelAnimationFrame(thisClass.animationFrame); cancelAnimationFrame(thisClass.animationFrame);
const animate = () => { const animate = () => {
@ -67,6 +86,9 @@ class Opponent
}; };
thisClass.animationFrame = requestAnimationFrame(animate); thisClass.animationFrame = requestAnimationFrame(animate);
}
if (content.up && thisClass.object.position.y < thisClass.limits.up) if (content.up && thisClass.object.position.y < thisClass.limits.up)
{ {

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

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Player.js :+: :+: :+: */ /* Player.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* 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/11/19 15:11:45 by hubourge ### ########.fr */ /* Updated: 2024/11/19 17:40:08 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -95,8 +95,8 @@ class Player
if (this.interval) if (this.interval)
clearInterval(this.interval); clearInterval(this.interval);
key = null; key = null;
document.addEventListener('touchstart', addKeyTouch); document.removeEventListener('touchstart', addKeyTouch);
document.addEventListener('touchend', removeKeyTouch); document.removeEventListener('touchend', removeKeyTouch);
} }
reserCameraPlayer() reserCameraPlayer()
@ -556,4 +556,4 @@ function removeKeyTouch(event)
} }
} }
export { Player, playerExist, goalAnimation}; export { Player, playerExist, goalAnimation, isOnPointAnim};

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

@ -6,15 +6,15 @@
/* 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/11/19 15:49:51 by edbernar ### ########.fr */ /* Updated: 2024/11/19 18:25:40 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { availableSkins, lastSelectedGoal } from '/static/javascript/lobbyPage/3d.js'; import { availableSkins } from '/static/javascript/lobbyPage/3d.js';
import { VRButton } from "/static/javascript/three/examples/jsm/webxr/VRButton.js" import { VRButton } from "/static/javascript/three/examples/jsm/webxr/VRButton.js"
import { Opponent } from '/static/javascript/multiOnlineGame/Opponent.js' import { Opponent } from '/static/javascript/multiOnlineGame/Opponent.js'
import * as THREE from '/static/javascript/three/build/three.module.js' import * as THREE from '/static/javascript/three/build/three.module.js'
import { Player } from '/static/javascript/multiOnlineGame/Player.js' import { Player, isOnPointAnim } from '/static/javascript/multiOnlineGame/Player.js'
import { pageRenderer, isMobile, isOnChrome } from '/static/javascript/main.js' import { pageRenderer, isMobile, isOnChrome } from '/static/javascript/main.js'
import { Ball } from '/static/javascript/multiOnlineGame/Ball.js' import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
import { Map } from '/static/javascript/multiOnlineGame/Map.js' import { Map } from '/static/javascript/multiOnlineGame/Map.js'
@ -312,21 +312,49 @@ function vrMode()
document.body.append(newButton); document.body.append(newButton);
} }
let xrReferenceSpace;
function configButton() function configButton()
{ {
const newButton = document.createElement('button'); const newButton = document.createElement('button');
const cameraGroup = new THREE.Group(); const cameraGroup = new THREE.Group();
let interval = null;
cameraGroup.name = "vrHeadset"; cameraGroup.name = "vrHeadset";
newButton.innerText = "Vr mode"; newButton.innerText = "Vr mode";
newButton.setAttribute('id', 'newButtonVr'); newButton.setAttribute('id', 'newButtonVr');
newButton.addEventListener('click', () => { newButton.addEventListener('click', () => {
VrButton.click(); VrButton.click();
player.configureVrController();
let interval2 = setInterval(() => {
const xrSession = renderer.xr.getSession();
if (!xrSession)
return ;
clearInterval(interval2);
interval2 = null;
xrSession.requestReferenceSpace('local').then((refSpace) => {
xrReferenceSpace = refSpace;
});
}, 16);
if (isOnPointAnim)
{
interval = setInterval(() => {
if (isOnPointAnim)
return ;
scene.add(cameraGroup); scene.add(cameraGroup);
scene.remove(player.camera); scene.remove(player.camera);
player.configureVrController();
cameraGroup.add(player.camera); cameraGroup.add(player.camera);
cameraGroup.position.set(0, 0.5, 7.5); cameraGroup.position.set(0, 0.5, 7.5);
clearInterval(interval);
}, 10);
}
else
{
scene.add(cameraGroup);
scene.remove(player.camera);
cameraGroup.add(player.camera);
cameraGroup.position.set(0, 0.5, 7.5);
}
isInVrMode = true; isInVrMode = true;
}); });
return (newButton); return (newButton);