SeaBattle

Игра «Морской бой» на одном поле против компьютера

by Michael Demidov

HTML

<div id="currentCell" style="display: none;"></div>
<div id="bk" onclick="javascript: fire(event);" onmousemove="javascript: changeCursor(event);"></div>
<canvas id="boardImage">Увы, Ваш браузер не поддерживает HTML5</canvas>
<noscript>Поддержка Javascript отключена.</noscript>
<div id="info">
  <div style="float: left"><a target="_blank" href="http://mik-demidov.blogspot.ru/2013/12/js-sea-battle.html#rules">Правила игры</a></div>
  <div style="float: right"><a href="http://mik-demidov.blogspot.ru" target="_blank">Сайт автора</a></div><span id="note"></span></div>

CSS

body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

#board,
#bk {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1.5em;
}

#bk {
  z-index: 1;
}

#currentCell {
  position: absolute;
  background: #FFDD80;
}

#info {
  height: 1.5em;
  line-height: 1.5em;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #000;
  color: #FFF;
  font-weight: bold;
  padding: 0px 0.5em;
  text-align: center;
}

#info a {
  color: #FF0;
}

JavaScript

var
  colCount = 0, // размер доски по горизонтали
  rowCount = 0, //   и вертикали
  boardLeft = 0, // координаты образа доски
  boardTop = 0, //   относительно элемента canvas
  boardWidth = 0, // размеры образа доски
  boardHeight = 0, //   в пикселях
  cellSize = 0; // ширина и высота ячейки

const
// мнемонические константы для объектов
  blank = 0, // пустая непроверенная ячейка

  ownVisibleCheck = 1, // видимая пользователю метка
  ownBomb = 2, // своя несработавшая бомба
  ownBombDead = 3, // сработавшая своя бомба
  ownShip = 4, // свой корабль
  ownShipBroken = 5, // подбитый свой корабль
  ownShipDead = 6, // убитый свой корабль
  ownShipArea = 7, // окрестности своего корабля

  enemyVisibleCheck = 8, // видимая компьютеру (не пользователю!) метка
  enemyBomb = 9, // вражеская несработавшая бомба
  enemyBombDead = 10, // сработавшая своя бомба
  enemyShip = 11, // живой вражеский корабль
  enemyShipBroken = 12, // подбитый вражеский корабль
  enemyShipDead = 13, // убитый вражеский корабль
  enemyShipArea = 14, // окрестности вражеского корабля

  doubleCheck = 15, // видимая обоим противникам метка

  // режим отладки - если true, то все объекты видны изначально
  debug = false;

var
// первый элемент списка - количество кораблей на доске, а остальные - массивы, которые
// описывают типы кораблей и их изначальное количество:
//   0. Тип (1 - корабль, 0 - бомба),
//   1. Длина
//   2. Координата X
//   3. Координата Y
//   4. Ориентация (0 - горизонтально, 1 - вертикально)
//   5. Кол-во неповреждённых ячеек
  ownShips = [0, [1, 4, -1, -1, 0, 4],
    [1, 3, -1, -1, 0, 3],
    [1, 3, -1, -1, 0, 3],
    [1, 2, -1, -1, 0, 2],
    [1, 2, -1, -1, 0, 2],
    [1, 2, -1, -1, 0, 2],
    [1, 1, -1, -1, 0, 1],
    [1, 1, -1, -1, 0, 1],
    [1, 1, -1, -1, 0, 1],
    [1, 1, -1, -1, 0, 1],
    [0, 1, -1, -1, 0, 1],
    [0, 1, -1, -1, 0, 1]
  ],
  enemyShips = [0, [1, 4, -1, -1, 0, 4],
    [1, 3, -1, -1, 0, 3],
    [1, 3, -1, -1, 0, 3],
    [1, 2, -1, -1, 0, 2],
  ...