fix: static fps 60
This commit is contained in:
Pc
@@ -15,7 +15,6 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
|
||||
|
||||
return (
|
||||
<div className={`relative w-20 h-14 transition-all duration-200 ${isJumping ? '-rotate-6 scale-110' : ''}`}>
|
||||
{/* OGON */}
|
||||
<div
|
||||
className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]"
|
||||
style={{
|
||||
@@ -23,14 +22,10 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
|
||||
animation: !isGameOver ? 'tail-wag 0.8s ease-in-out infinite' : 'none'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* TUŁÓW */}
|
||||
<div className="absolute inset-0 rounded-[2rem] overflow-hidden shadow-sm" style={{ backgroundColor: mainColor }}>
|
||||
<div className="absolute top-0 left-1/4 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
|
||||
<div className="absolute top-0 left-1/2 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
|
||||
</div>
|
||||
|
||||
{/* GŁOWA */}
|
||||
<div className="absolute -right-4 -top-6 w-14 h-13 rounded-full shadow-sm" style={{ backgroundColor: mainColor }}>
|
||||
<div className="absolute -top-2 left-1 w-5 h-6 rounded-t-full rotate-[-15deg]" style={{ backgroundColor: mainColor }}>
|
||||
<div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
|
||||
@@ -38,20 +33,14 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isJumping, isNight, isGam
|
||||
<div className="absolute -top-2 right-1 w-5 h-6 rounded-t-full rotate-[15deg]" style={{ backgroundColor: mainColor }}>
|
||||
<div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
|
||||
</div>
|
||||
|
||||
<div className={`absolute top-5 left-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 text-[10px] flex items-center justify-center' : 'bg-slate-900'}`}>
|
||||
{isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
|
||||
</div>
|
||||
<div className={`absolute top-5 right-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 text-[10px] flex items-center justify-center' : 'bg-slate-900'}`}>
|
||||
{isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
|
||||
</div>
|
||||
|
||||
<div className="absolute top-7 -left-2 w-3 h-[1px] bg-slate-300 rotate-[10deg] opacity-40" />
|
||||
<div className="absolute top-9 -left-2 w-3 h-[1px] bg-slate-300 rotate-[-10deg] opacity-40" />
|
||||
<div className="absolute top-8 left-1/2 -translate-x-1/2 w-2 h-1.5 bg-pink-400 rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* ŁAPKI */}
|
||||
<div className="absolute bottom-[-10px] left-4 w-3 h-6 rounded-full origin-top"
|
||||
style={{
|
||||
backgroundColor: mainColor,
|
||||
@@ -87,19 +76,23 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
|
||||
const isNight = Math.floor(score / 10) % 2 === 1;
|
||||
|
||||
// Referencje do fizyki i czasu
|
||||
// --- REF DO FPS I FIZYKI ---
|
||||
const kittyYRef = useRef(0);
|
||||
const obstacleXRef = useRef(650);
|
||||
const velocityRef = useRef(0);
|
||||
const scoreRef = useRef(0);
|
||||
const requestRef = useRef<number>(0);
|
||||
const lastTimeRef = useRef<number>(0);
|
||||
const lastFrameTimestampRef = useRef<number>(0);
|
||||
|
||||
// STAŁE KONFIGURACYJNE (Wartości na sekundę)
|
||||
const GRAVITY = 1800; // px/s^2
|
||||
const JUMP_FORCE = -550; // Moc skoku
|
||||
const INITIAL_SPEED = 350; // px/s
|
||||
const SPEED_INCREMENT = 15; // Przyspieszenie za każdy punkt
|
||||
// --- STAŁE ---
|
||||
const TARGET_FPS = 60;
|
||||
const FRAME_MIN_TIME = 1000 / TARGET_FPS; // ok. 16.67ms
|
||||
|
||||
const GRAVITY = 1800;
|
||||
const JUMP_FORCE = -550;
|
||||
const INITIAL_SPEED = 350;
|
||||
const SPEED_INCREMENT = 15;
|
||||
const GROUND_Y = 0;
|
||||
|
||||
const endGame = useCallback(() => {
|
||||
@@ -121,6 +114,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
obstacleXRef.current = 650;
|
||||
velocityRef.current = 0;
|
||||
lastTimeRef.current = performance.now();
|
||||
lastFrameTimestampRef.current = performance.now();
|
||||
setDisplayKittyY(0);
|
||||
setDisplayObstacleX(650);
|
||||
}, []);
|
||||
@@ -135,10 +129,19 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
const update = (time: number) => {
|
||||
if (gameOver || !isPlaying) return;
|
||||
|
||||
// --- MECHANIZM FPS CAP ---
|
||||
const elapsedSinceLastFrame = time - lastFrameTimestampRef.current;
|
||||
if (elapsedSinceLastFrame < FRAME_MIN_TIME) {
|
||||
requestRef.current = requestAnimationFrame(update);
|
||||
return;
|
||||
}
|
||||
|
||||
// Delta time (dt) w sekundach
|
||||
const dt = (time - lastTimeRef.current) / 1000;
|
||||
lastTimeRef.current = time;
|
||||
const frameTime = Math.min(dt, 0.1); // Limit klatki
|
||||
lastFrameTimestampRef.current = time; // Aktualizujemy czas klatki
|
||||
|
||||
const frameTime = Math.min(dt, 0.1);
|
||||
|
||||
// Fizyka kota
|
||||
velocityRef.current += GRAVITY * frameTime;
|
||||
@@ -198,7 +201,6 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
${isNight ? 'bg-slate-950 border-indigo-500 shadow-indigo-500/20' : 'bg-white border-pink-100 shadow-pink-200/50'}`}
|
||||
onClick={() => { if (!isPlaying || gameOver) startGame(); else jump(); }}
|
||||
>
|
||||
{/* Niebo (Używamy Moon i Sun) */}
|
||||
<div className={`absolute top-10 left-12 transition-all duration-1000 ${isNight ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0'}`}>
|
||||
<Moon className="text-indigo-200 fill-indigo-100" size={48} />
|
||||
</div>
|
||||
@@ -206,7 +208,6 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
<Sun className="text-yellow-400 fill-yellow-200" size={48} />
|
||||
</div>
|
||||
|
||||
{/* Wyniki (Używamy Trophy) */}
|
||||
<div className={`absolute top-6 right-8 text-right z-10 font-black transition-colors duration-1000 ${isNight ? 'text-indigo-100' : 'text-pink-500'}`}>
|
||||
<div className="text-3xl tracking-tighter">Score: {score}</div>
|
||||
<div className={`text-sm flex items-center justify-end gap-1 ${isNight ? 'text-indigo-400' : 'text-pink-300'}`}>
|
||||
@@ -214,12 +215,10 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KOTEK */}
|
||||
<div className="absolute left-10" style={{ bottom: `${displayKittyY + 48}px` }}>
|
||||
<DetailedKitty isJumping={displayKittyY > 2} isNight={isNight} isGameOver={gameOver} />
|
||||
</div>
|
||||
|
||||
{/* PRZESZKODA */}
|
||||
<div
|
||||
className={`absolute bottom-12 w-12 h-12 rounded-full border-2 flex items-center justify-center animate-spin transition-colors duration-1000
|
||||
${isNight ? 'bg-indigo-900 border-indigo-400' : 'bg-pink-200 border-pink-400'}`}
|
||||
@@ -228,13 +227,11 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
<div className={`w-8 h-1 border-t-2 rotate-45 ${isNight ? 'border-indigo-300' : 'border-pink-400'}`}></div>
|
||||
</div>
|
||||
|
||||
{/* Ziemia */}
|
||||
<div className={`absolute bottom-0 w-full h-12 border-t-4 transition-colors duration-1000 flex items-center justify-around
|
||||
${isNight ? 'bg-slate-900 border-indigo-900 text-indigo-900' : 'bg-pink-50 border-pink-100 text-pink-200'}`}>
|
||||
{[...Array(9)].map((_, i) => <span key={i} className="text-2xl">🐾</span>)}
|
||||
</div>
|
||||
|
||||
{/* Ekrany informacyjne (Używamy Sparkles) */}
|
||||
{!isPlaying && !gameOver && (
|
||||
<div className="absolute inset-0 bg-white/20 backdrop-blur-[4px] flex items-center justify-center">
|
||||
<div className="bg-white p-10 rounded-[3rem] shadow-2xl flex flex-col items-center border-4 border-pink-100">
|
||||
@@ -257,6 +254,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-4 text-slate-400 text-sm font-medium">Space / Click to Jump</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user