Нажмите на кнопку в этой простой HTML-игре
Код:
<!DOCTYPE html>
<html>
<head>
<title>Супер игра</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
height: 100vh;
}
#btn {
position: absolute;
padding: 15px 30px;
font-size: 20px;
background: #fff;
border: 2px solid #ff6f61;
border-radius: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transition: transform 0.2s;
cursor: pointer;
}
#btn:hover {
transform: scale(1.1) rotate(-5deg);
}
</style>
</head>
<body>
<button id="btn">Нажми меня!</button>
<audio id="sound" src="https://www.soundjay.com/button/beep-07.wav"></audio>
<script>
let btn = document.getElementById('btn');
let sound = document.getElementById('sound');
function moveButton() {
let x = Math.random() * (window.innerWidth - btn.offsetWidth);
let y = Math.random() * (window.innerHeight - btn.offsetHeight);
btn.style.transition = "all 0.3s ease";
btn.style.left = x + 'px';
btn.style.top = y + 'px';
}
btn.addEventListener('mouseover', moveButton);
btn.addEventListener('click', function(e) {
e.preventDefault();
sound.play();
alert('Поздравляю! Ты победил!');
});
</script>
</body>
</html>
