Гравитация в холсте 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>