Падение элемента div при нажатии на кнопки

136
14 декабря 2019, 06:30

У меня такой код:

var checkAnimation = 0; 
var checkJump = true; 
 
document.onkeydown = function(e) { 
    if (e.keyCode == 39) { 
    	if (checkAnimation == 0) { 
	        var object = document.querySelector('.object').offsetLeft; 
			xn = object + 50; 
			document.querySelector('.object').style.left = xn + 'px'; 
			document.querySelector('.object').style.background = 'url(img/move1.png) no-repeat'; 
			document.querySelector('.object').style.transform = 'scale(1, 1)'; 
			checkAnimation++; 
		} else if (checkAnimation == 1) { 
	        var object = document.querySelector('.object').offsetLeft; 
			xn = object + 50; 
			document.querySelector('.object').style.left = xn + 'px'; 
			document.querySelector('.object').style.background = 'url(img/move2.png) no-repeat'; 
			document.querySelector('.object').style.transform = 'scale(1, 1)'; 
			checkAnimation--; 
		} 
    } 
 
    else if (e.keyCode == 37) { 
    	if (checkAnimation == 0) { 
	        var object = document.querySelector('.object').offsetLeft; 
			xn = object - 50; 
			document.querySelector('.object').style.left = xn + 'px'; 
			document.querySelector('.object').style.background = 'url(img/move1.png) no-repeat'; 
			document.querySelector('.object').style.transform = 'scale(-1, 1)'; 
			checkAnimation++; 
		} else if (checkAnimation == 1) { 
	        var object = document.querySelector('.object').offsetLeft; 
			xn = object - 50; 
			document.querySelector('.object').style.left = xn + 'px'; 
			document.querySelector('.object').style.background = 'url(img/move2.png) no-repeat'; 
			document.querySelector('.object').style.transform = 'scale(-1, 1)'; 
			checkAnimation--; 
		} 
    } 
 
    else if (e.keyCode == 38) { 
    	// Падение элемента 
	} 
}
* { 
	margin: 0; 
	padding: 0; 
} 
 
.object { 
	border: 1px solid black; 
	width: 80px; 
	height: 110px; 
	background: url(img/start.png) no-repeat; 
	position: absolute; 
	bottom: 130px; 
	left: 20px; 
	transition: left .1s linear; 
} 
 
.earth { 
	width: 100%; 
	height: 130px; 
	background: lightgreen; 
	position: absolute; 
	bottom: 0; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<link rel="stylesheet" href="main.css"> 
	<meta charset="UTF-8"> 
	<title>Test</title> 
</head> 
<body> 
	<div class="object"> 
 
	</div> 
 
	<div class="earth"> 
		 
	</div> 
 
	<script src="main.js"></script> 
</body> 
</html>

При нажатии на клавишу с кодом 38 (стрелка вверх) объект должен подлетать вверх и падать, но у меня получается только делать чтобы он подлетал вверх. Как можно сделать падение?

Answer 1

https://jsbin.com/xosoviqece/edit?js,output

var checkAnimation = 0;
var checkJump = true;
var minBottom = null;
document.onkeydown = function(e) {
    if (e.keyCode == 39) {
        if (checkAnimation == 0) {
            var object = document.querySelector('.object').offsetLeft;
            xn = object + 50;
            document.querySelector('.object').style.left = xn + 'px';
            document.querySelector('.object').style.background = 'url(img/move1.png) no-repeat';
            document.querySelector('.object').style.transform = 'scale(1, 1)';
            checkAnimation++;
        } else if (checkAnimation == 1) {
            var object = document.querySelector('.object').offsetLeft;
            xn = object + 50;
            document.querySelector('.object').style.left = xn + 'px';
            document.querySelector('.object').style.background = 'url(img/move2.png) no-repeat';
            document.querySelector('.object').style.transform = 'scale(1, 1)';
            checkAnimation--;
        }
    }
    else if (e.keyCode == 37) {
        if (checkAnimation == 0) {
            var object = document.querySelector('.object').offsetLeft;
            xn = object - 50;
            document.querySelector('.object').style.left = xn + 'px';
            document.querySelector('.object').style.background = 'url(img/move1.png) no-repeat';
            document.querySelector('.object').style.transform = 'scale(-1, 1)';
            checkAnimation++;
        } else if (checkAnimation == 1) {
            var object = document.querySelector('.object').offsetLeft;
            xn = object - 50;
            document.querySelector('.object').style.left = xn + 'px';
            document.querySelector('.object').style.background = 'url(img/move2.png) no-repeat';
            document.querySelector('.object').style.transform = 'scale(-1, 1)';
            checkAnimation--;
        }
    }
    else if (e.keyCode == 38) {
            var obj = document.querySelector('.object');
            var rect = obj.getBoundingClientRect();
            var object = window.innerHeight - (rect.y + rect.height);
            if (minBottom === null) {
              minBottom = object;
            } else {
              minBottom = Math.min(minBottom, object);
            }
            xn = object + 250;
            document.querySelector('.object').style.bottom = xn + 'px';
            timeout = setTimeout(() => {
              document.querySelector('.object').style.bottom = minBottom + 'px';
            }, 100);
    }
}

Но, когда хочешь анимировать что-либо на сайтах, то используй лучше CSS Transitions или готовые решения (пример https://daneden.github.io/animate.css/).

READ ALSO
Как работает оператор цикла for в JS?
javascript

Как работает оператор цикла for в JS?

Кто-то может, так скажем, "разжевать" его по пунктам?

 119
Не могу сделать запрос к mysql, который посчитает количество записей
MySQL

Не могу сделать запрос к mysql, который посчитает количество записей

Со связыванием таблиц не могу никак разобраться, сложно все для меня пока чтоВ общем делаю форум

 114
Поиск элемента с ценой больше 100
jQuery

Поиск элемента с ценой больше 100

Как мне пропарсить элемент с ID=BETS и достать все числа из data-worth со всех элементов и если моё число больше добавить выше этого элемента мой элементесли...

 130
Как при повторном клике сдвигать в исходное положение?
jQuery

Как при повторном клике сдвигать в исходное положение?

 120