Флуд [00] Мы развели костёр

Поделиться12024-04-13 20:17:49

Автор: Paradox
Администратор
Сообщений: 59

Stamina fati nos ligabunt et sine spe in terram proicient.

О юная душа, ты забрела в город грёз! Отдохни перед долгой дорогой и наберись знаний, они тебе пригодятся.

Поделиться22024-04-13 20:21:16

Автор: Modeus
Администратор
Сообщений: 5
Раса: Забытый народ
Фракция: Вестники

Тест 00

Поделиться32024-04-13 22:05:00

Автор: Ouroboros
Администратор
Сообщений: 6

Отредактировано Ouroboros (2024-04-13 22:11:11)

Поделиться42024-04-14 10:55:59

Автор: Paradox
Администратор
Сообщений: 59

Ouroboros
тык

Поделиться52024-04-14 11:09:33

Автор: Ouroboros
Администратор
Сообщений: 6

Paradox

Поделиться62024-04-14 11:10:33

Автор: Paradox
Администратор
Сообщений: 59

Ouroboros

Поделиться72024-04-21 10:29:34

Автор: Ouroboros
Администратор
Сообщений: 6

:0

Поделиться82024-07-31 21:23:54

Автор: Paradox
Администратор
Сообщений: 59

Работай код, работай хата

Поделиться92024-12-25 13:43:35

Автор: Paradox
Администратор
Сообщений: 59

[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>

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

Автор: Paradox
Администратор
Сообщений: 59

[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="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>

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 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 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

Автор: Paradox
Администратор
Сообщений: 59

Ара ара

Поделиться122025-01-06 15:15:18

Автор: Paradox
Администратор
Сообщений: 59

[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>

<table>
<thead>
<tr>
<th>Игрок</th>
<th>Попадания</th>
<th>Удары</th>
</tr>
</thead>
<tbody id="playerStats"></tbody>
</table>

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

Автор: Paradox
Администратор
Сообщений: 59

[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>

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

Автор: Paradox
Администратор
Сообщений: 59

[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>

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);

// Обновляем отсчет каждую секунду
setInterval(updateCountdown, 1000);
updateCountdown(); // начальный вызов
</script>

</body>
</html>[/html]

Поделиться152025-01-08 13:13:17

Автор: Lisa
Участник
Сообщений: 2

Paradox

Поделиться162025-01-12 12:09:42

Автор: Paradox
Администратор
Сообщений: 59

[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>

// Пример готового решения судоку
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

Автор: Lisa
Участник
Сообщений: 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

Автор: Paradox
Администратор
Сообщений: 59

[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>

<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>

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);
});

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');
}
});
}

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;

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 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 = '⏱️';
});

</body>
</html>[/html]

Поделиться192025-01-21 21:53:07

Автор: Paradox
Администратор
Сообщений: 59

[html]<div id="flappy-bird-container"></div>

// Вставляем стили и 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]

Поделиться202025-01-24 13:40:32

Автор: Paradox
Администратор
Сообщений: 59

тест

[html]<div id="game-container" style="width: 800px; height: 600px; margin: 0 auto;">
<style scoped>
/* Стили игры */
#game-container {
margin: 0;
overflow: hidden;
background-color: #1a1a1a;
color: white;
font-family: Arial, sans-serif;
position: relative;
width: 100%;
height: 100%;
}
#game-container canvas {
display: block;
}
#game-container #gameOver {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 2em;
color: #ff4757;
text-shadow: 0 0 10px #ff4757;
}
#game-container #score {
position: absolute;
top: 10px;
left: 10px;
font-size: 1.5em;
color: #00a8ff;
text-shadow: 0 0 10px #00a8ff;
}
#game-container #timer {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5em;
color: #00ff00;
text-shadow: 0 0 10px #00ff00;
}
#game-container #upgradeMenu {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.9);
padding: 20px;
border-radius: 10px;
text-align: center;
border: 2px solid #00a8ff;
box-shadow: 0 0 20px #00a8ff;
}
#game-container .upgradeOption {
margin: 10px;
padding: 10px;
background-color: #333;
border-radius: 5px;
cursor: pointer;
color: #fff;
text-shadow: 0 0 5px #fff;
}
#game-container .upgradeOption:hover {
background-color: #444;
box-shadow: 0 0 10px #00a8ff;
}
#game-container #experienceBar {
position: absolute;
top: 50px;
left: 10px;
width: 200px;
height: 10px;
background-color: #333;
border-radius: 5px;
overflow: hidden;
}
#game-container #experienceFill {
height: 100%;
background-color: #00ff00;
width: 0%;
transition: width 0.3s;
}
#game-container #weaponsPanel {
position: absolute;
top: 80px;
left: 10px;
display: flex;
gap: 10px;
}
#game-container .weaponIcon {
width: 32px;
height: 32px;
background-color: #333;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
text-shadow: 0 0 5px #fff;
}
</style>
<div id="score">Очки: 0</div>
<div id="timer">Время: 0</div>
<div id="experienceBar">
<div id="experienceFill"></div>
</div>
<div id="weaponsPanel"></div>
<div id="gameOver">Игра окончена!<br>Нажмите R, чтобы начать заново</div>
<div id="upgradeMenu">
<h2>Выберите улучшение</h2>
<div id="upgradeOptions">
<div class="upgradeOption" onclick="chooseUpgrade(0)">Опция 1</div>
<div class="upgradeOption" onclick="chooseUpgrade(1)">Опция 2</div>
<div class="upgradeOption" onclick="chooseUpgrade(2)">Опция 3</div>
</div>
</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;

const player = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 20,
color: '#00a8ff',
speed: 5,
health: 100,
attackSpeed: 500,
regeneration: 0,
bulletCount: 1,
weapons: [{ type: 'basic', level: 1 }],
damage: 20,
experience: 0,
level: 1,
maxExperience: 100
};

