文章/答案/技术大牛

发布

社区首页 >问答首页 >JS:如何使盒子在上一次跳转完成后才能再次跳转

问JS:如何使盒子在上一次跳转完成后才能再次跳转
EN

Stack Overflow用户

提问于 2018-08-12 01:37:53

回答 2查看 112关注 0票数 0

我写了一个脚本，当页面被点击时，使灰色框跳转。但是当框还在跳转时，如果我点击页面，仍然可以激活跳转功能。如果我反复点击页面，这个框就像在空中坐立不安。我怎么才能修复它？我希望仅在上一次跳转完成后，才允许该框再次跳转。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="index.js">
  </script>
  <style>
    html, body {
      position:fixed;
      width:100%;
      height:100%;
      margin:0;
    }    
  </style>
</head>
<body id="body">
  <div id="box"></div>
  <div id="Floor"></div>
</body>
</html>

JS代码：

let up = false;
let jumping = false;

function box(x, y, width, height, jHeight) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.jHeight = jHeight;

  boxID = document.getElementById('box');
  boxID.style.bottom = y + 'px';
  boxID.style.left = x + 'px';
  boxID.style.width = width + 'px';
  boxID.style.height = height + 'px';
  boxID.style.backgroundColor = 'grey';
  boxID.style.position = 'fixed';   
}

function Floor(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;

  FloorID = document.getElementById('Floor');
  FloorID.style.bottom = y + 'px';
  FloorID.style.left = x + 'px';
  FloorID.style.width = width + '%';
  FloorID.style.height = height + 'px';
  FloorID.style.backgroundColor = 'black';
  FloorID.style.position = 'fixed';
}

function setup() {
  obj = new box(20, 200, 40, 40, 300);
  Ground = new Floor(0, 0, 100, 200);
}

function jump(up, jumping) {
  if(up && (obj.y<obj.jHeight)) {
    jumping = true;
    obj.y+=5;
    boxID.style.bottom = obj.y +'px';
    timer = setTimeout(function() {
        jump(up, jumping);
    }, 15);
  } else if (up) {
    jumping = true;
    up = false;
    timer = setTimeout(function() {
        jump(up, jumping);
    },15);
  } else if (!up && (obj.y>Ground.height)) {
    jumping = true;
    obj.y-=5;
    boxID.style.bottom = obj.y +'px';
    timer = setTimeout(function() {
        jump(up, jumping);
    },15);
  } else if (obj.y == Ground.height) {
    jumping = false;
  }
}

window.onload = function() {
  setup();

  document.addEventListener("click",function() {
    if (jumping == false) {
      jump(true, true);
    }
  });
};

javascript

html

回答 2

Stack Overflow用户

发布于 2018-08-12 01:59:49

let up = false;
let jumping = false;
function box(x, y, width, height, jHeight){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.jHeight = jHeight;

boxID = document.getElementById('box');
boxID.style.bottom = y + 'px';
boxID.style.left = x + 'px';
boxID.style.width = width + 'px';
boxID.style.height = height + 'px';
boxID.style.backgroundColor = 'grey';
boxID.style.position = 'fixed'; 
}

function Floor(x, y, width, height){
this.x = x;
this.y = y;
this.width = width;
this.height = height;

FloorID = document.getElementById('Floor');
FloorID.style.bottom = y + 'px';
FloorID.style.left = x + 'px';
FloorID.style.width = width + '%';
FloorID.style.height = height + 'px';
FloorID.style.backgroundColor = 'black';
FloorID.style.position = 'fixed';
}

function setup(){
obj = new box(20, 200, 40, 40, 300);
Ground = new Floor(0, 0, 100, 200);
}

function jump(up, jum){
if(up && (obj.y<obj.jHeight)){
    jum = true;
    obj.y+=2;
    boxID.style.bottom = obj.y +'px';
    timer = setTimeout(function(){
        jump(up, jum);
    },15
    );
}else if (up){
    jum = true;
    up = false;
    timer = setTimeout(function(){
        jump(up, jum);
    },15
    );
}else if (!up && (obj.y>Ground.height)){
    jum = true;
    obj.y-=2;
    boxID.style.bottom = obj.y +'px';
    timer = setTimeout(function(){
        jump(up, jum);
    },15
    );
}else if (obj.y == Ground.height){
    jum = false;
}
jumping = jum
}


window.onload = function() {
    setup();

    document.addEventListener("click",function(){
                if(jumping == false){
                    jump(true, true);
                }
            }
        );
};

我假设你的处理是正确的，我只为jump函数添加了jump= jum，并更改了函数变量的名称，因为它没有修改jump全局variable.In事实，当你传递变量名为" jumping“时，我认为实际发生的事情是这样的，而你的全局变量名具有相同的名称，它忽略了它，并使用它自己的局部变量，这就是为什么当我测试它时，下面的条件总是正确的：

 if(jumping == false){
           jump(true, true);
    }

我改变了速度只是为了测试

票数 0

Stack Overflow用户

发布于 2018-08-12 02:39:54

这是因为你使用了不同的跳跃变量。在跳跃函数中，全局跳跃与内部跳跃不同。尽量不要将跳转传递给跳转函数。或将其更改为其他名称变量

function jump(up, unused){ //unused param unused
console.log(jumping);
if(up && (obj.y<obj.jHeight)){
jumping = true;
obj.y+=5;
boxID.style.bottom = obj.y +'px';
timer = setTimeout(function(){
    jump(up, jumping);
},15
);
}else if (up){
jumping = true;
up = false;
timer = setTimeout(function(){
    jump(up, jumping);
},15
);
}else if (!up && (obj.y>Ground.height)){
jumping = true;
obj.y-=5;
boxID.style.bottom = obj.y +'px';
timer = setTimeout(function(){
    jump(up, jumping);
},15
);
}else if (obj.y == Ground.height){
jumping = false;
}
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51802197

复制

相似问题

问JS:如何使盒子在上一次跳转完成后才能再次跳转
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS:如何使盒子在上一次跳转完成后才能再次跳转EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS:如何使盒子在上一次跳转完成后才能再次跳转
EN