停止字符在javascript在半空跳跃[关闭]

问题描述 投票：-1回答：1

我创建一个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>
javascript game-development
1个回答
1
投票

你只需要accelarting前检查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">

希望能帮助到你

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.