如何使用JavaScript来控制div的移动

时间：2016-09-23 22:16:11

标签： javascript html css

以下是我的代码。有一个蓝色的轮廓球，黑色矩形css帆布内有白色内饰。我正在寻找使用箭头键向左，向右，向上和向下移动球，而不能将球推过黑色空间的边界。如果您只在连续方向上点击一次箭头键，它会完美地工作，但如果您按住任何箭头键，它会超出我设置的边界，以阻止它越过黑色空间。功能“topStop（）;”是我用来阻止球离开黑色空间的8种功能之一，但当有人拿着箭头键时，我有点在路障。 

   <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>

1 个答案:

答案 0 :(得分：0)

确定了一种绕过计算机逻辑的方法来重新运行强制它离开黑色空间的代码。代码如下（首先我将发布修改，然后我将发布整个代码页）

***MODIFCATIONS***


if (topY < 1) {
topY = 0;
Y.style.top = topY;
};

if (topY > 500) {
topY = 500;
Y.style.top = topY;
};

if (leftX < 1) {
leftX = 0;
Y.style.leftX = leftX;
};

if (leftX > 920) {
leftX = 920;
Y.style.leftX = leftX;
};


***ENTIRE CODE***

<html>
<head>
<style>
#blueBall {
position:relative;
background-color:white;
border:1px solid blue;
width:10px;
height:10px;
border-radius: 100%;
top:0px;
left:0px;
}

#blueCanvas {
position:absolute;
background-color:black;
width:932px;
border:1px solid black;
height:512px;
top:20px;
left:20px;
}

#pixelTrackerTop {
position:absolute;
bottom: 10%;
}

#pixelTrackerLeft {
position:absolute;
bottom: 5%;
}
</style>

<title>Portfolio</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();

if (topY < 1) {
topY = 0;
Y.style.top = topY;
};

stopUp = setTimeout("moveUp()", 1)
topStop();
stopConflictYup();
console.log('moveUp');




};

function moveDown() {

var Y = document.getElementById("blueBall");
topY = topY += 1;
Y.style.top = topY;
masterTrack();

if (topY > 500) {
topY = 500;
Y.style.top = topY;
};

stopDown = setTimeout("moveDown()", 1)
topStop();  
stopConflictYdown();
console.log('moveDown');



};

function moveLeft() {

var X = document.getElementById("blueBall");
leftX = leftX -= 1;
X.style.left = leftX;
masterTrack();

if (leftX < 1) {
leftX = 0;
Y.style.leftX = leftX;
};

stopLeft = setTimeout("moveLeft()", 1)
leftStop();
stopConflictXleft();
console.log('moveLeft');
};

function moveRight() {

var X = document.getElementById("blueBall");
leftX = leftX += 1;
X.style.left = leftX;
masterTrack();

if (leftX > 920) {
leftX = 920;
Y.style.leftX = leftX;
};

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>
相关问题
最新问题