IAmChrisAMA
/
Mario-Kart-3.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:(game) Fixed constant refresh rate behavior

skidmarks
Alex 2024-01-24 11:15:25 +01:00
parent a819fcae4c
commit 2753ec7127
3 changed files with 52 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Experience.jsx
View File

@ -10,8 +10,8 @@ import { PlayerControllerAgain } from './PlayerControllerAgain'
export const Experience = () => { export const Experience = () => {
return ( return (
<> <>
{/* <PlayerController /> */} <PlayerController />
<PlayerControllerAgain /> {/* <PlayerControllerAgain /> */}
<Ground position={[0, 0, 0]} /> <Ground position={[0, 0, 0]} />
<Environment <Environment
resolution={256} resolution={256}

101
src/components/PlayerController.jsx
View File

@ -37,12 +37,12 @@ export const PlayerController = () => {
const kart = useRef(); const kart = useRef();
const cam = useRef(); const cam = useRef();
const initialSpeed = 0; const initialSpeed = 0;
const maxSpeed = 40; const maxSpeed = 30;
const boostSpeed = 60; const boostSpeed = 50;
const acceleration = 30; const acceleration = 0.1;
const decceleration = 50; const decceleration = 0.2;
const damping = -0.1; const damping = -0.1;
const MaxSteeringSpeed = 1.1; const MaxSteeringSpeed = 0.01;
const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0); const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0);
const [currentSpeed, setCurrentSpeed] = useState(initialSpeed); const [currentSpeed, setCurrentSpeed] = useState(initialSpeed);
const camMaxOffset = 1; const camMaxOffset = 1;
@ -66,21 +66,16 @@ export const PlayerController = () => {
let targetZPosition = 8; let targetZPosition = 8;
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0); const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
const engineSound = useRef(); const engineSound = useRef();
const cameraLerpFactor = 1;
const marioLerpFactor = 5;
const [scale, setScale] = useState(0); const [scale, setScale] = useState(0);
let lastTime = performance.now();
useFrame(({ pointer, clock}) => { useFrame(({ pointer, clock }, delta) => {
const time = clock.getElapsedTime(); const time = clock.getElapsedTime();
const currentTime = performance.now();
const deltaTime = (currentTime - lastTime) * 0.001; // Convert milliseconds to seconds
lastTime = currentTime;
if (!body.current && !mario.current) return; if (!body.current && !mario.current) return;
// HANDLING AND STEERING // HANDLING AND STEERING
const kartRotation = kart.current.rotation.y - driftDirection.current * driftForce.current; const kartRotation =
kart.current.rotation.y - driftDirection.current * driftForce.current;
const forwardDirection = new THREE.Vector3( const forwardDirection = new THREE.Vector3(
-Math.sin(kartRotation), -Math.sin(kartRotation),
0, 0,
@ -119,45 +114,45 @@ export const PlayerController = () => {
if (upPressed && currentSpeed < maxSpeed) { if (upPressed && currentSpeed < maxSpeed) {
// Accelerate the kart within the maximum speed limit // Accelerate the kart within the maximum speed limit
setCurrentSpeed(Math.min(currentSpeed + acceleration * deltaTime, maxSpeed)); setCurrentSpeed(Math.min(currentSpeed + acceleration * delta * 144, maxSpeed));
} else if ( } else if (
upPressed && upPressed &&
currentSpeed > maxSpeed && currentSpeed > maxSpeed &&
boostDuration.current > 0 boostDuration.current > 0
) { ) {
setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, maxSpeed)); setCurrentSpeed(Math.max(currentSpeed - decceleration * delta * 144, maxSpeed));
} }
if (upPressed) { if (upPressed) {
if (currentSteeringSpeed < MaxSteeringSpeed) { if (currentSteeringSpeed < MaxSteeringSpeed) {
setCurrentSteeringSpeed( setCurrentSteeringSpeed(
Math.min(currentSteeringSpeed + 1 * deltaTime, MaxSteeringSpeed) Math.min(currentSteeringSpeed + 0.0001 * delta * 144, MaxSteeringSpeed)
); );
} }
} }
// REVERSING // REVERSING
if (downPressed && currentSpeed < -maxSpeed) { if (downPressed && currentSpeed < -maxSpeed) {
setCurrentSpeed(Math.max(currentSpeed - acceleration, -maxSpeed)); setCurrentSpeed(Math.max(currentSpeed - acceleration * delta * 144, -maxSpeed));
} }
// DECELERATING // DECELERATING
else if (!upPressed && !downPressed) { else if (!upPressed && !downPressed) {
if (currentSteeringSpeed > 0) { if (currentSteeringSpeed > 0) {
setCurrentSteeringSpeed(Math.max(currentSteeringSpeed - 1 * deltaTime, 0)); setCurrentSteeringSpeed(Math.max(currentSteeringSpeed - 0.00005 * delta * 144, 0));
} else if (currentSteeringSpeed < 0) { } else if (currentSteeringSpeed < 0) {
setCurrentSteeringSpeed(Math.min(currentSteeringSpeed + 1 * deltaTime, 0)); setCurrentSteeringSpeed(Math.min(currentSteeringSpeed + 0.00005 * delta * 144, 0));
} }
setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, 0)); setCurrentSpeed(Math.max(currentSpeed - decceleration * delta * 144, 0));
} }
console.log(currentSteeringSpeed)
// Update the kart's rotation based on the steering angle // Update the kart's rotation based on the steering angle
kart.current.rotation.y += steeringAngle * deltaTime; kart.current.rotation.y += steeringAngle * delta * 144;
// Apply damping to simulate slowdown when no keys are pressed
body.current.applyImpulse( body.current.applyImpulse(
{ {
x: -body.current.linvel().x, x: -body.current.linvel().x * (1 - damping) * delta * 144,
y: 0, y: 0,
z: -body.current.linvel().z, z: -body.current.linvel().z * (1 - damping) * delta * 144,
}, },
true true
); );
@ -170,13 +165,13 @@ export const PlayerController = () => {
// JUMPING // JUMPING
if (jumpPressed && isOnFloor.current && !jumpIsHeld.current) { if (jumpPressed && isOnFloor.current && !jumpIsHeld.current) {
jumpForce.current += 10; jumpForce.current += 10 ;
isOnFloor.current = false; isOnFloor.current = false;
jumpIsHeld.current = true; jumpIsHeld.current = true;
} }
if (!isOnFloor.current && jumpForce.current > 0) { if (!isOnFloor.current && jumpForce.current > 0) {
jumpForce.current -= 1; jumpForce.current -= 1 * delta * 144;
} }
if (!jumpPressed) { if (!jumpPressed) {
jumpIsHeld.current = false; jumpIsHeld.current = false;
@ -189,7 +184,7 @@ export const PlayerController = () => {
if ( if (
jumpIsHeld.current && jumpIsHeld.current &&
currentSteeringSpeed > 0 && currentSteeringSpeed > 0 &&
pointer.x < -0.24 && pointer.x < -0.1 &&
!driftRight.current !driftRight.current
) { ) {
driftLeft.current = true; driftLeft.current = true;
@ -197,7 +192,7 @@ export const PlayerController = () => {
if ( if (
jumpIsHeld.current && jumpIsHeld.current &&
currentSteeringSpeed > 0 && currentSteeringSpeed > 0 &&
pointer.x > 0.24 && pointer.x > 0.1 &&
!driftLeft.current !driftLeft.current
) { ) {
driftRight.current = true; driftRight.current = true;
@ -207,7 +202,7 @@ export const PlayerController = () => {
mario.current.rotation.y = THREE.MathUtils.lerp( mario.current.rotation.y = THREE.MathUtils.lerp(
mario.current.rotation.y, mario.current.rotation.y,
0, 0,
0.0001 0.0001 * delta * 144
); );
setTurboColor(0xffffff); setTurboColor(0xffffff);
accumulatedDriftPower.current = 0; accumulatedDriftPower.current = 0;
@ -218,29 +213,26 @@ export const PlayerController = () => {
driftForce.current = 0.4; driftForce.current = 0.4;
mario.current.rotation.y = THREE.MathUtils.lerp( mario.current.rotation.y = THREE.MathUtils.lerp(
mario.current.rotation.y, mario.current.rotation.y,
steeringAngle * 0.5, steeringAngle * 50 + 0.5,
marioLerpFactor * deltaTime 0.05 * delta * 144
); );
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1); accumulatedDriftPower.current += 0.1 * (steeringAngle + 1) * delta * 144;
} }
if (driftRight.current) { if (driftRight.current) {
driftDirection.current = -1; driftDirection.current = -1;
driftForce.current = 0.4; driftForce.current = 0.4;
mario.current.rotation.y = THREE.MathUtils.lerp( mario.current.rotation.y = THREE.MathUtils.lerp(
mario.current.rotation.y, mario.current.rotation.y,
-(-steeringAngle) * 0.5, -(-steeringAngle * 50 + 0.5),
marioLerpFactor * deltaTime 0.05 * delta * 144
); );
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1); accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1) * delta * 144 ;
} }
console.log(steeringAngle)
if (!driftLeft.current && !driftRight.current) { if (!driftLeft.current && !driftRight.current) {
mario.current.rotation.y = THREE.MathUtils.lerp( mario.current.rotation.y = THREE.MathUtils.lerp(
mario.current.rotation.y, mario.current.rotation.y,
steeringAngle * 0.5, steeringAngle * 30,
marioLerpFactor * deltaTime 0.05 * delta * 144
); );
setScale(0); setScale(0);
} }
@ -258,7 +250,7 @@ export const PlayerController = () => {
} }
if (driftLeft.current || driftRight.current) { if (driftLeft.current || driftRight.current) {
const oscillation = Math.sin(time * 1000) * 0.1; const oscillation = Math.sin(time * 1000) * 0.1 ;
const vibration = oscillation + 0.9; const vibration = oscillation + 0.9;
@ -271,19 +263,15 @@ export const PlayerController = () => {
// RELEASING DRIFT // RELEASING DRIFT
if (boostDuration.current > 1 && !jumpIsHeld.current) { if (boostDuration.current > 1 && !jumpIsHeld.current) {
setCurrentSpeed(boostSpeed);
boostDuration.current -= 1 * delta * 144;
targetZPosition = 10;
setIsBoosting(true); setIsBoosting(true);
} else if (boostDuration.current <= 1 ) {
} else if (boostDuration.current <= 1 && !jumpIsHeld.current) {
targetZPosition = 8; targetZPosition = 8;
setIsBoosting(false); setIsBoosting(false);
} }
if(isBoosting){
setCurrentSpeed(boostSpeed);
boostDuration.current -= Math.floor(deltaTime * 1000);
targetZPosition = 10;
setIsBoosting(true);
}
// CAMERA WORK // CAMERA WORK
cam.current.updateMatrixWorld(); cam.current.updateMatrixWorld();
@ -291,30 +279,31 @@ export const PlayerController = () => {
cam.current.position.x = THREE.MathUtils.lerp( cam.current.position.x = THREE.MathUtils.lerp(
cam.current.position.x, cam.current.position.x,
targetXPosition, targetXPosition,
cameraLerpFactor * deltaTime 0.01 * delta * 144
); );
cam.current.position.z = THREE.MathUtils.lerp( cam.current.position.z = THREE.MathUtils.lerp(
cam.current.position.z, cam.current.position.z,
targetZPosition, targetZPosition,
cameraLerpFactor * deltaTime 0.01 * delta * 144
); );
body.current.applyImpulse( body.current.applyImpulse(
{ {
x: forwardDirection.x * currentSpeed * 50 * deltaTime, x: forwardDirection.x * currentSpeed * delta * 144,
y: 0 + jumpForce.current, y: 0 + jumpForce.current * delta * 144,
z: forwardDirection.z * currentSpeed * 50 * deltaTime, z: forwardDirection.z * currentSpeed * delta * 144,
}, },
true true
); );
// Update the kart's rotation based on the steering angle // Update the kart's rotation based on the steering angle
setSteeringAngleWheels(steeringAngle * 0.1); setSteeringAngleWheels(steeringAngle * 25);
// SOUND WORK // SOUND WORK
console.log(body.current.translation())
}); });
return ( return (
@ -392,7 +381,7 @@ export const PlayerController = () => {
<PerspectiveCamera <PerspectiveCamera
makeDefault makeDefault
position={[0, 2, 8]} position={[0, 2, 8]}
fov={40} fov={50}
ref={cam} ref={cam}
/> />
{/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */} {/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */}

8
src/components/PointParticle.jsx
View File

@ -23,13 +23,13 @@ export const PointParticle = ({ position, png, turboColor }) => {
setOpacity(1); setOpacity(1);
}, [turboColor]); }, [turboColor]);
useFrame(() => { useFrame((_, delta) => {
if (turboColor === 0xffffff) return; if (turboColor === 0xffffff) return;
if (size < 3) { if (size < 3) {
setSize((size) => size + 0.5); setSize((size) => size + 0.5 * delta * 144);
} else if (opacity > 0) { } else if (opacity > 0) {
setOpacity((opacity) => opacity - 0.05); setOpacity((opacity) => opacity - 0.05 * delta * 144);
setSize((size) => size + 0.2); setSize((size) => size + 0.2 * delta * 144);
} }
}); });