<header>
<h2 class="title">Keyboard Events</h2>
<p class="description">Демонструє керування рухом об'єкта на сторінці за допомогою подій клавіатури.</p>
</header>
<main>
<div class="result">
<div id="box"></div> <!-- квадрат, яким керуємо через клавіатуру -->
<p>Використовуйте стрілки для руху, клавішу <strong>Space</strong> для зміни кольору.</p>
</div>
</main>
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
display: flex;
flex-direction: column;
align-items: center;
}
#box {
width: 50px;
height: 50px;
background-color: #3498db;
position: relative;
transition: background-color 0.3s;
}
const box = document.getElementById('box');
let position = { top: 0, left: 0 };
const step = 10; // кількість пікселів, на яку рухатиметься квадрат
document.addEventListener('keydown', function(event) {
switch (event.key) {
case 'ArrowUp':
position.top = Math.max(0, position.top - step);
break;
case 'ArrowDown':
position.top = Math.min(window.innerHeight - box.offsetHeight, position.top + step);
break;
case 'ArrowLeft':
position.left = Math.max(0, position.left - step);
break;
case 'ArrowRight':
position.left = Math.min(window.innerWidth - box.offsetWidth, position.left + step);
break;
case ' ':
// змінюємо колір при натисканні Space
box.style.backgroundColor = getRandomColor();
break;
}
// оновлюємо позицію квадрата
box.style.top = position.top + 'px';
box.style.left = position.left + 'px';
});
// Функція для отримання випадкового кольору
function getRandomColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
// Додаємо стилі для позиціонування
box.style.position = 'absolute';
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.