Редактирование: Minesweeper.2.0

    == Описание ==

Реализация компьютерной игры "Сапер" на языке JavaScript.

Сапер — это игра головоломка, где игроку нужно разминировать минное поле, помечая флажками ячейки, на которых могут быть мины, для их обнаружения на соседних пустых клетках есть подсказки в виде чисел.

Исполнители: [[Капитонова Анна|Капитонова Анна]] [[Кочикян Анастасия|Кочикян Анастасия]]

Группа 3630103/00003 Высшая школа Теоретической механики

== Визуализация ==

{{#widget:Iframe |url=https://bezolabernaya.github.io/Minesweeper/kyrs.html |width=1100 |height=1100 |border=0 }}

==Код программы==
<div class="mw-collapsible mw-collapsed">
'''Код программы на языке JavaScript файл 1:''' <div class="mw-collapsible-content">
<syntaxhighlight lang="javascript" line start="1" enclose="div">

function getMatrix (columns, rows) {//создаем матрицу
    const matrix = [];

    let idCounter = 1;//счетчик id
    for (let y = 0; y < rows; y++) {//создание строк
        const row = [];

        for (let x = 0; x < columns; x++) {//создание ячеек
            row.push({
                id: idCounter++,//увеличение id
                //присваеваем характеристики ячейкам
                left: false,
                right: false,
                show: false,
                flag: false,
                mine: false,
                potencial: false,
                number: 0,
                x,
                y
            })
        }

        matrix.push(row);
    }

    return matrix;
}

function getRandomFreeCell (matrix) {//находим пустую клетку
    const freeCells = [];

    for (let y = 0; y < matrix.length; y++) {
        for (let x = 0; x < matrix[y].length; x++) {
            const cell = matrix[y][x];//проверяем свободна ли клетка

            if (!cell.mine) {//если да добавляем индек с в массив
                freeCells.push(cell);
            }
        }
    }

    const index = Math.floor(Math.random() * freeCells.length);
    return freeCells[index];
}

function setRandomMine (matrix) {//создаем мину в пустой клетке
    const cell = getRandomFreeCell(matrix);
    cell.mine = true;

    const cells = getAroundCells(matrix, cell.x, cell.y);

    for (const cell of cells) {
        cell.number++;
    }
}

function getCell (matrix, x, y) {//возвращаем клетку, если она есть
    if(!matrix[y] || !matrix[y][x]) {
        return false;
    }

    return matrix[y][x]
}

function getAroundCells (matrix, x, y) {//создаем массив клеток вокруг клетки с координатами х и у
    const cells = [];
    
    for (let dx = -1; dx <= 1; dx++) {
        for (let dy = -1; dy <= 1; dy++) {
            if (dx == 0 && dy == 0) {
                continue;
            }

            const cell = getCell(matrix, x + dx, y + dy);

            if (!cell) {
                continue;
            }

            cells.push(cell);
        }
    }

    return cells;
}

function getCellById (matrix, id) {
    for (let y = 0; y < matrix.length; y++) {
        for (let x = 0; x < matrix[y].length;x++) {
            const cell = matrix[y][x] 

            if (cell.id === id) {
                return cell;
            }
        }
    }
    return false;
}

function matrixToHtml (matrix) {//преобразуем матрицу в dom-дерево
    const gameElement = document.createElement('div');//создаем основной элемент - сапер
    gameElement.classList.add('sapper');

    for (let y = 0; y < matrix.length; y++) {//создаем отдельный элемент для каждой строки внутри сапера
        const rowElement = document.createElement('div');
        rowElement.classList.add('row');

        for (let x = 0; x < matrix[y].length; x++) {//создаем отдельный элемент по каждую клетку
            const cell = matrix[y][x];
            const imgElement = document.createElement('img');

            imgElement.draggable = false;//запрещаем двигать картинки
            imgElement.oncontextmenu = () => false;//запрещаем открывать контекстное меню
            imgElement.setAttribute('data-cell-id', cell.id)//присваеваем id изображениям
            rowElement.append(imgElement);

            if (cell.flag) {//вставляем в клетку картинку в зависимости от содержимого
                imgElement.src = '11.png';
                continue;
            }

            if (cell.potencial) {
                imgElement.src = '12.png';
                continue;
            }

            if (!cell.show) {
                imgElement.src = '10.png';
                continue;
            }

            if (cell.mine) {
                imgElement.src = '9.png';
                continue;
            }

            if (cell.number) {
                imgElement.src = cell.number + '.png';
                continue;
            }

            imgElement.src = '0.png';
            
        }

        gameElement.append(rowElement);
    }

    return gameElement;
}

function forEach (matrix, handler) {
    for (let y = 0; y < matrix.length; y++) {
        for (let x = 0; x < matrix[y].length;x++) {
            handler(matrix[y][x]);
        }
    }
}

function openSpace (matrix, x, y) {//открываем клетки где нет мин, флагов, и чисел по соседству с щелкнутой
    const cell = getCell(matrix, x, y);

    if (cell.flag || cell.number || cell.mine) {
        return;
    }

    forEach(matrix, x => x._marked = false);

    cell._marked = true;

    let flag = true;
    while (flag) {
        flag = false;

        for (let y = 0; y < matrix.length; y++) {
            for (let x = 0; x < matrix[y].length;x++){
                const cell = matrix[y][x];

                if (!cell._marked || cell.number) {
                    continue;
                }

                const cells = getAroundCells(matrix, x, y);
                for (const cell of cells) {
                    if (cell._marked) {
                        continue;
                    }

                    if (!cell.flag && !cell.mine) {
                        cell._marked = true;
                        flag = true;
                    }
                }
            }
        }
    }

    forEach(matrix, x => {
        if (x._marked) {
            x.show = true;
        }

        delete x._marked});
}

function isWin (matrix) {//условия победы
    const flags = [];
    const mines = [];

    forEach(matrix, cell => {
        if (cell.flag) {
            flags.push(cell);
        }

        if (cell.mine) {
            mines.push(cell);
        }
    })
   
    if (flags.length !== mines.length) {
        return false;
    }

    for (const cell of mines) {
        if (!cell.flag) {
            return false;
        }
    }

    for (let y = 0; y < matrix.length; y++) {
        for (let x = 0; x < matrix[y].length;x++){
            const cell = matrix[y][x];

            if(!cell.mine && !cell.show) {
                return false;
            }
        }
	
    }
   
    return true;

}

function isLoose (matrix) {//условия поражения
    for (let y = 0; y < matrix.length; y++) {
        for (let x = 0; x < matrix[y].length;x++){
            const cell = matrix[y][x];

            if(cell.mine && cell.show) {
                return true;
				
            }
        }
    }
}
</syntaxhighlight>
</div>

<div class="mw-collapsible mw-collapsed">
'''Код программы на языке JavaScript файл 2:''' <div class="mw-collapsible-content">
<syntaxhighlight lang="javascript" line start="1" enclose="div">

function main() {
rest.onclick = function(){
	min = 0;
hour = 0;
init()}
//Секундомер
//изначальные переменные
min = 0;
hour = 0;
//Оставляем вашу функцию
function init() {
    sec = 0;
    setInterval(tick, 1000);
}

//Основная функция tick()
function tick() {
  if (running) {
    sec++;
    if (sec >= 60) { //задаем числовые параметры, меняющиеся по ходу работы программы
        min++;
        sec = sec - 60;
    }
    if (min >= 60) {
        hour++;
        min = min - 60;
    }
    if (sec < 10) { //Визуальное оформление
        if (min < 10) {
            if (hour < 10) {
                document.getElementById('timer').innerHTML ='0' + hour + ':0' + min + ':0' + sec;
            } else {
                document.getElementById('timer').innerHTML = hour + ':0' + min + ':0' + sec;
            }
        } else {
            if (hour < 10) {
                document.getElementById('timer').innerHTML = '0' + hour + ':' + min + ':0' + sec;
            } else {
                document.getElementById('timer').innerHTML = hour + ':' + min + ':0' + sec;
            }
        }
    } else {
        if (min < 10) {
            if (hour < 10) {
                document.getElementById('timer').innerHTML = '0' + hour + ':0' + min + ':' + sec;
            } else {
                document.getElementById('timer').innerHTML = hour + ':0' + min + ':' + sec;
            }
        } else {
            if (hour < 10) {
                document.getElementById('timer').innerHTML = '0' + hour + ':' + min + ':' + sec;
            } else {
                document.getElementById('timer').innerHTML = hour + ':' + min + ':' + sec;
            }
        }
    }
    
  }
}

init();
}




let matrix = null;
let running = null;
let k = null;


let columns = 9;
let rows = 9;
let mines = 10

function rad()
{var rarr=document.getElementsByName('difficulty');
//задаем количество мин и размер поля в зависимости от сложности
  
    if(rarr[0].checked){
         columns = 9;
         rows = 9;
         mines = 10
    }
    if(rarr[1].checked){
        //То выбран первый radio 
     columns = 16;
     rows = 16;
     mines = 40
    }
    if(rarr[2].checked){
         columns = 16;
         rows = 30;
         mines = 99  
    } 

}

init(columns, rows, mines);

document
    .querySelector('.restart')
    .addEventListener('click', () => init(columns, rows, mines));

function init (columns, rows, mines) {
    rad();
    matrix = getMatrix(columns, rows); //создаем матрицу
    running = true;
    for (let i = 0; i < mines; i++) { //расставляем мины
        setRandomMine(matrix);
    }

    update();
}


let closeWin = document.querySelector('.close.youwin');
let win = document.querySelector('.win');

closeWin.addEventListener('click', function (evt) {//закрыть уведомление по клику
    evt.preventDefault();
    win.classList.toggle('appear');
});

let closeOver = document.querySelector('.close.over');
let gameover = document.querySelector('.gameover');

closeOver.addEventListener('click', function (evt) {//закрыть уведомление по клику
    evt.preventDefault();
    gameover.classList.toggle('appear');
	
});


function update () {//обновляем игровое поле
    if (!running) {
        return;
    }

    const gameElement = matrixToHtml(matrix);//создаем игровой элемент

    const appElement = document.querySelector('#app');//добавляем его в app
    appElement.innerHTML = '';
    appElement.append(gameElement);

    document.getElementsByClassName('gameover modal')[0].style.display = "none"//скрываем картинку о победе или поражении по умолчанию
    document.getElementsByClassName('win modal')[0].style.display = "none"
    appElement
        .querySelectorAll('img')//получаем информацию о нажатиях мыши
        .forEach(imgElement => {
            imgElement.addEventListener('mousedown', mousedownHandler);
            imgElement.addEventListener('mouseup', mouseupHandler);
            imgElement.addEventListener('mouseleave', mouseleaveHandler)
        });

    if (isLoose(matrix)) {
        let gameover = document.querySelector('.gameover');
        gameover.classList.add('appear');
        running = false;
        document.getElementsByClassName('gameover modal')[0].style.display = "block"//проявляем изображение
		
    }

    else if (isWin(matrix)) {
        document.getElementsByClassName('win modal')[0].style.display = "block" //проявляем изображение
        let win = document.querySelector('.win');
        win.classList.add('appear');
        running = false;
		
    }
}

function mousedownHandler (event) {
    //получаем информацию о том, какая кнопка мыши нажата
    const {cell, left, right } = getInfo(event);

    if (left) {
        cell.left = true;
    }

    if (right) {
        cell.right = true;
    }

    if (cell.left && cell.right) {
        bothHandler(cell);
    }

    update();
}

function mouseupHandler (event) {//информация о нажатии левой/правой/обеих кнопок мыши фиксируется
    const {left, right, cell } = getInfo(event);

    const both = cell.right && cell.left && (left || right);
    const leftMouse = !both && cell.left && left;
    const rightMouse = !both && cell.right && right;

    if (both) {
        forEach(matrix, x => x.potencial = false);
    }

    if (left) {
        cell.left = false;
    }

    if (right) {
        cell.right = false;
    }

    if (leftMouse) {
        leftHandler(cell)
    }

    else if (rightMouse) {
        rightHandler(cell)
    }

    update();
}

function mouseleaveHandler (event) {//возвращем информацию о то, что мышь больше не наведена на клетку
    const info = getInfo(event);

        info.cell.left = false;
        info.cell.right = false;

    update();
}

function getInfo (event) {//говорим что на мыши нажато и по какой клетке
    const element = event.target;
    const cellId = parseInt(element.getAttribute('data-cell-id'));

    return {
        left: event.which === 1,
        right: event.which === 3,
        cell: getCellById(matrix, cellId)
    }
}

function leftHandler (cell) {
    if (cell.show || cell.flag) {//открываем клетку нажатием левой кнопки мыши
        return;
    }
    cell.show = true;

    openSpace(matrix, cell.x, cell.y);
}

function rightHandler (cell) {//ставим в клетку флаг нажатием правой кнопки мыши
    if (!cell.show) {
         cell.flag = !cell.flag;
    }
}

function bothHandler (cell) {//показываем где могут быть мины
    if (!cell.show || !cell.number) {
        return;
    }

    const cells = getAroundCells(matrix, cell.x, cell.y);
    const flags = cells.filter(x => x.flag).length;

    if (flags === cell.number) {//открываем поле вокруг если флагов вокруг столько сколько должно быть мин
        cells
            .filter(x => !x.flag && !x.show)
            .forEach(cell => {
                cell.show = true
                openSpace(matrix, cell.x, cell.y)
            })
    }

    else {//показываем где могут быть мины
        cells
            .filter(x => !x.flag && !x.show)
            .forEach(cell => cell.potencial = true)
    }
}
</syntaxhighlight>
</div>