const enemies = [];
const bullets = [];
const lightningTargets = [];
let enemySpeed = 2;
let spawnRate = 60;
let frame = 0;
let score = 0;
let gameOver = false;
let gameTime = 0;
let timerInterval;
let isPaused = false;

const upgrades = [
{ name: "Увеличение урона", effect: () => player.damage += 5 },
{ name: "Увеличение скорости атаки", effect: () => player.attackSpeed = Math.max(100, player.attackSpeed - 100) },
{ name: "Двойные снаряды", effect: () => player.bulletCount += 1 },
{ name: "Регенерация здоровья", effect: () => player.regeneration += 1 },
{ name: "Увеличение скорости", effect: () => player.speed += 1 },
{ name: "Огненные шары", effect: () => addOrUpgradeWeapon('fire') },
{ name: "Лазерный луч", effect: () => addOrUpgradeWeapon('laser') },
{ name: "Вращающиеся мечи", effect: () => addOrUpgradeWeapon('sword') },
{ name: "Ледяные стрелы", effect: () => addOrUpgradeWeapon('ice') },
{ name: "Молнии", effect: () => addOrUpgradeWeapon('lightning') }
];

const boss = {
x: 0,
y: 0,
radius: 50,
color: '#8b0000',
speed: 1.5,
health: 500,
damage: 20,
isActive: false
};

function addOrUpgradeWeapon(type) {
const existingWeapon = player.weapons.find(w => w.type === type);
if (existingWeapon) {
existingWeapon.level += 1; // Увеличиваем уровень оружия
} else {
player.weapons.push({ type: type, level: 1 }); // Добавляем новое оружие
}
}

function drawPlayer() {
ctx.beginPath();
ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
ctx.fillStyle = player.color;
ctx.fill();
ctx.closePath();

// Полоска здоровья
ctx.fillStyle = 'red';
ctx.fillRect(player.x - player.radius, player.y + player.radius + 5, player.radius * 2, 5);
ctx.fillStyle = 'green';
ctx.fillRect(player.x - player.radius, player.y + player.radius + 5, (player.health / 100) * player.radius * 2, 5);
}

function drawEnemies() {
enemies.forEach(enemy => {
ctx.beginPath();
ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
ctx.fillStyle = enemy.color;
ctx.fill();
ctx.closePath();
});
}

function drawBoss() {
if (boss.isActive) {
ctx.beginPath();
ctx.arc(boss.x, boss.y, boss.radius, 0, Math.PI * 2);
ctx.fillStyle = boss.color;
ctx.fill();
ctx.closePath();

// Полоска здоровья босса
ctx.fillStyle = 'red';
ctx.fillRect(boss.x - boss.radius, boss.y + boss.radius + 10, boss.radius * 2, 5);
ctx.fillStyle = 'yellow';
ctx.fillRect(boss.x - boss.radius, boss.y + boss.radius + 10, (boss.health / 100) * boss.radius * 2, 5);
}
}

function drawBullets() {
bullets.forEach(bullet => {
if (bullet.type === 'laser') {
// Лазерный луч (линия)
ctx.beginPath();
ctx.moveTo(player.x, player.y);
ctx.lineTo(bullet.x, bullet.y);
ctx.strokeStyle = '#00ff00';
ctx.lineWidth = 3;
ctx.stroke();
} else {
// Обычные пули и огненные шары
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
ctx.fillStyle = bullet.color;
ctx.fill();
ctx.closePath();
}
});
}

function drawLightning() {
lightningTargets.forEach(target => {
ctx.beginPath();
ctx.moveTo(player.x, player.y);
ctx.lineTo(target.x, target.y);
ctx.strokeStyle = '#ffff00';
ctx.lineWidth = 2;
ctx.stroke();
});
}

function updatePlayer() {
if (isPaused) return;

if (keys.ArrowUp && player.y - player.radius > 0) player.y -= player.speed;
if (keys.ArrowDown && player.y + player.radius < canvas.height) player.y += player.speed;
if (keys.ArrowLeft && player.x - player.radius > 0) player.x -= player.speed;
if (keys.ArrowRight && player.x + player.radius < canvas.width) player.x += player.speed;

// Регенерация здоровья
if (player.regeneration > 0 && frame % 60 === 0) {
player.health = Math.min(100, player.health + player.regeneration);
}
}

function updateEnemies() {
if (isPaused) return;

if (frame % spawnRate === 0) {
const angle = Math.random() * Math.PI * 2;
const x = Math.cos(angle) * canvas.width + canvas.width / 2;
const y = Math.sin(angle) * canvas.height + canvas.height / 2;

// Постепенное появление врагов
let enemyType;
if (gameTime < 60) {
// Только обычные враги в первые 60 секунд
enemyType = 1;
} else if (gameTime < 120) {
// Добавляем быстрых врагов после 60 секунд
enemyType = Math.random() < 0.5 ? 1 : 2;
} else {
// Добавляем танков после 120 секунд
enemyType = Math.random() < 0.33 ? 1 : Math.random() < 0.66 ? 2 : 3;
}

switch (enemyType) {
case 1: // Обычный враг
enemies.push({
x: x,
y: y,
radius: 15,
color: '#ff4757',
speed: 2,
health: 30,
damage: 10
});
break;
case 2: // Быстрый враг
enemies.push({
x: x,
y: y,
radius: 10,
color: '#ff6347',
speed: 3,
health: 20,
damage: 10
});
break;
case 3: // Танк
enemies.push({
x: x,
y: y,
radius: 20,
color: '#555',
speed: 1,
health: 50,
damage: 20
});
break;
}
}

enemies.forEach((enemy, index) => {
const angle = Math.atan2(player.y - enemy.y, player.x - enemy.x);
enemy.x += Math.cos(angle) * enemy.speed;
enemy.y += Math.sin(angle) * enemy.speed;

if (Math.hypot(player.x - enemy.x, player.y - enemy.y) < player.radius + enemy.radius) {
player.health -= enemy.damage;
enemies.splice(index, 1);

if (player.health <= 0) {
gameOver = true;
document.getElementById('gameOver').style.display = 'block';
clearInterval(timerInterval);
}
}
});
}

