Question

我正在尝试制作一款游戏，该游戏遵循与以下链接http://bit.ly/1CR0iha中的Dragon's Tail相同的机制。我已经构建了一个非常基本的一级版本，使用鼠标点击一个开放空间。我真的希望它继续按下移动，以便我可以拖动它们来移动它们而不是点击，这将有助于当第二级有多个开放空间时。

如何限制碎片的移动，使它们只能移动到开放空间？我最初的做法是将所有碎片放入网格中并检查压力机上各个部件之间的碰撞，并且只有在没有碰撞时才允许移动。

经过一些编码，我需要进行健全性检查，因为我现在是第二次猜测我的决定。我要求对我的方法进行高级别的理智检查，任何见解都是最受欢迎的;）;

enter image description here

一旦我在mousedown上设置了我的x和y，我就按下它们执行以下操作。我并没有限制我的方向，这正是我想要实现的目标。

 pressMove = function(event){
    var pt = this.globalToLocal(event.stageX, event.stageY);
    if(pt.x > this.startPosX){
        this.dragDirection = 'right';
    }

    if(pt.x < this.startPosX){
        this.dragDirection = 'left';
    }

    if(pt.y < this.startPosY){
        this.dragDirection = 'up';
    }

    if(pt.y > this.startPosY){
        this.dragDirection = 'down';
    }

    movePiece(event);
}

移动作品

 movePiece = function(event){
    var obj = event.target;
    var pt = this.globalToLocal(event.stageX, event.stageY);

    switch(this.dragDirection){
        case 'up':
            obj.y = pt.y;
            break;
        case 'down':
            obj.y = pt.y;
            break;
        case 'left':
            obj.x = pt.x;
            break;
        case 'right':
            obj.x = pt.x;
            break;
    };
}

Answer 1

你不需要软化的碰撞检测 - 你需要知道的是点击的一块可能的移动（向上，向下，向右，向左）。

你可以通过让2d字段代表阻止空格1和免费空格0来实现这一目标

假设您通过检查其四个相邻条目，只有移动向上可用来点击您可以看到的片段（Y，B），类似于XA和XC。对于所有其他作品，没有自由空间，因此没有可能的动作。移动一块后，确保它再次处于网格位置并更新2d字段。即在移动YB up 之后，该字段应如下所示：

您可以使用已阻止的空格

围绕您的实际游戏区域，从而更轻松地进行边界处理

修改：说你只能向上/向下和向左/向右移动。每个移动都从一个中心开始。在中心周围有一个死区，目前还不清楚这个移动方向。那么您的代码可能如下所示：

startDrag(x, y) {
    // remember clicked piece p
    p <- ...
    // remember center positions for p (cX, cY)
    (cX, cy) <- ...
    // remember offset of cursor to center (oX, oY)
    (oX, oY) <- (x - cX, y - cY)
}

continueDrag(x, y) {
    // select move direction
    if distance between (cX, cY) and (x - oX, y - oY) is within the deadzone
        select move direction (up, down, left, right) with least projection error
    else
        select last move direction
    end
    // get constrained move direction
    switch selected move direction
        case up: perform move to (cX, y - oY)
        case down: perform move to (cX, y - oY)
        case left: perform move to (x - oX, cY)
        case right: perform move to (y - oX, cY)
    end
}

你可以在这里看到所有这些（并且更加健壮）：http://js.do/code/sliding-puzzle

构建一个javascript滑动拼图

1 个答案: