<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>СуперПамять за один День!</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
#splashScreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
#splashScreen img {
max-width: 90%;
max-height: 90%;
}
#gameContainer {
display: none;
height: 100%;
background-image:
radial-gradient(circle, #ffd700 2px, transparent 2px),
radial-gradient(circle, #ffa500 2px, transparent 2px);
background-size: 50px 50px, 30px 30px;
background-position: 0 0, 25px 25px;
}
.game-content {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
max-width: 400px;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-size: 24px;
color: #ff0000;
}
#numberDisplay {
font-size: 48px;
font-weight: bold;
margin: 20px 0;
min-height: 72px;
}
input, button {
margin: 10px 0;
padding: 5px;
font-size: 18px;
}
#message {
margin-top: 20px;
font-weight: bold;
}
#soundToggle {
position: absolute;
top: 10px;
right: 10px;
}
#timer {
width: 100%;
height: 10px;
background-color: #ddd;
margin-top: 10px;
}
#timerBar {
width: 0%;
height: 100%;
background-color: #4CAF50;
transition: width 0.1s linear;
}
#startMessage {
margin-bottom: 20px;
}
#progressBar {
width: 100%;
height: 20px;
background-color: #ddd;
margin-top: 10px;
border-radius: 10px;
overflow: hidden;
}
#progressBarFill {
width: 0%;
height: 100%;
background-color: #4CAF50;
transition: width 0.5s ease-in-out;
}
.success {
color: green;
}
.failure {
color: red;
}
</style>
</head>
<body>
<div id="splashScreen">
<img src="https://i.imgur.com/RNpBcRR.jpeg" alt="СуперПамять за один День!">
</div>
<div id="gameContainer">
<div class="game-content">
<h1>СуперПамять за один День!</h1>
<div id="progressBar">
<div id="progressBarFill"></div>
</div>
<div id="startMessage">
Нажмите Enter, чтобы начать игру.<br><br>
Правила:<br>
1. Запомните появившееся число.<br>
2. Введите его и нажмите Enter.<br>
3. При правильном ответе длина числа увеличится.<br>
4. При неправильном - уменьшится.<br>
Удачи!<br>
Хотите установить этот тренажер к себе на сайт? <br>
Пишите: kinofilm2009@yandex.ru
</div>
<div id="numberDisplay"></div>
<div id="timer"><div id="timerBar"></div></div>
<input type="number" id="guessInput" placeholder="Введите число" autofocus>
<button onclick="checkGuess()">Проверить</button>
<div id="message"></div>
</div>
<button id="soundToggle" onclick="toggleSound()">🔊 Выключить звук</button>
</div>
<script>
let currentNumber = '';
let digitsCount = 1;
let isNumberVisible = false;
let isSoundOn = true;
let audioContext;
let isGameStarted = false;
window.addEventListener('load', function() {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
});
function hideSplashScreen() {
document.getElementById('splashScreen').style.display = 'none';
document.getElementById('gameContainer').style.display = 'block';
document.getElementById('guessInput').style.display = 'none';
document.querySelector('button').style.display = 'none';
document.getElementById('startMessage').style.display = 'block';
document.getElementById('numberDisplay').style.display = 'none';
document.getElementById('timer').style.display = 'none';
document.getElementById('progressBar').style.display = 'none';
}
document.addEventListener('click', hideSplashScreen, {once: true});
function toggleSound() {
isSoundOn = !isSoundOn;
const soundToggle = document.getElementById('soundToggle');
soundToggle.textContent = isSoundOn ? '🔊 Выключить звук' : '🔇 Включить звук';
if (isSoundOn && !audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
}
function playSound(type) {
if (!isSoundOn || !audioContext) return;
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
switch(type) {
case 'tick':
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.1);
break;
case 'success':
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(500, audioContext.currentTime);
oscillator.frequency.linearRampToValueAtTime(800, audioContext.currentTime + 0.2);
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.2);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.2);
break;
case 'failure':
oscillator.type = 'square';
oscillator.frequency.setValueAtTime(300, audioContext.currentTime);
oscillator.frequency.linearRampToValueAtTime(100, audioContext.currentTime + 0.2);
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.2);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.2);
break;
case 'gameStart':
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(400, audioContext.currentTime);
oscillator.frequency.linearRampToValueAtTime(600, audioContext.currentTime + 0.3);
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.3);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.3);
break;
}
}
function generateNumber() {
currentNumber = '';
for (let i = 0; i < digitsCount; i++) {
currentNumber += Math.floor(Math.random() * 10);
}
document.getElementById('numberDisplay').textContent = currentNumber;
isNumberVisible = true;
let secondsLeft = digitsCount * 0.5;
const totalTime = secondsLeft;
const timerBar = document.getElementById('timerBar');
timerBar.style.width = '100%';
const countdownInterval = setInterval(() => {
playSound('tick');
secondsLeft -= 0.1;
const percentage = (secondsLeft / totalTime) * 100;
timerBar.style.width = `${percentage}%`;
if (secondsLeft <= 0) {
clearInterval(countdownInterval);
if (isNumberVisible) {
document.getElementById('numberDisplay').textContent = '';
isNumberVisible = false;
timerBar.style.width = '0%';
}
}
}, 100);
}
function getCorrectWordForm(number, forms) {
const cases = [2, 0, 1, 1, 1, 2];
return forms[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
}
function updateProgressBar() {
const progressBarFill = document.getElementById('progressBarFill');
const percentage = Math.min((digitsCount - 1) / 50 * 100, 100);
progressBarFill.style.width = `${percentage}%`;
}
function checkGuess() {
const guess = document.getElementById('guessInput').value;
if (guess === '') {
endGame();
return;
}
const messageElement = document.getElementById('message');
const digitForms = ['цифру', 'цифры', 'цифр'];
if (guess === currentNumber) {
playSound('success');
messageElement.textContent = `Поздравляем! Вы запомнили ${digitsCount} ${getCorrectWordForm(digitsCount, digitForms)}.`;
messageElement.className = 'success';
digitsCount++;
} else {
playSound('failure');
messageElement.textContent = `Неправильно. Вы не смогли запомнить ${digitsCount} ${getCorrectWordForm(digitsCount, digitForms)}.`;
messageElement.className = 'failure';
digitsCount = Math.max(1, digitsCount - 1);
}
updateProgressBar();
document.getElementById('guessInput').value = '';
setTimeout(generateNumber, 1500);
}
function endGame() {
const digitForms = ['цифру', 'цифры', 'цифр'];
document.getElementById('message').textContent = `Игра окончена. В последний раз вы запомнили ${digitsCount - 1} ${getCorrectWordForm(digitsCount - 1, digitForms)}. Хотите сыграть еще?`;
document.getElementById('guessInput').style.display = 'none';
document.querySelector('button').textContent = 'Начать заново';
document.querySelector('button').onclick = startGame;
isGameStarted = false;
}
function startGame() {
playSound('gameStart');
digitsCount = 1;
document.getElementById('message').textContent = '';
document.getElementById('guessInput').style.display = 'inline-block';
document.getElementById('startMessage').style.display = 'none';
document.getElementById('numberDisplay').style.display = 'block';
document.getElementById('timer').style.display = 'block';
document.getElementById('progressBar').style.display = 'block';
document.querySelector('button').style.display = 'inline-block';
document.querySelector('button').textContent = 'Проверить';
document.querySelector('button').onclick = checkGuess;
document.getElementById('guessInput').focus();
isGameStarted = true;
updateProgressBar();
generateNumber();
}
document.getElementById('guessInput').addEventListener('input', function() {
if (isNumberVisible) {
document.getElementById('numberDisplay').textContent = '';
isNumberVisible = false;
}
});
document.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
if (!isGameStarted) {
startGame();
} else {
checkGuess();
}
}
});
</script>
</body>
</html>