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

Game multi - Add animationGoal1 v1 - Start init others animations

Browse Source
This commit is contained in:
hubourge
2024-09-24 18:16:11 +02:00
parent 47c8a64f5d
commit 10d466a964
5 changed files with 138 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
View File

@ -61,6 +61,11 @@ class Ball
this.setPosition(this.centerPos.x, this.centerPos.y, this.centerPos.z); this.setPosition(this.centerPos.x, this.centerPos.y, this.centerPos.z);
} }
resetScaleBall()
{
this.object.scale.set(1, 1, 1);
};
setPosition(x, y, z) setPosition(x, y, z)
{ {
this.object.position.set(x, y, z); this.object.position.set(x, y, z);

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

@ -15,23 +15,28 @@ import * as THREE from '/static/javascript/three/build/three.module.js'
import { Video } from '/static/javascript/multiOnlineGame/Video.js'; import { Video } from '/static/javascript/multiOnlineGame/Video.js';
import { GUI } from '/static/javascript/three/examples/jsm/libs/lil-gui.module.min.js'; import { GUI } from '/static/javascript/three/examples/jsm/libs/lil-gui.module.min.js';
import { player, opponent, ball} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js'; import { player, opponent, ball} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js';
import { Ball } from '/static/javascript/multiOnlineGame/Ball.js' // import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
let loader = null; let loader = null;
let scene = null; let scene = null;
let videoList = []; let videoList = [];
let interval2 = null; let interval2 = null;
let videoCanvas = null; let videoCanvas = null;
let videoCanvasTexture = null; let videoCanvasTexture = null;
let materialCanvas = null; let materialCanvas = null;
let textureLoaderPlane = null; let textureLoaderPlane = null;
let texturePlane = null; let texturePlane = null;
let ctx = null; let ctx = null;
let fireworkMixer = null; let fireworkMixer = null;
let canvasTextScore = null; let canvasTextScore = null;
let contextTextScore = null; let contextTextScore = null;
let textureTextScore = null; let textureTextScore = null;
let animateGoalObjectUpdate = null; let animationSpeed1 = 0.05;
let animationSpeed2 = 0.05;
let animationSpeed3 = 0.05;
let animateGoalObjectUpdate1 = null;
let animateGoalObjectUpdate2 = null;
let animateGoalObjectUpdate3 = null;
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},
@ -61,7 +66,6 @@ class Map
{ {
score = {player: 0, opponent: 0}; score = {player: 0, opponent: 0};
arrObject = []; arrObject = [];
ballObject = null;
mapLength = 0; mapLength = 0;
banner = null; banner = null;
centerPos = { centerPos = {
@ -698,7 +702,17 @@ class Map
scene.remove(this.banner); scene.remove(this.banner);
}; };
animationGoal(side) handleAnimation(ball, name)
{
if (name == "object3d") // 0, 0.3, 6.3
this.#animationGoal1(ball.object.position.x, ball.object.position.y, ball.object.position.z);
if (name == "downScale")
this.#animationGoal2(ball.object.position.x, ball.object.position.y, ball.object.position.z);
if (name == "upScale")
this.#animationGoal3(ball.object.position.x, ball.object.position.y, ball.object.position.z);
}
#animationGoal1(cordX, cordY, cordZ)
{ {
this.#clearAnimationGoal(); this.#clearAnimationGoal();
@ -722,18 +736,12 @@ class Map
let rectangle = createRectangle(colorList[Math.floor(Math.random() * 100 % colorList.length)]); let rectangle = createRectangle(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
let ring = createRing(colorList[Math.floor(Math.random() * 100 % colorList.length)]); let ring = createRing(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
let pos; triangle.position.set(cordX, cordY, cordZ);
if (side == "left" || side == "back") cylinder.position.set(cordX, cordY, cordZ);
pos = 8; star.position.set(cordX, cordY, cordZ);
else if (side == "right" || side == "front") box.position.set(cordX, cordY, cordZ);
pos = -8; rectangle.position.set(cordX, cordY, cordZ);
ring.position.set(cordX, cordY, cordZ);
triangle.position.set(-2.5, 0, pos);
cylinder.position.set(-1.5, 0, pos);
star.position.set(-0.5, 0, pos);
box.position.set(0.5, 0, pos);
rectangle.position.set(1.5, 0, pos);
ring.position.set(2.5, 0, pos);
triangle.scale.set(0.2, 0.2, 0.2); triangle.scale.set(0.2, 0.2, 0.2);
cylinder.scale.set(0.2, 0.2, 0.2); cylinder.scale.set(0.2, 0.2, 0.2);
@ -756,7 +764,17 @@ class Map
this.arrObject.push({mesh: rectangle, name: "rectangle", type: "goalObject"}); this.arrObject.push({mesh: rectangle, name: "rectangle", type: "goalObject"});
this.arrObject.push({mesh: ring, name: "ring", type: "goalObject"}); this.arrObject.push({mesh: ring, name: "ring", type: "goalObject"});
animateGoalObjectUpdate = true; animateGoalObjectUpdate1 = true;
};
#animationGoal2(cordX, cordY, cordZ)
{
animateGoalObjectUpdate2 = true;
};
#animationGoal3(cordX, cordY, cordZ)
{
animateGoalObjectUpdate3 = true;
}; };
#clearAnimationGoal() #clearAnimationGoal()
@ -881,7 +899,7 @@ class Map
else else
this.arrObject[i].mesh.material.opacity = 1 - (diff / 2); this.arrObject[i].mesh.material.opacity = 1 - (diff / 2);
} }
if (this.arrObject[i].name == "wallRight") else if (this.arrObject[i].name == "wallRight")
{ {
// Move the wall with the ball position // Move the wall with the ball position
if (ball.object.position.z < this.mapLength / 2 - 0.35 && ball.object.position.z > -this.mapLength / 2 + 0.35) if (ball.object.position.z < this.mapLength / 2 - 0.35 && ball.object.position.z > -this.mapLength / 2 + 0.35)
@ -917,7 +935,7 @@ class Map
this.arrObject[i].mesh.children[j].rotation.y = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.cos(Date.now() * 0.001) * 0.1;; this.arrObject[i].mesh.children[j].rotation.y = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.cos(Date.now() * 0.001) * 0.1;;
} }
} }
if (this.arrObject[i].type == 'jumperTop') else if (this.arrObject[i].type == 'jumperTop')
{ {
const cylinder = this.arrObject[i].mesh.children[5]; const cylinder = this.arrObject[i].mesh.children[5];
const distance = ball.object.position.distanceTo(cylinder.position); const distance = ball.object.position.distanceTo(cylinder.position);
@ -938,56 +956,67 @@ class Map
this.arrObject[i].mesh.children[j].rotation.y = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.cos(Date.now() * 0.001) * 0.1;; this.arrObject[i].mesh.children[j].rotation.y = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.cos(Date.now() * 0.001) * 0.1;;
} }
} }
if (animateGoalObjectUpdate && this.arrObject[i].type == "goalObject") if (animateGoalObjectUpdate1 && this.arrObject[i].type == "goalObject")
{ this.#updateGoalAnimation1(this.arrObject[i], animationSpeed1 += 0.004);
this.#updateGoalAnimation(this.arrObject[i]); else if (animateGoalObjectUpdate2);
} // this.#updateGoalAnimation2(ball, animationSpeed2 += 0.000);
else if (animateGoalObjectUpdate3);
// this.#updateGoalAnimation3(ball, animationSpeed3 += 0.000);
} }
}; };
#updateGoalAnimation(object) #updateGoalAnimation1(object, speed)
{ {
object.mesh.rotation.x += 0.03; object.mesh.rotation.x += 0.03;
object.mesh.rotation.y += 0.03; object.mesh.rotation.y += 0.03;
object.mesh.rotation.z += 0.03; object.mesh.rotation.z += 0.03;
// if (object.name == "triangle") if (object.name == "triangle")
// { {
// object.mesh.position.x -= 0.002; object.mesh.position.x += 0.05 * speed;
// object.mesh.position.y += 0.002; object.mesh.position.y += 0.05 * speed;
// object.mesh.position.z += 0.02; object.mesh.position.z += 0.02 * speed;
// } }
// if (object.name == "cylinder") else if (object.name == "cylinder")
// { {
// object.mesh.position.x -= 0.0015; object.mesh.position.x -= 0.03 * speed;
// object.mesh.position.y += 0.003; object.mesh.position.y += 0.04 * speed;
// object.mesh.position.z += 0.02; object.mesh.position.z -= 0.05 * speed;
// } }
// if (object.name == "star") else if (object.name == "star")
// { {
// object.mesh.position.x -= 0.001; object.mesh.position.x += 0.04 * speed;
// object.mesh.position.y += 0.004; object.mesh.position.y += 0.03 * speed;
// object.mesh.position.z += 0.02; object.mesh.position.z += 0.06 * speed;
// } }
else if (object.name == "box")
{
object.mesh.position.x -= 0.06 * speed;
object.mesh.position.y += 0.02 * speed;
object.mesh.position.z += 0.05 * speed;
}
else if (object.name == "rectangle")
{
object.mesh.position.x += 0.03 * speed;
object.mesh.position.y += 0.04 * speed;
object.mesh.position.z += 0.03 * speed;
}
else if (object.name == "ring")
{
object.mesh.position.x -= 0.05 * speed;
object.mesh.position.y += 0.03 * speed;
object.mesh.position.z -= 0.04 * speed;
}
};
#updateGoalAnimation2(object, speed)
{
};
#updateGoalAnimation3(object, speed)
{
// if (object.name == "box")
// {
// object.mesh.position.x -= 0.001;
// object.mesh.position.y += 0.004;
// object.mesh.position.z += 0.02;
// }
// if (object.name == "rectangle")
// {
// object.mesh.position.x -= 0.0015;
// object.mesh.position.y += 0.003;
// object.mesh.position.z += 0.02;
// }
// if (object.name == "ring")
// {
// object.mesh.position.x -= 0.002;
// object.mesh.position.y += 0.002;
// object.mesh.position.z += 0.02;
// }
}; };
updateScore(name, score) updateScore(name, score)
@ -1003,12 +1032,15 @@ class Map
reCreate(name) reCreate(name)
{ {
this.#clearAnimationGoal(); this.#clearAnimationGoal();
animateGoalObjectUpdate = false; animateGoalObjectUpdate1 = false;
animateGoalObjectUpdate2 = false;
animateGoalObjectUpdate3 = false;
animationSpeed1 = 0.05;
this.updateScore(name, this.score); this.updateScore(name, this.score);
// ball.resetPosBall();
// player.resetPosPlayer();
player.reserCameraPlayer(); player.reserCameraPlayer();
// ball.resetScaleBall();
// player.resetPosPlayer();
// opponent.resetPosOpponent(); // opponent.resetPosOpponent();
}; };
}; };

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