function updateBoss() {
if (!boss.isActive) return;

const angle = Math.atan2(player.y - boss.y, player.x - boss.x);
boss.x += Math.cos(angle) * boss.speed;
boss.y += Math.sin(angle) * boss.speed;

if (Math.hypot(player.x - boss.x, player.y - boss.y) < player.radius + boss.radius) {
player.health -= boss.damage;
if (player.health <= 0) {
gameOver = true;
document.getElementById('gameOver').style.display = 'block';
clearInterval(timerInterval);
}
}

bullets.forEach((bullet, index) => {
if (Math.hypot(bullet.x - boss.x, bullet.y - boss.y) < bullet.radius + boss.radius) {
boss.health -= player.damage;
bullets.splice(index, 1);

if (boss.health <= 0) {
boss.isActive = false;
score += 500; // Награда за победу над боссом
document.getElementById('score').textContent = `Очки: ${score}`;
}
}
});
}

function updateBullets() {
if (isPaused) return;

bullets.forEach((bullet, index) => {
bullet.x += Math.cos(bullet.angle) * bullet.speed;
bullet.y += Math.sin(bullet.angle) * bullet.speed;

// Удаляем пулю, если она вышла за пределы экрана
if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
bullets.splice(index, 1);
}

enemies.forEach((enemy, enemyIndex) => {
if (Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y) < bullet.radius + enemy.radius) {
enemy.health -= player.damage * (bullet.type === 'fire' ? 1.5 : 1); // Огненные шары наносят больше урона
if (enemy.health <= 0) {
enemies.splice(enemyIndex, 1);
score += 10;
player.experience += 10;
document.getElementById('score').textContent = `Очки: ${score}`;

// Проверка на повышение уровня
if (player.experience >= player.maxExperience) {
player.level++;
player.experience = 0;
player.maxExperience = Math.floor(player.maxExperience * 1.5); // Увеличиваем требуемый опыт
showUpgradeMenu();
}
}
bullets.splice(index, 1);
}
});
});
}

function updateExperienceBar() {
const experienceFill = document.getElementById('experienceFill');
const percent = (player.experience / player.maxExperience) * 100;
experienceFill.style.width = `${percent}%`;
}

function updateWeaponsPanel() {
const weaponsPanel = document.getElementById('weaponsPanel');
weaponsPanel.innerHTML = '';
player.weapons.forEach(weapon => {
const icon = document.createElement('div');
icon.className = 'weaponIcon';
icon.textContent = weapon.type === 'basic' ? '⚔️' : weapon.type === 'fire' ? '🔥' : weapon.type === 'laser' ? '🔫' : weapon.type === 'sword' ? '⚔️' : weapon.type === 'ice' ? '❄️' : '⚡';
weaponsPanel.appendChild(icon);
});
}

function shoot() {
if (isPaused) return;

if (enemies.length > 0 || boss.isActive) {
const target = boss.isActive ? boss : enemies.reduce((closest, enemy) => {
const distance = Math.hypot(player.x - enemy.x, player.y - enemy.y);
if (distance < closest.distance) {
return { enemy, distance };
}
return closest;
}, { enemy: null, distance: Infinity }).enemy;

if (target) {
const angle = Math.atan2(target.y - player.y, target.x - player.x);

// Стрельба всеми типами оружия
player.weapons.forEach(weapon => {
switch (weapon.type) {
case 'basic':
for (let i = 0; i < player.bulletCount; i++) {
const spreadAngle = angle + (i - (player.bulletCount - 1) / 2) * 0.2;
bullets.push({
x: player.x,
y: player.y,
radius: 5,
color: '#f1c40f',
speed: 10,
angle: spreadAngle,
damage: player.damage,
type: 'basic'
});
}
break;
case 'fire':
// Огненные шары (большие снаряды)
bullets.push({
x: player.x,
y: player.y,
radius: 10,
color: '#ff4500',
speed: 8,
angle: angle,
damage: player.damage * 1.5,
type: 'fire'
});
break;
case 'laser':
// Лазерный луч (линия)
bullets.push({
x: player.x + Math.cos(angle) * 1000,
y: player.y + Math.sin(angle) * 1000,
radius: 3,
color: '#00ff00',
speed: 15,
angle: angle,
damage: player.damage * 2,
type: 'laser'
});
break;
case 'lightning':
// Молнии (случайные удары)
if (enemies.length > 0) {
const randomEnemy = enemies[Math.floor(Math.random() * enemies.length)];
lightningTargets.push(randomEnemy);
setTimeout(() => {
lightningTargets.splice(lightningTargets.indexOf(randomEnemy), 1);
randomEnemy.health -= player.damage * 2 * weapon.level; // Урон зависит от уровня оружия
if (randomEnemy.health <= 0) {
enemies.splice(enemies.indexOf(randomEnemy), 1);
score += 10;
player.experience += 10;
}
}, 200);
}
break;
}
});
}
}
}

