0
以下是我的代碼。在黑色矩形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
任何機會，你可以創建一個工作演示codepen與你的代碼，因爲它是現在？我試圖複製它自己，但我無法讓球移動。 – bbodien