[html]

  <title>Морской бой — Пример</title>
  <style>
    #sea-battle {
      display: inline-block;
      margin: 20px;
    }
    table {
      border-collapse: collapse;
      user-select: none;
    }
    td {
      width: 30px;
      height: 30px;
      border: 1px solid #333;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      background-color: #cce7ff;
    }
    td.ship {
      background-color: #666; /* цвет корабля */
    }
    td.hit {
      background-color: red;
      color: white;
    }
    td.miss {
      background-color: #eee;
    }
    #message {
      margin-top: 15px;
      font-weight: bold;
    }
  </style>

<h2>Морской бой — Мини игра</h2>

<div id="sea-battle"></div>
<div id="message"></div>

<script>
  (function() {
    const size = 10;
    const sea = document.getElementById('sea-battle');
    const messageEl = document.getElementById('message');

    // Создаём поле 10x10
    const table = document.createElement('table');

    // Массив для хранения состояния поля (0 - пусто, 1 - корабль, 2 - попадание, 3 - промах)
    const field = Array(size).fill(null).map(() => Array(size).fill(0));

    // Простая расстановка кораблей (пример)
    // Ставим 5 однопалубных кораблей в фиксированных позициях
    const ships = [
      [0,0], [2,3], [5,5], [7,2], [9,9]
    ];
    ships.forEach(([r,c]) => {
      field[r][c] = 1;
    });

    function createCell(r, c) {
      const td = document.createElement('td');
      td.dataset.row = r;
      td.dataset.col = c;
      td.addEventListener('click', () => onCellClick(r,c, td));
      return td;
    }

    function onCellClick(r, c, cell) {
      if (field[r][c] === 2 || field[r][c] === 3) {
        messageEl.textContent = "Вы уже стреляли в эту клетку.";
        return;
      }

      if (field[r][c] === 1) {
        // Попадание
        field[r][c] = 2;
        cell.classList.add('hit');
        messageEl.textContent = "Попадание!";
      } else {
        // Промах
        field[r][c] = 3;
        cell.classList.add('miss');
        messageEl.textContent = "Промах.";
      }

      checkWin();
    }

    function checkWin() {
      // Проверяем остались ли не поражённые корабли
      const left = field.flat().filter(v => v === 1).length;
      if (left === 0) {
        messageEl.textContent = "Поздравляем! Все корабли потоплены!";
        // Можно отключить клики или перезагрузить игру
        table.querySelectorAll('td').forEach(td => td.style.pointerEvents = 'none');
      }
    }

    // Собираем таблицу игрового поля
    for(let r=0; r<size; r++) {
      const tr = document.createElement('tr');
      for(let c=0; c<size; c++) {
        const td = createCell(r,c);
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }

    sea.appendChild(table);
  })();
</script>

[/html]