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

feat:(game) added names for other players

pull/3/head
Alex 2024-02-10 00:18:55 +01:00
parent 42680aa707
commit ef9e58fa21
7 changed files with 77 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/fonts/HK.ttf Normal file
View File

Binary file not shown.

1
src/App.jsx
View File

@ -39,6 +39,7 @@ function App() {
actions.addPlayer(state);
console.log('player joined', state);
actions.setId(state.id);
console.log(state)
state.onQuit(() => {
actions.removePlayer(state);

113
src/components/PlayerController.jsx
View File

@ -3,13 +3,9 @@ import { BallCollider, RigidBody, useRapier, vec3 } from "@react-three/rapier";
import {
useKeyboardControls,
PerspectiveCamera,
ContactShadows,
Sphere,
OrbitControls,
Trail,
PositionalAudio,
} from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import { useFrame, useThree, extend } from "@react-three/fiber";
import { useRef, useState, useEffect, useCallback } from "react";
import * as THREE from "three";
@ -26,10 +22,17 @@ import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
import { HitParticles } from "./Particles/hits/HitParticles";
import { CoinParticles } from "./Particles/coins/CoinParticles";
import { ItemParticles } from "./Particles/items/ItemParticles";
import { isHost } from "playroomkit";
export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNetworkShells, networkBananas, networkShells }) => {
import { geometry } from "maath";
extend(geometry);
export const PlayerController = ({
player,
userPlayer,
setNetworkBananas,
setNetworkShells,
networkBananas,
networkShells,
}) => {
const upPressed = useKeyboardControls((state) => state[Controls.up]);
const downPressed = useKeyboardControls((state) => state[Controls.down]);
const leftPressed = useKeyboardControls((state) => state[Controls.left]);
@ -85,13 +88,13 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
const downDirection = new THREE.Vector3(0, -1, 0);
const [shouldLaunch, setShouldLaunch] = useState(false);
const effectiveBoost = useRef(0);
const text = useRef();
const { actions, shouldSlowDown, item, bananas, coins, id} = useStore();
const { actions, shouldSlowDown, item, bananas, coins, id } = useStore();
const slowDownDuration = useRef(1500);
useFrame(({ pointer, clock }, delta) => {
if(player.id !== id) return;
if (player.id !== id) return;
const time = clock.getElapsedTime();
if (!body.current && !mario.current) return;
engineSound.current.setVolume(currentSpeed / 300 + 0.2);
@ -124,24 +127,21 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
1;
}
// mouse steering
if (!driftLeft.current && !driftRight.current) {
steeringAngle = currentSteeringSpeed * -pointer.x;
targetXPosition = -camMaxOffset * -pointer.x;
} else if (driftLeft.current && !driftRight.current) {
steeringAngle = currentSteeringSpeed * -(pointer.x - 0.5);
steeringAngle = currentSteeringSpeed * -(pointer.x - 1);
targetXPosition = -camMaxOffset * -pointer.x;
} else if (driftRight.current && !driftLeft.current) {
steeringAngle = currentSteeringSpeed * -(pointer.x + 0.5);
steeringAngle = currentSteeringSpeed * -(pointer.x + 1);
targetXPosition = -camMaxOffset * -pointer.x;
}
// ACCELERATING
const shouldSlow = actions.getShouldSlowDown();
if (upPressed && currentSpeed < maxSpeed) {
// Accelerate the kart within the maximum speed limit
setCurrentSpeed(
@ -168,7 +168,9 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
}
}
if (shouldSlow) {
setCurrentSpeed(Math.max(currentSpeed - decceleration * 2 * delta * 144, 0));
setCurrentSpeed(
Math.max(currentSpeed - decceleration * 2 * delta * 144, 0)
);
setCurrentSteeringSpeed(0);
slowDownDuration.current -= 1500 * delta;
setShouldLaunch(true);
@ -177,12 +179,8 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
slowDownDuration.current = 1500;
setShouldLaunch(false);
}
}
// REVERSING
if (downPressed && currentSpeed < -maxSpeed) {
setCurrentSpeed(
@ -239,7 +237,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
if (isOnFloor.current && jumpForce.current > 0) {
landingSound.current.play();
}
if (!isOnGround && jumpForce.current > 0 ) {
if (!isOnGround && jumpForce.current > 0) {
jumpForce.current -= 1 * delta * 144;
}
if (!jumpPressed) {
@ -286,7 +284,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
driftForce.current = 0.4;
mario.current.rotation.y = THREE.MathUtils.lerp(
mario.current.rotation.y,
steeringAngle * 50 + 0.5,
steeringAngle * 25 + 0.4,
0.05 * delta * 144
);
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1) * delta * 144;
@ -296,7 +294,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
driftForce.current = 0.4;
mario.current.rotation.y = THREE.MathUtils.lerp(
mario.current.rotation.y,
-(-steeringAngle * 50 + 0.5),
-(-steeringAngle * 25 + 0.4),
0.05 * delta * 144
);
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1) * delta * 144;
@ -330,7 +328,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
if (driftLeft.current || driftRight.current) {
const oscillation = Math.sin(time * 1000) * 0.1;
const vibration = oscillation + 0.9;
if (turboColor === 0xffffff) {
if (turboColor === 0xffffff) {
setScale(vibration * 0.8);
} else {
setScale(vibration);
@ -356,7 +354,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
setCurrentSpeed(boostSpeed);
effectiveBoost.current -= 1 * delta * 144;
targetZPosition = 10;
if(!turboSound.current.isPlaying) turboSound.current.play();
if (!turboSound.current.isPlaying) turboSound.current.play();
driftTwoSound.current.play();
driftBlueSound.current.stop();
driftOrangeSound.current.stop();
@ -399,10 +397,10 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
// MISC
if(resetPressed) {
body.current.setTranslation({x: 8, y: 2, z: -119});
body.current.setLinvel({x: 0, y: 0, z: 0});
body.current.setAngvel({x: 0, y: 0, z: 0});
if (resetPressed) {
body.current.setTranslation({ x: 8, y: 2, z: -119 });
body.current.setLinvel({ x: 0, y: 0, z: 0 });
body.current.setAngvel({ x: 0, y: 0, z: 0 });
setCurrentSpeed(0);
setCurrentSteeringSpeed(0);
setIsBoosting(false);
@ -413,17 +411,16 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
kart.current.rotation.y = Math.PI / 2;
}
// ITEMS
if(shootPressed && item === "banana") {
if (shootPressed && item === "banana") {
const distanceBehind = 2;
const scaledBackwardDirection = forwardDirection.multiplyScalar(distanceBehind);
const kartPosition = new THREE.Vector3(...vec3(body.current.translation()));
const scaledBackwardDirection =
forwardDirection.multiplyScalar(distanceBehind);
const kartPosition = new THREE.Vector3(
...vec3(body.current.translation())
);
const bananaPosition = kartPosition.sub(scaledBackwardDirection);
const newBanana = {
@ -436,9 +433,10 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
actions.useItem();
}
if(shootPressed && item === "shell") {
if (shootPressed && item === "shell") {
const distanceBehind = -2;
const scaledBackwardDirection = forwardDirection.multiplyScalar(distanceBehind);
const scaledBackwardDirection =
forwardDirection.multiplyScalar(distanceBehind);
const kartPosition = new THREE.Vector3(
body.current.translation().x,
@ -451,33 +449,28 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
id: Math.random() + "-" + +new Date(),
position: shellPosition,
player: true,
rotation: kartRotation
rotation: kartRotation,
};
setNetworkShells([...networkShells, newShell]);
actions.useItem();
}
if(shootPressed && item === "mushroom") {
if (shootPressed && item === "mushroom") {
setIsBoosting(true);
effectiveBoost.current = 300;
actions.useItem();
}
player.setState("position", body.current.translation());
player.setState("rotation", kartRotation + mario.current.rotation.y);
player.setState("isBoosting", isBoosting);
player.setState("shouldLaunch", shouldLaunch);
player.setState("turboColor", turboColor);
player.setState("scale", scale);
player.setState("bananas", bananas);
player.setState("position", body.current.translation());
player.setState("rotation", kartRotation + mario.current.rotation.y);
player.setState("isBoosting", isBoosting);
player.setState("shouldLaunch", shouldLaunch);
player.setState("turboColor", turboColor);
player.setState("scale", scale);
player.setState("bananas", bananas);
});
return player.id === id ?(
return player.id === id ? (
<group>
<RigidBody
ref={body}
@ -492,15 +485,14 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
<BallCollider
args={[0.5]}
mass={3}
onCollisionEnter={({other}) => {
onCollisionEnter={({ other }) => {
isOnFloor.current = true;
setIsOnGround(true);
}}
onCollisionExit={({other}) => {
onCollisionExit={({ other }) => {
isOnFloor.current = false;
setIsOnGround(false);
}}
/>
</RigidBody>
@ -512,8 +504,8 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
isBoosting={isBoosting}
shouldLaunch={shouldLaunch}
/>
<CoinParticles coins={coins}/>
<ItemParticles item={item}/>
<CoinParticles coins={coins} />
<ItemParticles item={item} />
<mesh position={[0.6, 0.05, 0.5]} scale={scale}>
<sphereGeometry args={[0.05, 16, 16]} />
<meshStandardMaterial
@ -552,7 +544,6 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
glowSharpness={1}
/>
</mesh>
{/* <FlameParticles isBoosting={isBoosting} /> */}
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
<DriftParticlesRight turboColor={turboColor} scale={scale} />
@ -576,7 +567,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
png="./particles/star.png"
turboColor={turboColor}
/>
<HitParticles shouldLaunch={shouldLaunch}/>
<HitParticles shouldLaunch={shouldLaunch} />
</group>
{/* <ContactShadows frames={1} /> */}

5
src/components/PlayerDummies.jsx
View File

@ -8,6 +8,8 @@ import {
OrbitControls,
Trail,
PositionalAudio,
Text,
Billboard,
} from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import { useRef, useState, useEffect, useCallback } from "react";
@ -113,6 +115,9 @@ export const PlayerDummies = ( { player, userPlayer }) => {
return player.id != id? (
<>
<Billboard>
<Text font={"./fonts/HK.ttf"} ref={text} fontSize={0.4} outlineWidth={0.03} position={[0, 2, 0]}>{player.state.profile.name}</Text>
</Billboard>
<group>
<RigidBody
type="kinematic"

2
src/components/store.jsx
View File

@ -20,7 +20,7 @@ export const useStore = create((set, get) => ({
pastPositions: [],
shouldSlowdown: false,
bananas: [],
items: ["mushroom"],
items: ["mushroom", "shell", "banana"],
item: "",
shells: [],
skids: [],

11
src/index.css
View File

@ -110,3 +110,14 @@ body::-webkit-scrollbar {
transform: scale(1.2);
}
}
.annotation{
display:flex;
justify-content: center;
align-items: center;
background:none;
backdrop-filter: blur(10px);
pointer-events: none;
}