Игра на скорость реакции

**manifest.json** ```json { "manifest_version": 3, "name": "Игра на скорость реакции", "version": "1.0.0", "description": "Расширение для проверки и улучшения скорости реакции пользователя", "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }, "permissions": [ "storage" ], "action": { "default_popup": "popup.html" } } ``` **popup.html** ```html Игра на скорость реакции

Время реакции: мс

Среднее время: мс

``` **style.css** ```css body { background-color: #000; color: #fff; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { text-align: center; } #circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; margin-bottom: 20px; } .hidden { display: none; } button { padding: 10px 20px; margin: 5px; cursor: pointer; } ``` **script.js** ```javascript let reactionTime = 0; let totalTime = 0; let trials = 0; // Функция для запуска игры function startGame() { const circle = document.getElementById('circle'); circle.classList.remove('hidden'); const startTime = performance.now(); // Случайная задержка появления круга const delay = Math.random() * 4000 + 1000; // от 1 до 5 секунд setTimeout(() => { circle.classList.add('hidden'); document.getElementById('startButton').disabled = false; }, delay); circle.addEventListener('click', () => { const endTime = performance.now(); reactionTime = endTime - startTime; document.getElementById('reactionTime').textContent = reactionTime.toFixed(2); updateAverageTime(); saveData(); }); document.getElementById('startButton').disabled = true; } // Обновление среднего времени реакции function updateAverageTime() { totalTime += reactionTime; trials++; const average = totalTime / trials; document.getElementById('averageTime').textContent = average.toFixed(2); } // Сохранение данных в локальное хранилище function saveData() { chrome.storage.local.set({ totalTime, trials }, () => { console.log('Данные сохранены'); }); } // Загрузка данных из локального хранилища function loadData() { chrome.storage.local.get(['totalTime', 'trials'], (data) => { if (data.totalTime !== undefined && data.trials !== undefined) { totalTime = data.totalTime; trials = data.trials; updateAverageTime(); } }); } // Сброс статистики function resetStats() { totalTime = 0; trials = 0; document.getElementById('reactionTime').textContent = ''; document.getElementById('averageTime').textContent = ''; chrome.storage.local.remove(['totalTime', 'trials'], () => { console.log('Статистика сброшена'); }); } // Обработчики событий document.getElementById('startButton').addEventListener('click', startGame); document.getElementById('resetButton').addEventListener('click', resetStats); // Загрузка сохранённых данных при открытии поп-апа loadData(); ``` **Инструкции по установке расширения в режиме разработчика:** 1. Распакуйте архив с файлами расширения на своём компьютере. 2. Откройте Chrome и перейдите в `chrome://extensions/`. 3. Включите «Режим разработчика» в правом верхнем углу. 4. Нажмите «Загрузить распакованное расширение» и выберите папку с файлами расширения. 5. Расширение будет установлено, и вы сможете использовать его.

Расширение для проверки реакции

Похожее