fisema
Aşağıdaki makalede bulunan yönergeleri takip eder misiniz ?
Aşağıda React ve Tailwind CSS kullanılarak geliştirilen bir uygulamayı bulabilirsiniz. Bu kod, oyun bileşeninin her zaman belirli bir oranda kalmasını sağlar, sayfa boyutu değiştiğinde bile orantısını korur, ve her durumda sayfada kaydırma çubuğu çıkmamasını sağlar.
Bu örnekte, React bileşeni JavaScript kodları da dahil olacak şekilde eksiksiz bir şekilde yeniden düzenlenmiştir.
Tam React Uygulaması
1. App.js
import React from 'react';
import GameComponent from './GameComponent';
function App() {
return (
<div className="flex items-center justify-center h-screen w-screen overflow-hidden bg-gray-800">
<GameComponent />
</div>
);
}
export default App;
Bu bileşen, tam ekran boyutunda olan bir kapsayıcıyı temsil eder ve GameComponent bileşenini ortalar.
2. GameComponent.js
import React, { useEffect, useRef } from 'react';
const GameComponent = () => {
const gameRef = useRef(null);
useEffect(() => {
// Burada oyunun oluşturulması veya herhangi bir başlangıç kodu yer alabilir
const canvas = gameRef.current;
const ctx = canvas.getContext('2d');
// Basit bir örnek olarak, oyunda sadece basit bir kutu çiziliyor
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
}, []);
return (
<div className="aspect-w-16 aspect-h-9 w-full h-full max-w-[90vw] max-h-[90vh] bg-green-500 rounded-lg shadow-md flex items-center justify-center">
<canvas ref={gameRef} className="w-full h-full"></canvas>
</div>
);
};
export default GameComponent;
Açıklamalar
App.js Bileşeni:
App.js, GameComponent bileşenini tam ekran içinde ortalar. flex, items-center, ve justify-center sınıfları oyun bileşenini sayfa ortasında konumlandırır.h-screen w-screen sınıfları, sayfanın tamamını kapsayan bir konteyner oluşturur.overflow-hidden, bileşen taşsa bile kaydırma çubuklarının görünmesini engeller.
GameComponent.js Bileşeni:
GameComponent oyun içeriğini temsil eder ve aspect-ratio kullanarak her zaman sabit oranını korur.useRef ve useEffect React hook'ları kullanılarak, bileşen ilk yüklendiğinde canvas elemanına erişilip oyun içeriği (örneğin, bir grafik) oluşturulabilir.aspect-w-16 aspect-h-9: Tailwind CSS'in @tailwindcss/aspect-ratio eklentisiyle sağlanan sınıf olup, bileşenin 16:9 oranında kalmasını sağlar.w-full h-full max-w-[90vw] max-h-[90vh]: Bu sınıflar bileşenin maksimum boyutunu %90 olarak sınırlandırır ve her durumda orantıyı korur.bg-green-500 rounded-lg shadow-md flex items-center justify-center: Bu sınıflar stil ve yerleşimi belirler, bileşenin görselliği açısından hoş bir görünüm sağlar.<canvas> elementi oyunun grafiklerinin çizildiği alan olarak kullanılır ve ref ile DOM'a erişilir.
Tailwind CSS Kurulumu
Bu kodun çalışabilmesi için, Tailwind CSS ve @tailwindcss/aspect-ratio eklentisini yüklemeniz gerekir. Bu işlemleri yapmak için terminalde aşağıdaki komutları kullanabilirsiniz:
npm install tailwindcss @tailwindcss/aspect-ratio
Ardından tailwind.config.js dosyasına şu eklentiyi ekleyin:
module.exports = {
plugins: [
require('@tailwindcss/aspect-ratio'),
// Diğer eklentiler...
],
};
Özet
Bu tam uygulama örneği, oyun bileşeninin oranını korumasını ve ekrana göre yeniden boyutlanmasını sağlıyor. canvas elemanını kullanarak oyun içeriğinizi çizebilir ve dinamik olarak güncelleyebilirsiniz. Tailwind CSS sınıfları sayesinde stil ve yerleşim kolayca yönetilebilir, böylece kaydırma çubuklarının çıkması engellenmiş olur.
