Game
- Starting solo game with physics
This commit is contained in:
@ -6,7 +6,7 @@
|
|||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||||
/* +#+#+#+#+#+ +#+ */
|
/* +#+#+#+#+#+ +#+ */
|
||||||
/* Created: 2024/08/28 12:07:39 by edbernar #+# #+# */
|
/* Created: 2024/08/28 12:07:39 by edbernar #+# #+# */
|
||||||
/* Updated: 2024/08/29 00:19:01 by edbernar ### ########.fr */
|
/* Updated: 2024/08/29 13:58:06 by edbernar ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
@ -32,6 +32,7 @@ class SoloGame
|
|||||||
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;
|
||||||
|
Ball.create(scene);
|
||||||
Map.create(scene);
|
Map.create(scene);
|
||||||
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight);
|
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight);
|
||||||
camera.rotation.x = -Math.PI / 2;
|
camera.rotation.x = -Math.PI / 2;
|
||||||
@ -39,15 +40,11 @@ class SoloGame
|
|||||||
scene.background = new THREE.Color(0x252525);
|
scene.background = new THREE.Color(0x252525);
|
||||||
document.body.appendChild(renderer.domElement);
|
document.body.appendChild(renderer.domElement);
|
||||||
Players.create(scene);
|
Players.create(scene);
|
||||||
Ball.create(scene);
|
|
||||||
|
|
||||||
controls = new OrbitControls(camera, renderer.domElement);
|
controls = new OrbitControls(camera, renderer.domElement);
|
||||||
camera.position.set(0, 20, 0);
|
camera.position.set(0, 20, 0);
|
||||||
|
// camera.position.set(20, 5, 20);
|
||||||
renderer.setAnimationLoop(loop);
|
renderer.setAnimationLoop(loop);
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
Ball.moveBall();
|
|
||||||
}, 1000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose()
|
static dispose()
|
||||||
@ -78,6 +75,8 @@ function loop()
|
|||||||
{
|
{
|
||||||
stats.begin();
|
stats.begin();
|
||||||
controls.update();
|
controls.update();
|
||||||
|
Ball.update();
|
||||||
|
Map.update();
|
||||||
Players.update();
|
Players.update();
|
||||||
renderer.render(scene, camera);
|
renderer.render(scene, camera);
|
||||||
stats.end();
|
stats.end();
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||||
/* +#+#+#+#+#+ +#+ */
|
/* +#+#+#+#+#+ +#+ */
|
||||||
/* Created: 2024/08/28 15:58:03 by edbernar #+# #+# */
|
/* Created: 2024/08/28 15:58:03 by edbernar #+# #+# */
|
||||||
/* Updated: 2024/08/29 00:44:26 by edbernar ### ########.fr */
|
/* Updated: 2024/08/29 13:45:02 by edbernar ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
@ -23,12 +23,10 @@ class Ball
|
|||||||
{
|
{
|
||||||
static create(scene)
|
static create(scene)
|
||||||
{
|
{
|
||||||
|
|
||||||
ball = createBall();
|
ball = createBall();
|
||||||
|
|
||||||
scene.add(ball);
|
scene.add(ball);
|
||||||
ball.rotateY(0.8);
|
ball.rotateY(2.39);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose()
|
static dispose()
|
||||||
@ -36,36 +34,10 @@ class Ball
|
|||||||
ball = null;
|
ball = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
static moveBall()
|
static update()
|
||||||
{
|
{
|
||||||
createInterval();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
static stopBall()
|
|
||||||
{
|
|
||||||
if (interval)
|
|
||||||
clearInterval(interval);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createInterval()
|
|
||||||
{
|
|
||||||
interval = setInterval(() => {
|
|
||||||
console.log(ball.position);
|
|
||||||
moveForward();
|
|
||||||
bounceWallTop();
|
|
||||||
bounceWallTBottom();
|
|
||||||
bouncePlayer1();
|
|
||||||
}, 16);
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveForward()
|
|
||||||
{
|
|
||||||
const direction = new THREE.Vector3(0, 0, dir);
|
|
||||||
direction.applyQuaternion(ball.quaternion);
|
|
||||||
|
|
||||||
ball.position.add(direction.multiplyScalar(speed));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function createBall()
|
function createBall()
|
||||||
@ -81,55 +53,4 @@ function createBall()
|
|||||||
return (mesh);
|
return (mesh);
|
||||||
}
|
}
|
||||||
|
|
||||||
function bounceWallTop()
|
export { Ball, ball };
|
||||||
{
|
|
||||||
const origin = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z);
|
|
||||||
const direction = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z - 1);
|
|
||||||
|
|
||||||
direction.normalize();
|
|
||||||
const raycaster = new THREE.Raycaster(origin, direction);
|
|
||||||
const objects = [ wallTop ];
|
|
||||||
const intersects = raycaster.intersectObjects(objects);
|
|
||||||
|
|
||||||
if (intersects.length > 0)
|
|
||||||
{
|
|
||||||
if (intersects[0].distance <= 0.5)
|
|
||||||
ball.rotation.y = Math.PI - ball.rotation.y
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function bounceWallTBottom()
|
|
||||||
{
|
|
||||||
const origin = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z);
|
|
||||||
const direction = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z + 1);
|
|
||||||
|
|
||||||
direction.normalize();
|
|
||||||
const raycaster = new THREE.Raycaster(origin, direction);
|
|
||||||
const objects = [ wallBottom ];
|
|
||||||
const intersects = raycaster.intersectObjects(objects);
|
|
||||||
|
|
||||||
if (intersects.length > 0)
|
|
||||||
{
|
|
||||||
if (intersects[0].distance <= 0.4)
|
|
||||||
ball.rotation.y = Math.PI - ball.rotation.y;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function bouncePlayer1()
|
|
||||||
{
|
|
||||||
const origin = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z);
|
|
||||||
const direction = new THREE.Vector3(ball.position.x - 1, ball.position.y, ball.position.z);
|
|
||||||
|
|
||||||
direction.normalize();
|
|
||||||
const raycaster = new THREE.Raycaster(origin, direction);
|
|
||||||
const objects = [ player1 ];
|
|
||||||
const intersects = raycaster.intersectObjects(objects);
|
|
||||||
|
|
||||||
if (intersects.length > 0)
|
|
||||||
{
|
|
||||||
if (intersects[0].distance <= 0.4)
|
|
||||||
ball.rotation.y = Math.PI - ball.rotation.y;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Ball };
|
|
@ -6,23 +6,35 @@
|
|||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||||
/* +#+#+#+#+#+ +#+ */
|
/* +#+#+#+#+#+ +#+ */
|
||||||
/* Created: 2024/08/28 12:23:48 by edbernar #+# #+# */
|
/* Created: 2024/08/28 12:23:48 by edbernar #+# #+# */
|
||||||
/* Updated: 2024/08/28 17:01:17 by edbernar ### ########.fr */
|
/* Updated: 2024/08/29 18:42:55 by edbernar ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
|
import * as CANNON from 'cannon-es';
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
import { ball } from './Ball.js'
|
||||||
|
|
||||||
const width = 25;
|
const width = 25;
|
||||||
const height = 12.5;
|
const height = 12.5;
|
||||||
let spotLight = null;
|
let ground = null;
|
||||||
let wallTop = null;
|
let spotLight = null;
|
||||||
let wallBottom = null;
|
let wallTop = null;
|
||||||
|
let wallBottom = null;
|
||||||
|
let world = null;
|
||||||
|
const timeStep = 1 / 60;
|
||||||
|
let groundBody = null;
|
||||||
|
let wallTopBody = null;
|
||||||
|
let wallBottomBody = null;
|
||||||
|
let ballBody = null;
|
||||||
|
|
||||||
class Map
|
class Map
|
||||||
{
|
{
|
||||||
static create(scene)
|
static create(scene)
|
||||||
{
|
{
|
||||||
createGround(scene);
|
world = new CANNON.World({
|
||||||
|
gravity: new CANNON.Vec3(0, -9.81, 0),
|
||||||
|
});
|
||||||
|
ground = createGround(scene);
|
||||||
wallBottom = createWall(false);
|
wallBottom = createWall(false);
|
||||||
wallTop = createWall(true);
|
wallTop = createWall(true);
|
||||||
spotLight = new THREE.SpotLight({color: 0xffffff});
|
spotLight = new THREE.SpotLight({color: 0xffffff});
|
||||||
@ -33,6 +45,33 @@ class Map
|
|||||||
scene.add(wallTop);
|
scene.add(wallTop);
|
||||||
scene.add(wallBottom);
|
scene.add(wallBottom);
|
||||||
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
|
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
|
||||||
|
wallTopBody = new CANNON.Body({
|
||||||
|
shape: new CANNON.Box(new CANNON.Vec3(width, 0.7, 0.2)),
|
||||||
|
type: CANNON.Body.STATIC,
|
||||||
|
})
|
||||||
|
wallTopBody.position.z = -6.15;
|
||||||
|
wallTopBody.position.y += 0.35;
|
||||||
|
world.addBody(wallTopBody);
|
||||||
|
wallBottomBody = new CANNON.Body({
|
||||||
|
shape: new CANNON.Box(new CANNON.Vec3(width, 0.7, 0.2)),
|
||||||
|
type: CANNON.Body.STATIC,
|
||||||
|
})
|
||||||
|
wallBottomBody.position.z = 6.15;
|
||||||
|
wallBottomBody.position.y += 0.35;
|
||||||
|
world.addBody(wallBottomBody);
|
||||||
|
groundBody = new CANNON.Body({
|
||||||
|
shape: new CANNON.Plane(),
|
||||||
|
type: CANNON.Body.STATIC,
|
||||||
|
});
|
||||||
|
groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
|
||||||
|
world.addBody(groundBody);
|
||||||
|
ballBody = new CANNON.Body({
|
||||||
|
shape: new CANNON.Sphere(0.3),
|
||||||
|
mass: 1
|
||||||
|
});
|
||||||
|
ballBody.position.set(0, 2, 0);
|
||||||
|
ballBody.velocity.set(0, 0, 0);
|
||||||
|
world.addBody(ballBody);
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose()
|
static dispose()
|
||||||
@ -41,6 +80,19 @@ class Map
|
|||||||
spotLight.dispose();
|
spotLight.dispose();
|
||||||
spotLight = null;
|
spotLight = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static update()
|
||||||
|
{
|
||||||
|
world.step(timeStep);
|
||||||
|
ground.position.copy(groundBody.position);
|
||||||
|
ground.quaternion.copy(groundBody.quaternion);
|
||||||
|
ball.position.copy(ballBody.position);
|
||||||
|
ball.quaternion.copy(ballBody.quaternion);
|
||||||
|
wallBottom.position.copy(wallBottomBody.position);
|
||||||
|
wallBottom.quaternion.copy(wallBottomBody.quaternion);
|
||||||
|
wallTop.position.copy(wallTopBody.position);
|
||||||
|
wallTop.quaternion.copy(wallTopBody.quaternion);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function createGround(scene)
|
function createGround(scene)
|
||||||
@ -52,6 +104,7 @@ function createGround(scene)
|
|||||||
mesh.rotateX(-Math.PI / 2);
|
mesh.rotateX(-Math.PI / 2);
|
||||||
mesh.position.set(0, 0, 0);
|
mesh.position.set(0, 0, 0);
|
||||||
scene.add(mesh);
|
scene.add(mesh);
|
||||||
|
return (mesh);
|
||||||
}
|
}
|
||||||
|
|
||||||
function createWall(onTop)
|
function createWall(onTop)
|
||||||
@ -60,11 +113,11 @@ function createWall(onTop)
|
|||||||
const material = new THREE.MeshPhysicalMaterial({color: 0x333333});
|
const material = new THREE.MeshPhysicalMaterial({color: 0x333333});
|
||||||
const mesh = new THREE.Mesh(geometry, material);
|
const mesh = new THREE.Mesh(geometry, material);
|
||||||
|
|
||||||
if (onTop)
|
// if (onTop)
|
||||||
mesh.position.z = -6.15;
|
// mesh.position.z = -6.15;
|
||||||
else
|
// else
|
||||||
mesh.position.z = 6.15;
|
// mesh.position.z = 6.15;
|
||||||
mesh.position.y += 0.35;
|
// mesh.position.y += 0.35;
|
||||||
return (mesh);
|
return (mesh);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
43
site/real_game/package-lock.json
generated
43
site/real_game/package-lock.json
generated
@ -6,7 +6,11 @@
|
|||||||
"": {
|
"": {
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@rollup/rollup-darwin-arm64": "^4.21.0",
|
"@rollup/rollup-darwin-arm64": "^4.21.0",
|
||||||
|
"cannon-es": "^0.20.0",
|
||||||
"rollup": "^4.21.0",
|
"rollup": "^4.21.0",
|
||||||
|
"stats": "^1.0.0",
|
||||||
|
"stats-js": "^1.0.1",
|
||||||
|
"statsjs": "^1.0.7",
|
||||||
"three": "^0.167.1",
|
"three": "^0.167.1",
|
||||||
"vite": "^5.4.1"
|
"vite": "^5.4.1"
|
||||||
}
|
}
|
||||||
@ -592,6 +596,20 @@
|
|||||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/cannon-es": {
|
||||||
|
"version": "0.20.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/cannon-es/-/cannon-es-0.20.0.tgz",
|
||||||
|
"integrity": "sha512-eZhWTZIkFOnMAJOgfXJa9+b3kVlvG+FX4mdkpePev/w/rP5V8NRquGyEozcjPfEoXUlb+p7d9SUcmDSn14prOA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/commander": {
|
||||||
|
"version": "0.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/commander/-/commander-0.5.2.tgz",
|
||||||
|
"integrity": "sha512-/IKo89++b1UhClEhWvKk00gKgw6iwvwD8TOPTqqN9AyvjgPCnf9OrjnDNY3dPDOj+K+OhN9SRjYQH0AfX0bROw==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/esbuild": {
|
"node_modules/esbuild": {
|
||||||
"version": "0.21.5",
|
"version": "0.21.5",
|
||||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
|
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
|
||||||
@ -740,6 +758,31 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/stats": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/stats/-/stats-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-YmKiMSrDaYA8Iu8/mPbZQmQLfzUrCstea60zPLkBMjpUveRh89GLipU/7AuMRAAX3aMmnseSuJtkgpPv29VoqA==",
|
||||||
|
"dependencies": {
|
||||||
|
"commander": "0.5.2"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"stats": "bin/stats"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.4.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/stats-js": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/stats-js/-/stats-js-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-EAwEFghGNv8mlYC4CZzI5kWghsnP8uBKXw6VLRHtXkOk5xySfUKLTqTkjgJFfDluIkf/O7eZwi5MXP50VeTbUg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/statsjs": {
|
||||||
|
"version": "1.0.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/statsjs/-/statsjs-1.0.7.tgz",
|
||||||
|
"integrity": "sha512-fch+88pDPk8y4BwFwStMQR52vgJnrTHPtY15UBSkR8QAAjVBkntrFIiuDTRdknoIabfMEF7qaGhOBI+V4RtMkA=="
|
||||||
|
},
|
||||||
"node_modules/three": {
|
"node_modules/three": {
|
||||||
"version": "0.167.1",
|
"version": "0.167.1",
|
||||||
"resolved": "https://registry.npmjs.org/three/-/three-0.167.1.tgz",
|
"resolved": "https://registry.npmjs.org/three/-/three-0.167.1.tgz",
|
||||||
|
@ -4,7 +4,11 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@rollup/rollup-darwin-arm64": "^4.21.0",
|
"@rollup/rollup-darwin-arm64": "^4.21.0",
|
||||||
|
"cannon-es": "^0.20.0",
|
||||||
"rollup": "^4.21.0",
|
"rollup": "^4.21.0",
|
||||||
|
"stats": "^1.0.0",
|
||||||
|
"stats-js": "^1.0.1",
|
||||||
|
"statsjs": "^1.0.7",
|
||||||
"three": "^0.167.1",
|
"three": "^0.167.1",
|
||||||
"vite": "^5.4.1"
|
"vite": "^5.4.1"
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user