Домашнее задание.

Создать многопользовательскую игру.

Игра представляет собой поле из квадратных шахматных клеток.

Размер поля может устанавливаться в настройках.

Пример настроек игры

{
    fps: 25,
    width: 20,
    height: 20,
    size: 50,
}

fps - количество кадров в сек.

width, height - количество клеток по вертикали и горизонтали

size - размер клетки в пикселях.

1 релиз

Серверная часть.

1. Создать двухмерный массив с клетками.

Формат массива.

   scene = [
        [
            [  x: number, 
               y: number, 
               color: string, 
               borderColor: string, 
               border: number, 
               power: number[0-100]  
               actor: object
            ],
            [x: number, y: number, ...],
            []
            ...
        ],
        [],
        ...

    ]

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

Если пользователей больше 3 ничего не делаем.

Формат объекта фигуры.

actor = {
   color: string[black|white],
   name: [pone|rook|quin|king|bishop|knight],
   power: number[0-100],
   strenght: number[0-100],
   position: {x,y},
   image: string
}

1. Реализовать событие move.

Входные данные.

{
    action: 'move',
    from: {
        x: number,
        y: number,
    },
    to: {
        x: number,
        y: number,
    }

}

По событию перемещать фигуру.

1. С частотой fps передавать на клиент по вебсокету этот объект сцены.

   { data: scene, action: ‘render’ }

Клиентская сторона.

1. Соединится с сервером.

2. Реализовать функцию отрисовки клеток на холсте canvas.

3. Реализовать отрисовку объектов фигур.

4. Реализовать перемещение фигуры с отправкой сообщения серверу.

2 релиз

Серверная часть.

1. На сцену добавить нового актера - танк вместо ферзя.

2. Добавить в сцену массив с пульками.

   { data: scene, action: ‘render’, tanks: [{color: string, image: string position: {x,y}},…], bullets: [{color: string, image: string position: {x,y}},…] }

3. Реализовать событие поворота танка на 45 градусов.

4. Реализовать событие передвижения танка по 8 направлениям.

5. Реализовать событие выстрела.

6. Перемещение пульки с удалением с поля при достижении края.

Клиентская часть

1. Отрисовка танка

2. Отрисовка пуль.

3 релиз

Серверная часть.

1. Отработать колизию пульки с фигурой.

2. Отработать коллизию танка с фигурой.