Игра Сапёр на HTML

Вопрос

Привет, напиши код для игры сапера на html

Мысль

Ищу код

Пользователь просит написать код для игры в сапера на HTML. Следует выяснить, можно ли это сделать.

Формируют ответ

Они обеспечивают универсальное понимание, используя язык пользователя, и создают четкий, полный и развернутый код для игры Minesweeper на HTML.

Создание структуры

Проект стартует с трех файлов: index.html, style.css и script.js. HTML настраивает структуру, CSS стилизует игру, а JavaScript обрабатывает логику игры, включая расстановку мин и обработку кликов.

Ответ

Привет!

Вот пример простого кода для игры "Сапёр" на HTML, CSS и JavaScript.

HTML (index.html):

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Сапёр</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Игра "Сапёр"</h1>
    <div id="game"></div>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css):

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

#game {
    display: inline-block;
    margin-top: 20px;
}

.cell {
    width: 30px;
    height: 30px;
    background-color: #ccc;
    border: 1px solid #999;
    display: inline-block;
    vertical-align: top;
    line-height: 30px;
    cursor: pointer;
    user-select: none;
}

.cell.open {
    background-color: #eee;
    cursor: default;
}

.cell.mine {
    background-color: red;
}

.cell.flagged {
    background-color: yellow;
}

JavaScript (script.js):

const rows = 10;
const cols = 10;
const minesCount = 15;
let mines = [];
let cells = [];

function initGame() {
    const game = document.getElementById('game');
    game.innerHTML = '';
    mines = [];
    cells = [];

    // Инициализация мин
    while (mines.length < minesCount) {
        let index = Math.floor(Math.random() * rows * cols);
        if (!mines.includes(index)) {
            mines.push(index);
        }
    }

    // Создание клеток
    for (let i = 0; i < rows * cols; i++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.dataset.index = i;

        cell.addEventListener('click', cellClick);
        cell.addEventListener('contextmenu', cellRightClick);

        game.appendChild(cell);
        cells.push(cell);
    }
}

function cellClick(e) {
    const index = parseInt(e.target.dataset.index);
    openCell(index);
}

function cellRightClick(e) {
    e.preventDefault();
    const cell = e.target;
    if (!cell.classList.contains('open')) {
        cell.classList.toggle('flagged');
    }
}

function openCell(index) {
    const cell = cells[index];
    if (cell.classList.contains('open') || cell.classList.contains('flagged')) {
        return;
    }

    cell.classList.add('open');

    if (mines.includes(index)) {
        cell.classList.add('mine');
        alert('Игра окончена!');
        revealMines();
    } else {
        const minesAround = countMinesAround(index);
        if (minesAround > 0) {
            cell.textContent = minesAround;
        } else {
            // Открыть соседние клетки
            const neighbors = getNeighbors(index);
            neighbors.forEach(i => openCell(i));
        }
    }
}

function countMinesAround(index) {
    const neighbors = getNeighbors(index);
    let count = 0;
    neighbors.forEach(i => {
        if (mines.includes(i)) {
            count++;
        }
    });
    return count;
}

function getNeighbors(index) {
    const neighbors = [];
    const row = Math.floor(index / cols);
    const col = index % cols;

    for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
            if (i == 0 && j == 0) continue;
            const r = row + i;
            const c = col + j;
            if (r >= 0 && r < rows && c >= 0 && c < cols) {
                neighbors.push(r * cols + c);
            }
        }
    }
    return neighbors;
}

function revealMines() {
    mines.forEach(index => {
        const cell = cells[index];
        cell.classList.add('mine');
    });
}

window.onload = initGame;

Описание:

HTML: Создаёт основную структуру страницы с заголовком и контейнером для игры.
CSS: Стилизация клеток и игрового поля.
JavaScript: Логика игры:
- initGame(): Инициализирует игру, расставляет мины и создаёт клетки.
- cellClick(): Обрабатывает левый клик по клетке.
- cellRightClick(): Обрабатывает правый клик (установка флажка).
- openCell(): Открывает клетку и рекурсивно открывает соседние клетки, если рядом нет мин.
- countMinesAround(): Считает количество мин вокруг клетки.
- getNeighbors(): Возвращает индексы соседних клеток.
- revealMines(): Показывает все мины при проигрыше.

Как использовать:

Создайте три файла: index.html, style.css и script.js.
Вставьте соответствующий код в каждый файл.
Откройте index.html в браузере.

Примечание:

Это базовая версия игры "Сапёр". Вы можете улучшить её, добавив больше функциональности, такой как счетчик времени, количество оставшихся мин, уровни сложности и т.д.

Надеюсь, это поможет вам начать!

Вопрос

Мысль

Ответ

Поделиться этим Q&A