kittyteam/kittyFE
3
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

fix: static fps 60

Browse Source
This commit is contained in:
Pc
2025-12-30 20:30:11 +01:00
parent d32c5133b5
commit 933c34a67e
2 changed files with 54 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
kittyurl-frontend/src/components/FlappyCat.tsx
View File

@@ -1,16 +1,12 @@
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';
// --- MODEL KOTA ---
interface DetailedKittyProps {
isGameOver: boolean;
}
// --- MODEL KOTA (bez zmian) ---
interface DetailedKittyProps { isGameOver: boolean; }
const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
const mainColor = isGameOver ? '#cbd5e1' : '#f472b6';
const stripeColor = '#ec4899';
const earColor = '#fbcfe8';
return (
<div className="relative w-20 h-14">
<div className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]" style={{ backgroundColor: mainColor }} />
@@ -36,13 +32,16 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
);
};
// --- KONFIGURACJA ---
const GAP_SIZE = 170;
// --- KONFIGURACJA STABILNA ---
const FPS_LIMIT = 60;
const FRAME_MIN_TIME = 1000 / FPS_LIMIT; // ok. 16.67ms
const GAP_SIZE = 180;
const PIPE_WIDTH = 70;
const PIPE_SPEED = 250; // px/s
const PIPE_SPAWN_RATE = 1.5; // sekundy
const GRAVITY = 1600; // px/s^2
const FLAP_STRENGTH = -450; // px/s
const PIPE_SPEED = 180;
const PIPE_SPAWN_RATE = 2.0;
const GRAVITY = 1200;
const FLAP_STRENGTH = -380;
const CANVAS_HEIGHT = 450;
export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
@@ -64,17 +63,17 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
const scoreRef = useRef(0);
const requestRef = useRef<number>(0);
const lastTimeRef = useRef<number>(0);
const lastFrameTimestampRef = useRef<number>(0); // Do pilnowania FPS
const spawnTimerRef = useRef<number>(0);
const endGame = useCallback(() => {
setGameOver(true);
setIsPlaying(false);
const currentHS = parseInt(localStorage.getItem('flappyKittyHighScore') || '0', 10);
if (scoreRef.current > currentHS) {
if (scoreRef.current > highScore) {
setHighScore(scoreRef.current);
localStorage.setItem('flappyKittyHighScore', scoreRef.current.toString());
}
}, []);
}, [highScore]);
const startGame = useCallback(() => {
setIsPlaying(true);
@@ -86,29 +85,40 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
pipesRef.current = [];
spawnTimerRef.current = 0;
lastTimeRef.current = performance.now();
lastFrameTimestampRef.current = performance.now();
setDisplayKittyY(150);
setDisplayPipes([]);
}, []);
const flap = useCallback(() => {
if (isPlaying && !gameOver) {
velocityRef.current = FLAP_STRENGTH;
}
if (isPlaying && !gameOver) velocityRef.current = FLAP_STRENGTH;
}, [isPlaying, gameOver]);
useEffect(() => {
const update = (currentTime: number) => {
if (gameOver || !isPlaying) return;
// --- MECHANIZM FPS CAP ---
const elapsedSinceLastFrame = currentTime - lastFrameTimestampRef.current;
// Jeśli klatka przyszła za szybko (np. na monitorze 144Hz), pomijamy update
if (elapsedSinceLastFrame < FRAME_MIN_TIME) {
requestRef.current = requestAnimationFrame(update);
return;
}
// Obliczamy dt na podstawie rzeczywistego czasu, który upłynął
const dt = (currentTime - lastTimeRef.current) / 1000;
lastTimeRef.current = currentTime;
lastFrameTimestampRef.current = currentTime; // Aktualizujemy znacznik klatki
const frameTime = Math.min(dt, 0.1);
velocityRef.current += GRAVITY * frameTime;
kittyYRef.current += velocityRef.current * frameTime;
setRotation(Math.min(Math.max(velocityRef.current * 0.15, -20), 90));
setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 70));
if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -20) {
if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -40) {
endGame();
return;
}
@@ -121,26 +131,20 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
}
const updatedPipes = [];
// POPRAWKA: użycie 'const p' zamiast 'let p'
for (const p of pipesRef.current) {
p.x -= PIPE_SPEED * frameTime;
if (p.x < 100 && p.x + PIPE_WIDTH > 50) {
if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 45) {
endGame();
return;
}
}
if (p.x < 50 && !p.passed) {
p.passed = true;
scoreRef.current += 1;
setScore(scoreRef.current);
}
if (p.x > -PIPE_WIDTH) {
updatedPipes.push(p);
}
if (p.x > -PIPE_WIDTH) updatedPipes.push(p);
}
pipesRef.current = updatedPipes;
@@ -176,7 +180,6 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
className="relative w-full max-w-[600px] h-[450px] bg-sky-100 rounded-[3rem] shadow-2xl border-4 border-white overflow-hidden cursor-pointer select-none"
onClick={() => { if (!isPlaying || gameOver) startGame(); else flap(); }}
>
{/* DEKORACJE - 'Sparkles' jest teraz używane i zaimportowane */}
<div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div>
<div className="absolute top-40 right-20 text-white/30"><Sparkles size={60} /></div>
@@ -185,7 +188,7 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
<div className="text-pink-300 text-sm flex items-center justify-end gap-1"><Trophy size={14} /> Record: {highScore}</div>
</div>
<div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.1s ease-out' }}>
<div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.1s linear' }}>
<DetailedKitty isGameOver={gameOver} />
</div>