让玩家停在隐形平台前

Question

所以我正在制作一个 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, 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, 0, 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 部分下的 Platform 注释部分是我的平台代码当前所在的位置。到目前为止，它没有图像或物体供您查看，但如果您玩游戏，它就是地板上方的一个隐形平台。

Answer 1

如果您尝试根据您所在的区域在矩形上维护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, 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, 0, 150);
  };

  window.requestAnimationFrame(loop);
};

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

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