Kahramanı Matu Yıldız olan, dokunarak ve kaydırarak oynanan bir mobil futbol oyunu promptu. Sahaya dokunduğun yere koşuyorsun, top ayağındayken kaydırarak şut çekiyorsun; hız, dayanıklılık ve moral gibi RPG tarzı değerler, oyuncu performans kartı ve rakip takımın formasyonlu yapay zekâsı da var.
Proje Three.js ile on iki dosyalık bir yapıya bölünüyor; sesler Web Audio API ile üretiliyor.
Sen deneyimli bir oyun geliştiricisisin. Aşağıdaki şartnamelere göre "MATU FUTBOL YILDIZI" adlı, tarayıcıda çalışan, tamamen oynanabilir bir mobil futbol oyunu geliştir. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🏗️ TEKNİK YAPI (Çoklu Dosya Mimarisi) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Proje şu dosyalardan oluşmalı: index.html → Ana giriş noktası, CDN bağlantıları, canvas container css/style.css → UI overlay, HUD, menüler, animasyonlar, Google Fonts js/main.js → Three.js sahne kurulumu, render döngüsü, kamera sistemi js/pitch.js → Saha geometrisi, çim dokusu, çizgiler, kale modelleri js/player.js → Oyuncu sınıfı: model, animasyon, fizik, AI davranışı js/ball.js → Top fiziği: yerçekimi, sürünme, topspin, bounce js/game.js → Oyun durumu makinesi, skor, süre, maç akışı js/ui.js → HUD, skor tablosu, menü yönetimi, bildirimler js/controls.js → Touch/mouse girişi, swipe tespiti, güç göstergesi js/ai.js → Rakip takım yapay zekası, pozisyonlanma, şut kararı js/effects.js → Parçacık sistemleri: gol patlaması, toz, terleme js/audio.js → Web Audio API ile seslendirme (kalabalık, düdük, gol) assets/ → Dokular ve ikonlar ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📦 CDN BAĞIMLILIKLARI (index.html içinde) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!-- Three.js r128 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"> <!-- TWEEN.js — smooth animasyonlar --> <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"> <!-- Google Material Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"> <!-- Google Fonts: Rajdhani + Oswald (spor estetiği) --> <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Oswald:wght@400;700&display=swap"> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 GRAFİK & GÖRSEL KALİTE (pitch.js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SAHA: - 105x68 birim PlaneGeometry, dikey kamera perspektifi (yukarıdan 45°) - Çim dokusu: procedural ShaderMaterial ile koyu/açık yeşil diagonal şeritler (görsel referans: New Star Soccer'daki o ikonik çizgili saha) - Three.js MeshLambertMaterial + lightMap ile saha derinliği - Saha çizgileri: beyaz LineSegments geometrisi (ceza sahası, orta daire, köşe) - Kale: sarı boru malzemesi, CylinderGeometry direktleri + file için WireframeGeometry - Tribün gölgesi: kamera açısından düşen büyük yarı-şeffaf shadow mesh OYUNCU MODELLERİ (player.js): - Her oyuncu: BoxGeometry vücut + SphereGeometry kafa (low-poly ama şık) - Renk kodlaması: takım rengi için uniform material - Gölge: her modelin altında küçük eliptik ShadowMesh - Koşma animasyonu: Math.sin(time) ile bacak/kol sallanması (bone-free) - Oyuncunun üstünde isim etiketi: CSS2DRenderer ile Türkçe isim TOP (ball.js): - SphereGeometry(0.35, 16, 16) + siyah-beyaz pentagon doku (canvas texture) - Fizik: hız vektörü, yerçekimi (0.015), zemin sürtünmesi (0.985) - Topspin: rotasyon hızı = hareket hızına bağlı - Gölge: top altında dinamik boyutlanan daire IŞIKLANDIRMA: - AmbientLight(0xffffff, 0.6) - DirectionalLight(0xfff5e0, 1.2) — güneş ışığı, hafif sarı - DirectionalLight(0x4488ff, 0.3) — gökyüzü dolgu ışığı - Tüm objeler castShadow + receiveShadow aktif ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎮 OYUN MEKANİKLERİ (game.js + controls.js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TEMEL DÖNGÜ: - 90 dakika = 90 saniye gerçek süre - Her "sezon" 10 maç, galip takım ligde ilerler - Oyuncu sadece 1 karakteri kontrol eder: MATU (kahraman oyuncu) KONTROLLER (touch öncelikli, masaüstü de çalışır): - HAREKET: Sahaya dokun/tıkla → Matu o noktaya koşar (lerp ile yumuşak) - ŞUT: Top ayağındayken swipe yap → swipe yönü + hızı = şut yönü ve gücü Güç göstergesi: kavisli dolum barı (CSS animasyonlu, neon sarı) - PAS: Çift dokun → en yakın takım arkadaşına otomatik pas - TAKLА/SPRINT: İki parmakla sürükle → sürat patlaması + toz efekti OYUNCU İSTATİSTİKLERİ (RPG benzeri): - HIZ, ŞUT, PAS, DAYANIKLILIK, MORAL (0-100 arası) - Her başarılı aksiyon → XP kazan → seviye atla → stat puanı dağıt - Maç sonu "PERFORMANS KARTI" ekranı (sinema stili siyah overlay) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🤖 YAPAY ZEKA (ai.js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TAKIM FORMASYONU: 4-4-2 dinamik grid - Her AI oyuncu kendi "ev bölgesi"ne sahip, toptan uzaklaşınca geri döner - Top sahibi AI: şut mesafesindeyse şut, değilse pas veya dribling - Savunma modu: top rakipteyken geri çekilme ve bölge kapama - Zorluk seviyeleri: AMATÖR / PROFESYONEL / EFSANEVİ (reaksiyon hızı ve karar ağırlıkları değişir) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ EFEKTLER & JUICE (effects.js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GOL PATLAMASI: - 200 parçacık: Points geometrisi, sarı+turuncu+beyaz renkler - Kamera: hafif zoom-in + shake (0.3 saniye) - GOL yazısı: devasa, ekranı kaplayan Türkçe "GOL!" metni TWEEN ile scale: 0→1.2→1 bounce animasyonu - Konfeti yağmuru: rastgele renkli BoxGeometry parçaları düşer ŞUT EFEKTI: - Top arkasında motion blur: 5 ghost kopyası, azalan opacity - Kale direğine çarparsa: kırmızı flaş + titreşim DİĞER: - Faul: sarı/kırmızı kart overlay animasyonu - Kalabalık sesi: Web Audio API ile procedural uğultu (gol anında frekans ve volume zirveye çıkar) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🖥️ HUD & UI (ui.js + style.css) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SKOR TABLOSU (üst bar): - Sol: Takım adı + logo rengi + skor | Orta: dakika sayacı | Sağ: rakip - Arka plan: yarı şeffaf siyah glassmorphism (backdrop-filter: blur) - Font: Oswald Bold, büyük ve okunur ALT HUD: - Sol: Matu'nun kondisyon barı (dolup boşalan neon yeşil bar) - Orta: Material Icons Round ikonları: <span class="material-icons-round">sports_soccer</span> → Şut modu <span class="material-icons-round">swap_horiz</span> → Pas <span class="material-icons-round">bolt</span> → Sprint - Sağ: Mevcut stat kartı (küçük, kaydırılabilir) MENÜ EKRANları: - Ana Menü: gradient arka plan (koyu yeşil→siyah), dönen top animasyonu - Takım seç: Türk Süper Lig takımları (Galatasaray, Fenerbahçe, Beşiktaş, Trabzonspor, vb.) — renkler ve amblemi temsil eden geometrik şekiller - Maç sonu: sinematik "MAÇIN ADAMI" kartı ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🌍 TÜRKÇE LOKALIZASYON ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Tüm UI metinleri Türkçe olmalı: - "OYNA", "AYARLAR", "KARİYER", "ÇIKIŞ" - "GOL!", "FAUL!", "PENALTI!", "DEVRE", "MAÇ BİTTİ" - "Harika Şut!", "Mükemmel Pas!", "İnanılmaz Kurtarış!" - Yorum bildirimleri: ekranın altında 2 saniyelik toast mesajları - Oyuncu isimleri Türkçe: Matu Yıldız (kahraman), rakip isimler jenerik Türkçe ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 ÇALIŞMA TALİMATI ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Her dosyayı ayrı ayrı yaz, tam ve eksiksiz 2. index.html tüm JS dosyalarını sıralı olarak yüklesin 3. Hiçbir harici build aracı kullanma (webpack, vite yok) — Tarayıcıda doğrudan açılabilmeli 5. Konsolda hata olmadan çalışmalı 6. Her dosyanın başına Türkçe yorum satırları ekle Önce index.html ile başla, sonra sırayla diğer dosyaları yaz. Her dosyayı yazmadan önce kısa bir "📁 [dosya adı] yazılıyor..." başlığı koy.
Yorumlar
Yorum Yap