Javascript函数在调用时不更改html div的css_Javascript_Setinterval

Javascript函数在调用时不更改html div的css

javascript

Javascript函数在调用时不更改html div的css,javascript,setinterval,Javascript,Setinterval,我试图为我的乒乓球游戏创建一个函数，使球在一个框架内移动。当我调用该函数时，我使用一个名为setStyle（）的函数每100毫秒更改一次球的位置在我看到它不起作用后，我记录了控制台的左侧和顶部位置，以发现函数正在被调用，但它所在的像素数量是相同的 //Javascript function ballMove(){ var x = 5; var y = 5; var maxHeight = getStyle('frame', 'top') + getStyle('frame', '

我试图为我的乒乓球游戏创建一个函数，使球在一个框架内移动。当我调用该函数时，我使用一个名为setStyle（）的函数每100毫秒更改一次球的位置

在我看到它不起作用后，我记录了控制台的左侧和顶部位置，以发现函数正在被调用，但它所在的像素数量是相同的

//Javascript

function ballMove(){
  var x = 5;
  var y = 5;
  var maxHeight = getStyle('frame', 'top') + getStyle('frame', 'height');
  var maxWidth = getStyle('frame', 'left') + getStyle('frame', 'width');
  var ballLeft = getStyle('ball', 'left');
  var ballTop = getStyle('ball', 'top');
  var minLeft = getStyle('frame', 'left');
  var minTop = getStyle('frame', 'top');
  if(ballTop >= minTop){
    setStyle('ball', 'top', (ballTop + y) + "px");
  }
  else if(ballTop <= maxHeight){
    setStyle('ball', 'top', (ballTop - y) + "px");
  }
  if(ballLeft >= minLeft){
    setStyle('ball', 'left', (ballLeft + x) + "px");
  }
  else if(ballLeft <= maxWidth){
    setStyle('ball', 'left', (ballLeft - x) + "px");
  }
  console.log(ballLeft);
  console.log(ballTop);
}
function startIntervals(){
  setInterval(ballMove, 100);
  console.log("starting...");
}

还有html

<body onload="startIntervals();">
    <div id="main-div">
      <div id="title">Pong</div>
      <div id="frame">
        <div id="paddlewasd">
          </div>
          <div id="paddlearrow">
            </div>
            <div id="ball">
              </div>
        </div>
        </div>

庞

我原以为球会移动，但是函数会被调用，左边和上面的位置保持不变。

虽然它很大程度上取决于未发布的代码的其余部分，但下面是getStyle和setStyle的实现，以及css对#frame的定义允许球每100毫秒左右对角移动5像素

//Javascript

function ballMove(){
  var x = 5;
  var y = 5;
  var maxHeight = getStyle('frame', 'top') + getStyle('frame', 'height');
  var maxWidth = getStyle('frame', 'left') + getStyle('frame', 'width');
  var ballLeft = getStyle('ball', 'left');
  var ballTop = getStyle('ball', 'top');
  var minLeft = getStyle('frame', 'left');
  var minTop = getStyle('frame', 'top');
  if(ballTop >= minTop){
    setStyle('ball', 'top', (ballTop + y) + "px");
  }
  else if(ballTop <= maxHeight){
    setStyle('ball', 'top', (ballTop - y) + "px");
  }
  if(ballLeft >= minLeft){
    setStyle('ball', 'left', (ballLeft + x) + "px");
  }
  else if(ballLeft <= maxWidth){
    setStyle('ball', 'left', (ballLeft - x) + "px");
  }
  console.log(ballLeft);
  console.log(ballTop);
}
function startIntervals(){
  setInterval(ballMove, 100);
  console.log("starting...");
}

函数getStyle（id，style）{
var元素=document.getElementById（id）；
var computedStyle=window.getComputedStyle（元素）；
var selectedStyle=computedStyle[style]；
//检查样式值是否与“像素”字符串格式匹配，如果它确实提取数字部分并将其解析为整数
var pixelTokens=/（[\d]*）px$/.exec（selectedStyle）；
if（像素标记）{
返回parseInt（像素标记[1]）；
}
返回selectedStyle；
}
函数setStyle（id、样式、值）{
var元素=document.getElementById（id）；
返回元素。style[style]=值；
}
函数ballMove（）{
var x=5；
变量y=5；
var maxHeight=getStyle（'frame'，'top'）+getStyle（'frame'，'height'）；
var maxWidth=getStyle（'frame'，'left'）+getStyle（'frame'，'width'）；
var ballLeft=getStyle（'ball'，'left'）；
var ballTop=getStyle（'ball'，'top'）；
var minLeft=getStyle（'frame'，'left'）；
var minTop=getStyle（'frame'，'top'）；
如果（球顶>=minTop）{
设置样式（“球”、“顶”、“球顶+y）+“px”）；
}else if（ballTop=minLeft）{
设置样式（'ball'，'left'，（ballLeft+x）+“px”）；
}else if（ballLeft）请正确格式化您问题中的代码。您能同时包含html和css吗？您使用的getStyle（）setStyle（）库是什么？您发布的代码似乎没有问题-因此可能错误位于您未共享的位中。请尝试包含一个工作示例（包括get/setStyle的函数定义）。什么是getStyle和setStyle？什么是getStyle和setStyle参数？什么是getStyle和setStyle返回？什么是getStyle和setStyle