15. Практическое занятие: демонстрация шахматной партии
Любители шахмат на своих сайтах часто выкладывают партии известных гроссмейстеров и проводят их разбор. Для наглядности ходы фигур демонстрируются на шахматном поле. Вот примеры таких сайтов: crestbook.com, chesspro.ru.
Задание 1
Изобразите на странице шахматную доску, разместите на ней фигуры в исходном положении, внизу поставьте две кнопки: «Начало» и «Ход» .
Подготовка шахматного поля Шахматную доску изобразим с помощью таблицы из 8 строк и 8 столбцов, чёрные поля получаются заданием тёмного фона для соответствующих ячеек. Нижнее левое поле всегда чёрное. Добавим столбец слева для цифр и строку внизу для букв. В шахматах столбцы обозначаются латинскими буквами слева направо, а ряды цифрами снизу вверх. Таким образом каждое поле имеет своё обозначение: e2, e4, f6 и так далее. Ниже разместим кнопки «Начало» и «Ход».
Исходное размещение фигур Расставляем исходное положение фигур и пешек: вверху чёрные, внизу белые. Для этого используем подготовленые картинки с фигурами и пешками. В ячейки таблицы размещаем теги img с соответствующими атрибутами src.
Задание 2
Дана запись шахматной партии Карлсен - Камский. 1. Ng1-f3 d7-d5 2. d2-d4 Ng8-f6 3. c2-c4 c7-c6 4. Nb1-c3 a7-a6 5. a2-a4 e7-e6 6. g2-g3 a6-a5 7. Bf1-g2 Nb8-d7 8. O-O Bf8-b4 9. e2-e4!? Bb4xc3 10. b2xc3 Nf6xe4 11. Bc1-a3! Nd7-f6 12. Nf3-e5 Ne4-d6 13. c4xd5 e6xd5 14. c3-c4 O-O 15. c4xd5 Nf6xd5 16. Bg2xd5 c6xd5 17. Qd1-b3 Bc8-e6 18. Rf1-e1! Rf8-e8 19. Ba3xd6 Qd8xd6 20. Qb3xb7. При щелчках на кнопке «Ход» шахматные фигуры должны передвигаться согласно записи партии.
Внешний вид
Подготовка мест для будущих ходов Запись шахматной партии использует следующие обозначения:
N (knight) - конь,
B (bishop) - слон,
R (rook) - ладья,
Q (queen) - ферзь,
K (king) - король.
Если нет большой буквы, значит это ход пешки. O-O означает рокировку в короткую сторону, знак «х» означает «бьёт».
На свободные поля шахматной доски во время партии будут переходить фигуры, а поля, откуда уходят фигуры, освобождаются. Во всех ячейках таблицы расставляем теги img. Там, где сейчас есть фигура, src указывает на файл с картинкой фигуры, а где нет фигуры — на файл с прозрачной пустышкой. Прозрачную пустышку размером 1 на 1 пиксел легко сделать в Photoshop.
Каждый ход изменяет атрибуты src двух тегов img:
в ячейке, куда идёт фигура, атрибут src должен указать на файл фигуры;
в ячейке, откуда она уходит, атрибут src должен указать на файл пустышки.
Для изменения атрибута src мы обращаемся к тегу с помощью метода getElementById. Следовательно, в каждом теге img нужно проставить идентификатор id. Обозначим идентификаторы теми же кодами, что и шахматные поля, в которых они находятся: a1, a2, и так далее.
Ход фигуры Вначале напишите сценарий, выполняющий один ход коня g1-f3. Как мы уже выяснили, ход выполняется двумя командами. Оформите эти две команды в виде функции «сдвиг». Вызывайте эту функцию щелчком на кнопке «Ход».
Подумайте, что надо изменить в функции, чтобы она выполняла другой ход, например, чёрной пешки d7-d5. Нетрудно заметить, что для выполнения любого хода необходимы следующие данные:
имя файла с картинкой,
идентификатор ячейки ухода,
идентификатор ячейки прихода.
Структура команд остаётся неизменной: изменяется src в одной ячейке, затем в другой.
Массив с записью партии Данные, необходимые для выполнения ходов, удобно записать в виде массива. Первые три элемента массива относятся к первому ходу, следующая тройка — ко второму, и так далее. Создайте массив «партия» и занесите в него 5-6 первых ходов.
Выполнение ходов согласно записи партии При каждом щелчке на кнопке «Ход» имя файла и идентификаторы должны браться из очередных трёх элементов массива «партия». Поэтому необходимо ввести переменную-счётчик, с помощью которой подсчитывается количество щелчков по кнопке.
Задание 3
При щелчках на кнопке «Ход» и передвижении фигуры запись очередного хода должна изменять цвет.
Изменение цвета записи хода Для того, чтобы менять цвет шрифта записи хода необходимо обернуть эту запись в тег span и присвоить ему идентификатор. Идентификатор должен совпадать с номером хода. В функции «сдвиг» необходимо обращаться к соответствующему элементу span и менять цвет шрифта.
Задание 4
По щелчку на кнопке «Начало» фигуры должны возвращаться в исходное положение. При щелчке на записи хода фигуры должны становиться в позицию, соответствующую этому ходу.
Возврат фигур в исходное положение Необходимо создать функцию, например «начало», которая обращается к каждому шахматному полю и устанавливает в ней нужную картинку. Кроме того, счётчик ходов «номер» обнуляется. Функция «начало» должна вызываться щелчком по кнопке «Начало».
Задание 5
При щелчке на записи хода фигуры должны становиться в позицию, соответствующую этому ходу.
Скачок к указанной позиции Необходимо создать функцию, например «скачок», которая вначале возвращает фигуры в исходное положение с помощью функции «начало», а затем вызвает функцию «сдвиг» столько раз, чтобы счётчик ходов «номер» стал равным идентификатору того тега span, по которому щёлкнул пользователь. Для получения идентификатора тега span, по которому щёлкнул пользователь, используется событие onclick и операция this.id.
Дополнительные материалы
Метод prompt("текст", "значение")создаёт диалоговое окно, в которое пользователь может вводить свои данные. Если текст задан, он выводится в качестве сообщения. Значение задаёт начальное значение поля ввода. Пример: ответ=window.prompt("Введите ваше имя", ""); Диалоговое окно показано на рисунке ниже.
Если пользователь нажмёт кнопку Cancel, то переменная ответ примет значение null; если будет нажата кнопка OK, то переменная примет значение, введённое пользователем в поле ввода.
Задание 1
Напишите скрипт, который выводит диалоговое окно ввода. При нажатии кнопки Ok на странице должны появляться слова, который ввёл пользователь.
Объект window
Метод moveBy(x,y) перемещает окно браузера на x пикселей по горизонтали и y пикселей по вертикали. Нужно помнить, что начало системы координат находится в левом верхнем углу экрана, а ось y направлена вниз. Пример: window.moveBy(-10, 5) сдвинет окно браузера на 10 пиксел влево и на 5 пиксел вниз.
Задание 2
Поставьте на страницу кнопку, которая сдвигала бы окно браузера вправо и вниз.
Метод resizeBy
Синтаксис: window.resizeBy(x, y)
Аргументы: x, y — целые значения
Этот метод изменяет размеры окна на x пикселей по горизонтали и y пикселей по вертикали. Пример: window.resizeBy(10, -5).
Метод resizeTo
Синтаксис: window.resizeTo(ширина, высота) Аргументы: ширина, высота — целые значения
Этот метод задает новые размеры окна в пикселях, равными ширине по горизонтали и высоте по вертикали. Пример: resizeTo(200, 200).
Метод moveTo
Синтаксис: window.moveTo(x, y)
Аргументы: x, y — целые значения
Этот метод перемещает окно в положение, при котором его верхний левый угол отстоит от левого верхнего угла экрана на x пикселей по горизонтали и y пикселей по вертикали. Следующий пример задаёт размеры окна и центрирует его на экране:
w = 200, h = 200; window.resizeTo(w, h); window.moveTo((window.screen.width-w)/2, (window.screen.height-h)/2);
Задание
Напишите скрипт, который бы разместил окно браузера в правой половине экрана.