Web Architecture & Game Logic · 7–8-sinf · 5-hafta

FUT Squad Builder: Graf Bog'liqliklari, Taktik Maydon va Kimyo Algoritmi

Yakkalik o'yinchi kartochkasidan butun jamoa tizimiga o'tamiz: 4-3-3 taktik yashil maydonini qurish, o'yinchilar orasidagi graf bog'liqliklari (Links) va EA Sports FC ning mashhur jamoaviy kimyo (Chemistry) algoritmini dasturlash!

⚽ 11 talik Taktik Maydon 🕸️ Graf Bog'liqliklari (Links) 🧪 Kimyo Algoritmi (Chemistry) ⏱️ 40 Daqiqalik Aniq Mahsulot
Tizimli Tafakkur

Yakkalik Kartadan Jamoaviy Tizimga: Nega 11 ta Yulduz Har Doim Ham Yutmaydi?

21-dars (Yakkalik Profil):
  • Har bir karta mustaqil baholandi (OVR reytingi: PAC, SHO, DEF).
  • Yonidagi jamoadoshlari va taktik sxema unga ta'sir qilmas edi.
22-dars (Jamoaviy Sinergiya va Graf):
  • Agar 11 ta super-yulduz har xil davlat va ligadan yig'ilsa — kimyo 0 bo'ladi!
  • Bir xil klub, liga yoki millat o'yinchilar o'rtasida zanjirli aloqa yaratadi.
  • Yuqori kimyo butun jamoaning tezligi va pas aniqligini oshiradi.

💡 IT muhandisligida bu Murakkab Tizimlarni Modellashtirish deyiladi: tizimning kuchi elementlarning o'ziga emas, balki ular orasidagi bog'liqliklarga tayanadi!

Ma'lumotlar Modeli

O'yinchi Obyekti Tuzilmasi: Kimyo Hisoblash uchun Atributlar

📦 O'yinchi JavaScript Obyektida

Kimyo zanjirini hisoblash uchun 4 ta asosiy atribut shart: pos, club, league va nation.

const mbappe = { id: "mbappe", name: "K. Mbappé", pos: "ST", altPos: ["LW"], ovr: 91, club: "Real Madrid", league: "La Liga", nation: "France" };

🏟️ Tarkib Xaritasi (Squad Dictionary)

Har bir taktik slotga (GK, CB1, ST) o'yinchi obyekti biriktiriladi (agar bo'sh bo'lsa null bo'ladi).

const currentSquad = { "st": mbappe, "lw": vinicius, "rw": rodrygo, "cam": bellingham, "cb1": rudiger };
Taktik Maydon Koordinatalari

Taktik Sxemalar: 4-3-3, 4-4-2 va Foizli Koordinatalar (%)

⚡ 4-3-3 (Attack)

Klassik hujumkor sxema: 1 darvozabon, 4 himoyachi (LB, 2 CB, RB), 3 yarimhimoyachi (2 CM, CAM) va hujum uchligi (LW, ST, RW).

⚖️ 4-4-2 (Balanced)

Inglizcha muvozanatli klassika: 4 himoyachi, 4 yarimhimoyachi qatorda (LM, 2 CM, RM) va ikki markaziy hujumchi (ST1, ST2).

📐 Foizli Joylashtirish

Slotlar CSS foizlarida joylashadi: left: X%; top: Y%. Natijada maydon har qanday ekranda proporsional qoladi!

// Slot koordinatasi maydonning foizlarida aniqlanadi: { id: 'st', pos: 'ST', x: 82, y: 50 }, // Hujumchi markazda oldinda { id: 'gk', pos: 'GK', x: 8, y: 50 } // Darvozabon o'z darvozasida
Graf Nazariyasi

Futbol Maydoni Graf Sifatida: Tugunlar (Nodes) va Bog'lanishlar (Links)

🟢 Tugunlar (Nodes)

Maydondagi har bir pozitsiya — bu grafning alohida tuguni (jami 11 ta). Tugun o'yinchi obyekti ma'lumotini saqlaydi.

slots: [ { id: 'gk' }, { id: 'cb1' }, { id: 'cb2' }, { id: 'cm1' }, { id: 'st' } ... ]

🔗 Qovurg'alar / Chiziqlar (Links)

Pozitsiyalar orasidagi taktik bog'liqlik. Masalan, darvozabon faqat CB1 va CB2 bilan, hujumchi esa CAM, LW va RW bilan bog'langan!

links: [ ['gk', 'cb1'], ['gk', 'cb2'], ['cb1', 'cb2'], ['cam', 'st'], ['lw', 'st'], ['rw', 'st'] ]

💡 Dasturlashda aynan mana shunday graflar orqali Instagram do'stlik tarmog'i, Yandex/Google Xaritalardagi yo'nalishlar va neyron tarmoqlar ishlaydi!

Kimyo Algoritmi

Aloqa Qoidalari: Yashil (Strong), Sariq (Good) va Kulrang (Dead)

