Добавляем в программы время и случайность — и получаем настоящие игры.
Всё, что написано ЗАГЛАВНЫМИ буквами, — заранее выбранный элемент
| Как вызвать | Что делает |
|---|---|
setTimeout(function, time, arguments) | Вызвать функцию один раз через заданное время (в миллисекундах) |
setInterval(function, time, arguments) | Вызывать функцию снова и снова через заданный интервал |
clearTimeout(NAME) | Отменить однократный вызов |
clearInterval(NAME) | Остановить повторяющийся вызов |
Math.random() * n | Случайное число от 0 до n (не включительно) |
Создай игру «Сокровища пиратов», как на анимации.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Усложни игру: добавь пирата, который охотится за игроком.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Создай страницу с кнопкой, которая каждые 2 секунды «подпрыгивает», зазывая нажать. После нажатия за мышью летят сердечки (img/heart.png), которые исчезают через 1.8 секунды.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Like activation</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
button {
padding: 1em;
font-size: 2em;
cursor: pointer;
border: 0;
border-radius: 10px;
background-color: yellow;
}
button:active {
background-color: lightgreen;
}
span {
position: absolute;
background-image: url('img/heart.png');
background-size: cover;
pointer-events: none;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
animation: likes 2s linear infinite;
}
@keyframes likes {
0% {
transform: translate(-50%, -50%);
opacity: 1;
}
100% {
transform: translate(-50%, -1000%);
opacity: 0;
}
}
button.clickMe {
animation: clickMe 1s linear infinite;
}
@keyframes clickMe {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<button>Activate 👍</button>
<script>
let button = document.querySelector('button');
let status = false;
button.addEventListener('click', clickEvent);
let setInt = setInterval(clickMe, 2000);
let remInt = setInterval(removeClickMe, 3000);
function clickEvent(event) {
if (!status) {
status = true;
likeActivation(status);
} else {
status = false;
likeActivation(status);
}
}
function likeActivation(status) {
if (status) {
document.addEventListener('mousemove', mouseEvent);
button.style.backgroundColor = 'lightgreen';
button.className = '';
clearInterval(setInt);
clearInterval(remInt);
} else {
document.removeEventListener('mousemove', mouseEvent);
button.style.backgroundColor = 'yellow';
setInt = setInterval(clickMe, 2000);
remInt = setInterval(removeClickMe, 3000);
}
}
function mouseEvent(event) {
let body = document.querySelector('body');
let heart = document.createElement('span');
let x = event.clientX;
let y = event.clientY;
heart.style.left = x + 'px';
heart.style.top = y + 'px';
let size = Math.random() * 100;
heart.style.width = size + "px";
heart.style.height = size + "px";
body.appendChild(heart);
setTimeout(heartRemove, 1800, heart)
}
function heartRemove(h) {
h.remove();
}
function clickMe() {
button.className = 'clickMe';
}
function removeClickMe() {
button.className = '';
}
</script>
</body>
</html>
В заголовке #timer написано 5. Каждую секунду число уменьшается на 1, а когда дойдёт до 0 — вместо числа появляется Пуск! 🚀 и таймер останавливается (clearInterval).
let timer = document.querySelector('#timer')
let seconds = 5
let id = setInterval(function () {
seconds--
if (seconds === 0) {
timer.textContent = 'Пуск! 🚀'
clearInterval(id)
} else {
timer.textContent = seconds
}
}, 1000)
При нажатии на кнопку #roll в блоке #dice появляется случайное целое число от 1 до 6.
Math.floor(Math.random() * 6) + 1 — случайное целое от 1 до 6.
let dice = document.querySelector('#dice')
document.querySelector('#roll').addEventListener('click', function () {
dice.textContent = Math.floor(Math.random() * 6) + 1
})
Блок #surprise сначала спрятан. Через 2 секунды после загрузки страницы покажи его (style.display = 'block') с помощью setTimeout.
setTimeout(function () {
document.querySelector('#surprise').style.display = 'block'
}, 2000)