Stamina fati nos ligabunt et sine spe in terram proicient.
О юная душа, ты забрела в город грёз! Отдохни перед долгой дорогой и наберись знаний, они тебе пригодятся.
Флуд [00] Мы развели костёр
Страница: 1
Сообщений 1 страница 19 из 19
Поделиться12024-04-13 20:17:49
- Администратор
- Сообщений: 43
Поделиться22024-04-13 20:21:16
- Администратор
- Сообщений: 5
- Раса: Забытый народ
- Фракция: Вестники
Тест 00
Поделиться32024-04-13 22:05:00
- Модератор
- Сообщений: 3
Отредактировано Ouroboros (2024-04-13 22:11:11)
Поделиться42024-04-14 10:55:59
- Администратор
- Сообщений: 43
Ouroboros
тык
Поделиться52024-04-14 11:09:33
- Модератор
- Сообщений: 3
Paradox
Поделиться62024-04-14 11:10:33
- Администратор
- Сообщений: 43
Ouroboros
Поделиться72024-04-21 10:29:34
- Модератор
- Сообщений: 3
:0
Поделиться82024-07-31 21:23:54
- Администратор
- Сообщений: 43
Работай код, работай хата
Поделиться92024-12-25 13:43:35
- Администратор
- Сообщений: 43
[html]<style>
.player-container{background-color:#29292E;padding:20px;border-radius:10px;text-align:center;width:600px;margin:auto;box-shadow:0 8px 30px rgba(0,0,0,0.7);}
.player-title,.track-info{color:white;margin-top:10px;}
.album-cover{width:100%;border-radius:10px;}
.audio-controls{margin-top:10px;}
.control-button{background-color:transparent;border:none;cursor:pointer;margin:0 5px;}
.control-button img{width:30px;height:30px;}
.track-list{margin-top:15px;text-align:left;max-height:150px;overflow-y:auto;background-color:rgba(80,80,80,0.8);border-radius:10px;padding:10px;}
.track-item{color:white;cursor:pointer;margin:5px 0;}
.track-item:hover{text-decoration:underline;}
</style>
<div class="player-container">
<h2 class="player-title">Музыкальный Плеер</h2>
<img src="https://forumupload.ru/uploads/0012/14/e8/171/694951.png" alt="Обложка песни" class="album-cover" id="albumCover">
<audio id="audioPlayer" controls style="width:100%;margin-top:10px;" onended="nextTrack()">
<source id="audioSource" src="https://forumstatic.ru/files/0012/14/e8/46331.mp3" type="audio/mpeg">Ваш браузер не поддерживает аудио.
</audio>
<div class="audio-controls">
<button onclick="previousTrack()" class="control-button"><img src="https://img.icons8.com/material-outlined/24/ffffff/previous.png" alt="Previous"></button>
<button onclick="document.getElementById('audioPlayer').play()" class="control-button"><img src="https://img.icons8.com/material-outlined/24/ffffff/play.png" alt="Play"></button>
<button onclick="document.getElementById('audioPlayer').pause()" class="control-button"><img src="https://img.icons8.com/material-outlined/24/ffffff/pause.png" alt="Pause"></button>
<button onclick="document.getElementById('audioPlayer').pause();document.getElementById('audioPlayer').currentTime=0;" class="control-button"><img src="https://img.icons8.com/material-outlined/24/ffffff/stop.png" alt="Stop"></button>
<button onclick="nextTrack()" class="control-button"><img src="https://img.icons8.com/material-outlined/24/ffffff/next.png" alt="Next"></button>
</div>
<p class="track-info" id="trackInfo">Исполнитель: Чигири<br>Песня: Странный новый год</p>
<div class="track-list">
<div class="track-item" onclick="loadTrack(0)">1. Чигири: Странный новый год</div>
<div class="track-item" onclick="loadTrack(1)">2. Юграм: Новый год Квинси</div>
<div class="track-item" onclick="loadTrack(2)">3. Йоруичи: Новогодний рейд в Сейрейтее</div>
<div class="track-item" onclick="loadTrack(3)">4. Рукия: Ёлка</div>
<div class="track-item" onclick="loadTrack(4)">5. Абараи: Кутёж</div>
</div>
</div>
<script>
const tracks=[
{url:'https://forumstatic.ru/files/0012/14/e8/46331.mp3',name:'Чигири: Странный новый год',cover:'https://forumupload.ru/uploads/0012/14/e8/171/694951.png'},
{url:'https://forumstatic.ru/files/0012/14/e8/55021.mp3',name:'Юграм: Новый год Квинси',cover:'https://forumupload.ru/uploads/0012/14/e8/171/184172.png'},
{url:'https://forumstatic.ru/files/0012/14/e8/62018.mp3',name:'Йоруичи: Новогодний рейд в Сейрейтее',cover:'https://forumupload.ru/uploads/0012/14/e8/171/382648.png'},
{url:'https://forumstatic.ru/files/0012/14/e8/67079.mp3',name:'Рукия: Ёлка',cover:'https://forumupload.ru/uploads/0012/14/e8/171/30976.png'},
{url:'https://forumstatic.ru/files/0012/14/e8/30605.mp3?v=1',name:'Абараи: Кутёж',cover:'https://forumupload.ru/uploads/0012/14/e8/171/730228.png'}
];
let currentTrackIndex=0;
function loadTrack(index){
currentTrackIndex = index;
const track = tracks[index];
const audioPlayer = document.getElementById('audioPlayer');
const audioSource = document.getElementById('audioSource');
const trackInfo = document.getElementById('trackInfo');
const albumCover = document.getElementById('albumCover');
audioSource.src = track.url; // Установка нового URL для аудио
audioPlayer.load(); // Перезагрузка плеера
audioPlayer.play(); // Автоматическое воспроизведение нового трека
// Обновление информации о треке
trackInfo.innerHTML = 'Исполнитель: ' + track.name.split(':')[0].trim() + '<br>Песня: ' + track.name.split(':')[1].trim();
albumCover.src = track.cover; // Обновление обложки альбома
}
function nextTrack(){
currentTrackIndex = (currentTrackIndex + 1) % tracks.length; // Увеличиваем индекс, зацикливаем
loadTrack(currentTrackIndex);
}
function previousTrack(){
currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length; // Уменьшаем индекс, зацикливаем
loadTrack(currentTrackIndex);
}
</script>[/html]
Поделиться102024-12-26 00:23:03
- Администратор
- Сообщений: 43
[html]<!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 {
font-family: Arial, sans-serif;
background-color: #1c1c1c; /* Темный фон */
color: #e0e0e0; /* Светлый текст */
text-align: center;
padding: 20px;
display: flex; /* Используем flexbox для размещения элементов */
align-items: flex-start; /* Выравниваем элементы по верхнему краю */
}
#gameContainer {
background-color: #333; /* Темный фон для игры */
border: 1px solid #444;
padding: 20px;
border-radius: 5px;
margin-right: 20px; /* Отступ справа для изображения */
}
input[type="number"], input[type="text"] {
padding: 10px;
margin-top: 10px;
border: none;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin-top: 10px;
background-color: #4CAF50; /* Зеленый цвет кнопки */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049; /* Темнее при наведении */
}
#result, #score {
margin-top: 20px;
font-size: 1.2em;
}
#hint {
margin-top: 10px;
font-size: 1em;
color: #ffcc00; /* Цвет подсказок */
}
#leaderboard {
margin-top: 30px;
background-color: #444;
padding: 10px;
border-radius: 5px;
display: none; /* Скрываем таблицу лидеров по умолчанию */
}
#rules {
margin-top: 20px;
background-color: #444;
padding: 10px;
border-radius: 5px;
}
#imageContainer {
display: flex;
align-items: center;
}
img {
max-width: 300px; /* Ограничиваем ширину изображения */
margin-left: 20px; /* Отступ слева для изображения */
}
</style>
</head>
<body>
<div id="gameContainer">
<h1>Игра: Угадай число</h1>
<input type="text" id="playerName" placeholder="Введите ваше имя" />
<p>Выберите уровень сложности:</p>
<select id="difficulty">
<option value="10">Легкий (1-10, 3 попытки)</option>
<option value="50" disabled>Средний (1-50, 5 попыток)</option>
<option value="100" disabled>Сложный (1-100, 7 попыток)</option>
</select>
<button id="startButton" onclick="startGame()">Начать игру</button>
<p id="timer"></p>
<p>Я загадал число. Попробуйте угадать!</p>
<input type="number" id="guessInput" placeholder="Введите ваше число" disabled>
<button onclick="checkGuess()" disabled>Угадать</button>
<button onclick="restartGame()" disabled>Перезапустить игру</button>
<div id="result"></div>
<div id="hint"></div>
<div id="score">Очки: 0</div>
<button onclick="toggleLeaderboard()">Показать/Скрыть таблицу лидеров</button>
</div>
<div id="imageContainer" style="display: flex; justify-content: center; margin-top: 20px;">
<img src="https://forumupload.ru/uploads/0012/14/e8/171/694951.png" alt="Изображение игры" style="max-width: 300px;">
</div>
<div id="leaderboard">
<h2>Таблица лидеров</h2>
<ul id="leaderboardList"></ul>
</div>
<div id="rules">
<h2>Правила игры</h2>
<p>В этой игре вам нужно угадать загаданное число в заданном диапазоне. У вас есть ограниченное количество попыток в зависимости от выбранного уровня сложности.</p>
<p><strong>Очки:</strong> Вы зарабатываете очки за каждую успешную игру. Очки рассчитываются на основе оставшихся попыток.</p>
<p><strong>Очки для разблокировки уровней:</strong></p>
<ul>
<li>Средний уровень: 100 очков</li>
<li>Сложный уровень: 150 очков</li>
</ul>
</div>
<script>
let randomNumber;
let attempts = 0;
let maxAttempts;
let score = 0;
let timer;
let timeLeft;
const leaderboard = [];
const scoreToUnlockMedium = 100; // Очки для открытия среднего уровня
const scoreToUnlockHard = 200; // Очки для открытия сложного уровня
function startGame() {
const playerName = document.getElementById('playerName').value.trim();
if (playerName === "") {
alert("Пожалуйста, введите ваше имя!");
return;
}
const difficulty = parseInt(document.getElementById('difficulty').value);
maxAttempts = difficulty === 10 ? 3 : (difficulty === 50 ? 5 : 7); // Устанавливаем количество попыток в зависимости от уровня сложности
randomNumber = Math.floor(Math.random() * difficulty) + 1; // Генерация случайного числа в зависимости от уровня сложности
attempts = 0; // Сброс попыток
document.getElementById('result').textContent = ""; // Очищаем результат
document.getElementById('hint').textContent = ""; // Очищаем подсказки
document.getElementById('guessInput').disabled = false; // Включаем ввод
document.getElementById('guessInput').value = ""; // Очищаем поле ввода
document.getElementById('score').textContent = "Очки: " + score; // Обновляем очки
document.getElementById('timer').textContent = ""; // Очищаем таймер
document.getElementById('startButton').disabled = true; // Блокируем кнопку "Начать игру"
document.querySelector('button[onclick="checkGuess()"]').disabled = false; // Разблокируем кнопку "Угадать"
document.querySelector('button[onclick="restartGame()"]').disabled = false; // Разблокируем кнопку "Перезапустить игру"
startTimer(60); // Запускаем таймер на 60 секунд
}
function startTimer(duration) {
timeLeft = duration;
document.getElementById('timer').textContent = "Осталось времени: " + timeLeft + " секунд";
clearInterval(timer);
timer = setInterval(() => {
timeLeft--;
document.getElementById('timer').textContent = "Осталось времени: " + timeLeft + " секунд";
if (timeLeft <= 0) {
clearInterval(timer);
document.getElementById('result').textContent = "Время вышло! Загаданное число было " + randomNumber + ".";
score += 5; // Добавляем очки за проигрыш
endGame(); // Завершаем игру
}
}, 1000);
}
function checkGuess() {
const userGuess = parseInt(document.getElementById('guessInput').value);
const resultDiv = document.getElementById('result');
const hintDiv = document.getElementById('hint');
attempts++;
if (userGuess < 1 || userGuess > parseInt(document.getElementById('difficulty').value)) {
resultDiv.textContent = "Пожалуйста, введите число от 1 до " + document.getElementById('difficulty').value + ".";
hintDiv.textContent = ""; // Очищаем подсказки
} else if (userGuess < randomNumber) {
resultDiv.textContent = "Слишком низко! Попробуйте снова.";
hintDiv.textContent = "Подсказка: число больше " + userGuess + ".";
} else if (userGuess > randomNumber) {
resultDiv.textContent = "Слишком высоко! Попробуйте снова.";
hintDiv.textContent = "Подсказка: число меньше " + userGuess + ".";
} else {
score += (maxAttempts - attempts + 1) * 20; // Увеличиваем очки за угаданное число
score += (maxAttempts - attempts + 1) * 20; // Увеличиваем очки за угаданное число
resultDiv.textContent = `Поздравляем, ${document.getElementById('playerName').value}! Вы угадали число ${randomNumber} за ${attempts} попыток.`;
addToLeaderboard(document.getElementById('playerName').value, score); // Добавляем результат в таблицу лидеров
unlockDifficulties(); // Проверяем, нужно ли разблокировать новые уровни
endGame(); // Завершаем игру
return; // Завершаем игру
}
if (attempts >= maxAttempts) {
resultDiv.textContent = `Вы исчерпали все попытки! Загаданное число было ${randomNumber}.`;
score += 5; // Добавляем очки за проигрыш
endGame(); // Завершаем игру
}
}
function unlockDifficulties() {
if (score >= scoreToUnlockMedium) {
document.querySelector('option[value="50"]').disabled = false; // Разблокируем средний уровень
}
if (score >= scoreToUnlockHard) {
document.querySelector('option[value="150"]').disabled = false; // Разблокируем сложный уровень
}
}
function addToLeaderboard(name, score) {
leaderboard.push({ name, score });
leaderboard.sort((a, b) => b.score - a.score); // Сортируем по убыванию очков
updateLeaderboard();
}
function updateLeaderboard() {
const leaderboardList = document.getElementById('leaderboardList');
leaderboardList.innerHTML = ""; // Очищаем текущий список
leaderboard.forEach(entry => {
const li = document.createElement('li');
li.textContent = `${entry.name}: ${entry.score} очков`;
leaderboardList.appendChild(li);
});
}
function endGame() {
document.getElementById('guessInput').disabled = true; // Отключаем ввод
clearInterval(timer); // Останавливаем таймер
document.getElementById('startButton').disabled = false; // Разблокируем кнопку "Начать игру"
document.querySelector('button[onclick="checkGuess()"]').disabled = true; // Отключаем кнопку "Угадать"
document.querySelector('button[onclick="restartGame()"]').disabled = false; // Разблокируем кнопку "Перезапустить игру"
document.getElementById('score').textContent = "Очки: " + score; // Обновляем очки
}
function restartGame() {
startGame(); // Перезапускаем игру
}
function toggleLeaderboard() {
const leaderboardDiv = document.getElementById('leaderboard');
leaderboardDiv.style.display = leaderboardDiv.style.display === 'none' ? 'block' : 'none'; // Переключаем видимость таблицы лидеров
}
// Запускаем игру при загрузке страницы
document.getElementById('startButton').disabled = false; // Разблокируем кнопку "Начать игру"
</script>
</body>
</html>[/html]
Поделиться112025-01-06 15:09:58
- Администратор
- Сообщений: 43
Ара ара
Поделиться122025-01-06 15:15:18
- Администратор
- Сообщений: 43
[html]<!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 {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
padding: 20px;
}
#result {
margin-top: 20px;
font-size: 1.5em;
color: #333;
}
button {
padding: 10px 20px;
font-size: 1em;
margin: 5px;
cursor: pointer;
}
input {
padding: 10px;
font-size: 1em;
margin: 5px;
}
table {
margin-top: 20px;
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>Игра в снежки</h1>
<div>
<input type="text" id="playerName" placeholder="Введите ваш ник" />
<button onclick="addPlayer()">Добавить игрока</button>
</div>
<p>Выберите игрока для броска:</p>
<select id="targetPlayer"></select>
<p>Выберите действие:</p>
<button onclick="playerAction('бросить')">Бросить снежок</button>
<button onclick="playerAction('укрыться')">Укрыться</button>
<div id="result"></div>
<table>
<thead>
<tr>
<th>Игрок</th>
<th>Попадания</th>
<th>Удары</th>
</tr>
</thead>
<tbody id="playerStats"></tbody>
</table>
<script>
let players = JSON.parse(localStorage.getItem('players')) || {};
function addPlayer() {
const playerName = document.getElementById('playerName').value.trim();
if (playerName && !players[playerName]) {
players[playerName] = { hits: 0, throws: 0 };
updatePlayerList();
document.getElementById('playerName').value = ''; // Очистить поле ввода
savePlayers();
} else {
alert('Введите уникальный ник!');
}
}
function updatePlayerList() {
const targetPlayerSelect = document.getElementById('targetPlayer');
const playerStats = document.getElementById('playerStats');
targetPlayerSelect.innerHTML = ''; // Очистить список
playerStats.innerHTML = ''; // Очистить таблицу
for (const player in players) {
// Добавить игрока в выпадающий список
const option = document.createElement('option');
option.value = player;
option.textContent = player;
targetPlayerSelect.appendChild(option);
// Добавить игрока в таблицу
const row = document.createElement('tr');
row.innerHTML = `<td>${player}</td><td id="hit-${player}">${players[player].hits}</td><td id="throw-${player}">${players[player].throws}</td>`;
playerStats.appendChild(row);
}
}
function playerAction(action) {
const playerName = document.getElementById('targetPlayer').value;
const resultDiv = document.getElementById('result');
if (action === 'бросить') {
players[playerName].throws += 1; // Увеличиваем количество бросков
const hit = Math.random() < 0.5; // 50% шанс попасть
if (hit) {
players[playerName].hits += 1; // Увеличиваем количество попаданий
resultDiv.innerHTML = `${playerName} попал в цель!`;
} else {
resultDiv.innerHTML = `${playerName} промахнулся!`;
}
} else if (action === 'укрыться') {
resultDiv.innerHTML = `${playerName} нашел укрытие!`;
}
updateStats();
savePlayers();
}
function updateStats() {
for (const player in players) {
document.getElementById(`hit-${player}`).innerText = players[player].hits;
document.getElementById(`throw-${player}`).innerText = players[player].throws;
}
}
function savePlayers() {
localStorage.setItem('players', JSON.stringify(players));
}
// Инициализация списка игроков при загрузке страницы
updatePlayerList();
</script>
</body>
</html>[/html]
Поделиться132025-01-06 21:41:57
- Администратор
- Сообщений: 43
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сапёр</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
text-align: center;
background-color: #f0f0f0;
}
#game-container {
display: inline-block;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px; /* Размер контейнера */
margin: 20px;
transition: background-color 0.3s;
}
h1 {
color: #333;
margin: 0;
}
#board {
display: grid;
gap: 2px;
margin: 20px auto;
justify-content: center;
}
.cell {
width: 30px;
height: 30px;
background-color: #b0c4de;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
color: #000; /* Цвет текста для светлой темы */
}
.mine {
background-color: red;
background-image: url('https://img.icons8.com/ios-filled/50/ffffff/mine.png');
background-size: cover;
}
.revealed {
cursor: default;
}
.safe {
background-color: #90ee90;
}
#rules {
margin: 20px;
font-size: 16px;
color: #555;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin: 5px;
background-color: #678fa9;
color: #ffffff;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #4f6371;
}
#theme-toggle {
cursor: pointer;
margin-bottom: 10px;
}
.dark-theme {
background-color: #303030;
color: #838483;
}
.dark-theme #game-container {
background-color: #303030;
border: 2px solid #678fa9;
}
.dark-theme .cell {
background-color: #555;
border: 1px solid #777;
color: #e0e0e0; /* Цвет текста для тёмной темы (светлее) */
}
.dark-theme .safe {
background-color: #6b8e23;
}
.dark-theme #rules {
color: #e0e0e0; /* Цвет текста в правилах для тёмной темы (светлее) */
}
.dark-theme .mine {
background-color: darkred;
}
#copyright {
margin-top: 20px;
font-size: 12px;
color: #aaa;
}
</style>
</head>
<body>
<div id="game-container">
<h1>Сапёр</h1>
<img id="theme-toggle" src="https://img.icons8.com/ios-filled/50/000000/sun.png" alt="Сменить тему" onclick="toggleTheme()">
<div id="rules">
<strong>Правила игры:</strong><br>
Откройте ячейки на поле, избегая мин. Если вы откроете мину, игра закончится. Если вы откроете все ячейки без мин, вы выиграли!<br>
<strong>Подсказки:</strong><br>
Цифры в ячейках указывают количество мин, находящихся в соседних ячейках. Если ячейка пустая, это значит, что вокруг неё нет мин. Будьте осторожны и старайтесь открывать ячейки, основываясь на числах, чтобы избежать мин!
</div>
<div>
<button onclick="startGame('easy')">Лёгкий</button>
<button onclick="startGame('medium')">Средний</button>
<button onclick="startGame('hard')">Сложный</button>
</div>
<div id="board"></div>
<p id="message"></p>
<div id="copyright">Создал Ga_Kot для форума Bleach Apocalipsis в 2025 году.</div>
</div>
<script>
let boardSize, mineCount, board = [], revealedCount = 0, gameOver = false;
function startGame(difficulty) {
switch (difficulty) {
case 'easy': boardSize = 6; mineCount = 4; break;
case 'medium': boardSize = 8; mineCount = 10; break;
case 'hard': boardSize = 10; mineCount = 15; break;
}
board = Array.from({ length: boardSize }, () => Array(boardSize).fill(0));
revealedCount = 0; gameOver = false;
document.getElementById('message').textContent = '';
createMines(); createBoard();
}
function createMines() {
let minesPlaced = 0;
while (minesPlaced < mineCount) {
const x = Math.floor(Math.random() * boardSize);
const y = Math.floor(Math.random() * boardSize);
if (board[x][y] !== 'M') {
board[x][y] = 'M'; minesPlaced++; updateNeighbors(x, y);
}
}
}
function updateNeighbors(x, y) {
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
if (x + i >= 0 && x + i < boardSize && y + j >= 0 && y + j < boardSize && board[x + i][y + j] !== 'M') {
board[x + i][y + j]++;
}
}
}
}
function createBoard() {
const boardElement = document.getElementById('board');
boardElement.innerHTML = '';
boardElement.style.gridTemplateColumns = `repeat(${boardSize}, 30px)`;
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.x = i; cell.dataset.y = j;
cell.onclick = () => revealCell(i, j);
boardElement.appendChild(cell);
}
}
}
function revealCell(x, y) {
if (gameOver) return;
const cell = document.querySelector(`.cell[data-x="${x}"][data-y="${y}"]`);
if (cell.classList.contains('revealed')) return;
cell.classList.add('revealed'); revealedCount++;
if (board[x][y] === 'M') {
cell.classList.add('mine'); gameOver = true;
document.getElementById('message').textContent = 'Игра окончена! Вы попали на мину.';
revealAllMines(); return;
}
cell.classList.add('safe'); cell.textContent = board[x][y] || '';
if (revealedCount === boardSize * boardSize - mineCount) {
gameOver = true; document.getElementById('message').textContent = 'Поздравляем! Вы выиграли!';
}
}
function revealAllMines() {
const cells = document.querySelectorAll('.cell');
cells.forEach(cell => {
const x = cell.dataset.x; const y = cell.dataset.y;
if (board[x][y] === 'M') cell.classList.add('mine');
});
}
function toggleTheme() {
const body = document.body;
body.classList.toggle('dark-theme');
const themeToggleIcon = document.getElementById('theme-toggle');
themeToggleIcon.src = body.classList.contains('dark-theme') ?
'https://img.icons8.com/ios-filled/50/ffffff/moon.png' :
'https://img.icons8.com/ios-filled/50/000000/sun.png';
}
</script>
</body>
</html>[/html]
Поделиться142025-01-08 11:47:55
- Администратор
- Сообщений: 43
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Отсчет до Юки Мацури</title>
<style>
.countdown-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border: 2px solid rgba(255, 255, 255, 0.5); /* Полупрозрачная белая рамка */
border-radius: 10px;
padding: 20px;
background-image: url('https://forumupload.ru/uploads/001c/1f/11/2/58770.png'); /* Фоновое изображение */
background-size: cover; /* Заполнение контейнера фоном */
background-position: center; /* Центрирование фона */
width: 400px; /* Ширина контейнера */
height: auto; /* Высота автоматически подстраивается под содержимое */
margin: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Тень для контейнера */
position: relative; /* Для управления позиционированием */
}
.countdown-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7); /* Более темный полупрозрачный фон для улучшения читаемости текста */
border-radius: 10px; /* Скругление углов */
z-index: 1; /* Положение слоя */
}
.event_timer {
font-size: 20px; /* Размер шрифта */
font-weight: bold; /* Жирный текст */
color: #ffffff; /* Цвет текста */
z-index: 2; /* Положение слоя */
position: relative; /* Для управления позиционированием */
text-align: center; /* Центрирование текста */
z-index: 2; /* Положение слоя */
}
</style>
</head>
<body>
<div class="countdown-container">
<div class="event_timer" id="countdown"></div> <!-- Оболочка для текста таймера -->
<!-- Копирайт: © 2025 Ga_Kot для форума Bleach Apocalipsis -->
</div>
<script>
function updateCountdown() {
const today = new Date();
const eventDate = new Date("February 4, 2025");
const timeLeft = eventDate - today;
const msPerDay = 24 * 60 * 60 * 1000;
const daysLeft = Math.floor(timeLeft / msPerDay);
const hoursLeft = Math.floor((timeLeft % msPerDay) / (1000 * 60 * 60));
const minutesLeft = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const secondsLeft = Math.floor((timeLeft % (1000 * 60)) / 1000);
let dayname = " дней";
if (daysLeft === 1) dayname = " день";
else if (daysLeft > 1 && daysLeft < 5) dayname = " дня";
if (timeLeft < 0) {
document.getElementById("countdown").innerHTML = "Фестиваль снега начался!!!";
} else {
// Скрываем часы, минуты и секунды, оставляя только дни
document.getElementById("countdown").innerHTML =
`До Юки Мацури осталось ${daysLeft}${dayname}!`;
// Если вы хотите вернуть часы, минуты и секунды, просто раскомментируйте следующую строку:
// document.getElementById("countdown").innerHTML = `До Юки Мацури осталось ${daysLeft}${dayname}, ${hoursLeft} часов, ${minutesLeft} минут и ${secondsLeft} секунд!`;
}
}
// Обновляем отсчет каждую секунду
setInterval(updateCountdown, 1000);
updateCountdown(); // начальный вызов
</script>
</body>
</html>[/html]
Поделиться152025-01-08 13:13:17
- Участник
- Сообщений: 2
Paradox
Поделиться162025-01-12 12:09:42
- Администратор
- Сообщений: 43
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Судоку</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<style>
/* Изолированные стили для контейнера */
#sudoku-container {
font-family: 'Montserrat', Arial, sans-serif !important; /* Шрифт Montserrat */
text-align: center !important;
background-color: #282828 !important; /* Общий фон */
color: #ffffff !important;
padding: 20px !important;
border-radius: 15px !important;
max-width: 420px !important;
margin: 0 auto !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}
#sudoku-container h1 {
color: #C8CEC9 !important; /* Заголовок Судоку */
margin-bottom: 20px !important;
font-size: 24px !important;
font-weight: bold !important;
}
#sudoku-container table {
margin: 0 auto !important;
border-collapse: collapse !important;
background-color: #303030 !important; /* Фон игрового поля */
border-radius: 10px !important;
overflow: hidden !important;
border: 3px solid #678FA9 !important; /* Границы секторов */
}
#sudoku-container td {
width: 40px !important;
height: 40px !important;
border: 1px solid #678FA9 !important; /* Границы цифр */
text-align: center !important;
font-size: 20px !important;
position: relative !important;
}
/* Утолщённые границы для блоков 3x3 */
#sudoku-container tr:nth-child(3n) td {
border-bottom: 3px solid #889BAC !important; /* Границы секторов */
}
#sudoku-container tr td:nth-child(3n) {
border-right: 3px solid #889BAC !important; /* Границы секторов */
}
/* Подсветка строк и столбцов при наведении */
#sudoku-container tr:hover td {
background-color: #1E1E1E !important; /* Подсветка линий */
}
#sudoku-container td:hover {
background-color: #282828 !important; /* Подсветка цифр */
}
#sudoku-container input {
width: 100% !important;
height: 100% !important;
text-align: center !important;
font-size: 20px !important;
border: none !important;
outline: none !important;
background-color: transparent !important;
color: #C8CEC9 !important; /* Введённые цифры */
font-weight: bold !important;
}
#sudoku-container input:focus {
background-color: #1E1E1E !important; /* Подсветка линий при фокусе */
}
#sudoku-container .fixed {
background-color: #303030 !important; /* Фон для фиксированных чисел */
color: #678FA9 !important; /* Закреплённые цифры */
}
#sudoku-container .fixed input {
color: #678FA9 !important; /* Закреплённые цифры */
cursor: not-allowed !important;
}
#sudoku-container .fixed input:focus {
background-color: #303030 !important; /* Сохраняем фон при фокусе */
}
/* Подсветка неправильных чисел */
#sudoku-container .incorrect {
background-color: #5e2129 !important; /* Подсветка ошибки */
}
/* Правила игры */
#sudoku-rules {
margin-top: 20px !important;
font-size: 14px !important;
color: #C8CEC9 !important; /* Текст правил */
text-align: left !important;
}
#sudoku-rules h2 {
color: #889BAC !important; /* Заголовок Правила */
font-size: 18px !important;
margin-bottom: 10px !important;
}
#sudoku-rules ul {
list-style-type: disc !important;
padding-left: 20px !important;
}
/* Кнопка сброса */
#sudoku-reset {
margin-top: 20px !important;
margin-bottom: 10px !important; /* Добавлен отступ снизу */
padding: 10px 20px !important;
font-size: 16px !important;
color: #ffffff !important; /* Шрифт кнопки */
background-color: #678FA9 !important; /* Фон кнопки */
border: none !important;
border-radius: 5px !important;
cursor: pointer !important;
transition: background-color 0.3s ease !important;
}
#sudoku-reset:hover {
background-color: #5a7f95 !important; /* Затемнение кнопки при наведении */
}
/* Выбор сложности */
#difficulty {
margin-bottom: 20px !important; /* Добавлен отступ снизу */
padding: 8px 12px !important;
font-size: 16px !important;
font-family: 'Montserrat', Arial, sans-serif !important;
background-color: #303030 !important;
color: #C8CEC9 !important;
border: 1px solid #678FA9 !important;
border-radius: 5px !important;
cursor: pointer !important;
}
#difficulty:hover {
background-color: #1E1E1E !important;
}
/* Копирайт */
#sudoku-copyright {
margin-top: 20px !important;
font-size: 12px !important;
color: #889BAC !important; /* Копирайт */
text-align: center !important;
}
</style>
</head>
<body>
<div id="sudoku-container">
<h1>Судоку</h1>
<table>
<!-- Таблица судоку будет заполнена скриптом -->
</table>
<!-- Кнопка сброса -->
<button id="sudoku-reset">Новая игра</button>
<!-- Выбор сложности -->
<select id="difficulty">
<option value="easy">Лёгкий</option>
<option value="medium">Средний</option>
<option value="hard">Сложный</option>
</select>
<!-- Правила игры -->
<div id="sudoku-rules">
<h2>Правила игры</h2>
<ul>
<li>Заполните пустые клетки цифрами от 1 до 9.</li>
<li>Цифры не должны повторяться в одной строке, столбце или блоке 3x3.</li>
<li>Используйте логику, чтобы найти правильные числа.</li>
</ul>
</div>
<!-- Копирайт -->
<div id="sudoku-copyright">
© 2025 by Ga_Kot. Все права защищены.
</div>
</div>
<script>
// Функция для генерации случайной головоломки
function generateSudoku(difficulty = 'medium') {
const table = document.querySelector('#sudoku-container table');
table.innerHTML = ''; // Очищаем таблицу
// Пример готового решения судоку
const solution = [
[5, 3, 4, 6, 7, 8, 9, 1, 2],
[6, 7, 2, 1, 9, 5, 3, 4, 8],
[1, 9, 8, 3, 4, 2, 5, 6, 7],
[8, 5, 9, 7, 6, 1, 4, 2, 3],
[4, 2, 6, 8, 5, 3, 7, 9, 1],
[7, 1, 3, 9, 2, 4, 8, 5, 6],
[9, 6, 1, 5, 3, 7, 2, 8, 4],
[2, 8, 7, 4, 1, 9, 6, 3, 5],
[3, 4, 5, 2, 8, 6, 1, 7, 9]
];
// Создаём головоломку, удаляя случайные числа
const puzzle = JSON.parse(JSON.stringify(solution)); // Копируем решение
let removePercentage = 0.5; // По умолчанию средний уровень
if (difficulty === 'easy') {
removePercentage = 0.3; // Лёгкий уровень
} else if (difficulty === 'hard') {
removePercentage = 0.7; // Сложный уровень
}
for (let i = 0; i < 9; i++) {
for (let j = 0; j < 9; j++) {
if (Math.random() < removePercentage) {
puzzle[i][j] = 0;
}
}
}
// Заполняем таблицу
for (let i = 0; i < 9; i++) {
const row = document.createElement('tr');
for (let j = 0; j < 9; j++) {
const cell = document.createElement('td');
const input = document.createElement('input');
input.type = 'text';
input.maxLength = 1;
if (puzzle[i][j] !== 0) {
input.value = puzzle[i][j];
input.classList.add('fixed');
input.readOnly = true;
}
cell.appendChild(input);
row.appendChild(cell);
}
table.appendChild(row);
}
// Добавляем обработчики событий для новых input
document.querySelectorAll('#sudoku-container input').forEach(input => {
input.addEventListener('input', checkSudoku);
input.addEventListener('input', saveProgress); // Сохраняем прогресс
});
// Сохраняем текущую головоломку в localStorage
localStorage.setItem('sudokuPuzzle', JSON.stringify(puzzle));
localStorage.setItem('sudokuDifficulty', difficulty);
}
// Функция для проверки правильности введённых чисел
function checkSudoku() {
const inputs = document.querySelectorAll('#sudoku-container input:not(.fixed)');
inputs.forEach(input => {
const value = input.value;
if (value && !isValid(input)) {
input.classList.add('incorrect'); // Подсветка красным
} else {
input.classList.remove('incorrect'); // Убираем подсветку
}
});
}
// Функция для проверки валидности числа
function isValid(input) {
const value = input.value;
if (!value) return true; // Пустые клетки не проверяем
const row = input.closest('tr');
const colIndex = Array.from(row.children).indexOf(input.closest('td'));
const gridX = Math.floor(colIndex / 3);
const gridY = Math.floor(Array.from(row.parentNode.children).indexOf(row) / 3);
// Проверка строки
const rowValues = Array.from(row.querySelectorAll('input'))
.map(cell => cell.value)
.filter((val, index) => index !== colIndex && val === value);
if (rowValues.length > 0) return false;
// Проверка столбца
const colValues = Array.from(document.querySelectorAll(`#sudoku-container tr td:nth-child(${colIndex + 1}) input`))
.map(cell => cell.value)
.filter((val, index, arr) => index !== Array.from(row.parentNode.children).indexOf(row) && val === value);
if (colValues.length > 0) return false;
// Проверка блока 3x3
const blockValues = [];
for (let y = gridY * 3; y < gridY * 3 + 3; y++) {
for (let x = gridX * 3; x < gridX * 3 + 3; x++) {
const cell = document.querySelector(`#sudoku-container tr:nth-child(${y + 1}) td:nth-child(${x + 1}) input`);
if (cell !== input && cell.value === value) {
return false;
}
}
}
return true;
}
// Сохранение прогресса в localStorage
function saveProgress() {
const inputs = document.querySelectorAll('#sudoku-container input');
const progress = [];
inputs.forEach(input => {
progress.push(input.value || '');
});
localStorage.setItem('sudokuProgress', JSON.stringify(progress));
}
// Загрузка прогресса из localStorage
function loadProgress() {
const progress = JSON.parse(localStorage.getItem('sudokuProgress'));
if (progress) {
const inputs = document.querySelectorAll('#sudoku-container input');
inputs.forEach((input, index) => {
if (!input.classList.contains('fixed')) {
input.value = progress[index];
}
});
}
}
// Загрузка сохранённой головоломки
function loadSavedPuzzle() {
const savedPuzzle = JSON.parse(localStorage.getItem('sudokuPuzzle'));
const savedDifficulty = localStorage.getItem('sudokuDifficulty');
if (savedPuzzle && savedDifficulty) {
generateSudoku(savedDifficulty);
loadProgress();
} else {
generateSudoku(); // Генерация новой головоломки
}
}
// Инициализация игры
loadSavedPuzzle();
// Обработчик для кнопки сброса
document.getElementById('sudoku-reset').addEventListener('click', () => {
const difficulty = document.getElementById('difficulty').value;
generateSudoku(difficulty);
});
// Обработчик для выбора сложности
document.getElementById('difficulty').addEventListener('change', () => {
const difficulty = document.getElementById('difficulty').value;
generateSudoku(difficulty);
});
</script>
</body>
</html>[/html]
Поделиться172025-01-12 12:59:14
- Участник
- Сообщений: 2
Семейство шрифтов: Monserrat
Общий фон #282828
Фон игрового поля: #303030
Границы секторов: #889BAC
Границы цифр: #678FA9
Подсветка линий: #1E1E1E
Подсветка цифр: #282828
Подсветка ошибки: #5e2129
Введенные цифры: #C8CEC9
Закрепленные цифры: #678FA9
Кнопка Новая игра: фон #678FA9 шрифт #ffffff
Заголовок Судоку: #C8CEC9
Заголовок Правила: #889BAC
Текст правил: #C8CEC9
Копирайт кота: #889BAC
Отредактировано Lisa (2025-01-12 13:00:09)
Поделиться182025-01-12 14:37:15
- Администратор
- Сообщений: 43
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Судоку</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<style>
/* Изолированные стили для контейнера */
#sudoku-container {
font-family: 'Montserrat', Arial, sans-serif !important;
text-align: center !important;
background-color: #282828 !important;
color: #ffffff !important;
padding: 20px !important;
border-radius: 15px !important;
max-width: 420px !important;
margin: 0 auto !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
position: relative;
}
#sudoku-container h1 {
color: #C8CEC9 !important;
margin-bottom: 20px !important;
font-size: 24px !important;
font-weight: bold !important;
}
#sudoku-container table {
margin: 0 auto !important;
border-collapse: collapse !important;
background-color: #303030 !important;
border-radius: 10px !important;
overflow: hidden !important;
border: 3px solid #678FA9 !important;
}
#sudoku-container td {
width: 40px !important;
height: 40px !important;
border: 1px solid #678FA9 !important;
text-align: center !important;
font-size: 20px !important;
position: relative !important;
}
#sudoku-container tr:nth-child(3n) td {
border-bottom: 3px solid #889BAC !important;
}
#sudoku-container tr td:nth-child(3n) {
border-right: 3px solid #889BAC !important;
}
#sudoku-container tr.hovered td {
background-color: #1E1E1E !important;
}
#sudoku-container td.hovered {
background-color: #1E1E1E !important;
}
#sudoku-container td.highlighted {
background-color: #1E3A5A !important;
}
#sudoku-container input {
width: 100% !important;
height: 100% !important;
text-align: center !important;
font-size: 20px !important;
border: none !important;
outline: none !important;
background-color: transparent !important;
color: #C8CEC9 !important;
font-weight: bold !important;
}
#sudoku-container input:focus {
background-color: #1E1E1E !important;
}
#sudoku-container .fixed {
background-color: #303030 !important;
color: #678FA9 !important;
}
#sudoku-container .fixed input {
color: #678FA9 !important;
cursor: not-allowed !important;
}
#sudoku-container .fixed input:focus {
background-color: #303030 !important;
}
#sudoku-container .incorrect {
background-color: #5e2129 !important;
}
#sudoku-rules {
margin-top: 20px !important;
font-size: 14px !important;
color: #C8CEC9 !important;
text-align: left !important;
}
#sudoku-rules h2 {
color: #889BAC !important;
font-size: 18px !important;
margin-bottom: 10px !important;
}
#sudoku-rules ul {
list-style-type: disc !important;
padding-left: 20px !important;
}
#sudoku-reset {
margin-top: 20px !important;
margin-bottom: 10px !important;
padding: 10px 20px !important;
font-size: 16px !important;
color: #ffffff !important;
background-color: #678FA9 !important;
border: none !important;
border-radius: 5px !important;
cursor: pointer !important;
transition: background-color 0.3s ease !important;
}
#sudoku-reset:hover {
background-color: #5a7f95 !important;
}
#difficulty {
margin-bottom: 20px !important;
padding: 8px 12px !important;
font-size: 16px !important;
font-family: 'Montserrat', Arial, sans-serif !important;
background-color: #303030 !important;
color: #C8CEC9 !important;
border: 1px solid #678FA9 !important;
border-radius: 5px !important;
cursor: pointer !important;
}
#difficulty:hover {
background-color: #1E1E1E !important;
}
#sudoku-copyright {
margin-top: 20px !important;
font-size: 12px !important;
color: #889BAC !important;
text-align: center !important;
}
#numbers-container {
margin-top: 20px;
text-align: center;
font-size: 18px;
color: #C8CEC9;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
#numbers-container .number {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #303030;
border-radius: 10px;
padding: 10px;
width: 60px;
height: 60px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
#numbers-container .number .digit {
font-size: 24px;
font-weight: bold;
color: #C8CEC9;
}
#numbers-container .number .count {
font-size: 12px;
color: #889BAC;
margin-top: 5px;
}
#timer {
position: absolute;
top: 20px;
right: 20px;
font-size: 18px;
color: #C8CEC9;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
}
#timer-icon {
width: 24px;
height: 24px;
background-color: #678FA9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #282828;
}
#timer-text {
display: none;
}
#timer.active #timer-text {
display: inline;
}
#congratulations {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #282828;
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
text-align: center;
z-index: 1000;
max-width: 400px;
width: 90%;
}
#congratulations h2 {
color: #C8CEC9;
font-size: 24px;
margin-bottom: 10px;
}
#congratulations p {
color: #889BAC;
font-size: 16px;
margin-bottom: 20px;
}
#congratulations button {
padding: 10px 20px;
font-size: 16px;
color: #ffffff;
background-color: #678FA9;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#congratulations button:hover {
background-color: #5a7f95;
}
</style>
</head>
<body>
<div id="sudoku-container">
<!-- Таймер -->
<div id="timer">
<div id="timer-icon">⏱️</div>
<span id="timer-text">00:00</span>
</div>
<h1>Судоку</h1>
<table>
<!-- Таблица судоку будет заполнена скриптом -->
</table>
<!-- Кнопка сброса -->
<button id="sudoku-reset">Новая игра</button>
<!-- Выбор сложности -->
<select id="difficulty">
<option value="easy">Лёгкий</option>
<option value="medium">Средний</option>
<option value="hard">Сложный</option>
</select>
<!-- Правила игры -->
<div id="sudoku-rules">
<h2>Правила игры</h2>
<ul>
<li>Заполните пустые клетки цифрами от 1 до 9.</li>
<li>Цифры не должны повторяться в одной строке, столбце или блоке 3x3.</li>
<li>Используйте логику, чтобы найти правильные числа.</li>
</ul>
</div>
<!-- Копирайт -->
<div id="sudoku-copyright">
© 2025 by Ga_Kot. Все права защищены.
</div>
</div>
<!-- Контейнер для отображения оставшихся чисел -->
<div id="numbers-container">
<!-- Здесь будут отображаться цифры и их количество -->
</div>
<!-- Финальное сообщение -->
<div id="congratulations">
<h2>Поздравляем!</h2>
<p id="congratulations-text"></p>
<button onclick="closeCongratulations()">Закрыть</button>
</div>
<script>
let selectedCell = null;
let timerInterval = null;
let timerSeconds = 0;
let errorCount = 0;
let isTimerPaused = false;
function generateSudoku(difficulty = 'medium') {
const table = document.querySelector('#sudoku-container table');
table.innerHTML = '';
const solution = [
[5, 3, 4, 6, 7, 8, 9, 1, 2],
[6, 7, 2, 1, 9, 5, 3, 4, 8],
[1, 9, 8, 3, 4, 2, 5, 6, 7],
[8, 5, 9, 7, 6, 1, 4, 2, 3],
[4, 2, 6, 8, 5, 3, 7, 9, 1],
[7, 1, 3, 9, 2, 4, 8, 5, 6],
[9, 6, 1, 5, 3, 7, 2, 8, 4],
[2, 8, 7, 4, 1, 9, 6, 3, 5],
[3, 4, 5, 2, 8, 6, 1, 7, 9]
];
const puzzle = JSON.parse(JSON.stringify(solution));
let removePercentage = 0.5;
if (difficulty === 'easy') {
removePercentage = 0.2;
} else if (difficulty === 'hard') {
removePercentage = 0.7;
}
for (let i = 0; i < 9; i++) {
for (let j = 0; j < 9; j++) {
if (Math.random() < removePercentage) {
puzzle[i][j] = 0;
}
}
}
for (let i = 0; i < 9; i++) {
const row = document.createElement('tr');
for (let j = 0; j < 9; j++) {
const cell = document.createElement('td');
const input = document.createElement('input');
input.type = 'text';
input.maxLength = 1;
if (puzzle[i][j] !== 0) {
input.value = puzzle[i][j];
input.classList.add('fixed');
input.readOnly = true;
}
cell.appendChild(input);
row.appendChild(cell);
}
table.appendChild(row);
}
document.querySelectorAll('#sudoku-container input').forEach(input => {
input.addEventListener('input', checkSudoku);
input.addEventListener('input', saveProgress);
input.addEventListener('input', updateNumbers);
});
document.querySelectorAll('#sudoku-container td').forEach(td => {
td.addEventListener('mouseenter', () => {
const row = td.closest('tr');
const colIndex = Array.from(row.children).indexOf(td);
row.classList.add('hovered');
document.querySelectorAll(`#sudoku-container tr td:nth-child(${colIndex + 1})`).forEach(cell => {
cell.classList.add('hovered');
});
});
td.addEventListener('mouseleave', () => {
const row = td.closest('tr');
const colIndex = Array.from(row.children).indexOf(td);
row.classList.remove('hovered');
document.querySelectorAll(`#sudoku-container tr td:nth-child(${colIndex + 1})`).forEach(cell => {
cell.classList.remove('hovered');
});
});
td.addEventListener('click', () => {
if (selectedCell) {
const value = selectedCell.querySelector('input').value;
document.querySelectorAll('#sudoku-container td').forEach(cell => {
if (cell.querySelector('input').value === value) {
cell.classList.remove('highlighted');
}
});
}
const value = td.querySelector('input').value;
if (value) {
document.querySelectorAll('#sudoku-container td').forEach(cell => {
if (cell.querySelector('input').value === value) {
cell.classList.add('highlighted');
}
});
}
selectedCell = td;
});
});
localStorage.setItem('sudokuPuzzle', JSON.stringify(puzzle));
localStorage.setItem('sudokuDifficulty', difficulty);
updateNumbers();
}
function updateNumbers() {
const inputs = document.querySelectorAll('#sudoku-container input');
const numbersCount = {};
for (let i = 1; i <= 9; i++) {
numbersCount[i] = 9;
}
inputs.forEach(input => {
const value = parseInt(input.value);
if (value && !isNaN(value)) {
numbersCount[value]--;
}
});
const numbersContainer = document.getElementById('numbers-container');
numbersContainer.innerHTML = '';
for (let i = 1; i <= 9; i++) {
const numberDiv = document.createElement('div');
numberDiv.className = 'number';
const digitDiv = document.createElement('div');
digitDiv.className = 'digit';
digitDiv.textContent = i;
const countDiv = document.createElement('div');
countDiv.className = 'count';
countDiv.textContent = `Осталось: ${numbersCount[i]}`;
numberDiv.appendChild(digitDiv);
numberDiv.appendChild(countDiv);
numbersContainer.appendChild(numberDiv);
}
}
function checkSudoku() {
const inputs = document.querySelectorAll('#sudoku-container input:not(.fixed)');
let hasErrors = false;
inputs.forEach(input => {
const value = input.value;
if (value && !isValid(input)) {
input.classList.add('incorrect');
hasErrors = true;
} else {
input.classList.remove('incorrect');
}
});
if (hasErrors) {
errorCount++;
}
if (isPuzzleSolved()) {
showCongratulations();
}
}
function isValid(input) {
const value = input.value;
if (!value) return true;
const row = input.closest('tr');
const colIndex = Array.from(row.children).indexOf(input.closest('td'));
const gridX = Math.floor(colIndex / 3);
const gridY = Math.floor(Array.from(row.parentNode.children).indexOf(row) / 3);
const rowValues = Array.from(row.querySelectorAll('input'))
.map(cell => cell.value)
.filter((val, index) => index !== colIndex && val === value);
if (rowValues.length > 0) return false;
const colValues = Array.from(document.querySelectorAll(`#sudoku-container tr td:nth-child(${colIndex + 1}) input`))
.map(cell => cell.value)
.filter((val, index, arr) => index !== Array.from(row.parentNode.children).indexOf(row) && val === value);
if (colValues.length > 0) return false;
const blockValues = [];
for (let y = gridY * 3; y < gridY * 3 + 3; y++) {
for (let x = gridX * 3; x < gridX * 3 + 3; x++) {
const cell = document.querySelector(`#sudoku-container tr:nth-child(${y + 1}) td:nth-child(${x + 1}) input`);
if (cell !== input && cell.value === value) {
return false;
}
}
}
return true;
}
function isPuzzleSolved() {
const inputs = document.querySelectorAll('#sudoku-container input');
for (const input of inputs) {
if (!input.value || input.classList.contains('incorrect')) {
return false;
}
}
return true;
}
function showCongratulations() {
const congratulationsText = `Поздравляем! Вы успешно решили головоломку! 🎉`;
document.getElementById('congratulations-text').textContent = congratulationsText;
document.getElementById('congratulations').style.display = 'block';
}
function closeCongratulations() {
document.getElementById('congratulations').style.display = 'none';
}
function saveProgress() {
const inputs = document.querySelectorAll('#sudoku-container input');
const progress = [];
inputs.forEach(input => {
progress.push(input.value || '');
});
localStorage.setItem('sudokuProgress', JSON.stringify(progress));
}
function loadProgress() {
const progress = JSON.parse(localStorage.getItem('sudokuProgress'));
if (progress) {
const inputs = document.querySelectorAll('#sudoku-container input');
inputs.forEach((input, index) => {
if (!input.classList.contains('fixed')) {
input.value = progress[index];
}
});
}
}
function loadSavedPuzzle() {
const savedPuzzle = JSON.parse(localStorage.getItem('sudokuPuzzle'));
const savedDifficulty = localStorage.getItem('sudokuDifficulty');
if (savedPuzzle && savedDifficulty) {
generateSudoku(savedDifficulty);
loadProgress();
} else {
generateSudoku();
}
}
function startTimer() {
if (!timerInterval) {
timerInterval = setInterval(() => {
timerSeconds++;
const minutes = Math.floor(timerSeconds / 60);
const seconds = timerSeconds % 60;
document.getElementById('timer-text').textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}, 1000);
document.getElementById('timer').classList.add('active');
document.getElementById('timer-icon').textContent = '⏱️';
}
}
function stopTimer() {
if (timerInterval) {
clearInterval(timerInterval);
timerInterval = null;
document.getElementById('timer').classList.remove('active');
document.getElementById('timer-icon').textContent = '⏸️';
}
}
function toggleTimer() {
if (timerInterval) {
stopTimer();
} else {
startTimer();
}
}
document.getElementById('timer').addEventListener('click', toggleTimer);
loadSavedPuzzle();
document.getElementById('sudoku-reset').addEventListener('click', () => {
const difficulty = document.getElementById('difficulty').value;
generateSudoku(difficulty);
stopTimer();
timerSeconds = 0;
errorCount = 0;
document.getElementById('timer-text').textContent = '00:00';
document.getElementById('timer-icon').textContent = '⏱️';
});
document.getElementById('difficulty').addEventListener('change', () => {
const difficulty = document.getElementById('difficulty').value;
generateSudoku(difficulty);
stopTimer();
timerSeconds = 0;
errorCount = 0;
document.getElementById('timer-text').textContent = '00:00';
document.getElementById('timer-icon').textContent = '⏱️';
});
document.addEventListener('click', (event) => {
if (!event.target.closest('#sudoku-container td')) {
if (selectedCell) {
const value = selectedCell.querySelector('input').value;
document.querySelectorAll('#sudoku-container td').forEach(cell => {
if (cell.querySelector('input').value === value) {
cell.classList.remove('highlighted');
}
});
selectedCell = null;
}
}
});
</script>
</body>
</html>[/html]
Поделиться19Вчера 21:53:07
- Администратор
- Сообщений: 43
[html]<div id="flappy-bird-container"></div>
<script>
// Создаём контейнер для игры
const container = document.getElementById('flappy-bird-container');
const shadow = container.attachShadow({ mode: 'open' });
// Вставляем стили и HTML в Shadow DOM
shadow.innerHTML = `
<style>
body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #121212;
font-family: 'Arial', sans-serif;
color: white;
}
#game {
position: relative;
width: 400px;
height: 600px;
background-color: #1e1e1e;
border: 2px solid #333;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#bird {
position: absolute;
top: 50%;
left: 50px;
width: 40px;
height: 40px;
background-color: #ffeb3b;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 235, 59, 0.7);
display: none;
}
.pipe {
position: absolute;
width: 60px;
background-color: #4caf50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
}
#score {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: white;
font-family: Arial, sans-serif;
display: none;
}
#startButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
font-size: 18px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
}
#startButton:hover {
background-color: #45a049;
}
#countdown {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: white;
display: none;
}
</style>
<div id="game">
<div id="bird"></div>
<div id="score">0</div>
<button id="startButton">Новая игра</button>
<div id="countdown"></div>
</div>
`;
// Получаем элементы из Shadow DOM
const game = shadow.getElementById('game');
const bird = shadow.getElementById('bird');
const scoreElement = shadow.getElementById('score');
const startButton = shadow.getElementById('startButton');
const countdownElement = shadow.getElementById('countdown');
let birdY = 250;
let birdVelocity = 0;
let gravity = 0.5;
let pipeInterval = 2000;
let score = 0;
let gameOverFlag = false;
let gameStarted = false;
let pipes = [];
// Обработчик событий клавиатуры на уровне документа
document.addEventListener('keydown', (event) => {
if (event.code === 'Space' && gameStarted && !gameOverFlag) {
birdVelocity = -8; // Прыжок птицы
}
});
function startGame() {
startButton.style.display = 'none';
countdownElement.style.display = 'block';
let count = 3;
countdownElement.textContent = count;
const countdownInterval = setInterval(() => {
count--;
countdownElement.textContent = count;
if (count <= 0) {
clearInterval(countdownInterval);
countdownElement.style.display = 'none';
startGameLogic();
}
}, 1000);
}
function startGameLogic() {
gameStarted = true;
gameOverFlag = false;
score = 0;
scoreElement.textContent = score;
birdY = 250;
birdVelocity = 0;
bird.style.top = birdY + 'px';
bird.style.display = 'block';
scoreElement.style.display = 'block';
pipes.forEach(pipe => pipe.remove());
pipes = [];
createPipe();
}
function updateBird() {
if (!gameStarted || gameOverFlag) return;
birdVelocity += gravity;
birdY += birdVelocity;
bird.style.top = birdY + 'px';
if (birdY > game.clientHeight - 40 || birdY < 0) {
gameOver();
}
checkCollisions();
}
function createPipe() {
if (!gameStarted || gameOverFlag) return;
const pipeGap = 150;
const pipeHeight = Math.random() * (game.clientHeight - pipeGap);
const topPipe = document.createElement('div');
const bottomPipe = document.createElement('div');
topPipe.className = 'pipe';
bottomPipe.className = 'pipe';
topPipe.style.height = pipeHeight + 'px';
topPipe.style.top = '0';
topPipe.style.left = game.clientWidth + 'px';
bottomPipe.style.height = (game.clientHeight - pipeHeight - pipeGap) + 'px';
bottomPipe.style.bottom = '0';
bottomPipe.style.left = game.clientWidth + 'px';
game.appendChild(topPipe);
game.appendChild(bottomPipe);
pipes.push(topPipe, bottomPipe);
let pipeX = game.clientWidth;
function movePipes() {
if (!gameStarted || gameOverFlag) return;
pipeX -= 2;
topPipe.style.left = pipeX + 'px';
bottomPipe.style.left = pipeX + 'px';
if (pipeX < -60) {
topPipe.remove();
bottomPipe.remove();
pipes = pipes.filter(pipe => pipe !== topPipe && pipe !== bottomPipe);
score++;
scoreElement.textContent = score;
}
if (!gameOverFlag) {
requestAnimationFrame(movePipes);
}
}
movePipes();
if (!gameOverFlag) {
setTimeout(createPipe, pipeInterval);
}
}
function checkCollisions() {
const birdRect = bird.getBoundingClientRect();
pipes.forEach(pipe => {
const pipeRect = pipe.getBoundingClientRect();
if (
birdRect.left < pipeRect.right &&
birdRect.right > pipeRect.left &&
birdRect.top < pipeRect.bottom &&
birdRect.bottom > pipeRect.top
) {
gameOver();
}
});
}
function gameOver() {
gameOverFlag = true;
startButton.style.display = 'block';
startButton.textContent = 'Новая игра';
alert('Игра окончена! Ваш счет: ' + score);
}
startButton.addEventListener('click', startGame);
setInterval(updateBird, 20);
</script>[/html]
Страница: 1