个人中心
gpt4 book ai didi

javascript - 如何使用JavaScript控制div的移动

转载 作者：行者123 更新时间：2023-11-28 05:09:06 24 4
gpt4 key购买 nike

下面是我的代码。黑色矩形 CSS Canvas 内有一个蓝色轮廓的球，内部为白色。我希望使用箭头键向左、向右、向上和向下移动这个球，而不能将球推过黑色空间的边界。如果你只在一个连续的方向上点击一次箭头键，它就会完美地工作，但如果你按住任何一个箭头键，它就会超出我设置的边界，以阻止它越过黑色空间。函数“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>

最佳答案

OK 想出了一种方法来绕过计算机逻辑，重新运行代码，迫使它离开黑色空间。代码如下(先贴出修改后贴出整个代码页)

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

关于javascript - 如何使用JavaScript控制div的移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39670299/

24 4 0
文章推荐： c++ - 带 DWORD 的 DeviceIoControl
文章推荐： c++ - 使用 Arduino 将 GUI 添加到 QT 项目
文章推荐： c++ - 为什么我们需要模板 因为我们有类初始化
文章推荐： c++ - 为已知类型扩展 wxAny [wxWidgets]
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com