function showUpgradeMenu() {
isPaused = true;
const upgradeOptions = document.getElementById('upgradeOptions');
upgradeOptions.innerHTML = '';

// Выбираем 3 случайных улучшения, исключая дубликаты оружия
const availableUpgrades = upgrades.filter(upgrade => {
if (upgrade.name.includes("Огненные шары") && player.weapons.some(w => w.type === 'fire')) return false;
if (upgrade.name.includes("Лазерный луч") && player.weapons.some(w => w.type === 'laser')) return false;
if (upgrade.name.includes("Вращающиеся мечи") && player.weapons.some(w => w.type === 'sword')) return false;
if (upgrade.name.includes("Ледяные стрелы") && player.weapons.some(w => w.type === 'ice')) return false;
if (upgrade.name.includes("Молнии") && player.weapons.some(w => w.type === 'lightning')) return false;
return true;
});

const selectedUpgrades = [];
while (selectedUpgrades.length < 3 && availableUpgrades.length > 0) {
const randomIndex = Math.floor(Math.random() * availableUpgrades.length);
selectedUpgrades.push(availableUpgrades.splice(randomIndex, 1)[0]);
}

// Отображаем улучшения
selectedUpgrades.forEach((upgrade, index) => {
const option = document.createElement('div');
option.className = 'upgradeOption';
option.textContent = upgrade.name;
option.onclick = () => chooseUpgrade(index);
upgradeOptions.appendChild(option);
});

document.getElementById('upgradeMenu').style.display = 'block';
}

function chooseUpgrade(index) {
const selectedUpgrades = Array.from(document.querySelectorAll('.upgradeOption'));
const upgradeName = selectedUpgrades[index].textContent;
const upgrade = upgrades.find(u => u.name === upgradeName);

if (upgrade) {
upgrade.effect();
}

document.getElementById('upgradeMenu').style.display = 'none';
isPaused = false;
}

const keys = {
ArrowUp: false,
ArrowDown: false,
ArrowLeft: false,
ArrowRight: false,
r: false
};

window.addEventListener('keydown', (e) => {
if (keys.hasOwnProperty(e.key)) {
keys[e.key] = true;
}
if (gameOver && e.key === 'r') {
restartGame();
}
});

window.addEventListener('keyup', (e) => {
if (keys.hasOwnProperty(e.key)) {
keys[e.key] = false;
}
});

function spawnBoss() {
boss.x = Math.random() * canvas.width;
boss.y = Math.random() * canvas.height;
boss.health = 500 + (gameTime / 60) * 100; // Увеличиваем здоровье босса с каждым появлением
boss.damage = 20 + (gameTime / 60) * 5; // Увеличиваем урон босса с каждым появлением
boss.isActive = true;
}

function restartGame() {
player.x = canvas.width / 2;
player.y = canvas.height / 2;
player.health = 100;
player.attackSpeed = 500;
player.regeneration = 0;
player.bulletCount = 1;
player.weapons = [{ type: 'basic', level: 1 }];
player.damage = 20;
player.experience = 0;
player.level = 1;
player.maxExperience = 100;
enemies.length = 0;
bullets.length = 0;
lightningTargets.length = 0;
score = 0;
gameOver = false;
gameTime = 0;
enemySpeed = 2;
spawnRate = 60;
isPaused = false;
boss.isActive = false;
document.getElementById('gameOver').style.display = 'none';
document.getElementById('score').textContent = `Очки: ${score}`;
document.getElementById('timer').textContent = `Время: ${gameTime}`;
updateExperienceBar();
updateWeaponsPanel();
timerInterval = setInterval(updateTimer, 1000);
gameLoop();
}

function updateTimer() {
if (isPaused) return;

gameTime++;
document.getElementById('timer').textContent = `Время: ${gameTime}`;

// Увеличиваем количество врагов каждые 10 секунд
if (gameTime % 10 === 0) {
spawnRate = Math.max(30, spawnRate - 10);
}

// Увеличиваем скорость врагов каждые 30 секунд
if (gameTime % 30 === 0) {
enemySpeed += 0.5;
}

// Спавн босса каждые 5 минут (300 секунд)
if (gameTime % 300 === 0) {
spawnBoss();
}
}

function gameLoop() {
if (gameOver) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);

updatePlayer();
updateEnemies();
updateBoss();
updateBullets();
drawLightning();

drawPlayer();
drawEnemies();
drawBoss();
drawBullets();

updateExperienceBar();
updateWeaponsPanel();

frame++;
requestAnimationFrame(gameLoop);
}

setInterval(shoot, player.attackSpeed);
timerInterval = setInterval(updateTimer, 1000);
gameLoop();
</script>
</div>[/html]

Поделиться212025-02-01 17:36:00

Автор: Paradox
Администратор
Сообщений: 59

