Капитан Къераку сделал это для нас:)
Наслаждаемся!
[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=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
overflow: hidden; /* Prevent scrollbar due to pseudo-elements */
}
.bleach-sudoku-container {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
/* Советский фон: темно-серый, почти как бетон или военная форма */
background: #3c3c3c; /* Темно-серый */
color: #e0e0e0; /* Светлый текст */
padding: 20px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.bleach-sudoku-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Менее выраженные градиенты или их отсутствие */
background-image: none; /* Убираем яркие радиальные градиенты */
pointer-events: none;
}
.bleach-sudoku-title {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 2.8rem;
font-weight: 700;
/* Цвет названия: золотистый или яркий красный */
color: #ffd700; /* Золотой */
text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.3);
margin-bottom: 15px;
letter-spacing: 3px;
z-index: 10;
position: relative;
text-align: center;
}
.bleach-sudoku-subtitle {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1rem;
/* Приглушенный светло-желтый или белый */
color: rgba(255, 255, 255, 0.8);
margin-bottom: 25px;
text-align: center;
letter-spacing: 1px;
z-index: 10;
position: relative;
}
.bleach-sudoku-board {
all: initial;
display: grid;
grid-template-columns: repeat(9, 52px);
grid-template-rows: repeat(9, 52px);
gap: 1px;
/* Строгий цвет фона доски */
background: #4a4a4a; /* Темно-серый */
border: 6px solid #4a4a4a; /* Граница в тон фона */
box-shadow:
0 0 20px rgba(0, 0, 0, 0.5),
inset 0 0 15px rgba(0, 0, 0, 0.6);
z-index: 10;
position: relative;
margin-bottom: 25px;
}
.bleach-sudoku-cell {
all: initial;
width: 52px;
height: 52px;
/* Цвет ячейки: темный, "рабочий" */
background: #2b2b2b; /* Очень темно-серый */
border: 1px solid rgba(100, 100, 100, 0.4); /* Мягкая серая граница */
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1.6rem;
font-weight: 400;
color: #e0e0e0; /* Светлый текст */
cursor: pointer;
transition: all 0.3s ease;
box-sizing: border-box;
position: relative;
}
.bleach-sudoku-cell:hover {
/* Менее яркая подсветка при наведении */
background: #404040; /* Средне-серый */
box-shadow: 0 0 8px rgba(100, 100, 100, 0.6);
}
.bleach-sudoku-cell.bleach-given {
/* Заданные числа: более строгий цвет */
background: #353535; /* Чуть светлее фона ячеек */
color: #ffd700; /* Золотой или светло-желтый */
text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
cursor: default;
}
.bleach-sudoku-cell.bleach-selected {
/* Выделенная ячейка: акцент красного */
background: rgba(178, 34, 34, 0.4); /* Огненно-красный */
box-shadow: 0 0 15px rgba(178, 34, 34, 0.8);
border: 2px solid #b22222; /* Красная граница */
}
.bleach-sudoku-cell.bleach-error {
/* Ошибка: все еще красный, но менее "кричащий" */
background: rgba(139, 0, 0, 0.6); /* Темно-красный */
animation: bleach-error-pulse 0.6s ease-in-out;
}
.bleach-sudoku-cell.bleach-hint {
/* Подсказка: зеленый, но приглушенный */
background: rgba(34, 139, 34, 0.5); /* Лесной зеленый */
animation: bleach-hint-glow 1s ease-in-out;
}
.bleach-sudoku-cell.bleach-highlight-row,
.bleach-sudoku-cell.bleach-highlight-col,
.bleach-sudoku-cell.bleach-highlight-box {
/* Подсветка: приглушенный серый */
background: rgba(70, 70, 70, 0.3);
}
.bleach-sudoku-cell.bleach-highlight-duplicate {
/* Дубликаты: оранжевый, но темнее */
background: rgba(184, 134, 11, 0.5); /* Темный золотисто-оранжевый */
box-shadow: 0 0 8px rgba(184, 134, 11, 0.6);
}
/* Толстые границы для 3x3 блоков */
.bleach-sudoku-cell:nth-child(3n):not(:nth-child(9n)) {
border-right: 3px solid #4a4a4a;
}
.bleach-sudoku-cell:nth-child(n+19):nth-child(-n+27),
.bleach-sudoku-cell:nth-child(n+46):nth-child(-n+54) {
border-bottom: 3px solid #4a4a4a;
}
@keyframes bleach-error-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(139, 0, 0, 0.8); }
50% { transform: scale(1.08); box-shadow: 0 0 20px rgba(139, 0, 0, 1); }
}
@keyframes bleach-hint-glow {
0%, 100% { box-shadow: 0 0 8px rgba(34, 139, 34, 0.6); }
50% { box-shadow: 0 0 20px rgba(34, 139, 34, 1); }
}
.bleach-sudoku-controls {
all: initial;
display: flex;
gap: 15px;
margin-bottom: 20px;
z-index: 10;
position: relative;
flex-wrap: wrap;
justify-content: center;
}
.bleach-sudoku-btn {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
/* Кнопки: строгие, с легким градиентом красного или серого */
background: linear-gradient(45deg, #8b0000, #b22222); /* От темно-красного до красного */
color: #e0e0e0;
border: none;
padding: 12px 24px;
border-radius: 5px; /* Менее скругленные кнопки */
cursor: pointer;
font-size: 0.95rem;
font-weight: 400;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
letter-spacing: 0.5px;
}
.bleach-sudoku-btn:hover:not(:disabled) {
transform: translateY(-2px); /* Меньший эффект при наведении */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
background: linear-gradient(45deg, #b22222, #cd5c5c);
}
.bleach-sudoku-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: linear-gradient(45deg, #505050, #707070); /* Серые отключенные кнопки */
}
.bleach-sudoku-info {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
max-width: 90vw;
color: rgba(255, 255, 255, 0.9);
z-index: 10;
position: relative;
margin-bottom: 15px;
}
.bleach-sudoku-timer, .bleach-sudoku-hint-timer {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1.3rem;
/* Цвет таймера: золотой или светло-желтый */
color: #ffd700;
font-weight: 400;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}
.bleach-sudoku-controls-info {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
z-index: 10;
position: relative;
line-height: 1.4;
}
.bleach-victory {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Фон окна победы: темный, с красной или золотой рамкой */
background: rgba(43, 43, 43, 0.95);
color: #e0e0e0;
padding: 50px;
border-radius: 10px; /* Менее скругленные углы */
text-align: center;
border: 4px solid #b22222; /* Красная рамка */
box-shadow: 0 0 40px rgba(178, 34, 34, 0.7);
z-index: 100;
display: none;
}
.bleach-victory h2 {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 2.2rem;
color: #ffd700; /* Золотой заголовок победы */
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
font-weight: 300;
letter-spacing: 2px;
}
.bleach-victory p {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 10px;
font-size: 1.1rem;
line-height: 1.5;
}
.bleach-copyright {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 20px;
z-index: 10;
position: relative;
}
</style>
</head>
<body>
<div class="bleach-sudoku-container">
<h1 class="bleach-sudoku-title">Судоку - Наша Цель!</h1>
<div class="bleach-sudoku-subtitle">Примите вызов и укрепите дисциплину!</div>
<div class="bleach-sudoku-info">
<div>Время борьбы: <span class="bleach-sudoku-timer" id="bleachTimer">00:00</span></div>
<div>Помощь товарища: <span class="bleach-sudoku-hint-timer" id="bleachHintTimer">готова</span></div>
</div>
<div class="bleach-sudoku-board" id="bleachSudokuBoard"></div>
<div class="bleach-sudoku-controls">
<button class="bleach-sudoku-btn" onclick="bleachNewGame()">Новый бой!</button>
<button class="bleach-sudoku-btn" id="bleachHintBtn" onclick="bleachGetHint()">Взаимопомощь</button>
<button class="bleach-sudoku-btn" onclick="bleachSolve()">Проверенное решение</button>
<button class="bleach-sudoku-btn" onclick="bleachClear()">Очистить поле</button>
</div>
<div class="bleach-sudoku-controls-info">
Выберите ячейку и введите цифру 1-9<br>
0 или Delete для очистки • Порядок в строках и столбцах
</div>
<div class="bleach-victory" id="bleachVictory">
<h2>Победа Наша!</h2>
<p>Вы завершили задание! Родина гордится вами!</p>
<p>Время достижения: <span id="bleachFinalTimer"></span></p>
<button class="bleach-sudoku-btn" onclick="bleachNewGame(); document.getElementById('bleachVictory').style.display='none';">Новое задание</button>
</div>
<div class="bleach-copyright">Построено Zero_Chan для народа © 2025</div>
</div>
<script>
(function() {
let bleachSudokuGrid = [];
let bleachSolution = [];
let bleachSelectedCell = null;
let bleachStartTime = Date.now();
let bleachTimerInterval = null;
let bleachHintCooldown = 0;
let bleachHintInterval = null;
let bleachOriginalPuzzle = [];
const bleachBoard = document.getElementById('bleachSudokuBoard');
const bleachTimerElement = document.getElementById('bleachTimer');
const bleachHintTimerElement = document.getElementById('bleachHintTimer');
const bleachHintBtn = document.getElementById('bleachHintBtn');
const bleachVictoryElement = document.getElementById('bleachVictory');
function bleachInitGrid() {
bleachSudokuGrid = Array(9).fill().map(() => Array(9).fill(0));
bleachSolution = Array(9).fill().map(() => Array(9).fill(0));
bleachOriginalPuzzle = Array(9).fill().map(() => Array(9).fill(0));
}
function bleachIsValid(grid, row, col, num) {
// Check row
for (let x = 0; x < 9; x++) {
if (grid[row][x] === num) return false;
}
// Check column
for (let x = 0; x < 9; x++) {
if (grid[x][col] === num) return false;
}
// Check 3x3 box
const boxRow = Math.floor(row / 3) * 3;
const boxCol = Math.floor(col / 3) * 3;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (grid[boxRow + i][boxCol + j] === num) return false;
}
}
return true;
}
function bleachSolveSudoku(grid) {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (grid[row][col] === 0) {
for (let num = 1; num <= 9; num++) {
if (bleachIsValid(grid, row, col, num)) {
grid[row][col] = num;
if (bleachSolveSudoku(grid)) {
return true;
}
grid[row][col] = 0;
}
}
return false;
}
}
}
return true;
}
function bleachGeneratePuzzle() {
bleachInitGrid();
// Fill diagonal 3x3 boxes first
for (let box = 0; box < 9; box += 3) {
const nums = [1,2,3,4,5,6,7,8,9];
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
const randomIndex = Math.floor(Math.random() * nums.length);
bleachSolution[box + i][box + j] = nums[randomIndex];
nums.splice(randomIndex, 1);
}
}
}
// Solve the rest
bleachSolveSudoku(bleachSolution);
// Create puzzle by removing numbers
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
bleachSudokuGrid[row][col] = bleachSolution[row][col];
bleachOriginalPuzzle[row][col] = bleachSolution[row][col];
}
}
// Remove 40-50 numbers for medium difficulty
const cellsToRemove = 45;
let removed = 0;
while (removed < cellsToRemove) {
const row = Math.floor(Math.random() * 9);
const col = Math.floor(Math.random() * 9);
if (bleachSudokuGrid[row][col] !== 0) {
bleachSudokuGrid[row][col] = 0;
bleachOriginalPuzzle[row][col] = 0;
removed++;
}
}
}
function bleachHighlightRelated(selectedRow, selectedCol) {
const cells = bleachBoard.children;
// Clear previous highlights
for (let cell of cells) {
cell.classList.remove('bleach-highlight-row', 'bleach-highlight-col', 'bleach-highlight-box', 'bleach-highlight-duplicate');
}
if (selectedRow === -1 || selectedCol === -1) return;
const selectedValue = bleachSudokuGrid[selectedRow][selectedCol];
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
const index = row * 9 + col;
const cell = cells[index];
// Highlight row
if (row === selectedRow) {
cell.classList.add('bleach-highlight-row');
}
// Highlight column
if (col === selectedCol) {
cell.classList.add('bleach-highlight-col');
}
// Highlight 3x3 box
const boxRow = Math.floor(selectedRow / 3);
const boxCol = Math.floor(selectedCol / 3);
const cellBoxRow = Math.floor(row / 3);
const cellBoxCol = Math.floor(col / 3);
if (boxRow === cellBoxRow && boxCol === cellBoxCol) {
cell.classList.add('bleach-highlight-box');
}
// Highlight duplicates
if (selectedValue !== 0 && bleachSudokuGrid[row][col] === selectedValue && !(row === selectedRow && col === selectedCol)) {
cell.classList.add('bleach-highlight-duplicate');
}
}
}
}
function bleachRenderBoard() {
bleachBoard.innerHTML = '';
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
const cell = document.createElement('div');
cell.className = 'bleach-sudoku-cell';
cell.textContent = bleachSudokuGrid[row][col] || '';
if (bleachOriginalPuzzle[row][col] !== 0) {
cell.classList.add('bleach-given');
}
cell.addEventListener('click', () => {
if (bleachSelectedCell) {
bleachSelectedCell.classList.remove('bleach-selected');
}
bleachSelectedCell = cell;
cell.classList.add('bleach-selected');
bleachSelectedCell.dataset.row = row;
bleachSelectedCell.dataset.col = col;
bleachHighlightRelated(row, col);
});
bleachBoard.appendChild(cell);
}
}
}
function bleachUpdateTimer() {
const elapsed = Math.floor((Date.now() - bleachStartTime) / 1000);
const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
const seconds = (elapsed % 60).toString().padStart(2, '0');
bleachTimerElement.textContent = `${minutes}:${seconds}`;
}
function bleachUpdateHintTimer() {
if (bleachHintCooldown > 0) {
bleachHintCooldown--;
bleachHintTimerElement.textContent = `${bleachHintCooldown}с`;
bleachHintBtn.disabled = true;
} else {
bleachHintTimerElement.textContent = 'готова';
bleachHintBtn.disabled = false;
}
}
function bleachCheckWin() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachSudokuGrid[row][col] !== bleachSolution[row][col]) {
return false;
}
}
}
clearInterval(bleachTimerInterval);
clearInterval(bleachHintInterval);
document.getElementById('bleachFinalTimer').textContent = bleachTimerElement.textContent;
bleachVictoryElement.style.display = 'block';
return true;
}
function bleachHandleKeyPress(e) {
if (!bleachSelectedCell) return;
const row = parseInt(bleachSelectedCell.dataset.row);
const col = parseInt(bleachSelectedCell.dataset.col);
// Don't modify given numbers
if (bleachOriginalPuzzle[row][col] !== 0) {
return;
}
const key = e.key;
if (key >= '1' && key <= '9') {
const num = parseInt(key);
if (bleachIsValid(bleachSudokuGrid, row, col, num)) {
bleachSudokuGrid[row][col] = num;
bleachSelectedCell.textContent = num;
bleachSelectedCell.classList.remove('bleach-error');
bleachHighlightRelated(row, col);
bleachCheckWin();
} else {
bleachSelectedCell.classList.add('bleach-error');
setTimeout(() => {
bleachSelectedCell.classList.remove('bleach-error');
}, 600);
}
} else if (key === '0' || key === 'Delete' || key === 'Backspace') {
bleachSudokuGrid[row][col] = 0;
bleachSelectedCell.textContent = '';
bleachSelectedCell.classList.remove('bleach-error');
bleachHighlightRelated(row, col);
}
}
window.bleachNewGame = function() {
bleachGeneratePuzzle();
bleachRenderBoard();
bleachStartTime = Date.now();
bleachHintCooldown = 0;
clearInterval(bleachTimerInterval);
clearInterval(bleachHintInterval);
bleachTimerInterval = setInterval(bleachUpdateTimer, 1000);
bleachHintInterval = setInterval(bleachUpdateHintTimer, 1000);
bleachSelectedCell = null;
bleachHighlightRelated(-1, -1);
bleachUpdateHintTimer();
bleachVictoryElement.style.display = 'none'; // Hide victory message on new game
};
window.bleachGetHint = function() {
if (bleachHintCooldown > 0) return;
// Find empty cells
const emptyCells = [];
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachSudokuGrid[row][col] === 0) {
emptyCells.push({row, col});
}
}
}
if (emptyCells.length === 0) return;
// Pick random empty cell and fill it
const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
const {row, col} = randomCell;
bleachSudokuGrid[row][col] = bleachSolution[row][col];
// Update display
const cellIndex = row * 9 + col;
const cellElement = bleachBoard.children[cellIndex];
cellElement.textContent = bleachSolution[row][col];
cellElement.classList.add('bleach-hint');
setTimeout(() => {
cellElement.classList.remove('bleach-hint');
}, 1000);
// Start cooldown
bleachHintCooldown = 60;
bleachUpdateHintTimer();
bleachCheckWin();
};
window.bleachSolve = function() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
bleachSudokuGrid[row][col] = bleachSolution[row][col];
}
}
bleachRenderBoard();
bleachCheckWin();
};
window.bleachClear = function() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachOriginalPuzzle[row][col] === 0) {
bleachSudokuGrid[row][col] = 0;
}
}
}
bleachRenderBoard();
if (bleachSelectedCell) {
const row = parseInt(bleachSelectedCell.dataset.row);
const col = parseInt(bleachSelectedCell.dataset.col);
bleachHighlightRelated(row, col);
}
};
document.addEventListener('keydown', bleachHandleKeyPress);
// Initialize game
bleachNewGame();
})();
</script>
</body>
</html>[/html]
