Продолжаем серию задач из конкурса от Яндекса
«Лабиринт»
Системный администратор Евгений очень любит свою работу. Но ещё больше он любит старые восьмибитные игры, поэтому на досуге решил сделать игру «Лабиринт».
Правила игры простые:
- Лабиринт состоит из стенок, пустых полей и выхода.
- В лабиринте есть шарик, который может кататься по пустым полям, пока не упрётся в стенку.
- Шариком можно управлять, наклоняя поля в одну из четырёх сторон: шарик будет катиться, пока может.
- Игра заканчивается, когда мячик попадает на клетку выхода. С этого момента он не должен реагировать на кнопки управления. ←↑↓→
Евгений с удовольствием бы доделал игру сам, но в сеть компании, где он работает, попал страшный вирус, и борьба с ним заняла всё время системного администратора.
Помогите Евгению дописать игру.
Формат ввода
Карта лабиринта доступна в поле window.map типа String.
Специальные символы:
- # — стенка
- . — пустое место
- o — шарик
- x — выход
Каждая строка, содержащая хотя бы один специальный символ, является линией лабиринта, каждый символ является полем лабиринта. Другие символы не имеют значения и должны быть проигнорированы при построении лабиринта.
Например,
window.map = ‘
#####
#o#x#
#.#.#
#...#
#####
‘;
должно дать такой результат:
Примечания
Решение — один HTML-файл (все нужные скрипты и стили должны быть внутри).
После того как игра будет проинциализирована, надо вызывать глобальную функцию window.onMazeReady(). Только после этого запустится автоматическое тестирование вашего решения. Если вызов функции не произойдёт в течение 5 секунд, то задание считается невыполненным.
Все карты в наших тестах имеют прямоугольную форму и ограничены по периметру стенками.
Контейнер с игровым полем должен иметь CSS-класс map.
Кнопки управления должны реагировать на событие click и иметь следующие CSS-классы:
- влево — control_direction_left
- вниз — control_direction_down
- вверх — control_direction_up
- вправо — control_direction_right
CSS-стили для градиента на шарике:
background: radial-gradient(circle at 5px 5px, #eee, #000);
CSS-стили для BODY:
padding: 100px 0 0 100px;
Поле наклоняется в каждую из сторон на 25 градусов с центральной перспективой, удалённой на 500px. Например:
Предлагаемый шаблон решения:
<!DOCTYPE html>
<html lang=ru/>
<head>
<style>
body {
padding: 100px 0 0 100px;
}
.game-box {
perspective: 500px;
perspective-origin: center;
}
.map {
transform-style: preserve-3d;
}
.map__tilt_left {
transform: rotateY(-25deg);
}
.map__tilt_down {
transform: rotateX(-25deg);
}
.map__tilt_up {
transform: rotateX(25deg);
}
.map__tilt_right {
transform: rotateY(25deg);
}
</style>
<title>Лабиринт</title>
</head>
<body>
<div class="game-box">
<div class="map">
<!-- Разметка -->
</div>
</div>
<script>
// JavaScript
</script>
</body>
</html>
Допишите ваши стили, скрипты и HTML-разметку.
Обратите внимание, ваше решение будет тестироваться в браузере Google Chrome 69