Для моего модуля 3 проекта SE Flatiron моя группа делала игру на космическую тематику, в которой пользователь должен был управлять своим кораблем, чтобы избегать астероидов и врагов и бомбить финального босса. Чтобы все работало на одной странице, я создал тег div для стартовой страницы, который принимает имя игрока, и тег div для уровня 1 моей игры, где мой космический корабль будет перемещаться и пытаться увернуться от астероидов. Я создал эти div на стороне html. Чтобы отобразить один div, а не другой, например, когда пользователь нажал кнопку отправки «Начать игру» после ввода имени игрока, я написал селекторы запросов для div и использовал метод .style.display равный none/block. Установка для свойства .style.display значения none скроет div, а установка для него значения block приведет к отображению div и его содержимого. Изначально элемент div уровня 1 был установлен невидимым.
Затем я написал addEventListerner для отправки формы, где я предотвратил действие по умолчанию, скрыл div страницы входа и отобразил страницу уровня 1. Внутри этой функции я написал запрос на выборку, который отправил ввод имени игрока в метод моего контроллера, чтобы создать нового пользователя. В методе контроллера я пытаюсь найти, существует ли пользователь в базе данных. Я получаю информацию из сообщения внутри хэша params. Если такого пользователя нет, создается новый пользователь, который выглядит так:
Вернемся к запросу на выборку: ответ, который возвращается методом контроллера make-user, анализируется в json, я получаю объект пользователя, который делает идентификатор пользователя доступным. Затем я вызываю созданную мной функцию fetchUser с этим идентификатором пользователя в качестве параметра.
Функция fetchUser имеет запрос на получение информации о текущем игроке. Эта информация содержит координаты x, y, которые помещаются в функцию createShip. Корабль создан и присоединен к отряду уровня 1. Эта функция fetchUser также имеет два addEventListeners. Существует addEventListener для события нажатия клавиши, которое вызывает функции движения, чтобы корабль двигался влево, вправо, вверх, вниз. Второй addEventListener предназначен для события keyup, которое останавливает движение корабля, а затем использует запрос на выборку с методом patch для сохранения новых координат x, y текущего пользователя в базе данных. Когда существующий пользователь снова входит в систему, корабль должен появиться в том же месте, где он был, когда пользователь в последний раз был в игре.
