IAmChrisAMA
/
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);

63
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,7 +88,7 @@ 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 slowDownDuration = useRef(1500);
@ -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(
@ -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;
@ -413,17 +411,16 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
kart.current.rotation.y = Math.PI / 2;
}
// ITEMS
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 = {
@ -438,7 +435,8 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
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,11 +449,10 @@ 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") {
@ -464,8 +461,6 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
actions.useItem();
}
player.setState("position", body.current.translation());
player.setState("rotation", kartRotation + mario.current.rotation.y);
player.setState("isBoosting", isBoosting);
@ -473,8 +468,6 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
player.setState("turboColor", turboColor);
player.setState("scale", scale);
player.setState("bananas", bananas);
});
return player.id === id ? (
@ -500,7 +493,6 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
isOnFloor.current = false;
setIsOnGround(false);
}}
/>
</RigidBody>
@ -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} />

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;
}