Question

好的，所以我正在为我的JavaScript类制作一个两人游戏，吃豆人游戏，但我在让吃豆人与墙壁碰撞方面遇到麻烦。沿着画布外部排列的四堵墙工作得很好，因此他留在其中，但是他穿过画布内部构成迷宫的所有墙对象。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var blockSize = 12;
var widthInBlocks = width / blockSize;
var heightInBlocks = height / blockSize;
var score = 0;
var drawBorder = function () {
  ctx.fillStyle = "Blue";
  ctx.fillRect(0, 0, width, blockSize);
  ctx.fillRect(0, height - blockSize, width, blockSize);
  ctx.fillRect(0, 0, blockSize, height);
  ctx.fillRect(width - blockSize, 0, blockSize, height);
  drawWalls();
};
var Wall = function(x, y, width, height)
{
    ctx.fillRect(x, y, width, height);
}
var drawWalls = function()
{
  ctx.fillStyle = "Blue";
  //scoreboards
  var wall1 = new Wall(0, 60, 650, 12);
  var wall2 = new Wall(220, 0, 12, 60);
  var wall3 = new Wall(430, 0, 12, 60);
  //verticle walls
  var wall = new Wall(36, 96, 12, 216);
  var wall4 = new Wall(36, 372, 12, 240);
  var wall5 = new Wall(600, 372, 12, 240);
  var wall6 = new Wall(600, 96, 12, 216);
  var wall7 = new Wall(300, 132, 12, 180);
  var wall8 = new Wall(336, 132, 12, 180);
  var wall9 = new Wall(300, 372, 12, 204);
  var wall10 = new Wall(336, 372, 12, 204);
  var wall11 = new Wall(168, 372, 12, 204);
  var wall12 = new Wall(468, 372, 12, 204);
  var wall13 = new Wall(468, 132, 12, 180);
  var wall14 = new Wall(168, 132, 12, 180);
  //horizontal walls
  var wall15 = new Wall(72, 96, 240, 12);
  var wall16 = new Wall(72, 336, 240, 12);
  var wall17 = new Wall(336, 96, 240, 12);
  var wall18 = new Wall(336, 336, 240, 12);
  var wall19 = new Wall(72, 600, 240, 12);
  var wall20 = new Wall(336, 600, 240, 12);
  var wall21 = new Wall(72, 216, 204, 12);
  var wall22 = new Wall(72, 468, 204, 12);
  var wall23 = new Wall(372, 216, 204, 12);
  var wall24 = new Wall(372, 468, 204, 12);
  //square walls 1
  var wall25 = new Wall(72, 132, 84, 72);
  var wall26 = new Wall(192, 132, 84, 72);
  var wall27 = new Wall(72, 240, 84, 72);
  var wall28 = new Wall(192, 240, 84, 72);
  //square walls 2
  var wall29 = new Wall(372, 132, 84, 72);
  var wall30 = new Wall(492, 132, 84, 72);
  var wall31 = new Wall(372, 240, 84, 72);
  var wall32 = new Wall(492, 240, 84, 72);
  //square walls 3
  var wall33 = new Wall(72, 372, 84, 84);
  var wall34 = new Wall(192, 372, 84, 84);
  var wall35 = new Wall(72, 492, 84, 84);
  var wall36 = new Wall(192, 492, 84, 84);
  //square walls 4
  var wall37 = new Wall(372, 372, 84, 84);
  var wall38 = new Wall(492, 372, 84, 84);
  var wall39 = new Wall(372, 492, 84, 84);
  var wall40 = new Wall(492, 492, 84, 84);
};
Pac.prototype.checkCollision = function (head) {
  var leftCollision = (head.col === 0);
  var topCollision = (head.row === 0);
  var rightCollision = (head.col === widthInBlocks - 1);
  var bottomCollision = (head.row === heightInBlocks - 1);
  var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;

  return wallCollision;
};

对不起，如果我使用的格式不正确。我是新来的人，这是我的第一篇文章。

Answer 1

就像一般建议一样，对于任何类型的碰撞系统，您都不想将物理代码绑定到图形代码。因此，您不应测量/除以每个块的像素数。您应该将块的数量定义为整数，然后将pac男人在块中的整体或分数位置与此进行比较。一个不太明显的原因是Javascript并不总是完美地执行浮点计算。这可能是您遇到的问题。在任何情况下，如果您以块为单位的宽度不是整数，或者头部的位置不是整数，则此代码将无效。您确实要检查头部是否在一个块内，如果是，请将其放回先前的位置。不只是它是否正好位于块的边缘。

编写此代码的更好方法是在其块位置定义墙，在其块位置定义pacman，然后在绘制调用期间，将它们乘以希望显示的像素数量。。然后检查吃豆人的边界是否在任何墙块内。构造每个帧的典型方法是首先获取用户输入，检查物理状态，如果继续进行动作，然后移动物理状态，然后绘制场景。

使用JavaScript碰撞画布中的两个对象

1 个答案: