游戏开发技术问询：实现死亡提示与myBlockPad碰撞阻挡功能

1. 实现"You died"文本提示 #

要在Canvas中显示死亡提示，你可以直接利用Canvas上下文的fillText()方法，在角色触发死亡条件（比如碰到障碍物）时绘制文本。具体步骤如下：

• 在游戏循环里先检测角色与障碍物的碰撞，一旦碰撞就停止游戏循环。
• 通过ctx.font设置文本的字体样式，ctx.fillStyle设置文本颜色，ctx.textAlign让文本居中显示，最后用ctx.fillText()把文本绘制到Canvas的中央位置。

关键代码片段：

if (myGamePiece.crashWith(myObstacle)) {
  myGameArea.stop();
  ctx = myGameArea.context;
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "center";
  ctx.fillText("You died", myGameArea.canvas.width/2, myGameArea.canvas.height/2);
  return;
}

2. 让myBlockPad阻挡角色移动 #

要实现"只阻挡角色穿过，但不限制其他区域移动"，核心思路是预判角色的下一个位置，只有当该位置不会与myBlockPad碰撞时，才允许角色移动：

• 在更新角色实际位置前，先计算出角色移动后的临时位置（nextX和nextY）。
• 创建一个临时的角色组件对象，用这个临时对象检测与myBlockPad的碰撞情况。
• 如果没有碰撞，就调用newPos()更新角色的实际位置；如果碰撞，就跳过位置更新，角色自然就不会穿过BlockPad了。

关键代码片段：

// 计算预判的下一个位置
var nextX = myGamePiece.x + myGamePiece.speedX;
var nextY = myGamePiece.y + myGamePiece.speedY;
// 创建临时组件用于碰撞检测
var tempPiece = new component(myGamePiece.width, myGamePiece.height, myGamePiece.color, nextX, nextY);
// 只有不碰撞才更新位置
if (!tempPiece.crashWith(myBlockPad)) {
  myGamePiece.newPos();
}

完整可运行代码示例 #

// 游戏区域核心对象
var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    // 监听键盘事件控制角色移动
    window.addEventListener('keydown', function (e) {
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = true;
    });
    window.addEventListener('keyup', function (e) {
      myGameArea.keys[e.keyCode] = false;
    });
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop : function() {
    clearInterval(this.interval);
  }
};

// 游戏组件构造函数（角色、障碍物、阻挡垫通用）
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
  };
  // 矩形碰撞检测逻辑
  this.crashWith = function(otherobj) {
    var myleft = this.x;
    var myright = this.x + this.width;
    var mytop = this.y;
    var mybottom = this.y + this.height;
    var otherleft = otherobj.x;
    var otherright = otherobj.x + otherobj.width;
    var othertop = otherobj.y;
    var otherbottom = otherobj.y + otherobj.height;
    return !(mybottom < othertop || mytop > otherbottom || myright < otherleft || myleft > otherright);
  };
}

var myGamePiece; 
var myObstacle; 
var myBlockPad;

function startGame() {
  myGameArea.start();
  myGamePiece = new component(40, 40, "#00ff00ff", 50, 140);
  myObstacle = new component(10, 200, "#cf0000ff", 300, 120);
  myBlockPad = new component(40, 80, "#7e3f00", 0, 100); // 补全阻挡垫的坐标示例
}

function updateGameArea() {
  myGameArea.clear();

  // 检测死亡碰撞：碰到障碍物就显示死亡提示并停止游戏
  if (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
    ctx = myGameArea.context;
    ctx.font = "30px Arial";
    ctx.fillStyle = "red";
    ctx.textAlign = "center";
    ctx.fillText("You died", myGameArea.canvas.width/2, myGameArea.canvas.height/2);
    return;
  }

  // 处理键盘控制的角色移动方向
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -2;} // 左箭头
  if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 2;}  // 右箭头
  if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -2;} // 上箭头
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 2;}  // 下箭头

  // 预判位置并检测与阻挡垫的碰撞，避免角色穿过
  var nextX = myGamePiece.x + myGamePiece.speedX;
  var nextY = myGamePiece.y + myGamePiece.speedY;
  var tempPiece = new component(myGamePiece.width, myGamePiece.height, myGamePiece.color, nextX, nextY);
  
  if (!tempPiece.crashWith(myBlockPad)) {
    myGamePiece.newPos();
  }

  // 更新所有组件的显示
  myGamePiece.update();
  myObstacle.update();
  myBlockPad.update();
}

// 启动游戏
startGame();

内容的提问来源于stack exchange，提问作者villager1