[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;
text-align: center;
margin-top: 50px;
}
select {
padding: 10px;
margin: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
textarea {
width: 80%;
height: 100px;
margin-top: 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Игра в снежки</h1>
<select id="playerSelect">
<option value="">Выберите игрока</option>
<option value="Игрок1">Игрок1</option>
<option value="Игрок2">Игрок2</option>
<option value="Игрок3">Игрок3</option>
<option value="Игрок4">Игрок4</option>
</select>
<button onclick="throwSnowball()">Кинуть снежок</button>
<textarea id="outputMessage" readonly></textarea>

const hitMessages = [
"снежок точно попал в цель! Как же это больно!",
"цель была застигнута врасплох! Прямое попадание!",
"снежок оставил след на лице! Уверенность покинула жертву!"
];

const missMessages = [
"снежок улетел в сторону! Никто даже не заметил!",
"цель ловко увернулась! Не сегодня, мой друг!",
"снежок приземлился в сугроб рядом! Так близко, но так далеко!"
];

function getRandomElement(array) {
return array[Math.floor(Math.random() * array.length)];
}

function generateEncryptedMessage(text) {
// Преобразуем строку в UTF-8, затем кодируем в Base64
let byteString = unescape(encodeURIComponent(text));
let encrypted = btoa(byteString);
return encrypted;
}

function throwSnowball() {
const player = document.getElementById("playerSelect").value;

if (!player) {
document.getElementById("outputMessage").value = "Выберите игрока!";
return;
}

const intro = getRandomElement(introPhrases);
const isHit = Math.random() > 0.5; // 50% шанс попадания
const result = isHit ? getRandomElement(hitMessages) : getRandomElement(missMessages);

const message = `

${intro} бросили снежок в ${player} и... ${result}

`;
const encryptedMessage = generateEncryptedMessage(message);

document.getElementById("outputMessage").value = encryptedMessage;
}
</script>
</body>
</html>[/html]

Поделиться222025-02-01 17:46:51

Автор: Paradox
Администратор
Сообщений: 59

[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;
text-align: center;
margin-top: 50px;
}
textarea {
width: 80%;
height: 100px;
margin: 10px auto;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#decodedMessage {
margin-top: 20px;
font-size: 18px;
color: green;
}
</style>
</head>
<body>
<h1>Декодер сообщений</h1>
<textarea id="encodedMessage" placeholder="Вставьте зашифрованное сообщение здесь"></textarea>
<button onclick="decodeMessage()">Декодировать</button>
<div id="decodedMessage"></div>

if (!encodedText) {
document.getElementById("decodedMessage").textContent = "Пожалуйста, вставьте зашифрованное сообщение!";
return;
}

try {
// Декодируем Base64-строку
let decodedText = atob(encodedText);

// Преобразуем обратно в UTF-8
decodedText = decodeURIComponent(escape(decodedText));

// Выводим результат
document.getElementById("decodedMessage").textContent = decodedText;
} catch (error) {
document.getElementById("decodedMessage").textContent = "Ошибка декодирования. Убедитесь, что сообщение зашифровано правильно.";
}
}
</script>
</body>
</html>[/html]

Поделиться232025-02-25 11:01:39

Автор: Paradox
Администратор
Сообщений: 59

[html]<div id="bleach-slider">
<div class="slider-container">

<div class="slide active">
<div class="character-frame frost-effect">
<div class="dynamic-border"></div>
<img src="https://i.pinimg.com/originals/a0/3f/bb/a03fbbc4148946bc2f2798d20cff4783.gif"
alt="Hitsugaya Toshiro">
<div class="particle-overlay"></div>
</div>
<div class="character-info">
<h3 class="title-decorated">日番谷冬獅郎</h3>
<div class="zanpakuto-line"></div>
<p class="desc-shinigami">Капитан 10-го отряда<br>«Небесный ледяной дракон, сокруши врага!»<br>卍解: 大紅蓮氷輪丸</p>
</div>
</div>

<div class="slide">
<div class="character-frame quincy-effect">
<div class="dynamic-border"></div>
<img src="https://forumupload.ru/uploads/0012/14/e8/2/24398.png"
alt="Juha Bach">
<div class="quincy-cross"></div>
</div>
<div class="character-info">
<h3 class="title-decorated">ユーハ・バッハ</h3>
<div class="quincy-line"></div>
<p class="desc-quincy">Отец Вандэнрайх<br>«Видящий все пути будущего»<br> Schrift: «A» - The Almighty</p>
</div>
</div>

<div class="slider-nav">
<div class="nav-bar"></div>
<div class="nav-progress"></div>
</div>
</div>
</div>

/* Анимация фона Сэйрэйтэя */
#bleach-slider::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background-image:
linear-gradient(45deg, transparent 65%, var(--soul-blue) 75%, transparent 85%),
repeating-linear-gradient(-30deg, transparent 0 20px, rgba(0,80,120,0.1) 21px);
animation: soul-society 40s linear infinite;
opacity: 0.3;
}

@keyframes soul-society {
100% { transform: rotate(360deg) translate(-50%, -50%); }
}

.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: 1s;
display: grid;
grid-template-columns: 240px 1fr;
gap: 20px;
padding: 20px;
}

.slide.active { opacity: 1; }

.character-frame {
position: relative;
height: 200px;
border-radius: 4px;
overflow: hidden;
transform-style: preserve-3d;
}

.character-frame img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
filter: contrast(1.1) saturate(1.2);
}

/* Эффект льда для Хицугаи */
.frost-effect::after {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(45deg,
transparent 40%,
var(--ice-color) 50%,
transparent 60%);
animation: frost-wave 3s infinite;
z-index: 2;
mix-blend-mode: screen;
}

@keyframes frost-wave {
100% { background-position: 200% 0; }
}

/* Эффект крови для Юхи Баха */
.quincy-effect::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%,
transparent 30%,
var(--blood-color) 70%);
animation: blood-pulse 2s infinite;
}

@keyframes blood-pulse {
50% { opacity: 0.8; transform: scale(1.05); }
}

.dynamic-border {
position: absolute;
inset: 0;
border: 2px solid;
border-image: linear-gradient(45deg,
var(--ice-color),
var(--soul-blue)) 1;
animation: border-glow 3s infinite;
z-index: 1;
}

/* Анимация границ */
@keyframes border-glow {
0%, 100% { opacity: 0.8; }
50% { opacity: 0.3; }
}

/* Частицы духовных частиц */
.particle-overlay {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 80%, var(--ice-color) 2%, transparent 5%),
radial-gradient(circle at 80% 20%, var(--ice-color) 2%, transparent 5%);
animation: particles 4s infinite;
}

@keyframes particles {
50% { background-position: 10px 10px; }
}

/* Стили для квинси */
.quincy-cross {
position: absolute;
width: 40px;
height: 40px;
background: linear-gradient(45deg,
transparent 45%,
var(--blood-color) 50%,
transparent 55%);
animation: quincy-rotate 10s infinite linear;
right: 10px;
top: 10px;
}

