在 JavaScript 中阻止角色在半空中跳跃

我正在用javascript创建一个平台游戏，我正在它上面制作一个重力系统。发生的情况是，当玩家按下向上箭头键时，重力会降低。问题是用户可以多次按下向上箭头并在已经跳跃的同时跳跃。有什么办法可以解决这个问题吗？这是我的代码：

        <!DOCTYPE>
<html>
<head>
<style>
canvas {
  border: 1px solid #000000;
  background-color: rgb(0, 200, 200);
}
</style>
</head>
<body onload = "startGame()">
<canvas id="myCanvas" width="750" height="300">
<script>
var myGamePiece;
var floor;
 function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 230);
  floor = new component(750, 10, "green", 0, 260);
}
var myGameArea = {
  canvas : document.getElementById('myCanvas'),
  start : function() {
      this.canvas.width = 480;
      this.canvas.height = 270;
      this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
      this.interval = setInterval(updateGameArea, 20);
      window.addEventListener('keydown', function (e) {
          myGameArea.keys = (myGameArea.keys || []);
          myGameArea.keys[e.keyCode] = (e.type == "keydown");
      })
      window.addEventListener('keyup', function (e) {
          myGameArea.keys[e.keyCode] = (e.type == "keydown");
      })
      },
      clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
      }
      function component(width, height, color, x, y) {
        this.gamearea = myGameArea;
     this.width = width;
     this.height = height;
     this.speedX = 0;
     this.speedY = 0;
     this.gravity = 0.05;
     this.gravitySpeed = 0;
     this.x = x;
     this.y = y;
     this.update = function() {
      ctx = myGameArea.context;
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
      this.gravitySpeed += this.gravity;
      this.x += this.speedX;
      this.y += this.speedY + this.gravitySpeed;
      this.hitBottom();
    }
  this.hitBottom = function() {
     var rockbottom = myGameArea.canvas.height - this.height - 10;
     if (this.y > rockbottom) {
     this.y = rockbottom;
     this.gravitySpeed = 0;
 }
}
}
 function updateGameArea() {
  myGameArea.clear();
  floor.update();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.keys && myGameArea.keys[37]) {
    myGamePiece.speedX = -2.5;
   }
  if (myGameArea.keys && myGameArea.keys[39]) {
    myGamePiece.speedX = 2.5;   
   }
  if (myGameArea.keys && myGameArea.keys[38]) {
    accelerate(-0.2)
  } else{
    accelerate(0.1)
  }
  if (myGameArea.keys && myGameArea.keys[40]) {
    myGamePiece.speedY = 2.5;
   }
  myGamePiece.newPos();
  myGamePiece.update();
 }
  function accelerate(n) {
   myGamePiece.gravity = n;
 }
</script>
</canvas>
</body>
</html>

你只需要在加速
之前检查myGamePiece.y >=230我只更改了您的代码中的两件事，并且工作正常
if (myGameArea.keys && myGameArea.keys[40] && myGamePiece.y >= 230) 最后一个 if 函数块updateGameArea()
倒数第二，如果阻止您的updateGameArea()

if (myGameArea.keys && myGameArea.keys[38]) {
     if(myGamePiece.y >= 230) accelerate(-0.2)
  }

var myGamePiece;
var floor;
 function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 230);
  floor = new component(750, 10, "green", 0, 260);
}
var myGameArea = {
  canvas : document.getElementById('myCanvas'),
  start : function() {
      this.canvas.width = 480;
      this.canvas.height = 270;
      this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
      this.interval = setInterval(updateGameArea, 20);
      window.addEventListener('keydown', function (e) {
          myGameArea.keys = (myGameArea.keys || []);
          myGameArea.keys[e.keyCode] = (e.type == "keydown");
      })
      window.addEventListener('keyup', function (e) {
          myGameArea.keys[e.keyCode] = (e.type == "keydown");
      })
      },
      clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
      }
      function component(width, height, color, x, y) {
        this.gamearea = myGameArea;
     this.width = width;
     this.height = height;
     this.speedX = 0;
     this.speedY = 0;
     this.gravity = 0.05;
     this.gravitySpeed = 0;
     this.x = x;
     this.y = y;
     this.update = function() {
      ctx = myGameArea.context;
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
      this.gravitySpeed += this.gravity;
      this.x += this.speedX;
      this.y += this.speedY + this.gravitySpeed;
      this.hitBottom();
    }
  this.hitBottom = function() {
     var rockbottom = myGameArea.canvas.height - this.height - 10;
     if (this.y > rockbottom) {
     this.y = rockbottom;
     this.gravitySpeed = 0;
 }
}
}
 function updateGameArea() {
  myGameArea.clear();
  floor.update();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.keys && myGameArea.keys[37]) {
    myGamePiece.speedX = -2.5;
   }
  if (myGameArea.keys && myGameArea.keys[39]) {
    myGamePiece.speedX = 2.5;   
   }
  if (myGameArea.keys && myGameArea.keys[38]) {
     if(myGamePiece.y >= 230) accelerate(-0.2)
  } else{
    accelerate(0.1)
  }
  if (myGameArea.keys && myGameArea.keys[40] && myGamePiece.y >= 230) {
    myGamePiece.speedY = 2.5;
   }
  myGamePiece.newPos();
  myGamePiece.update();
 }
  function accelerate(n) {
   myGamePiece.gravity = n;
 }

<body onload = "startGame()">
<canvas id="myCanvas" width="750" height="300">

希望对你有帮助

相关内容

最新更新

热门标签：