MOT,
https://developer.mozilla.org/en-US/...sion_detection
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.field {
width: 100px;
height: 100px;
border: 1px solid black;
position: fixed;
left: 30px;
top: 30px;
z-index: -1;
}
.block1 {
width: 25px;
height: 25px;
background: black;
position: absolute;
left: 30px;
}
.position1:checked ~ .block1 {
top: 30px;
}
.position2:checked ~ .block1 {
top: 105px;
}
.position3:checked ~ .block1 {
top: 105px;
left: 105px;
}
.position4:checked ~ .block1 {
top: 30px;
left: 105px;
}
.block2 {
width: 25px;
height: 25px;
background: red;
position: fixed;
top: 30px;
left: 0px;
}
.block2 {
animation: run 4s infinite linear;
animation-fill-mode: forwards;
animation-delay: 3s;
}
@keyframes run {
0% {
left: 30px;
top: 30px;
}
25% {
left: 30px;
top: 105px;
}
50% {
left: 105px;
top: 105px;
}
75% {
left: 105px;
top: 30px;
}
100% {
left: 30px;
top: 30px;
}
}
#timer{
margin-top: 250px;
}
.field.gradient{
background-image:-webkit-radial-gradient(red,yellow);
}
</style>
<input type="radio" class="position1" name="change" >
<input type="radio" class="position2" name="change">
<input type="radio" class="position3" name="change">
<input type="radio" class="position4" name="change" checked>
<div class="block1"></div>
<div class="block2"></div>
<div class="field">
</div>
<div id="timer"></div>
<script>
const div = document.querySelectorAll('.block1, .block2, .field, #timer');
let time;
const tick = (t) => {
if(time === void 0) time = performance.now();
div[3].innerHTML = 'Время игры: '+ ((t - time)/1000|0) + ' сек.';
var rect1 = div[0].getBoundingClientRect();
var rect2 = div[1].getBoundingClientRect();
if (rect1.left < rect2.left + rect2.width &&
rect1.left + rect1.width > rect2.left &&
rect1.top < rect2.top + rect2.height &&
rect1.top + rect1.height > rect2.top) {
div[1].style.animationPlayState = 'paused';
//div[2].style.backgroundImage = '-webkit-radial-gradient(red,yellow)';
div[2].classList.add('gradient')
}
else {
requestAnimationFrame( tick )
}
}
onload = tick
</script>
</body>
</html>