На днях мне написали интересный запрос. А мы можем создать приложение (веб страницу) где будет управление машинкой, который будет выходить из лабиринта. В будущем чтобы управление осуществлялось посредством СМС сообщений.
Эта инструкция поможет вам создать простой и интерактивный лабиринт с машинкой, которой можно управлять при помощи кнопок или клавиш для начало, а далее подключим еще управление через SMS как элемент интерактивности для мероприятий. Машинка может перемещаться по лабиринту, избегая стен и стремясь достичь конечной цели.
Начнем с базовой разметки HTML и стилей для лабиринта. Он будет состоять из 10x10 ячеек, в которых расположены стены, начальная и конечная точки.
Создайте новый файл, например maze.html.Вставьте следующий код, который создаст сетку лабиринта (надеюсь ничего что выкладываю полный код, не хочу долго расписывать):
| Код |
|---|
<!DO CTYPE html>
<ht ml lang="ru">
<head>
<met a charset="UTF-8">
<met a name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лабиринт с управлением</title>
<st yle>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
flex-direction: column;
}
#maze {
display: grid;
grid-template-columns: repeat(10, 40px);
grid-template-rows: repeat(10, 40px);
gap: 2px;
margin-bottom: 20px;
}
.cell {
width: 40px;
height: 40px;
background-color: white;
border: 2px solid black;
}
.wall {
background-color: black;
}
.start {
background-color: green;
}
.end {
background-color: red;
}
.player {
background-color: blue;
}
#controls {
display: flex;
flex-direction: column;
align-items: center;
}
.control-row {
display: flex;
margin: 5px;
}
button {
width: 100px;
height: 50px;
font-size: 18px;
margin: 2px;
}
</style>
</head>
<body>
<div id="maze">
<div class="cell start player"></div><div class="cell"></div><div class="cell wall"></div><div class="cell"></div><div class="cell"></div><div class="cell wall"></div><div class="cell wall"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell wall"></div><div class="cell"></div><div class="cell wall"></div><div class="cell"></div><div class="cell"></div><div class="cell wall"></div><div class="cell"></div><div class="cell wall"></div>
<!-- ...другие ячейки лабиринта... -->
</div>
|
Описание классов CSS:
- .cell — базовая ячейка лабиринта.
- .wall — черные ячейки, представляющие стены.
- .start — начальная точка (зелёная).
- .end — конечная точка лабиринта (красная).
- .player — ячейка, в которой находится персонаж (синяя).
Кнопки управленияДобавьте блок кнопок управления под лабиринтом, чтобы можно было двигать персонажа с помощью нажатий.
| Код |
|---|
<div id="controls">
<div class="control-row">
<button id="up">Вперед</button>
</div>
<div class="control-row">
<button id="left">Влево</button>
<button id="down">Назад</button>
<button id="right">Вправо</button>
</div>
</div> |
Теперь мы добавим JavaScript, который позволит перемещать машинку (персонажа) с помощью кнопок и клавиш.
| Код |
|---|
<sc ript>
const maze = document.getElementById("maze");
let playerPosition = { row: 0, col: 0 };
function movePlayer(rowChange, colChange) {
const newRow = playerPosition.row + rowChange;
const newCol = playerPosition.col + colChange;
// Проверка границ лабиринта
if (newRow < 0 || newRow >= 10 || newCol < 0 || newCol >= 10) {
return;
}
const newCell = maze.children[newRow * 10 + newCol];
// Проверка на стены
if (newCell && !newCell.classList.contains('wall')) {
maze.children[playerPosition.row * 10 + playerPosition.col].classList.remove('player');
playerPosition = { row: newRow, col: newCol };
newCell.classList.add('player');
// Проверка на финиш
if (newCell.classList.contains('end')) {
alert("Вы выиграли!");
}
}
}
document.getElementById('up').addEventListener('click', () => movePlayer(-1, 0));
document.getElementById('down').addEventListener('click', () => movePlayer(1, 0));
document.getElementById('left').addEventListener('click', () => movePlayer(0, -1));
document.getElementById('right').addEventListener('click', () => movePlayer(0, 1));
// Управление с клавиатуры
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
movePlayer(-1, 0);
break;
case 'ArrowDown':
movePlayer(1, 0);
break;
case 'ArrowLeft':
movePlayer(0, -1);
break;
case 'ArrowRight':
movePlayer(0, 1);
break;
}
});
</sc ript> |
Описание JavaScript-функций:
- movePlayer — функция, которая изменяет позицию персонажа, проверяет границы лабиринта и предотвращает движение через стены.
- addEventListener — добавляет обработку нажатия на кнопки и клавиши (стрелки на клавиатуре) для управления персонажем. Добавил чтобы можно было проверить движение пока не внедрим СМС-управление.
Проверка работыТеперь, когда HTML, CSS и JavaScript добавлены, откройте файл в браузере и попробуйте двигать персонажа, избегая стен и достигнув конечной точки.
Получилось?
Отличное демо, запустил, все работает!