Javascript JS：如何使长方体仅在上一次跳转完成后再次跳转_Javascript_Html

Javascript JS：如何使长方体仅在上一次跳转完成后再次跳转

javascript html

Javascript JS：如何使长方体仅在上一次跳转完成后再次跳转,javascript,html,Javascript,Html,我写了一个脚本，当点击页面时，灰盒会跳转。但当框仍在跳转时，如果我单击页面，跳转功能仍然可以激活。如果我反复点击页面，框就像在空中坐立不安。我怎样才能修好它？我希望仅在上一次跳转完成后，才允许长方体再次跳转 HTML代码： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

我写了一个脚本，当点击页面时，灰盒会跳转。但当框仍在跳转时，如果我单击页面，跳转功能仍然可以激活。如果我反复点击页面，框就像在空中坐立不安。我怎样才能修好它？我希望仅在上一次跳转完成后，才允许长方体再次跳转

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>


html，正文{
位置：固定；
宽度：100%；
身高：100%；
保证金：0；
}

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);
    }
  });
};

let-up=false；
让跳跃=假；
功能盒（x、y、宽度、高度、高度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
this.jHeight=jHeight；
boxID=document.getElementById（'box'）；
boxID.style.bottom=y+'px'；
boxID.style.left=x+'px'；
boxID.style.width=宽度+px；
boxID.style.height=高度+px；
boxID.style.backgroundColor='灰色'；
boxID.style.position='fixed'；
}
功能楼层（x、y、宽度、高度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
FloorID=document.getElementById（'Floor'）；
floorrid.style.bottom=y+'px'；
floorrid.style.left=x+'px'；
Floorrid.style.width=宽度+'%'；
floorrid.style.height=高度+px；
floorrid.style.backgroundColor='黑色'；
floorrid.style.position='fixed'；
}
函数设置（）{
obj=新盒子（20,200,40,40,300）；
地面=新楼层（0,0,100,200）；
}
功能跳跃（向上，跳跃）{
if（向上和（目标高度））{
跳跃=正确；
对象y-=5；
boxID.style.bottom=obj.y+'px'；
计时器=设置超时（函数（）{
跳（起来，跳）；
},15);
}否则，如果（对象y==地面高度）{
跳跃=错误；
}
}
window.onload=函数（）{
设置（）；
document.addEventListener（“单击”，函数（）{
如果（跳跃==错误）{
跳转（真，真）；
}
});
};

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

这是因为您使用了不同的跳跃变量。在跳跃功能上，整体跳跃与内部跳跃不同。尽量不要越过跳跃功能。或者将其更改为其他名称变量

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

函数跳转（向上，未使用）{//unused参数unused
控制台。日志（跳跃）；
if（向上和（目标高度））{
跳跃=正确；
对象y-=5；
boxID.style.bottom=obj.y+'px'；
计时器=设置超时（函数（）{
跳（起来，跳）；
},15
);
}否则，如果（对象y==地面高度）{
跳跃=错误；
}
}

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

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