Запрет на выход за границы экрана:

153

15 декабря 2019, 22:30

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

var checkAnimation = 0; 
 
document.onkeydown = function(e) { 
 
	// Вправо 
 
    if (e.keyCode == 39) { 
    	var posX = document.querySelector('.player').offsetLeft; 
		xn = posX + screen.width / 4; 
		document.querySelector('.player').style.left = xn + 'px'; 
		document.querySelector('.player').classList.add("walkRight"); 
    }  
 
    // Влево 
 
    else if (e.keyCode == 37) { 
    	var posX = document.querySelector('.player').offsetLeft; 
		xn = posX - screen.width / 4; 
		document.querySelector('.player').style.left = xn + 'px'; 
		document.querySelector('.player').classList.add("walkLeft");     
		if (xn <= 0) { 
			document.querySelector('.player').style.left = '0px'; 
		}	 
    } 
} 
 
document.onkeyup = function(e) { 
 
	// Вправо 
 
	if (e.keyCode == 39) { 
		document.querySelector('.player').style.transform = 'scale(1, 1)'; 
    	var posX = document.querySelector('.player').offsetLeft; 
		xn = posX + 5.3; 
		document.querySelector('.player').style.left = xn + 'px'; 
		document.querySelector('.player').classList.remove("walkRight"); 
	}  
 
	// Влево 
 
	else if (e.keyCode == 37) { 
		document.querySelector('.player').style.transform = 'scale(-1, 1)'; 
    	var posX = document.querySelector('.player').offsetLeft; 
		xn = posX - 5.5; 
		document.querySelector('.player').style.left = xn + 'px'; 
		document.querySelector('.player').classList.remove("walkLeft");		 
	} 
}

* { 
	margin: 0; 
	padding: 0; 
} 
 
body { 
	overflow: hidden; 
} 
 
.background { 
	width: 100%; 
	height: 100vh; 
	background: url(img/background.png); 
	background-position: 100% 75%; 
} 
 
.player { 
	border: 1px solid black; 
	width: 5.8%; 
	height: 17.3%; 
	background: url(img/start.png) no-repeat; 
	position: absolute; 
	transition: left 2s; 
	bottom: 35.9%; 
	left: 20%; 
} 
 
.earth { 
	width: 100%; 
	height: 35.5%; 
	background: lightgreen; 
	position: absolute; 
	bottom: 0; 
	box-shadow: 0 -5px 4px 1px rgba(144, 238, 144, 1); 
} 
 
.walkLeft { 
	animation: walkLeft 1s infinite; 
	transition: all 1s linear; 
} 
 
.walkRight { 
	animation: walkRight 1s infinite; 
	transition: all 1s linear; 
} 
 
@keyframes walkLeft { 
	0% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(-1, 1); 
	} 10% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(-1, 1); 
	} 20% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(-1, 1); 
	} 30% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(-1, 1); 
	} 40% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(-1, 1); 
	} 50% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(-1, 1); 
	} 60% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(-1, 1); 
	} 70% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(-1, 1); 
	} 80% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(-1, 1); 
	} 90% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(-1, 1); 
	} 100% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(-1, 1); 
	}	 
} 
 
@keyframes walkRight { 
	0% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(1, 1); 
	} 10% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(1, 1); 
	} 20% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(1, 1); 
	} 30% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(1, 1); 
	} 40% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(1, 1); 
	} 50% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(1, 1); 
	} 60% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(1, 1); 
	} 70% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(1, 1); 
	} 80% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(1, 1); 
	} 90% { 
		background: url(img/move2.png) no-repeat; 
		transform: scale(1, 1); 
	} 100% { 
		background: url(img/move1.png) no-repeat; 
		transform: scale(1, 1); 
	}	 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<link rel="stylesheet" href="main.css"> 
	<meta charset="UTF-8"> 
	<title>Test</title> 
</head> 
<body> 
	 
	<div class="wrapper"> 
		<div class="player"></div> 
 
		<div class="earth"></div> 
 
		<div class="background"></div> 
	</div> 
 
	<script src="main.js"></script> 
	<script src="SmoothScroll.js"></script> 
</body> 
</html>

Я хочу сделать так, чтобы если объект подходит вплотную к левому краю, то дальше чтобы он не мог идти, но почему-то это получается только от части и когда он ещё не дошёл до края но уже близок к нему, то почему-то объект замедляется. Ещё когда двигаешь объект, а потом отпускаешь клавишу клавиатуры, то он на несколько пикселей отходит то вправо, то влево. Помогите решить!