@keyframes quincy-rotate {
100% { transform: rotate(360deg); }
}

.character-info {
position: relative;
padding: 15px;
background: linear-gradient(160deg,
rgba(0,8,16,0.9) 40%,
rgba(0,32,64,0.7));
border-left: 3px solid var(--soul-blue);
backdrop-filter: blur(4px);
}

.title-decorated {
color: #fff;
font-size: 1.8em;
text-shadow: 0 0 10px var(--ice-color);
margin: 0 0 15px;
position: relative;
}

.zanpakuto-line {
height: 2px;
background: linear-gradient(90deg,
var(--soul-blue),
var(--ice-color) 50%,
var(--soul-blue));
margin: 10px 0;
animation: line-flow 2s infinite;
}

.quincy-line {
height: 2px;
background: linear-gradient(90deg,
var(--quincy-red),
var(--blood-color) 50%,
var(--quincy-red));
animation: line-flow 2s infinite;
}

@keyframes line-flow {
50% { opacity: 0.5; }
}

.desc-shinigami {
color: #a0f0ff;
font-size: 0.9em;
line-height: 1.5;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.desc-quincy {
color: #ffa0b0;
font-size: 0.9em;
line-height: 1.5;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.slider-nav {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 4px;
background: rgba(255,255,255,0.1);
border-radius: 2px;
}

.nav-progress {
width: 50%;
height: 100%;
background: linear-gradient(90deg, var(--soul-blue), var(--ice-color));
animation: progress-bar 9s linear infinite;
}

@keyframes progress-bar {
100% { width: 100%; }
}
</style>

function nextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
progress.style.animation = 'none';
setTimeout(() => progress.style.animation = 'progress-bar 9s linear infinite');
}

setInterval(nextSlide, 9000);

// Рестарт анимации при клике
document.querySelector('#bleach-slider').addEventListener('click', () => {
progress.style.animation = 'none';
setTimeout(() => progress.style.animation = 'progress-bar 9s linear infinite');
});
</script>[/html]

Поделиться242025-02-25 17:25:00

Автор: Paradox
Администратор
Сообщений: 59

[html]<div id="bleach-logo-final-v2">
<div class="logo-container">
<div class="logo-text">
<span class="bleach">Bleach</span>
<span class="apocalypse">Apocalipsis</span>
</div>


<div class="sakura-petals">
<div class="petal-layer-1"></div>
<div class="petal-layer-2"></div>
</div>


<div class="subtle-border"></div>
</div>
</div>

.logo-container {
position: relative;
width: 100%;
height: 100%;
}

/* Текст логотипа */
.logo-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}

.bleach {
font-family: 'Crimson Pro', serif;
font-size: 4.5em;
font-weight: 300;
color: var(--text-primary);
letter-spacing: -1px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.apocalypse {
font-family: 'Crimson Pro', serif;
font-size: 2.5em;
font-weight: 200;
color: var(--text-primary);
letter-spacing: 4px;
display: block;
margin-top: -8px;
opacity: 0.8;
}

/* Анимация лепестков сакуры */
.sakura-petals {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(transparent 90%, var(--main-bg));
}

.petal-layer-1,
.petal-layer-2 {
position: absolute;
width: 200%;
height: 200%;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23465768' d='M5 1.61l-0.75 1.75-1.965.285 1.425 1.39-.335 1.965L5 6.25l1.625.85-.335-1.965 1.425-1.39-1.965-.285L5 1.61z'/%3E%3C/svg%3E");
animation: sakura-fall 20s linear infinite;
opacity: 0.3;
}

.petal-layer-2 {
animation-duration: 25s;
opacity: 0.2;
transform: scale(1.2);
}

@keyframes sakura-fall {
0% { transform: translateY(-100%) rotate(0deg); }
100% { transform: translateY(100%) rotate(360deg); }
}

/* Тонкая рамка */
.subtle-border {
position: absolute;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 1px solid var(--border-accent);
margin: 2px;
z-index: 3;
}

/* Эффект глубины */
#bleach-logo-final-v2::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
transparent 65%,
rgba(70,87,104,0.1) 90%,
transparent);
animation: depth-scan 15s infinite;
}

@keyframes depth-scan {
0%, 100% { transform: translate(-100%, -50%); }
50% { transform: translate(100%, 50%); }
}
</style>[/html]

Поделиться252025-02-25 17:40:09

Автор: Paradox
Администратор
Сообщений: 59

[html]<div id="bleach-logo-full-video">

<div class="video-background">
<iframe
src="https://www.youtube.com/embed/_tHYPlmvGJM?autoplay=1&mute=1&loop=1&playlist=_tHYPlmvGJM&controls=0&showinfo=0&rel=0&modestbranding=1&background=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>

<div class="logo-container">
<div class="logo-text">
<span class="bleach">Bleach</span>
<span class="apocalypse">Apocalipsis</span>
</div>


<div class="subtle-border"></div>
</div>
</div>

/* Видео фон */
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}

.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.77777778vh; /* 16:9 ratio */
height: 56.25vw; /* 16:9 ratio */
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
}

/* Затемнение фона */
.video-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--main-overlay);
mix-blend-mode: multiply;
}

/* Основной контент */
.logo-container {
position: relative;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}

.logo-text {
text-align: center;
padding: 20px;
position: relative;
z-index: 2;
}

/* Адаптивный текст */
.bleach {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(2.5rem, 8vw, 4.5rem); /* Адаптивный размер */
font-weight: 600;
color: var(--text-color);
text-shadow: 0 0 15px rgba(0,100,255,0.5);
margin: 0;
line-height: 1;
letter-spacing: -2px;
}

