Question

我正在用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>

Answer 1

在加速之前，您只需要检查myGamePiece.y >=230
我只更改了代码中的两件事，效果很好
if (myGameArea.keys && myGameArea.keys[40] && myGamePiece.y >= 230)在功能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">

希望有帮助

在javascript中停止角色在空中跳跃

1 个答案: