巧用Swift拼图框架打造黎锦拼图游戏（三）

2023-12-16 23:23:19

引言

在上一篇文章中，我们完成了对「黎锦拼图」游戏底部功能栏的UI和逻辑，并且能够将拼图元素从底部功能栏中「拖拽」到游戏画布上。现在，我们需要先来补充完整拼图元素的边界。通过前几篇文章的讲解相比大家对这个游戏的规则已经非常清晰了，也明白了拼图元素只能在画布之中进行移动，但在上…

补充拼图元素的边界

拼图元素的边界对于游戏的逻辑和交互至关重要。它可以帮助我们确定拼图元素的范围，并限制其在游戏画布中的移动。

在「黎锦拼图」游戏中，我们将使用SKShapeNode来创建拼图元素的边界。SKShapeNode是一个非常灵活的图形节点，我们可以使用它来创建各种形状的边界。

首先，我们需要创建一个SKShapeNode对象，并设置其形状。我们可以使用SKShapeNode的path属性来设置其形状。

let border = SKShapeNode(path: CGPath(rect: CGRect(x: 0, y: 0, width: 100, height: 100)))

然后，我们需要将这个SKShapeNode对象添加到拼图元素的子节点中。

puzzlePiece.addChild(border)

这样，我们就为拼图元素添加了一个边界。

将拼图元素从画布中拖拽出来

在「黎锦拼图」游戏中，我们需要能够将拼图元素从画布中拖拽出来。

为了实现这一点，我们需要使用SKSpriteNode的isUserInteractionEnabled属性。如果这个属性设置为true，那么用户就可以与这个SKSpriteNode对象进行交互，包括拖拽。

puzzlePiece.isUserInteractionEnabled = true

然后，我们需要实现SKSpriteNode的touchesBegan、touchesMoved和touchesEnded方法。

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    // 当用户开始拖拽拼图元素时，我们将把拼图元素从其父节点中移除，并将其添加到游戏画布中。
    self.removeFromParent()
    self.scene?.addChild(self)
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    // 当用户正在拖拽拼图元素时，我们将更新拼图元素的位置。
    let touch = touches.first!
    let location = touch.location(in: self.scene!)
    self.position = location
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    // 当用户结束拖拽拼图元素时，我们将检查拼图元素是否已经移动到了正确的位置。
    if self.position.x >= 0 && self.position.x <= self.scene!.size.width && self.position.y >= 0 && self.position.y <= self.scene!.size.height {
        // 如果拼图元素已经移动到了正确的位置，我们将将其添加到拼图中。
        self.isDraggable = false
        self.scene?.addChild(self)
    } else {
        // 如果拼图元素没有移动到正确的位置，我们将将其返回到原来的位置。
        self.removeFromParent()
        self.scene?.addChild(self)
    }
}