HTML5画布游戏中的重力正在破坏我的碰撞

Question

我正在开发的画布游戏中有一个错误。问题是当玩家触摸障碍物时，碰撞和重力使玩家看起来不稳定并且看起来很奇怪。

这是我的代码：

var canvas = document.getElementById("c1"),
  ctx = canvas.getContext("2d"),
  width = 400,
  height = 400,
  player = {
    x: 200,
    y: 200,
    width: 10,
    height: 10
  },
  keys = [];

canvas.width = width;
canvas.height = height;

var block = {
  width: 25,
  height: 25,
  x: 300,
  y: 300
};


function update() {

  if (keys[38] || keys[32]) {
    player.y -= 5;
  }

  if (keys[39]) {
    player.x += 5;
  }
  if (keys[37]) {
    player.x -= 5;
  }
  if (keys[40]) {
    player.y += 5;
  }


  if (player.width + player.x > 400) {
    player.x -= 5;
  }

  if (player.width + player.x < 10) {
    player.x += 5;
  }

  if (player.height + player.y < 10) {
    player.y += 5;
  }

  if (player.height + player.y > 400) {
    player.y -= 5;
  }

  if (player.x < block.x + block.width && player.x + player.width >
    block.x &&
    player.y < block.y + block.height && player.y + player.height >
    block.y) {
    console.log("The objects are touching");
    player.y = player.y - 7;
  }

  ctx.beginPath();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "red";
  ctx.fillRect(player.x, player.y, player.width, player.height);

  ctx.beginPath();
  ctx.fillStyle = "blue";
  ctx.fillRect(block.x, block.y, block.width, block.height);

  function gravity() {
    if (player.y < 390) {

      player.y = player.y + 2;

    }
  }

  requestAnimationFrame(update);
  requestAnimationFrame(gravity);
}

document.body.addEventListener("keydown", function(e) {
  keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e) {
  keys[e.keyCode] = false;
});

window.addEventListener("load", function() {
  update();
});

canvas {
  border: 1px solid black;
}

body {
  margin 0;
}

<canvas id="c1" width="400" height="400"></canvas>

Answer 1

更改：

• 更改了触摸逻辑，在触摸时将播放器放置在框的顶部，将y偏移播放器的高度，将播放器坐在框的顶部
• 添加了一个标记wasTouching，以停止对控制台的持续记录（因此控制台不会受到轰炸，并且重力不会试图将播放器放在盒子上时将其推下）
• 触摸时停止重力
• 更改了逻辑以检测触摸player.y + player.height >= block.y而不是player.y + player.height > block.y-因为玩家在触摸时位于块的顶部，而不是块内的一个像素

var canvas = document.getElementById("c1"),
  ctx = canvas.getContext("2d"),
  width = 400,
  height = 400,
  player = {
    x: 200,
    y: 200,
    width: 10,
    height: 10
  },
  keys = [];

canvas.width = width;
canvas.height = height;

var block = {
  width: 25,
  height: 25,
  x: 300,
  y: 300
};

var wasTouching = false;

function update() {

  if (keys[38] || keys[32]) {
    player.y -= 5;
  }

  if (keys[39]) {
    player.x += 5;
  }
  if (keys[37]) {
    player.x -= 5;
  }
  if (keys[40]) {
    player.y += 5;
  }


  if (player.width + player.x > 400) {
    player.x -= 5;
  }

  if (player.width + player.x < 10) {
    player.x += 5;
  }

  if (player.height + player.y < 10) {
    player.y += 5;
  }

  if (player.height + player.y > 400) {
    player.y -= 5;
  }

  if (player.x < block.x + block.width && player.x + player.width > block.x &&
      player.y < block.y + block.height && player.y + player.height >= block.y) {
    if(!wasTouching) {
      console.log("The objects are touching");
    }
    player.y = block.y - player.height;
    wasTouching = true;
  } else {
    wasTouching = false;
  }

  ctx.beginPath();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "red";
  ctx.fillRect(player.x, player.y, player.width, player.height);

  ctx.beginPath();
  ctx.fillStyle = "blue";
  ctx.fillRect(block.x, block.y, block.width, block.height);

  function gravity() {
    if (player.y < 390 && !wasTouching) {

      player.y = player.y + 2;

    }
  }

  requestAnimationFrame(update);
  requestAnimationFrame(gravity);
}

document.body.addEventListener("keydown", function(e) {
  keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e) {
  keys[e.keyCode] = false;
});

window.addEventListener("load", function() {
  update();
});

canvas {
  border: 1px solid black;
}

body {
  margin 0;
}

<canvas id="c1" width="400" height="400"></canvas>