Всем привет! В более раннем топике, созданном мной, я узнал интересный метод остановки ч.-л. при ховере одного объекта на другой. НО: там был один "враг", а в моей новой игре их гораздо больше.
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
Этот код в прошлый раз написал отзывчивый рони. Условно существовало четыре опорных div'а: <div class="block1">("наш", мы им управляли), <div class="block2">("враг"), <div class="field">(игровое поле), <div class="timer">(секундомер). В моей новой игре роль нашего играет <div class="rocket">, врагов - <div class="planet1">...<div class="planet10"> и <div class="asteroid1">. Не могу сообразить как это всё собрать воедино, чтобы работало. Пытался прикрутить каждого врага как var rect3...rect14, но безуспешно
. Вот, кстати, мой код игры:
<!DOCTYPE html>
<html>
<head>
<title>Игра</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
//Если у нас один враг в списке, то мы вызываем его и начинаем "верстать" сценарий столкновения. Но что делать, если у тебя не один враг, а их десять?!
</script>
<style>
.body {
width: 320px;
height: 500px;
border: 1px solid black;
transition: 5s;
}
.rocket {
width: 40px;
height: 22px;
position: fixed;
bottom: 0px;
transition: 3s;
}
.rocket > * {
position: absolute;
}
.body ~ .rocket {
bottom: 20px;
}
.body:active ~ .rocket {
bottom: calc(100% - 25px);
}
.circle {
width: 20px;
height: 20px;
border: 1px solid grey;
border-radius: 10px;
left: 20px;
background: grey;
}
.line1 {
width: 20px;
height: 1px;
background: grey;
top: 11px;
left: 0px;
}
.line2 {
width: 20px;
height: 1px;
background: grey;
top: 6px;
left: 0px;
transform: rotate(25deg);
}
.line3 {
width: 20px;
height: 1px;
background: grey;
top: 16px;
left: 0px;
transform: rotate(-25deg);
}
.planet1, .planet2, .planet3, .planet4, .planet5, .planet6, .planet7, .planet8, .planet9, .planet10, .asteroid1, .aateroid2, .asteroid3, .sun {
position: fixed;
}
.planet1 {
width: 100px;
height: 100px;
border-radius: 50px;
background: linear-gradient(to left bottom, #FFBC00, #FF5400);
top: 100px;
animation: p1 12s linear infinite;
}
.planet2 {
width: 70px;
height: 70px;
border-radius: 35px;
background: linear-gradient(to left bottom, red, #7B1100);
top: 10px;
animation: p2 20s linear infinite;
}
.planet3 {
width: 50px;
height: 50px;
border-radius: 25px;
background: linear-gradient(to left bottom, lime, green);
top: 140px;
animation: p3 15s linear infinite;
}
.planet4 {
width: 80px;
height: 80px;
border-radius: 40px;
background: linear-gradient(to left bottom, skyblue, blue);
top: 240px;
animation: p4 linear 10s infinite;
}
.planet5 {
width: 130px;
height: 130px;
border-radius: 65px;
background: linear-gradient(to left bottom, grey, black);
top: 320px;
animation: p5 linear 8s infinite;
}
.planet6 {
width: 100px;
height: 100px;
border-radius: 50px;
background: linear-gradient(to left bottom, #FFBC00, black);
top: 140px;
animation: p6 linear 10s infinite;
}
.planet7 {
width: 70px;
height: 70px;
border-radius: 50px;
background: linear-gradient(to left bottom, grey, black);
top: 50px;
animation: p6 linear 12s infinite;
}
.planet8 {
width: 130px;
height: 130px;
border-radius: 65px;
background: linear-gradient(to left bottom, skyblue, blue);
top: 200px;
animation: p6 linear 12s infinite;
}
.planet9 {
width: 130px;
height: 130px;
border-radius: 65px;
background: linear-gradient(to left bottom, skyblue, blue);
top: 100px;
animation: p6 linear 16s infinite;
}
.planet10 {
width: 90px;
height: 90px;
border-radius: 65px;
background: linear-gradient(to left bottom, red, black);
top: 350px;
animation: p10 linear 16s infinite;
}
body {
background: black;
}
@keyframes p1 {
0% {
right: calc( 0% - 100% );
}
40% {
right: 100%;
display: block;
}
100% {
display: none;
right: 100%;
}
}
@keyframes p2 {
0% {
right: calc( 0% - 100% );
}
60% {
right: 100%;
display: block;
}
100% {
display: none;
right: 100%;
}
}
@keyframes p3 {
0% {
right: calc( 0% - 100% );
}
60% {
right: 100%;
display: block;
}
100% {
display: none;
right: 100%;
}
}
@keyframes p4 {
0% {
right: calc( 0% - 100% );
}
60% {
right: 100%;
display: block;
}
100% {
display: none;
right: 100%;
}
}
@keyframes p5 {
0% {
right: calc( 0% - 100% );
}
60% {
right: 100%;
display: block;
}
100% {
display: none;
right: 100%;
}
}
@keyframes p6 {
0% {
right: calc( 0% - 100%);
}
50% {
right: calc( 0% - 100% );
display: block;
}
100% {
right: 100%;
display: block;
}
}
@keyframes p7 {
0% {
right: calc( 0% - 100%);
}
50% {
right: calc( 0% - 100% );
display: block;
}
100% {
right: 100%;
display: block;
}
}
@keyframes p8 {
0% {
right: calc( 0% - 100%);
}
70% {
right: calc( 0% - 100% );
display: block;
}
100% {
right: 100%;
display: block;
}
}
@keyframes p9 {
0% {
right: calc( 0% - 100%);
}
90% {
right: calc( 0% - 100% );
display: block;
}
100% {
right: 100%;
display: block;
}
}
@keyframes p10 {
0% {
right: calc( 0% - 100%);
}
90% {
right: calc( 0% - 100% );
display: block;
}
100% {
right: 100%;
display: block;
}
}
.sun {
width: 200px;
height: 200px;
border-radius: 100px;
background: linear-gradient(to left bottom, yellow, #FF7900);
top: -100px;
right: -100px;
box-shadow: 0 0 50px yellow;
}
.asteroid1, .asteroid2, .asteroid3 {
width: 20px;
height: 20px;
border-radius: 10px;
background: linear-gradient(to left bottom, grey, black);
}
.asteroid1 {
animation: a1 linear 5s infinite;
top: 470px;
box-shadow: 20px 0 10px grey;
}
@keyframes a1 {
0% {
right: calc( 0% - 100%);
}
10% {
right: calc( 0% - 100% );
display: block;
}
100% {
right: 100%;
display: block;
}
}
</style>
</head>
<body>
<div class="body">
<div class="planet1"></div>
<div class="planet2"></div>
<div class="planet3"></div>
<div class="planet4"></div>
<div class="planet5"></div>
<div class="planet6"></div>
<div class="planet7"></div>
<div class="planet8"></div>
<div class="planet9"></div>
<div class="planet10"></div>
<div class="asteroid1"></div>
<div class="sun"></div>
</div>
<div class="rocket">
<div class="circle"></div>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="timer"></div>
</body>
Если вы не хотите, чтобы ваш мозг взорвался, не вдумывайтесь в css стили. Ещё один момент: это будет игра для смартфона, адаптирована под расширение 320 х 500px, со временем переделаю под комп.
P.S. С наступающим 8 марта!
