Minesweeper but with 4th wall breaks by a narrator's game

Click here for free DL of the app version that can save data.

No:22999

←

Prev Next

→

Minesweeper but with 4th wall breaks by a narrator
Developer User8620｜Date and time 23/10/27 5:38:03
Build time 109.569 sec｜Game capacity 7.587KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Minesweeper avec narrateur</title>
  <style>
      body {
          text-align: center;
          font-family: Arial, sans-serif;
      }

.container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
      }

.board {
          border-collapse: collapse;
          table-layout: fixed;
          margin: auto;
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
      }

.cell {
          border: 1px solid #ddd;
          width: 30px;
          height: 30px;
          text-align: center;
      }

.hidden {
          background-color: #ccc;
          color: #ccc;
      }

.hidden:hover {
          background-color: #aaa;
          cursor: pointer;
      }

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

.flagged {
          background-color: yellow;
          color: yellow;
      }
  </style>
</head>
<body>
  <div class="container">
    <table id="board" class="board"></table>
  </div>

var grid = [];
          var gameover = false;

// Initialize the grid
          function initializeGrid() {
              for (var i = 0; i < size; i++) {
                  grid[i] = [];
                  for (var j = 0; j < size; j++) {
                      grid[i][j] = { mine: false, flagged: false, revealed: false, value: 0 };
                  }
              }
          }

// Randomly place mines on the grid
          function placeMines() {
              var placedMines = 0;
              while (placedMines < mines) {
                  var randomRow = Math.floor(Math.random() * size);
                  var randomCol = Math.floor(Math.random() * size);
                  if (!grid[randomRow][randomCol].mine) {
                      grid[randomRow][randomCol].mine = true;
                      placedMines++;
                  }
              }
          }

// Calculate the value of each cell
          function calculateCellValue() {
              for (var i = 0; i < size; i++) {
                  for (var j = 0; j < size; j++) {
                      if (!grid[i][j].mine) {
                          var count = 0;
                          // Check adjacent cells for mines
                          for (var x = Math.max(0, i - 1); x <= Math.min(i + 1, size - 1); x++) {
                              for (var y = Math.max(0, j - 1); y <= Math.min(j + 1, size - 1); y++) {
                                  if (grid[x][y].mine) {
                                      count++;
                                  }
                              }
                          }
                          grid[i][j].value = count;
                      }
                  }
              }
          }

// Render the board
          function renderBoard() {
              for (var i = 0; i < size; i++) {
                  var row = document.createElement('tr');
                  for (var j = 0; j < size; j++) {
                      var cell = document.createElement('td');
                      cell.classList.add('cell');
                      cell.id = i + '-' + j;
                      cell.addEventListener('click', handleCellClick);
                      cell.addEventListener('contextmenu', handleCellRightClick);
                      row.appendChild(cell);
                  }
                  board.appendChild(row);
              }
          }

// Handle left click on a cell
          function handleCellClick(event) {
              var cell = event.target;
              if (!cell.classList.contains('hidden') || cell.classList.contains('flagged') || gameover) {
                  return;
              }
              var id = cell.id.split('-');
              var row = parseInt(id[0]);
              var col = parseInt(id[1]);
              
              if (grid[row][col].mine) {
                  cell.classList.add('mine');
                  cell.innerText = '';
                  gameover = true;
                  document.getElementById('narrator').innerText = 'Oops! Vous avez touché une mine. La partie est terminée.';
              } else {
                  revealCell(row, col);
              }
              checkGameStatus();
          }

// Handle right click on a cell
          function handleCellRightClick(event) {
              event.preventDefault();
              var cell = event.target;
              if (!cell.classList.contains('hidden') || gameover) {
                  return;
              }
              if (cell.classList.contains('flagged')) {
                  cell.classList.remove('flagged');
                  cell.innerText = '';
              } else {
                  cell.classList.add('flagged');
                  cell.innerText = '🚩';
              }
              checkGameStatus();
          }

// Reveal the value of a cell and adjacent cells if value is 0
          function revealCell(row, col) {
              var cell = document.getElementById(row + '-' + col);
              if (cell.classList.contains('hidden') && !cell.classList.contains('flagged') && !grid[row][col].revealed) {
                  grid[row][col].revealed = true;
                  cell.classList.remove('hidden');

if (grid[row][col].value === 0) {
                      for (var x = Math.max(0, row - 1); x <= Math.min(row + 1, size - 1); x++) {
                          for (var y = Math.max(0, col - 1); y <= Math.min(col + 1, size - 1); y++) {
                              revealCell(x, y);
                          }
                      }
                  } else {
                      cell.innerText = grid[row][col].value;
                  }
              }
          }

// Check game status
          function checkGameStatus() {
              var hiddenCount = 0;
              var flaggedCount = 0;
              for (var i = 0; i < size; i++) {
                  for (var j = 0; j < size; j++) {
                      var cell = document.getElementById(i + '-' + j);
                      if (cell.classList.contains('hidden')) {
                          hiddenCount++;
                      }
                      if (cell.classList.contains('flagged')) {
                          flaggedCount++;
                      }
                  }
              }
              if (hiddenCount === mines) {
                  gameover = true;
                  document.getElementById('narrator').innerText = 'Félicitations! Vous avez découvert toutes les mines. Vous avez gagné!';
              } else {
                  document.getElementById('narrator').innerText = 'Cliquez sur une case pour la révéler. Utilisez le clic droit pour placer un drapeau.';
              }
          }

// Initialize the game
          function initializeGame() {
              initializeGrid();
              placeMines();
              calculateCellValue();
              renderBoard();
              document.getElementById('narrator').innerText = 'Bienvenue dans Minesweeper avec narrateur! Cliquez sur une case pour commencer.';
          }

// Start the game
          initializeGame();
      });
  </script>