Vibecoding · 09-dars · 7–8-sinflar
Fan: Mini GameDev & JavaScript Mantiq Kohorta: Middle Web 7-8 Hafta: 2 (Mini-O'yinlar)

Mini-O'yin: 'Kiber-Reaksiya' Tezlik Testi va Millisekundlar Hisobi

Haqiqiy kibersportchining reaksiya tezligi qancha? 250 millisekundmi yoki 180 dan tezmi? Bugun biz JavaScript da birinchi to'liq brauzer o'yinimizni yaratamiz: `setTimeout` orqali tasodifiy kechikish yaratishni, `Date.now()` bilan vaqtni millisekundlargacha o'lchashni va falstartlarni ushlashni o'rganamiz.

O'yin Qoidalari

O'yin Holatlari (Game States): Qizil, Yashil va Klik!

1. Kutish (Qizil Maydon)

Maydon qizil. O'yinchi kutmoqda. Tasodifiy 2 dan 5 soniyagacha vaqt o'tadi.

Erta bosilsa = Falstart!

2. Signal (Yashil Maydon)

Maydon bir zumda yashilga aylanadi! Start vaqti millisekundda belgilanadi.

Imkon qadar tezroq bos!

3. Natija (Baholash)

O'yinchi bosdi! Vaqt ayirmasi hisoblanadi va unvon beriladi.

Masalan: 214 ms · Daraja: PRO
Aniq Vaqt O'lchovi

Vaqtni Qanday O'lchaymiz? `Date.now()` Funksiyasi Sirlari

Unix Timestamp Nima?

Kompyuterlar vaqtni 1970-yil 1-yanvardan hozirgacha o'tgan millisekundlar soni (1 soniya = 1000 ms) orqali hisoblaydi.

const now = Date.now();
console.log(now); // 1774289400123 ms

Reaksiya Vaqti Formulasi

// 1. Yashil yongandagi vaqt
let startTime = Date.now();

// 2. Foydalanuvchi bosgandagi vaqt
let clickTime = Date.now();

// 3. Reaksiya tezligi ayirmasi:
let reactionTime = clickTime - startTime;

console.log("Sizning tezligingiz: " + reactionTime + " ms");
Kutilmagan Vaqt

Kutilmagan Burilish: `setTimeout` va `Math.random()`

Kutish Buyrug'i: `setTimeout`

Berilgan kodni ma'lum millisekunddan keyin ishga tushiradi:

setTimeout(function() {
  console.log("3 soniya o'tdi!");
}, 3000);

2 dan 5 Soniyagacha Tasodifiy Vaqt

// 2000 ms dan 5000 ms gacha tasodifiy son
const randomDelay = Math.floor(Math.random() * 3000) + 2000;

console.log("Yashil chiroq " + randomDelay + " ms dan keyin yonadi");

setTimeout(makeGreen, randomDelay);
Adolatli O'yin

Hiylalarni Tutish: Falstartni Qanday Aniqlaymiz?

Oldindan Taxmin Qilish Hiylasi

O'yinchi yashil yonishini kutmasdan, qizil ekranni ketma-ket bosaveradi.

Falstartni Tekshirish Kodi

let isGreen = false;
let timerId = null;

gameBox.addEventListener('click', function() {
  if (!isGreen) {
    // Vaqtidan oldin bosildi!
    clearTimeout(timerId); // Kutishni to'xtatish
    gameBox.textContent = "⚠️ FALSTART! Shoshilmang!";
    gameBox.className = "box-penalty";
  } else {
    // Yashil yongandan keyin bosildi (To'g'ri!)
    calculateScore();
  }
});
Kiber-Darajalar

Kiber-Reaksiya Shkalasi: Sizning Darajangiz Qanday?

Reaksiya Vaqti Kiber-Daraja Tavsif va Taqqoslash
< 180 ms ⚡ GODLIKE / Кибер-Бог CS:GO va Valorant jahon chempionlari darajasi
180 – 250 ms ⭐ PRO-GAMER / Профи Juda yuqori tezlik, kuchli mashq qilingan diqqat
250 – 350 ms 👤 HUMAN / Норма Oddiy insonning o'rtacha normal ko'rsatkichi
> 350 ms 🐢 TURTLE / Медленно Charchagan yoki xayoli bo'lingan holat
Eng Yaxshi Natija

Eng Yaxshi Natijani Saqlash: `bestScore` Mantiqi

Eng Kichik Sonni Topish

Reaksiya o'yinlarida millisekund soni qancha kichik bo'lsa, natija shuncha yaxshi hisoblanadi!

Rekordni Yangilash Kodi

let bestScore = Infinity; // Boshida cheksiz katta

function checkRecord(currentScore) {
  if (currentScore < bestScore) {
    bestScore = currentScore;
    recordDisplay.textContent = bestScore + " ms (Yangi Rekord!)";
    recordDisplay.style.color = "#00ff88";
  }
}
To'liq O'yin Karkasi

To'liq O'yin Arxitekturasi: 3 Ta Asosiy Funksiya

1. startGame()

Maydonni qizil qiladi, 'Kuting...' yozadi va tasodifiy taymerni yoqadi.

2. triggerGreen()

Maydonni yashil qiladi, 'BOSING!' yozadi va start vaqtini oladi.

3. handlePlayerClick()

Vaqtni hisoblaydi, falstartni tekshiradi va natijani ko'rsatadi.

Ovoz va Effektlar

O'yinga Ovoz Qo'shish: Signal Chirog'i va G'alaba Ovozlar

JavaScript da Ovozni Yangratish

const greenSound = new Audio('beep.mp3');
const winSound = new Audio('win.mp3');

function triggerGreen() {
  gameBox.className = "box-green";
  greenSound.play(); // Bir lahzada ovoz yangraydi!
}

Ovoz Nima Uchun Muhim?

Ilmiy isbot: inson tovushli signalga ko'rish signaliga qaraganda 30-40 millisekund tezroq javob beradi! Ovoz qo'shilsa natijalar yaxshilanadi.

Amaliy O'yin Maydoni

Amaliyot: Kiber-Reaksiya Chempionati (`game/index.html`)

O'yin Sinov Stendi

Dars papkasidagi o'yinda quyidagi sinovlar bajariladi:

  • 3 ta urinish: 3 marta o'ynab, o'rtacha natijani topish.
  • Falstart sinovi: Qizil ekranni bosib, jarima mexanizmini tekshirish.
  • Rekord o'rnatish: Shaxsiy eng yaxshi natijani qayd etish.

Ish Varaqasidagi Topshiriq

  1. Brauzerda game/index.html ni oching.
  2. 3 ta urinish natijasini millisekundlarda yozing.
  3. Jadvaldan o'z kiber-darajangizni aniqlang.
  4. Vaqt ayirmasi formulasini ish varaqasiga qayd eting.
O'yinni Mukammallashtirish

O'yin Qulayligi: Chiroyli Animatsiyalar va Qayta Boshlash

Probel Tugmasi Bilan Qayta Boshlash

Kibersportchilar har safar sichqoncha bilan 'Qayta o'ynash' tugmasini bosishni yoqtirmaydi. Probel (Space) tugmasi o'yinni darhol qayta boshlashi kerak!

Probelni Tutish Kodi

document.addEventListener('keydown', function(e) {
  if (e.code === "Space") {
    e.preventDefault(); // Sahifa pastga sakramasligi uchun
    startGame();
  }
});
09-Dars Yakuni · 10 Ball

Xulosa: JavaScript da Birinchi To'liq Brauzer O'yini

Darsning 3 Ta Bosh Qoidasi

  • Date.now() — kompyuter soati: Vaqt ayirmasi aniq millisekundlarni hisoblab beradi.
  • setTimeout kutilmagan vaqt yaratadi: Tasodifiy sonlar o'yinni qiziq va adolatli qiladi.
  • O'yinni falstartdan himoyalang: Ball berishdan oldin yashil yonib ulgurganini tekshiring.

10 Ballik Baholash Mezoni

  • Vaqt Nazariyasi: Date.now() va millisekundlar formulasini bilish — 3 ball
  • O'yin Chempionati: 3 ta urinish va kiber-darajani aniqlash — 3 ball
  • Falstart va Rekord Kodi: to'g'ri holat tekshiruvi va bestScore mantiqi — 4 ball
  • Rag'bat: Probel tugmasi orqali o'yinni qayta boshlash — +2 ball
Target International SchoolTarget International School Введение 1 / 12 0–3