html 5 canvas 平台风格游戏的反弹物理答案

【问题标题】：bounce physics for html 5 canvas platformer style gamehtml 5 canvas 平台风格游戏的反弹物理
【发布时间】：2020-01-29 04:16:11
【问题描述】：

我正在创建一个平台风格的游戏并设置了一些物理。我想让它在玩家跳跃和跌落时反弹并停止。请问，有人可以帮忙吗？谢谢。 Jsfiddle 链接到我的代码：https://jsfiddle.net/fezzie07/nfbv5oLd/153/#&togetherjs=HH8otvf7hA

html：

<html>

<body>
 <canvas id="c" width="400" height="200"></canvas>
</body>

</html>

css：

#c {
   background-color: #202020;
   border-style: dashed;
   border-color: black;
   border-width: 1px;
}

javascript：

 var fps, canvas, context, controller, gamePiece, gameEnemy, loop;

fps = 60;

canvas = document.getElementById("c");

context = canvas.getContext("2d");

controller = {

  left: false,
  right: false,
  up: false,
  keyListener: function(event) {

    var key_state = (event.type == "keydown") ? true : false;

    switch (event.keyCode) {

      case 37: // left key
        controller.left = key_state;
        break;
      case 38: // up key
        controller.up = key_state;
        break;
      case 39: // right key
        controller.right = key_state;
        break;

    }

  }

};

gamePiece = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  w: 10,
  h: 10,
  yVel: 0,
  xVel: 0,
  jumping: false,
}

gameEnemy = {

}

loop = function() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  draw();
  move();
  collision();
  if (controller.up && gamePiece.jumping == false) {
    gamePiece.yVel -= 15;
    gamePiece.jumping = true;

  }
  if (controller.left) {
    gamePiece.xVel -= 0.5;
  }
  if(controller.right) {
    gamePiece.xVel += 0.5;
  }
}

function draw() {
  context.fillStyle = "#afeeee"
  context.fillRect(gamePiece.x, gamePiece.y, gamePiece.w, gamePiece.h);
  context.strokeStyle = "#f08080";
  context.beginPath();
  context.moveTo(0, canvas.height - 16);
  context.lineTo(canvas.width, canvas.height - 16);
  context.stroke();
}

function move() {
  gamePiece.yVel += 1.5;
  gamePiece.y += gamePiece.yVel;
  gamePiece.x += gamePiece.xVel;
  gamePiece.xVel *= 0.9;
  gamePiece.yVel *= 0.9;
}

function collision() {
  if (gamePiece.y > canvas.height - 16 - gamePiece.h) {
    gamePiece.y = canvas.height - 16 - gamePiece.h;
    gamePiece.yVel = 0;
    gamePiece.jumping = false;
  }
}

window.setInterval(loop, 1000 / fps);
window.addEventListener("keydown", controller.keyListener)
window.addEventListener("keyup", controller.keyListener);

【问题讨论】：

另外，如果你能以任何方式改进我的代码，请告诉我
stackoverflow.com/questions/29982228/… 我很久以前就写了这个答案，它有一个完整的弹跳球代码，看看它是否有帮助......此外，SO 上可能还有更多答案可供您使用。
我到处检查过，但在 SO 上找不到对我有帮助的答案。我会检查链接。谢谢
这没有帮助，因为我希望它在 1 或 2 次反弹后停止
计算反弹次数并在需要时将速度设置为零。

标签： javascript html css html5-canvas

【解决方案1】：

在函数collision()中，而不是做

 gamePiece.yVel = 0;

你可以这样做

gamePiece.yVel = -gamePiece.yVel;

如果太有弹性，乘以阻尼值，

var yDamp = 0.5;
gamePiece.yVel = -gamePiece.yVel * yDamp;

最后，防止弹跳时跳跃

gamePiece.jumping = gamePiece.yVel > 1;

【讨论】：