让玩家停在隐形平台前

Question

所以我有一个 2d 平台游戏正在开发中，我想给它添加墙和平台，但是当我尝试制作一个平台时，它不会阻止前面的玩家，如果他们只是向前走，反而让它有点像 step/stairs.

这是我目前的情况：

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 部分下的平台注释部分是我当前的平台代码所在的位置。截至目前，它没有图像或物体供您查看，但如果您玩游戏，它是一个位于地板上方的隐形平台。

Answer 1

如果您尝试根据您所在的区域在矩形上维护 blockedRight 和 blockedLeft 属性怎么办？例如，我在下面实现了一个 blockedRight 布尔值，对于 Platform 区域，我把它变成 true 并且对于 Valid Region ，我把它转回 false 。我还添加了这个条件检查 controller.right check as well.

所以对于出现的障碍区域，你可以设定一个条件，如果这个人是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>

让玩家停在隐形平台前

Make player stop in front of invisible platform

html

javascript

canvas

game-physics

html5-canvas