Question

我正在使用Canvas开发JavaScript游戏。有问题的精灵水平或垂直移动（但不是两个）。游戏区域被划分为16 x16像素单元（与精灵的大小相同）以进行碰撞。我从左上角（不是中心）画出精灵。我已经研究了如何检测精灵是否越过了一个新细胞。

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

我现在需要解决当精灵位于一个单元格的中间时，这让我有点头疼，因为它与上面的不一样并且增加了一半的单元格宽度....我希望有人也许可以帮助一些伪代码。请记住：我是一名艺术家，试图通过使用javascript来改善自己 - 所以请放轻松，好吧。

Answer 1

从头顶我会像你一样做

var modX1 = sprite.x%8;
var modY1 = sprite.y%8;

var modX2 = sprite.x%16;
var modY2 = sprite.y%16;

if ((modX1 == 0) && (modY1 == 0) && (modX2 != 0) && (modY2 != 0))
{
    //sprite is in the center of the tile...
}

只需检查它是否除以8，即单元格的一半，然后确保它不会除以16，这是单元格的边缘。

Answer 2

你非常接近，在一个单元格中间只是意味着一个剩余部分是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.
 }

Answer 3

您可能最好创建一个Grid并将精灵添加到它。这有很大帮助，而且速度更快。这是我关于Java-Gaming.Org

的文章

Using Grids For Collisions

实现语言是Java，但您可以轻松地将其转换为JavaScript。

精灵碰撞的细胞中心

3 个答案: