Здравствуйте! Сегодня у меня появился вопрос при создании примитивной игры.
Вот код:
<style>
.field {
width: 100px;
height: 100px;
border: 1px solid black;
position: fixed;
left: 30px;
top: 30px;
}
.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;
}
}
</style>
<input type="radio" class="position1" name="change" checked>
<input type="radio" class="position2" name="change">
<input type="radio" class="position3" name="change">
<input type="radio" class="position4" name="change">
<div class="block1"></div>
<div class="block2"></div>
<div class="field">
</div>
Суть игры заключается в том, чтобы убегать от красного блока, у игрока есть 3 секунды начального времени на побег. Все было бы неплохо, но я не знаю как реализовать проигрыш — при наползании красного блока на чёрный, должен выводится какой-то сигнал, например alert, но я в душе не знаю как это сделать... Помогите, пожалуйста!