javascript - Sprite 碰撞的单元格中心

Question

我正在使用 Canvas 在 JavaScript 中开发游戏。相关 Sprite 水平或垂直移动(但不能同时移动)。游戏区域被划分为 16 x16 像素单元(与 Sprite 大小相同)以进行碰撞。我从左上角(不是中心)绘制 Sprite 。我已经弄清楚如何检测 Sprite 是否跨越了新单元格。

var modX = sprite.x % 16;
var modY = sprite.y % 16; 
if (modX == 0 && modY == 0) 
{
    // Sprite has entered new cell. Do appropriate functions
}

我现在需要计算出 Sprite 何时位于单元格中间，这让我有点头痛，因为它与上面的不一样并添加了半个单元格宽度....我希望有人也许可以帮助解决一些伪代码。 请记住:我是一名艺术家，试图使用 javascript 来提高自己 - 所以请对我宽容一点，好吗。

Answer 1

你已经非常接近了，位于单元格中间仅意味着余数为 7:

var modX = sprite.x % 16;
var modY = sprite.y % 16; 
if (modX == 7 || modY == 7) 
{
   // in the middle of a cell 
}

但如果可以的话，可能有两件事需要改变:
1- 处理网格偏移，以便您可以决定游戏布局。
2-记住你刚来到的牢房中心不要做两次事情

// somewhere in the init of the game ...//
var gridX = 0, gridY = 0;
var lastCenterCol = -1, lastCenterRow = -1;

// in your game loop //
var modX   = (sprite.x - gridX )% 16;
var modY   = (sprite.y - gridY )% 16;
var column = (sprite.x - gridX  - modX) / 16;
var row    = (sprite.y- gridY - modY) / 16;

if ( (column!=lastCenterCol) && (row!=lastCenterRow) &&  ( (modX == 7) || (modY == 7) ) ) 
{
  lastCenterCol=column;
  lastCenterRow=row;
  // Sprite just entered this cell center.
 }