.Appocalipsis{
font-family: 'Cormorant SC', serif;
font-size: clamp(1.2rem, 4vw, 2.2rem); /* Адаптивный размер */
font-weight: 300;
color: var(--text-color);
letter-spacing: 4px;
margin: 5px 0 0;
opacity: 0.9;
text-shadow: 0 0 10px rgba(0,100,255,0.3);
}

/* Минималистичная рамка */
.subtle-border {
position: absolute;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 1px solid var(--border-accent);
margin: 2px;
z-index: 3;
pointer-events: none;
}

/* Адаптивность для маленьких экранов */
@media (max-width: 600px) {
.bleach {
letter-spacing: -1px;
}

.apocalypse {
letter-spacing: 2px;
}
}
</style>[/html]

Поделиться262025-04-10 09:23:57

Автор: Ouroboros
Администратор
Сообщений: 6

Кря...

Отредактировано Ouroboros (2025-04-10 09:24:32)

Поделиться272025-04-10 09:25:04

Автор: Ouroboros
Администратор
Сообщений: 6

Ouroboros написал(а):

Кря...

Отредактировано Ouroboros (Сегодня 09:24:32)

Тть

Поделиться282025-04-12 00:01:09

Автор: Paradox
Администратор
Сообщений: 59

[html]<div id="bleach-logo-full-video">
<div class="video-background">
<iframe
src="https://www.youtube.com/embed/_tHYPlmvGJM?autoplay=1&mute=1&loop=1&playlist=_tHYPlmvGJM&controls=0&showinfo=0&rel=0&modestbranding=1&background=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>

<div class="logo-container">
<div class="logo-text">
<span class="bleach">Bleach</span>
<span class="new-arc">New Arc</span>
</div>
<div class="subtle-border"></div>
</div>
</div>

/* Видео фон */
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.77777778vh;
height: 56.25vw;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
border: none !important;
background: transparent !important;
pointer-events: none;
}

.video-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--main-overlay);
mix-blend-mode: multiply;
}

/* Контейнер логотипа */
.logo-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
padding: 15px;
box-sizing: border-box;
}

.logo-text {
text-align: center;
position: relative;
width: 100%;
}

/* Стили текста */
.bleach {
display: block;
font-family: 'Cinzel Decorative', serif;
font-size: clamp(3.5rem, 9vw, 5.5rem);
font-weight: 700;
color: var(--text-color);
text-shadow: 0 0 20px rgba(32, 100, 255, 0.4);
line-height: 0.9;
letter-spacing: -3px;
margin-bottom: -5px;
}

.new-arc {
display: block;
font-family: 'Cormorant SC', serif;
font-size: clamp(1.8rem, 4.5vw, 2.8rem);
font-weight: 400;
color: var(--text-color);
letter-spacing: 5px;
text-transform: uppercase;
margin-top: 8px;
text-shadow: 0 0 15px rgba(32, 100, 255, 0.3);
opacity: 0.95;
}

/* Рамка */
.subtle-border {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
border: 1px solid var(--border-accent);
pointer-events: none;
}

/* Адаптация */
@media (max-width: 640px) {
.bleach {
letter-spacing: -2px;
margin-bottom: -3px;
}

.new-arc {
letter-spacing: 3px;
margin-top: 5px;
}
}

@media (max-width: 480px) {
#bleach-logo-full-video {
border-radius: 6px;
}

.logo-container {
padding: 10px;
}
}
</style>[/html]

Поделиться292025-04-12 01:28:18

Автор: Paradox
Администратор
Сообщений: 59

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Интерактивная карточка персонажа</title>
<style>
/* ===== НАСТРОЙКИ ===== */
.rpg-character-card {
--card-width: 800px; /* Ширина карточки */
--header-height: 320px; /* Высота изображения */
--accent: #c88232; /* Акцентный цвет */
--text: #e0e0e0; /* Цвет текста */
--bg: #2d2d2d; /* Фон карточки */

width: 100%;
max-width: var(--card-width);
margin: 20px auto;
font-family: 'Arial', sans-serif;
}

/* ===== ОСНОВНОЙ КОНТЕЙНЕР ===== */
.character-card {
background: var(--bg);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
overflow: hidden;
cursor: pointer;
transition: all 0.4s ease;
}

/* ===== ИЗОБРАЖЕНИЯ ===== */
.card-image {
position: relative;
height: var(--header-height);
transition: height 0.4s ease;
}

.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: opacity 0.4s ease;
}

.expanded-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

/* ===== ИМЯ ПЕРСОНАЖА ===== */
.character-name {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
font-size: 2.4em;
padding: 12px 25px;
background: linear-gradient(90deg, rgba(200,130,80,0.9), transparent);
border-radius: 8px;
text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
letter-spacing: 1px;
}

/* ===== ИНФОРМАЦИОННЫЕ БЛОКИ ===== */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 25px;
}

.info-item {
background: rgba(40,40,40,0.6);
padding: 18px;
border-radius: 10px;
border-left: 4px solid var(--accent);
position: relative;
overflow: hidden;
}

.info-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.05));
pointer-events: none;
}

.info-title {
color: var(--accent);
font-weight: bold;
margin-bottom: 8px;
font-size: 1.1em;
}

.info-content {
color: var(--text);
line-height: 1.6;
font-size: 0.95em;
}

/* ===== ОПИСАНИЕ ===== */
.card-description {
padding: 0 25px;
max-height: 0;
opacity: 0;
transition: all 0.4s ease;
}

.description-text {
color: var(--text);
font-size: 1.1em;
line-height: 1.7;
padding: 20px 0;
}