Aloqa Turi Taqqoslash Sharti (Mantiq) Kimyo Balli Real Misol
🟢 Strong Link (Yashil) Bir xil KLUB YOKI (bir xil MILLAT + bir xil LIGA) +3 ball (Maksimal) Mbappé & Vinícius (Real Madrid)
🟡 Good Link (Sariq) Faqat bir xil LIGA (boshqa klub) YOKI faqat bir xil MILLAT +1..2 ball Haaland & Ødegaard (Norvegiya)
⚪ Dead Link (Kulrang) Hech qanday umumiy atribut yo'q 0 ball Mbappé & Haaland (Bog'lanishsiz)
function calculateLink(p1, p2) { if (p1.club === p2.club) return 'strong'; // Bir xil klub if (p1.nation === p2.nation && p1.league === p2.league) return 'strong'; if (p1.league === p2.league || p1.nation === p2.nation) return 'good'; return 'dead'; }
Pozitsiya Mosligi

Pozitsiya Mosligi: Hujumchini Himoyaga Qo'ysa Nima Bo'ladi?

✅ O'z Pozitsiyasida (In Position)

O'yinchi o'zining asosiy yoki muqobil (altPos) o'rnida o'ynasa, aloqalariga qarab 1 dan 3 gacha kimyo yulduziga ega bo'ladi.

// Mbappé ST slotida joylashdi slot.pos === player.pos // true → Kimyo hisoblanadi!

❌ Noto'g'ri Pozitsiya (Out of Position)

Agar hujumchini markaziy himoyaga qo'yib qo'ysangiz: uning shaxsiy kimyosi 0/3 bo'ladi va qizil xatolik belgisi chiqadi!

// Mbappé CB slotida joylashdi if (!isCorrectPos) { playerChem = 0; // Kimyo bekor qilinadi! }

⚖️ Jamoaning maksimal mumkin bo'lgan kimyosi: 11 ta o'yinchi × 3 ta yulduzcha = 33 ball!

Dinamik SVG Liniyalari

Maydonda O'yinchilar Orasida Qanday Qilib Chiziq Chiziladi?

1. Maydon Ustidagi SVG Qatlami

O'yinchi kartalari ostida shaffof SVG qatlami (viewBox="0 0 1000 680") joylashtiriladi.

<svg class="chemistry-svg-links" viewBox="0 0 1000 680"> <line x1="80" y1="340" x2="240" y2="258" class="chem-link strong" /> </svg>

2. JS Orqali Chiziqni Chizish

Massivdagi har bir bog'liqlik uchun JS ikki slot koordinatasini oladi va sifatiga qarab rang beradi.

const line = document.createElementNS( 'http://www.w3.org/2000/svg', 'line' ); line.setAttribute('class', `chem-link ${quality}`); svg.appendChild(line);
Interaktiv Studiya

FUT Squad Builder: Studiya Interfeysi va Imkoniyatlari

Maydon

🏟️ Taktik Yashil Maydon

11 ta interaktiv slot, mini kartochkalar, 3 ta kimyo rombiklari va rangli aloqa liniyalari.

Bozor

🛒 O'yinchilar Bozori

16+ ta super-yulduzlar katalogi, pozitsiya bo'yicha filtrlar va bitta klikda maydonga qo'yish.

Kvestlar

🏆 6 ta Kvest (10 Ball)

Jonli tekshiruv: taktik sxema, 11 o'yinchi, 3 ta yashil zanjir, 85+ OVR va JSON eksporti!

11 Daqiqalik Amaliy Sprint

Missiya: 24+ Kimyo va 85+ Kuchga Ega Dream Team Shakllantirish!

📋 Bosqichma-bosqich ko'rsatma:

  1. Brauzerda builder/index.html studiyasini oching.
  2. Taktik sxemani tanlang: 4-3-3 yoki 4-4-2.
  3. Transfer bozoridan barcha 11 ta pozitsiyani to'ldiring.
  4. Klubdoshlarni yonma-yon qo'yib, kamida 3 ta yashil chiziq chiqaring.
  5. Jamoaviy kimyoni 24/33 dan oshiring va tarkibni JSON qilib yuklang!
11:00
Xatolar Tahlili

Graf va Kimyo Hisoblashda Uchraydigan Tipik Xatolar

⚠️ 1. Dublikat O'yinchilar

Bitta o'yinchi bir vaqtda ikkita slotda (masalan, ST va LW) o'ynay olmaydi. Massivda unikal id tekshirilishi shart!

⚠️ 2. Pozitsiyani Tekshirmaslik

Agar slot.pos === player.pos tekshirilmasa, himoyaga tushgan hujumchi to'liq kimyo olib, mantiqni buzadi!

⚠️ 3. ViewBox Masshtabi

Agar slotning % koordinatalari SVG viewBox (1000 × 680) o'lchamiga to'g'ri ko'paytirilmasa, chiziqlar chetga surilib ketadi!

Xulosa va Baholash

Dars Xulosasi va 10 Ballik Baholash Mezoni

📊 Baholash Mezoni (10 ball):

  • 1 ball: Taktik sxemani to'g'ri tanlash (4-3-3, 4-4-2 yoki 3-5-2).
  • 2 ball: Barcha 11 ta pozitsiyani to'liq to'ldirish.
  • 2 ball: Maydonda kamida 3 ta yashil zanjir (Strong Links) hosil qilish.
  • 2 ball: Jamoaviy kimyoni kamida 20/33 ga yetkazish.
  • 2 ball: Elita daraja: OVR 85+ va Kimyo 26+ ga erishish.
  • 1 ball: Tarkibni JSON fayl formatida eksport qilib saqlash.

🏠 Uyga Vazifa:

O'zingiz 21-darsda yaratgan shaxsiy kartochkangizni ushbu jamoaga qo'shing! O'zingizni ST yoki CAM pozitsiyasiga sardor qilib qo'yib, o'z ligangizdan jamoadoshlar yig'ing va umumiy kimyoni 30+ ballga yetkazing. Eksport qilingan JSON faylni LMS tizimiga yuklang!

Target International School • IT & CyberSecurity