Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.11.2019, 12:30
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 52

Помощь в создании игры
Здравствуйте! Сегодня у меня появился вопрос при создании примитивной игры.
Вот код:
<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, но я в душе не знаю как это сделать... Помогите, пожалуйста!

Последний раз редактировалось MOT, 05.11.2019 в 12:33.
Ответить с цитированием
  #2 (permalink)  
Старый 05.11.2019, 13:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

столкновение блоков
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>

Последний раз редактировалось рони, 05.11.2019 в 20:49.
Ответить с цитированием
  #3 (permalink)  
Старый 05.11.2019, 13:58
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 52

Спасибо огромное!
Ответить с цитированием
  #4 (permalink)  
Старый 05.11.2019, 17:56
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 52

Теперь хотелось бы добавить секундомер к этой игре. Он запускается при загрузке страницы, а как его остановить при столкновении блоков и вывести значение подсчёта в alert?
Код секундомера:
<body onload="vremya()">
<script type="text/javascript">
var timer;
function vremya()
     {
	 if (timer) clearInterval(timer);
	 secs = 0;
	 document.getElementById('timer').innerHTML = 'Время игры: '+ secs + ' сек.';
	 timer = setInterval(
	    function () {
	     secs++;
   		 document.getElementById('timer').innerHTML = 'Время игры: '+ secs + ' сек.';
		 },
		 1000
		 );
		 }
</script>
<div id="timer"></div>

</div>
</body>
Ответить с цитированием
  #5 (permalink)  
Старый 05.11.2019, 18:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

MOT,
смотрите пост #2 снова
Ответить с цитированием
  #6 (permalink)  
Старый 05.11.2019, 18:49
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 52

Спасибо, такой вариант тоже подойдёт, но тогда придётся немного потрудится над дизайном
Ответить с цитированием
  #7 (permalink)  
Старый 05.11.2019, 18:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

MOT,
на всякий случай
Сообщение от MOT
id="timer"
Сообщение от MOT
var timer;
лучше если имя переменной не будет совпадать с любым id на странице.
и лучше class, чем id (но это по желанию)
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2019, 19:11
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 52

Хорошо, учту при дальнейшем написании кода. Спасибо!
Ответить с цитированием
  #9 (permalink)  
Старый 05.11.2019, 19:26
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 52

В строке номер 109 попытался заменить:
div[2].style.backgroundColor = '#A9A9A9';
на:
div[2].style.backgroundColor = '-webkit-radial-gradient(red,yellow)';
но вместо градиента получается просто белый фон. В чём моя ошибка?
Ответить с цитированием
  #10 (permalink)  
Старый 05.11.2019, 20:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

MOT,
style.backgroundImage
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь в создании двумерного массива через завыкание JStudent Общие вопросы Javascript 5 11.04.2018 08:18
Нужна помощь в создании матрицы расстояний! lihtaryk Работа 0 23.05.2015 15:55
Нужна помощь в создании формы Timothy Общие вопросы Javascript 3 16.04.2015 18:04
Нужна помощь в создании простого АУДИО ПЛЕЕРА! DennMonn jQuery 0 18.01.2015 23:15
нужна помощь в создании страницы с JavaScrip vikulin11 Общие вопросы Javascript 4 23.05.2011 00:26