Испытание на терпение и внимание! Пятнашки. Ах, этот чарующий звук чужой ярости! Проявите себя, пройдите испытание, покажите нам, что вы способны на великие свершения, даже решить пятнашковую загадку!
За прохождение испытания вы получите 150 баллов!
Пришлите скриншот собранного изображения и получите их!
[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>
/* =========================================================
* --- СТИЛИ ИГРЫ ---
* ========================================================= */
:root {
--pumpkin-orange: #FF8C00;
--dark-hat-blue: #36454F;
--light-cream: #FDFBF2;
--dark-text-color: #282828;
--accent-red: #A01010;
--button-hover-dark: #1A2126;
--success-color: #388E3C;
--error-color: #D32F2F;
}
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
margin: 0;
padding: 20px;
/* ВАША ССЫЛКА НА ФОН ОКРУЖЕНИЯ */
background-image: url('https://img.freepik.com/premium-vector/pumpkin-with-hat-halloween-pattern-design_92495-166.jpg');
background-repeat: repeat;
background-size: 150px;
background-color: var(--light-cream);
color: var(--dark-text-color);
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.game-container {
width: 500px;
max-width: 95%;
padding: 25px;
border: 3px solid var(--dark-hat-blue);
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
border-radius: 10px;
position: relative;
z-index: 10;
}
h2 {
text-align: center;
color: var(--accent-red);
border-bottom: 2px dashed var(--pumpkin-orange);
padding-bottom: 12px;
margin-bottom: 25px;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ИНФОРМАЦИОННАЯ ПАНЕЛЬ */
.info-panel {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
font-weight: bold;
padding: 8px 10px;
background-color: var(--light-cream);
border: 1px solid var(--dark-hat-blue);
border-radius: 5px;
font-size: 1.2em;
}
.info-panel span {
flex-basis: 48%;
text-align: center;
}
/* КНОПКА */
#newGameButton {
padding: 12px 20px;
margin-top: 20px;
border: none;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s, transform 0.1s;
border-radius: 5px;
font-size: 1em;
letter-spacing: 0.5px;
background-color: var(--dark-hat-blue);
color: var(--light-cream);
width: 100%;
}
#newGameButton:hover {
background-color: var(--button-hover-dark);
transform: translateY(-2px);
}
/* ИГРОВОЕ ПОЛЕ */
#puzzle-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 450px;
height: 450px;
margin: 0 auto;
border: 5px solid var(--dark-hat-blue);
background-color: #333;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
/* ПЛИТКА */
.tile {
background-color: #EEE;
border: 1px solid var(--dark-hat-blue);
cursor: pointer;
transition: transform 0.1s;
user-select: none;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: 450px 450px;
}
.tile:hover {
opacity: 0.9;
}
/* ПУСТОЕ МЕСТО */
.empty {
background-color: #333;
cursor: default;
border: 1px solid var(--dark-hat-blue);
}
/* СООБЩЕНИЕ О ПОБЕДЕ */
#message {
margin-top: 15px;
text-align: center;
font-weight: bold;
font-size: 1.2em;
min-height: 20px;
}
.win-message {
color: var(--success-color);
background-color: #e6ffe6;
padding: 10px;
border-radius: 5px;
}
.error-message {
color: var(--error-color);
background-color: #ffe6e6;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="game-container">
<h2>ХЭЛЛОУИНСКИЕ ПЯТНАШКИ</h2>
<div class="info-panel">
<span>Ходы: <span id="movesCount">0</span></span>
<span>Время: <span id="timerDisplay">0:00</span></span>
</div>
<div id="puzzle-board">
</div>
<div id="message">Нажмите "Новая игра", чтобы начать!</div>
<button id="newGameButton">Новая игра</button>
</div>
<script>
// =========================================================
// --- ЛОГИКА ИГРЫ "ПЯТНАШКИ" С ФОТОГРАФИЕЙ ---
// =========================================================
// =========================================================================================
// ������ ВАША ССЫЛКА ВСТАВЛЕНА НИЖЕ ������
const IMAGE_URL = 'https://upforme.ru/uploads/0018/3d/b1/64/209936.jpg';
// =========================================================================================
const SIZE = 4;
const TILES_COUNT = 15;
const BOARD_WIDTH = 450;
const TILE_WIDTH = BOARD_WIDTH / SIZE;
let board = [];
let moves = 0;
let timer = 0;
let timerInterval;
let gameActive = false;
const boardElement = document.getElementById('puzzle-board');
const movesElement = document.getElementById('movesCount');
const timerElement = document.getElementById('timerDisplay');
const messageElement = document.getElementById('message');
const newGameButton = document.getElementById('newGameButton');
// --- ФУНКЦИИ ИНИЦИАЛИЗАЦИИ ---
function generateSolvableTiles() {
let tiles = Array.from({ length: TILES_COUNT }, (_, i) => i + 1);
tiles.push(0);
for (let i = tiles.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[tiles[i], tiles[j]] = [tiles[j], tiles[i]];
}
let inversions = 0;
for (let i = 0; i < TILES_COUNT; i++) {
for (let j = i + 1; j < TILES_COUNT; j++) {
if (tiles[i] !== 0 && tiles[j] !== 0 && tiles[i] > tiles[j]) {
inversions++;
}
}
}
if (inversions % 2 !== 0) {
let a = tiles.indexOf(1);
let b = tiles.indexOf(2);
if (a !== -1 && b !== -1) {
[tiles[a], tiles[b]] = [tiles[b], tiles[a]];
}
}
return tiles;
}
function startGame() {
// Упрощенная проверка на случай, если вы всё же захотите изменить ссылку
if (!IMAGE_URL || IMAGE_URL.trim() === '') {
messageElement.className = 'error-message';
messageElement.textContent = 'Ошибка: Пожалуйста, вставьте корректную ссылку на изображение.';
return;
}
clearInterval(timerInterval);
boardElement.innerHTML = '';
moves = 0;
timer = 0;
movesElement.textContent = moves;
timerElement.textContent = '0:00';
messageElement.textContent = '';
messageElement.classList.remove('win-message', 'error-message');
gameActive = true;
const initialTiles = generateSolvableTiles();
board = [];
for (let i = 0; i < SIZE; i++) {
board.push(initialTiles.slice(i * SIZE, (i + 1) * SIZE));
}
timerInterval = setInterval(updateTimer, 1000);
renderBoard();
}
// --- ОСНОВНАЯ ЛОГИКА ---
function renderBoard() {
boardElement.innerHTML = '';
for (let r = 0; r < SIZE; r++) {
for (let c = 0; c < SIZE; c++) {
const value = board[r][c];
const tile = document.createElement('div');
if (value === 0) {
tile.className = 'empty';
} else {
tile.className = 'tile';
const targetIndex = value - 1;
const targetRow = Math.floor(targetIndex / SIZE);
const targetCol = targetIndex % SIZE;
const bgX = -(targetCol * TILE_WIDTH);
const bgY = -(targetRow * TILE_WIDTH);
tile.style.backgroundImage = `url('${IMAGE_URL}')`;
tile.style.backgroundPosition = `${bgX}px ${bgY}px`;
tile.dataset.row = r;
tile.dataset.col = c;
tile.addEventListener('click', handleTileClick);
}
boardElement.appendChild(tile);
}
}
}
function handleTileClick(event) {
if (!gameActive) return;
const clickedTile = event.target;
const r1 = parseInt(clickedTile.dataset.row);
const c1 = parseInt(clickedTile.dataset.col);
let r0 = -1, c0 = -1;
for (let r = 0; r < SIZE; r++) {
for (let c = 0; c < SIZE; c++) {
if (board[r][c] === 0) {
r0 = r;
c0 = c;
break;
}
}
}
const isAdjacent =
(Math.abs(r1 - r0) === 1 && c1 === c0) ||
(Math.abs(c1 - c0) === 1 && r1 === r0);
if (isAdjacent) {
[board[r1][c1], board[r0][c0]] = [board[r0][c0], board[r1][c1]];
moves++;
movesElement.textContent = moves;
renderBoard();
if (checkWin()) {
endGame();
}
}
}
function checkWin() {
let expectedValue = 1;
for (let r = 0; r < SIZE; r++) {
for (let c = 0; c < SIZE; c++) {
const currentValue = board[r][c];
if (r === SIZE - 1 && c === SIZE - 1) {
return currentValue === 0;
}
if (currentValue !== expectedValue) {
return false;
}
expectedValue++;
}
}
return false;
}
function endGame() {
gameActive = false;
clearInterval(timerInterval);
renderFinalImage();
messageElement.className = 'win-message';
messageElement.textContent = `�� ПОБЕДА! Головоломка решена за ${timerElement.textContent} и ${moves} ходов!`;
}
function renderFinalImage() {
boardElement.innerHTML = '';
for (let r = 0; r < SIZE; r++) {
for (let c = 0; c < SIZE; c++) {
const tile = document.createElement('div');
tile.className = 'tile';
const bgX = -(c * TILE_WIDTH);
const bgY = -(r * TILE_WIDTH);
tile.style.backgroundImage = `url('${IMAGE_URL}')`;
tile.style.backgroundPosition = `${bgX}px ${bgY}px`;
tile.style.cursor = 'default';
tile.removeEventListener('click', handleTileClick);
boardElement.appendChild(tile);
}
}
}
function updateTimer() {
timer++;
const minutes = Math.floor(timer / 60);
const seconds = timer % 60;
timerElement.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}
// =========================================================
// --- ИНИЦИАЛИЗАЦИЯ И ОБРАБОТЧИКИ СОБЫТИЙ ---
// =========================================================
newGameButton.addEventListener('click', startGame);
// Инициализация при загрузке страницы
movesElement.textContent = '0';
timerElement.textContent = '0:00';
</script>
</body>
</html>[/html]
