Ниже мой код. Существует синий очерченный шар с белым интерьером внутри черного прямоугольника css. Я ищу, чтобы переместить этот шар влево, вправо, вверх и вниз, используя клавиши со стрелками, не имея возможности проталкивать мяч мимо границ черного пространства. Он отлично работает, если вы только нажимаете клавишу со стрелкой один раз в последовательном направлении, но если вы должны удерживать любую из клавиш со стрелками вниз, она выходит за границы, которые я установил, чтобы остановить ее от прохождения черного пространства. Функция «topStop();» является одной из 8 функций, которые я использую, чтобы помешать шару покинуть черное пространство, но я как бы смотрю на дорожный блок, когда он наступает, когда кто-то держит клавиши со стрелками вниз.Как использовать JavaScript для управления движением div
<html>
<head>
<style>
#blueBall {
position: relative;
background-color: #fff;
border: 1px solid blue;
width: 10px;
height: 10px;
border-radius: 100%;
top: 0;
left: 0;
}
#blueCanvas {
position: absolute;
background-color: #000;
width: 932px;
border: 1px solid #000;
height: 512px;
top: 20px;
left: 20px;
}
#pixelTrackerTop {
position: absolute;
bottom: 10%;
}
#pixelTrackerLeft {
position: absolute;
bottom: 5%;
}
</style>
<title>Animating Text</title>
<script src="https://ajax.googleapis.com/
ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<SCRIPT LANGUAGE="JavaScript" type = "text/javascript">
document.addEventListener("keydown", keyBoardInput);
var topY = 0;
var leftX = 0;
function moveUp() {
var Y = document.getElementById("blueBall");
topY = topY -= 1;
Y.style.top = topY;
masterTrack();
stopUp = setTimeout("moveUp()", 1)
topStop();
stopConflictYup();
console.log('moveUp');
};
function moveDown() {
var Y = document.getElementById("blueBall");
topY = topY += 1;
Y.style.top = topY;
masterTrack();
stopDown = setTimeout("moveDown()", 1)
topStop();
stopConflictYdown();
console.log('moveDown');
};
function moveLeft() {
var X = document.getElementById("blueBall");
leftX = leftX -= 1;
X.style.left = leftX;
masterTrack();
stopLeft = setTimeout("moveLeft()", 1)
leftStop();
stopConflictXleft();
console.log('moveLeft');
};
function moveRight() {
var X = document.getElementById("blueBall");
leftX = leftX += 1;
X.style.left = leftX;
masterTrack();
stopRight = setTimeout("moveRight()", 1)
leftStop();
stopConflictXright();
console.log('moveRight');
};
function masterTrack() {
var pxY = topY;
var pxX = leftX;
document.getElementById('pixelTrackerTop').innerHTML =
'Top position is ' + pxY;
document.getElementById('pixelTrackerLeft').innerHTML =
'Left position is ' + pxX;
};
function topStop() {
if (topY <= 0) {
clearTimeout(stopUp);
console.log('stopUp activated');
};
if (topY >= 500) {
clearTimeout(stopDown);
console.log('stopDown activated');
};
};
function leftStop() {
if (leftX <= 0) {
clearTimeout(stopLeft);
console.log('stopLeft activated');
};
if (leftX >= 920) {
clearTimeout(stopRight);
console.log('stopRight activated');
};
};
function stopConflictYup() {
clearTimeout(stopDown);
};
function stopConflictYdown() {
clearTimeout(stopUp);
};
function stopConflictXleft() {
clearTimeout(stopRight);
};
function stopConflictXright() {
clearTimeout(stopLeft);
};
function keyBoardInput() {
var i = event.keyCode;
if (i == 38) {
if (topY > 0) {
moveUp();
};
};
if (i == 40) {
if (topY < 500) {
moveDown();
};
};
if (i == 37) {
if (leftX > 0) {
moveLeft();
};
};
if (i == 39) {
if (leftX < 920) {
moveRight();
};
};
};
</SCRIPT>
</head>
<div id="blueCanvas">
<div id="blueBall"></div>
</div>
<p id ="pixelTrackerTop">topTracker</p>
<br>
<p id ="pixelTrackerLeft">leftTracker</p>
</body>
</html>
Не могли бы вы дать нам конкретный кусок кода, который не функционирует так, как вы хотите его? Это облегчает поиск проблемы, с которой вы сталкиваетесь. –
Текущий код работает так, как предполагалось, его недостаток в коде, который является проблемой, ища способ ответить на исходный вопрос о том, чтобы мяч не прошел мимо черного пространства при удерживании клавиши со стрелкой. Я думал, вероятно, изменяя инструкции if, которые прилагаются к нажатию клавиши или, возможно, добавляет предложение true/false к функциям, которые выполняют движение. Я не уверен, как решить эту проблему. – Ghoyos
Любой шанс, что вы могли бы создать рабочий демо-код с вашим кодом, как сейчас? Я пробовал копировать его самостоятельно, но я не могу заставить мяч двигаться. – bbodien