fix: speed calculated based by user monitor hz
This commit is contained in:
Pc
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';
|
||||
|
||||
// --- MODEL KOTA (bez zmian) ---
|
||||
// --- MODEL KOTA ---
|
||||
interface DetailedKittyProps { isGameOver: boolean; }
|
||||
const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
|
||||
const mainColor = isGameOver ? '#cbd5e1' : '#f472b6';
|
||||
@@ -32,16 +32,13 @@ const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
|
||||
);
|
||||
};
|
||||
|
||||
// --- KONFIGURACJA STABILNA ---
|
||||
const FPS_LIMIT = 60;
|
||||
const FRAME_MIN_TIME = 1000 / FPS_LIMIT; // ok. 16.67ms
|
||||
|
||||
// --- KONFIGURACJA NIEZALEŻNA OD FPS (Wartości na sekundę) ---
|
||||
const GAP_SIZE = 180;
|
||||
const PIPE_WIDTH = 70;
|
||||
const PIPE_SPEED = 180;
|
||||
const PIPE_SPAWN_RATE = 2.0;
|
||||
const GRAVITY = 1200;
|
||||
const FLAP_STRENGTH = -380;
|
||||
const PIPE_SPEED = 200; // px/s
|
||||
const PIPE_SPAWN_RATE = 1.8; // sekundy
|
||||
const GRAVITY = 1400; // px/s^2
|
||||
const FLAP_STRENGTH = -420; // px/s
|
||||
const CANVAS_HEIGHT = 450;
|
||||
|
||||
export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
@@ -63,17 +60,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);
|
||||
if (scoreRef.current > highScore) {
|
||||
const currentHS = parseInt(localStorage.getItem('flappyKittyHighScore') || '0', 10);
|
||||
if (scoreRef.current > currentHS) {
|
||||
setHighScore(scoreRef.current);
|
||||
localStorage.setItem('flappyKittyHighScore', scoreRef.current.toString());
|
||||
}
|
||||
}, [highScore]);
|
||||
}, []);
|
||||
|
||||
const startGame = useCallback(() => {
|
||||
setIsPlaying(true);
|
||||
@@ -84,10 +81,10 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
velocityRef.current = 0;
|
||||
pipesRef.current = [];
|
||||
spawnTimerRef.current = 0;
|
||||
lastTimeRef.current = performance.now();
|
||||
lastFrameTimestampRef.current = performance.now();
|
||||
lastTimeRef.current = performance.now(); // Inicjalizacja czasu
|
||||
setDisplayKittyY(150);
|
||||
setDisplayPipes([]);
|
||||
setRotation(0);
|
||||
}, []);
|
||||
|
||||
const flap = useCallback(() => {
|
||||
@@ -98,31 +95,28 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
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ął
|
||||
// --- DYNAMICZNY DELTA TIME ---
|
||||
// Obliczamy ile sekund upłynęło od ostatniej klatki (np. 0.0069s dla 144Hz)
|
||||
const dt = (currentTime - lastTimeRef.current) / 1000;
|
||||
lastTimeRef.current = currentTime;
|
||||
lastFrameTimestampRef.current = currentTime; // Aktualizujemy znacznik klatki
|
||||
|
||||
// Zabezpieczenie przed ogromnym skokiem fizyki przy lagu
|
||||
const frameTime = Math.min(dt, 0.1);
|
||||
|
||||
// Fizyka grawitacji
|
||||
velocityRef.current += GRAVITY * frameTime;
|
||||
kittyYRef.current += velocityRef.current * frameTime;
|
||||
setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 70));
|
||||
|
||||
if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -40) {
|
||||
// Płynna rotacja zależna od prędkości pionowej
|
||||
setRotation(Math.min(Math.max(velocityRef.current * 0.12, -20), 80));
|
||||
|
||||
// Kolizja z sufitem/ziemią
|
||||
if (kittyYRef.current > CANVAS_HEIGHT - 40 || kittyYRef.current < -50) {
|
||||
endGame();
|
||||
return;
|
||||
}
|
||||
|
||||
// Spawn rur
|
||||
spawnTimerRef.current += frameTime;
|
||||
if (spawnTimerRef.current >= PIPE_SPAWN_RATE) {
|
||||
const topHeight = Math.random() * (220 - 70) + 70;
|
||||
@@ -130,26 +124,34 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
spawnTimerRef.current = 0;
|
||||
}
|
||||
|
||||
// Ruch rur i kolizje
|
||||
const updatedPipes = [];
|
||||
for (const p of pipesRef.current) {
|
||||
p.x -= PIPE_SPEED * frameTime;
|
||||
if (p.x < 100 && p.x + PIPE_WIDTH > 50) {
|
||||
|
||||
// Hitbox (z małym marginesem dla kota)
|
||||
if (p.x < 100 && p.x + PIPE_WIDTH > 55) {
|
||||
if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 45) {
|
||||
endGame();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Punktacja
|
||||
if (p.x < 50 && !p.passed) {
|
||||
p.passed = true;
|
||||
scoreRef.current += 1;
|
||||
setScore(scoreRef.current);
|
||||
}
|
||||
|
||||
if (p.x > -PIPE_WIDTH) updatedPipes.push(p);
|
||||
}
|
||||
pipesRef.current = updatedPipes;
|
||||
|
||||
// Update stanów do renderowania
|
||||
setDisplayKittyY(kittyYRef.current);
|
||||
setDisplayPipes([...pipesRef.current]);
|
||||
|
||||
requestRef.current = requestAnimationFrame(update);
|
||||
};
|
||||
|
||||
@@ -171,13 +173,13 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
}, [isPlaying, gameOver, startGame, flap]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[75vh] p-4 font-sans">
|
||||
<div className="flex flex-col items-center justify-center min-h-[75vh] p-4 font-sans select-none">
|
||||
<button onClick={onBack} className="mb-6 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none">
|
||||
<ArrowLeft size={20} /> Back to Menu
|
||||
</button>
|
||||
|
||||
<div
|
||||
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"
|
||||
className="relative w-full max-w-[600px] h-[450px] bg-sky-100 rounded-[3rem] shadow-2xl border-4 border-white overflow-hidden cursor-pointer"
|
||||
onClick={() => { if (!isPlaying || gameOver) startGame(); else flap(); }}
|
||||
>
|
||||
<div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div>
|
||||
@@ -188,7 +190,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 linear' }}>
|
||||
<div className="absolute left-10 z-20" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
|
||||
<DetailedKitty isGameOver={gameOver} />
|
||||
</div>
|
||||
|
||||
@@ -216,6 +218,7 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-4 text-slate-400 text-sm font-bold uppercase tracking-widest">Physics: {lastTimeRef.current ? "Frame-Independent" : "Detecting..."}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user