/* ===== АКТИВНОЕ СОСТОЯНИЕ ===== */
.character-card.active {
box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

.character-card.active .main-img {
opacity: 0;
}

.character-card.active .expanded-img {
opacity: 1;
}

.character-card.active .card-description {
max-height: 1000px;
opacity: 1;
padding: 25px;
}

@media (max-width: 768px) {
.character-name {
font-size: 1.8em;
bottom: 15px;
left: 15px;
padding: 8px 20px;
}

.card-image {
height: 250px;
}

.info-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>

<div class="rpg-character-card">
<div class="character-card" onclick="this.classList.toggle('active')">


<div class="card-image">

<img class="main-img"
src="https://forumstatic.ru/files/001c/1f/11/46558.jpg"
alt="Основное изображение">


<img class="expanded-img"
src="https://forumstatic.ru/files/001c/1f/11/28979.png"
alt="Детализация">


<div class="character-name">Shunsui Kyoraku</div>
</div>


<div class="card-description">
<div class="description-text">
▶ Главнокомандующий Готей 13 нового поколения<br>
▶ Обладатель уникального двойного банкай<br>
▶ Стратег с нестандартным подходом к бою
</div>

<div class="info-grid">

<div class="info-item">
<div class="info-title">Должность</div>
<div class="info-content">Капитан 1-го отряда</div>
</div>


<div class="info-item">
<div class="info-title">Способности</div>
<div class="info-content">Карасурити Кёкасуигэцу</div>
</div>


<div class="info-item">
<div class="info-title">Особенности</div>
<div class="info-content">Розовая накидка, любовь к саке</div>
</div>


<div class="info-item">
<div class="info-title">Характер</div>
<div class="info-content">Расслабленный мудрец-стратег</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>[/html]

Поделиться302025-04-16 23:08:34

Автор: Paradox
Администратор
Сообщений: 59

[html]<!DOCTYPE html>
<html>
<head>
<style>
#screen {
width: 512px;
height: 480px;
border: 2px solid #000;
image-rendering: pixelated;
}
.controls {
margin: 10px 0;
color: #666;
}
</style>
</head>
<body>
<input type="file" id="romInput" accept=".nes">
<div class="controls">Управление: ← → ↑ ↓ | A: Z | B: X</div>
<canvas id="screen"></canvas>

loadROM(data) {
// Базовый парсинг заголовка iNES
const header = new Uint8Array(data.slice(0, 16));
this.prgRom = data.slice(16, 16 + 16384 * header[4]);

// Инициализация процессора
this.cpu = {
pc: (this.prgRom[0x3FFD] << 8) | this.prgRom[0x3FFC],
a: 0, x: 0, y: 0, sp: 0xFD, status: 0x24
};

this.initGraphics();
this.startLoop();
}

initGraphics() {
// Создаём буфер для тайлов
this.ctx.fillStyle = '#000';
this.ctx.fillRect(0, 0, 256, 240);
}

handleInput(keyCode, isPressed) {
const map = {
37: 6, 39: 7, 38: 4, 40: 5, // ← → ↑ ↓
90: 0, 88: 1 // Z, X
};
if(map[keyCode] !== undefined) this.buttons[map[keyCode]] = isPressed ? 1 : 0;
}

startLoop() {
setInterval(() => {
this.cpuCycle();
this.ppuCycle();
}, 1000/60);
}

cpuCycle() {
// Упрощённая эмуляция процессора
const opcode = this.prgRom[this.cpu.pc++];
switch(opcode) {
case 0xA9: // LDA Immediate
this.cpu.a = this.prgRom[this.cpu.pc++];
break;
// Добавьте другие опкоды по необходимости
}
}

ppuCycle() {
// Отрисовка тестового изображения
this.ctx.fillStyle = `hsl(${Date.now()/10 % 360}, 100%, 50%)`;
this.ctx.fillRect(0, 0, 100, 100);
}
}

// Инициализация
const canvas = document.getElementById('screen');
const emulator = new MiniNES(canvas);

// Загрузка ROM
document.getElementById('romInput').addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => emulator.loadROM(event.target.result);
reader.readAsArrayBuffer(file);
});

// Обработка клавиш
document.addEventListener('keydown', e => emulator.handleInput(e.keyCode, true));
document.addEventListener('keyup', e => emulator.handleInput(e.keyCode, false));
</script>

</body>
</html>[/html]

Realatorum Paradox

Меню навигации

Пользовательские ссылки

Информация о пользователе

Флуд [00] Мы развели костёр

Сообщений 1 страница 30 из 30

Поделиться12024-04-13 20:17:49

Поделиться22024-04-13 20:21:16

Поделиться32024-04-13 22:05:00

Поделиться42024-04-14 10:55:59

Поделиться52024-04-14 11:09:33

Поделиться62024-04-14 11:10:33

Поделиться72024-04-21 10:29:34

Поделиться82024-07-31 21:23:54

Поделиться92024-12-25 13:43:35

Поделиться102024-12-26 00:23:03

Поделиться112025-01-06 15:09:58

Поделиться122025-01-06 15:15:18

Поделиться132025-01-06 21:41:57

Поделиться142025-01-08 11:47:55

Поделиться152025-01-08 13:13:17

Поделиться162025-01-12 12:09:42

Поделиться172025-01-12 12:59:14

Поделиться182025-01-12 14:37:15

Поделиться192025-01-21 21:53:07

Поделиться202025-01-24 13:40:32

Поделиться212025-02-01 17:36:00

Поделиться222025-02-01 17:46:51

Поделиться232025-02-25 11:01:39

Поделиться242025-02-25 17:25:00

Поделиться252025-02-25 17:40:09

Поделиться262025-04-10 09:23:57

Поделиться272025-04-10 09:25:04

Поделиться282025-04-12 00:01:09

Поделиться292025-04-12 01:28:18

Поделиться302025-04-16 23:08:34