@ -10,6 +10,8 @@
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { goalAnimation } from '/static/javascript/multiOnlineGame/Player.js'
let opponentExist = false; let opponentExist = false;
let mapLength = 0; let mapLength = 0;
@ -26,8 +28,9 @@ class Opponent
right: 3, right: 3,
}; };
last = false; last = false;
playerGoalAnimation = null;
constructor (object, map) constructor (object, map, indexGoalAnimation)
{ {
if (opponentExist) if (opponentExist)
throw Error("Opponent is already init."); throw Error("Opponent is already init.");
@ -35,6 +38,7 @@ class Opponent
this.object = object; this.object = object;
this.object.position.set(0, 0.3, -map.mapLength / 2 + 0.2); this.object.position.set(0, 0.3, -map.mapLength / 2 + 0.2);
mapLength = map.mapLength; mapLength = map.mapLength;
this.playerGoalAnimation = goalAnimation[indexGoalAnimation];
} }
dispose() dispose()

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

@ -46,6 +46,7 @@ let playerExist = false;
let isOnPointAnim = false; let isOnPointAnim = false;
let pressedButton = []; let pressedButton = [];
let mapLength = 0; let mapLength = 0;
const goalAnimation = ["object3d", "downScale", "upScale"];
class Player class Player
{ {
@ -60,8 +61,9 @@ class Player
deltaTime = 1; deltaTime = 1;
mapVar = null; mapVar = null;
opponent = null; opponent = null;
playerGoalAnimation = null;
constructor (object, map, opponent) constructor (object, map, opponent, indexGoalAnimation)
{ {
this.mapVar = map; this.mapVar = map;
this.opponent = opponent; this.opponent = opponent;
@ -74,6 +76,7 @@ class Player
this.limits = map.playerLimits; this.limits = map.playerLimits;
this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000); this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
this.object.position.set(0, this.limits.down, map.mapLength / 2 - 0.2); this.object.position.set(0, this.limits.down, map.mapLength / 2 - 0.2);
this.playerGoalAnimation = goalAnimation[indexGoalAnimation];
mapLength = map.mapLength; mapLength = map.mapLength;
this.setCameraPosition( this.setCameraPosition(
this.object.position.x, this.object.position.x,
@ -338,4 +341,4 @@ function simplePressKey(e)
} }
} }
export { Player, playerExist }; export { Player, playerExist, goalAnimation};

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

@ -79,19 +79,19 @@ class MultiOnlineGamePage
const bar2 = createBarPlayer(0xf3e11e); const bar2 = createBarPlayer(0xf3e11e);
document.body.setAttribute('style', ''); document.body.setAttribute('style', '');
scene = new THREE.Scene() scene = new THREE.Scene()
map = new Map(scene, 13, false); 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)';
opponent = new Opponent(bar2, map); opponent = new Opponent(bar2, map, 1);
player = new Player(bar1, map, opponent); player = new Player(bar1, map, opponent, 0);
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);
scene.add(player.object); scene.add(player.object);
scene.add(opponent.object); scene.add(opponent.object);
@ -114,12 +114,14 @@ class MultiOnlineGamePage
if (e.key == 'g') if (e.key == 'g')
{ {
player.pointAnimation(map); player.pointAnimation(map);
map.animationGoal("left"); map.handleAnimation(ball, player.playerGoalAnimation);
// map.animationGoal1(0, 0.30, 6.3); // Le serv envoie la position de la balle pour faire l'explosion la ou il y a but
} }
if (e.key == 'h') if (e.key == 'h')
{ {
player.pointOpponentAnimation(map, opponent.object); player.pointOpponentAnimation(map, opponent.object);
map.animationGoal("right"); map.handleAnimation(ball, opponent.playerGoalAnimation);
// map.animationGoal1(0, 0.30, -6.3);
} }
if (e.key == 'c') if (e.key == 'c')
debug = !debug; debug = !debug;
@ -128,7 +130,6 @@ class MultiOnlineGamePage
if (e.key == 'o') if (e.key == 'o')
{ {
map.putVideoOnCanvas(3, 'goal'); map.putVideoOnCanvas(3, 'goal');
map.animationGoal("right");
} }
if (e.key == 'i') if (e.key == 'i')
map.putVideoOnCanvas(3, 'outstanding'); map.putVideoOnCanvas(3, 'outstanding');
@ -146,6 +147,7 @@ class MultiOnlineGamePage
renderer.setAnimationLoop(loop) renderer.setAnimationLoop(loop)
sendRequest('game', {action: 1}); sendRequest('game', {action: 1});
let lastPosition = player.object.position.x; let lastPosition = player.object.position.x;
let lastUp = player.isUp; let lastUp = player.isUp;
interval = setInterval(() => { interval = setInterval(() => {