БлогNot. Изучаем ходы шахматных фигур

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

Изучаем ходы шахматных фигур

Посмотрел разработки опытного шахматного педагога (В.А. Полоудин, любезно предоставивший мне свои материалы), в частности, программки для изучения детьми ходов шахматных фигур.

Всё неплохо, но эпоха Visual Basic, Delphi, да и вообще stand-alone приложений давно прошла :)

Немного поработав вчера и сегодня, написал небольшой сервис для работы с фигурами на доске в режиме "перетащил и оставил".

Скрипт позволяет переставлять по доске фигуры, делая только допустимые ходы. Поля, куда можно ходить, подсвечиваются, очередность хода определяется последним выбором фигуры. Может быть использован для обучения или как модернизированная "расставлялка фигур" с генерацией FEN позиции.

Всё, что мне понадобилось - освежить в памяти примеры по chessboard.js и документацию по chess.js, эти замечательные библиотеки я уже использовал в "искусственном интеллекте" на Javascript.

Ниже показан сервис в работе, приведена содержательная часть кода и прикреплён архив с исходниками.

 Сервис Ходы шахматных фигур, открыть в новом окне (вкладке)

Код главного файла index.html без стандартного обрамления выглядит так:

<div class="info">
 <span id="instructionLink" style="cursor:pointer; text-decoration: underline;" 
  onclick="switchShow ();return false;">ИНСТРУКЦИЯ</span>
 <a href="javascript:window.location.reload(true);">ЗАНОВО</a>
</div>
<div class="info" id="instructionBox" style="display: none;">
 <p>Перетащите фигуры на доску, чтобы посмотреть, как они ходят.
  <br>Очередность хода переходит к фигуре, на которую вы навели мышку.
  <br> Чтобы сходить, перетащите мышкой фигуру на допустимое поле.
  <br> "Лишние" фигуры также можно убрать с доски мышкой.
 </p>
</div>
<div id="board" class="board"></div>
<div class="info">
 <p><b>Состояние</b>: <span id="status"></span></p>
 <p><b>Позиция</b>: <span id="fen"></span></p>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src='http://scripts.kislenko.net/aichess/js/chess.js'></script>
<script src='http://scripts.kislenko.net/aichess/js/chessboard.js'></script>
<script src='js/script.js'></script>
<noscript>
 <div align="center">
  Извините, для работы приложения нужен включённый Javascript в браузере
 </div>
</noscript>

Файл js/script.js, содержащий логику проекта, выглядит так:

var emptyPosition = '4k3/8/8/8/8/8/8/4K3 w - - 0 1'; 
 //Начальная позиция, рокировки не разрешены
var board,
  game = new Chess (emptyPosition),
  statusEl = $('#status'),
  fenEl = $('#fen');

var onDragStart = function(source, piece, position, orientation) { //Разрешаем перетаскивать всё
};

var onDrop = function (source, target, piece, newPos, oldPos) { //Роняем фигуру
 removeGreySquares();
 if (target === 'offboard') { //Вне доски - убрать фигуру из игры
  game.remove (source);
 }
 else if (source === 'spare') { //Притащили из коллекции - добавить фигуру в игру
  var color = piece.substring(0,1);
  game.put({type: piece.substring(1).toLowerCase(), color: color}, target);
 }
 else { //Это ход по доске
  var move = game.move({
    from: source,
    to: target,
    promotion: 'q' //Для простоты превращение всегда в ферзя
  });
  if (move === null) return 'snapback'; //Ход недопустим - отменить
 }
 updateStatus(); //Обновить статус
};

var onSnapEnd = function() { 
 //Обновить позицию после особых ходов (превращение, взятие на проходе, рокировка)
 board.position(game.fen());
 updateStatus();
};

var onMouseoutSquare = function(square, piece) { //Мышка уходит с клетки
 removeGreySquares();
};

var removeGreySquares = function() { //Убрать фон
 $('#board .square-55d63').css('background', '');
};

var onMouseoverSquare = function (square, piece) { //Мышка входит на поле
 if (piece) { //Если на поле есть фигура
  var color=piece.substring(0,1); //то её цвет определяет очередность хода
  var tokens = game.fen().split(' ');
  tokens[1] = color;
  game.load (tokens.join(' '));
  updateStatus ();
 }
 var moves = game.moves({ //Получить список ходов для поля
  square: square,
  verbose: true
 });
 if (piece) greySquare (square); //Подсветить текущее поле
 if (moves.length === 0) return; //Если у фигуры нет ходов - выйти
 for (var i = 0; i < moves.length; i++) { //Подсветить поля, куда можно ходить
  greySquare(moves[i].to);
 }
};

var greySquare = function(square) { //Непосредственно функция подсветки полей
 var squareEl = $('#board .square-' + square);
 var background = '#99ff99'; //Цвет подсветки белых полей
 if (squareEl.hasClass('black-3c85d') === true) {
  background = '#03c03c'; //Цвет подсветки чёрных полей
 }
 squareEl.css('background', background);
};

var updateStatus = function() { //Обновление статуса
 var status = '';
 var moveColor = 'белые';
 if (game.turn() === game.BLACK) {
  moveColor = 'чёрные';
 }
 if (game.in_checkmate() === true) { //Мат
  status = 'Вне игры, ' + moveColor + ' получили мат';
 }
 else if (game.in_draw() === true) { //Ничья
  status = 'Вне игры, ничья';
 }
 else {
  status = moveColor + ' могут ходить';
  if (game.in_check() === true) { //Шах
   status += ', ' + moveColor + ' под шахом';
  }
 }
 statusEl.html(status);
 fenEl.html(game.fen());
};

var cfg = { //Конфигурация доски
 draggable: true,
 dropOffBoard: 'trash',
 sparePieces: true,
 position: emptyPosition,
 onDragStart: onDragStart,
 onDrop: onDrop,
 onMouseoutSquare: onMouseoutSquare,
 onMouseoverSquare: onMouseoverSquare,
 onSnapEnd: onSnapEnd
};
board = ChessBoard('board', cfg);
updateStatus();

function switchShow (id) { //Переключалка видимости для вывода инструкции
 var div=document.getElementById ('instructionBox');
 div.style.display = div.style.display == "none" ? "block" : "none";
 document.getElementById ('instructionLink').innerHTML = 
  div.style.display == "block" ? "СКРЫТЬ ИНСТРУКЦИЮ" : "ИНСТРУКЦИЯ";
 return false;
}

Исходники приведены на момент написания, в прикреплённом архиве они могут быть изменены или улучшены.

 Скачать архив .zip с проектом Ходы фигур, развернуть без создания новой папки (31 Кб)

Технические замечания:

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

Пешка для простоты всегда превращается в ферзя, если нужен выбор превращения, подойдёт решение из этой статьи.

Чтобы разрешить взятие на проходе, закомментируйте в js/script.js строку с пометкой "Убрать метку проходного поля".

Рокировку можно разрешить, просто загружая соответствующие начальные позиции, то есть,

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1

вместо

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w - - 0 1

Скриншот доски с подсвеченными доступными полями для ладьи
Скриншот доски с подсвеченными доступными полями для ладьи

теги: шахматы программирование сервис javascript игра

комментарии (0)

07.12.2017, 11:33; рейтинг: 53

  свежие записипоиск по блогукомментироватьстатистика

Наверх Яндекс.Метрика
© PerS
вход