让玩家停在隐形平台前

如何解决让玩家停在隐形平台前

所以我有一个 2d 平台游戏正在开发中，我想为它添加墙壁和平台，但是当我尝试制作一个平台时，如果玩家只是走路，它并不会阻止它前面的玩家向前，而是让它有点像台阶/楼梯。

这是我目前所拥有的：

var ctx,controller,rectangle,loop;

ctx = document.querySelector("canvas").getContext("2d");

// Screen size
ctx.canvas.height = 200;
ctx.canvas.width = 400;

// Position of Player
rectangle = {
  height: 25,jumping: true,width: 25,x: 10,x_veLocity: 0,y: 0,y_veLocity: 0
};

controller = {
  left: false,right: false,up: false,keyListener: function(event) {
    var key_state = (event.type == "keydown") ? true : false;
    switch (event.keyCode) {
      case 37: // Left
        controller.left = key_state;
        break;
      case 39: // Right
        controller.right = key_state;
        break;
      case 38: // Up
        controller.up = key_state;
        break;
    };
  }
};

loop = function() {
  if (controller.up && rectangle.jumping == false) {
    rectangle.y_veLocity -= 25;
    rectangle.jumping = true;

  };

  if (controller.left) {
    rectangle.x_veLocity -= 0.75;
  };

  if (controller.right) {
    rectangle.x_veLocity += 0.75;
  };

  // Gravity
  rectangle.y_veLocity += 1.5;
  rectangle.x += rectangle.x_veLocity;
  rectangle.y += rectangle.y_veLocity;

  // Friction
  rectangle.x_veLocity *= 0.75;
  rectangle.y_veLocity *= 0.75;

  // Floor
  if (rectangle.y > 150 - 25) {
    rectangle.jumping = false;
    rectangle.y = 150 - 25;
    rectangle.y_veLocity = 0;
  };

  // Platform
  if (rectangle.y > 145 - 25 && rectangle.x > 150 - 25) {
    rectangle.jumping = false;
    rectangle.y = 145 - 25;
    rectangle.y_veLocity = 0;
  };

  // Background
  var bg = new Image;
  bg.src = "https://i.imgur.com/He3uld9.png";
  bg.onload = function() {
    ctx.drawImage(bg,0);
  };

  // Player
  var ply = new Image;
  ply.src = "https://i.imgur.com/G4UUkIl.png";
  ply.onload = function() {
    ctx.drawImage(ply,rectangle.x,rectangle.y);
  };

  // Floor
  var fl = new Image;
  fl.src = "https://i.imgur.com/OoKP4Mm.png";
  fl.onload = function() {
    ctx.drawImage(fl,150);
  };

  window.requestAnimationFrame(loop);
};

window.addEventListener("keydown",controller.keyListener);
window.addEventListener("keyup",controller.keyListener);
window.requestAnimationFrame(loop);

<canvas style="border: 1px solid black;"></canvas>

JS 部分下的“平台”注释部分是我当前的平台代码所在的位置。到目前为止，它没有图像或物体供您查看，但如果您玩游戏，它是地板正上方的一个隐形平台。

解决方法

如果您尝试根据您所在的区域在矩形上维护 blockedRight 和 blockedLeft 属性会怎样？例如，我在下面实现了一个 blockedRight 布尔值，其中对于 Platform 区域，我将其转换为 true 并为 Valid Region ，我把它转回false。我也在 controller.right 检查中添加了这个条件检查。

所以对于来的障碍区域，你可以设置一个条件，如果这个人是blockedRight并且它试图跳跃，你将再次将blockedRight设置为false。我假设障碍物将始终由 jumping 处理，除非您的障碍物大于您的跳跃高度，从而进行更多检查。

var ctx,controller,rectangle,loop;

ctx = document.querySelector("canvas").getContext("2d");

// Screen size
ctx.canvas.height = 200;
ctx.canvas.width = 400;

// Position of Player
rectangle = {
  height: 25,jumping: true,width: 25,x: 10,x_velocity: 0,y: 0,y_velocity: 0,blockedRight:false
};

controller = {
  left: false,right: false,up: false,keyListener: function(event) {
    var key_state = (event.type == "keydown") ? true : false;
    switch (event.keyCode) {
      case 37: // Left
        controller.left = key_state;
        break;
      case 39: // Right
        controller.right = key_state;
        break;
      case 38: // Up
        controller.up = key_state;
        break;
    };
  }
};

loop = function() {
  if (controller.up && rectangle.jumping == false) {
    rectangle.y_velocity -= 25;
    rectangle.jumping = true;

  };

  if (controller.left) {
    rectangle.x_velocity -= 0.75;
    
  };

  if (controller.right && !rectangle.blockedRight) {
    rectangle.x_velocity += 0.75;
  };

  // Gravity
  rectangle.y_velocity += 1.5;
  rectangle.x += rectangle.x_velocity;
  rectangle.y += rectangle.y_velocity;

  // Friction
  rectangle.x_velocity *= 0.75;
  rectangle.y_velocity *= 0.75;

  // Floor
  if (rectangle.y > 150 - 25) {
    rectangle.jumping = false;
    rectangle.y = 150 - 25;
    rectangle.y_velocity = 0;
  };

  // Valid ground
   if(rectangle.x <= 150 - 25){
   rectangle.blockedRight = false;
   }
  // Platform
  if (rectangle.y > 145 - 25 && rectangle.x > 150 - 25) {
    rectangle.blockedRight = true;
    rectangle.jumping = false;
    rectangle.y = 145-25;
    rectangle.y_velocity = 0;
  };

  // Background
  var bg = new Image;
  bg.src = "https://i.imgur.com/He3uld9.png";
  bg.onload = function() {
    ctx.drawImage(bg,0);
  };

  // Player
  var ply = new Image;
  ply.src = "https://i.imgur.com/G4UUkIl.png";
  ply.onload = function() {
    ctx.drawImage(ply,rectangle.x,rectangle.y);
  };

  // Floor
  var fl = new Image;
  fl.src = "https://i.imgur.com/OoKP4Mm.png";
  fl.onload = function() {
    ctx.drawImage(fl,150);
  };

  window.requestAnimationFrame(loop);
};

window.addEventListener("keydown",controller.keyListener);
window.addEventListener("keyup",controller.keyListener);
window.requestAnimationFrame(loop);

<canvas style="border: 1px solid black;"></canvas>