Swift로 메모리 카드 게임 작성하기

이 글은 제가 정말 좋아하는 간단한 기억력 훈련 게임을 만드는 과정을 설명합니다. 그 자체로 좋은 것 외에도 Swift 클래스와 프로토콜에 대해 조금 더 배우게 됩니다. 하지만 시작하기 전에 게임 자체를 이해해 봅시다.

알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

Skillbox는 다음을 권장합니다. 교육용 온라인 과정 "직업 자바 개발자".

메모리 카드 플레이 방법

게임은 카드 세트를 시연하는 것으로 시작됩니다. 그들은 엎드려 누워 있습니다 (각각 이미지가 아래로 향함). 하나를 클릭하면 이미지가 몇 초 동안 열립니다.

플레이어의 임무는 동일한 그림이 있는 모든 카드를 찾는 것입니다. 첫 번째 카드를 연 후 두 번째 카드를 뒤집어서 그림이 일치하면 두 카드 모두 열린 상태로 유지됩니다. 일치하지 않으면 카드가 다시 닫힙니다. 목표는 모든 것을 여는 것입니다.

프로젝트 구조

이 게임의 간단한 버전을 만들려면 다음 구성 요소가 필요합니다.

• 하나의 컨트롤러: GameController.swift.
• 하나의 뷰: CardCell.swift.
• 두 가지 모델: MemoryGame.swift 및 Card.swift.
• Main.storyboard는 전체 구성 요소 집합을 사용할 수 있는지 확인합니다.

우리는 게임의 가장 간단한 구성 요소인 카드부터 시작합니다.

카드스위프트

카드 모델에는 세 가지 속성이 있습니다. 각 카드를 식별하기 위한 id, 카드 상태(숨김 또는 열기)를 지정하기 위해 표시되는 부울 변수, 카드 이미지에 대한 ArtworkURL입니다.

class Card {        
    var id: String    
    var shown: Bool = false    
    var artworkURL: UIImage!
}

지도와의 사용자 상호작용을 제어하려면 다음 메서드도 필요합니다.

카드에 이미지를 표시하는 방법. 여기서는 모든 속성을 기본값으로 재설정합니다. id의 경우 NSUUIS().uuidString을 호출하여 임의의 ID를 생성합니다.

init(image: UIImage) {        
    self.id = NSUUID().uuidString        
    self.shown = false        
    self.artworkURL = image    
}

신분증 비교 방법.

func equals(_ card: Card) -> Bool {
    return (card.id == id)    
}

각 카드의 복사본을 만드는 방법 - 더 많은 수의 동일한 것을 얻으려면. 이 메소드는 비슷한 값을 가진 카드를 반환합니다.

func copy() -> Card {        
    return Card(card: self)    
}
 
init(card: Card) {        
    self.id = card.id        
    self.shown = card.shown        
    self.artworkURL = card.artworkURL    
}

그리고 처음에 카드를 섞는 방법이 하나 더 필요합니다. 이를 Array 클래스의 확장으로 만들겠습니다.

extension Array {    
    mutating func shuffle() {        
        for _ in 0...self.count {            
            sort { (_,_) in arc4random() < arc4random() }        
        }   
    }
}

다음은 모든 속성과 메서드를 포함하는 카드 모델용 코드의 구현입니다.

class Card {
    
    var id: String
    var shown: Bool = false
    var artworkURL: UIImage!
    
    static var allCards = [Card]()
 
    init(card: Card) {
        self.id = card.id
        self.shown = card.shown
        self.artworkURL = card.artworkURL
    }
    
    init(image: UIImage) {
        self.id = NSUUID().uuidString
        self.shown = false
        self.artworkURL = image
    }
    
    func equals(_ card: Card) -> Bool {
        return (card.id == id)
    }
    
    func copy() -> Card {
        return Card(card: self)
    }
}
 
extension Array {
    mutating func shuffle() {
        for _ in 0...self.count {
            sort { (_,_) in arc4random() < arc4random() }
        }
    }
}

앞으로 이동합니다.

두 번째 모델은 MemoryGame입니다. 여기서는 4*4 그리드를 설정합니다. 모델에는 카드(그리드 위의 카드 배열), 카드가 이미 열려 있는 카드 표시 배열, 게임 상태를 추적하는 부울 변수 isPlaying 등의 속성이 있습니다.

class MemoryGame {        
    var cards:[Card] = [Card]()    
    var cardsShown:[Card] = [Card]()    
    var isPlaying: Bool = false
}

또한 그리드와의 사용자 상호 작용을 제어하는 ​​방법도 개발해야 합니다.

그리드에서 카드를 섞는 방법입니다.

func shuffleCards(cards:[Card]) -> [Card] {       
    var randomCards = cards        
    randomCards.shuffle()                
 
    return randomCards    
}

새로운 게임을 만드는 방법. 여기서는 첫 번째 메서드를 호출하여 초기 레이아웃을 시작하고 isPlaying 변수를 true로 초기화합니다.

func newGame(cardsArray:[Card]) -> [Card] {       
    cards = shuffleCards(cards: cardsArray)        
    isPlaying = true            
 
    return cards    
}

게임을 다시 시작하고 싶다면, 그런 다음 isPlaying 변수를 false로 설정하고 카드의 초기 레이아웃을 제거합니다.

func restartGame() {        
    isPlaying = false                
    cards.removeAll()        
    cardsShown.removeAll()    
}

클릭된 카드를 확인하는 방법. 그에 대한 자세한 내용은 나중에 알아보세요.

func cardAtIndex(_ index: Int) -> Card? {        
    if cards.count > index {            
        return cards[index]        
    } else {            
        return nil        
    }    
}

특정 카드의 위치를 ​​반환하는 메소드입니다.

func indexForCard(_ card: Card) -> Int? {        
    for index in 0...cards.count-1 {            
        if card === cards[index] {                
            return index            
        }      
    }
        
    return nil    
}

선택한 카드가 표준을 준수하는지 확인합니다.

func unmatchedCardShown() -> Bool {
    return cardsShown.count % 2 != 0
}

이 메소드는 **cardsShown** 배열의 마지막 요소를 읽고 일치하지 않는 카드를 반환합니다.

func didSelectCard(_ card: Card?) {        
    guard let card = card else { return }                
    
    if unmatchedCardShown() {            
        let unmatched = unmatchedCard()!                        
        
        if card.equals(unmatched) {          
            cardsShown.append(card)            
        } else {                
            let secondCard = cardsShown.removeLast()      
        }                    
    } else {            
        cardsShown.append(card)        
    }                
    
    if cardsShown.count == cards.count {            
        endGame()        
    }    
}

Main.storyboard 및 GameController.swift

Main.storyboard는 다음과 같습니다.

처음에는 그리드 이미지를 포함하여 컨트롤러에서 새 게임을 viewDidLoad로 설정해야 합니다. 게임에서는 이 모든 것이 4*4 collectionView로 표현됩니다. collectionView에 아직 익숙하지 않다면 여기에 있습니다. 필요한 정보를 얻을 수 있습니다.

GameController를 애플리케이션의 루트 컨트롤러로 구성하겠습니다. GameController에는 IBOutlet으로 참조할 collectionView가 있습니다. 또 다른 참조는 IBAction onStartGame() 버튼에 대한 것입니다. 이는 UIButton이며 PLAY라는 스토리보드에서 볼 수 있습니다.

컨트롤러 구현에 대해 조금:

• 먼저 두 가지 주요 개체인 그리드: game = MemoryGame() 및 카드 세트: 카드 = [Card]()를 초기화합니다.
• 초기 변수를 viewDidLoad로 설정했는데, 이는 게임이 실행되는 동안 호출되는 첫 번째 메서드입니다.
• 사용자가 PLAY를 누를 때까지 모든 카드가 숨겨지므로 collectionView는 숨김으로 설정됩니다.
• PLAY를 누르자마자 onStartGame IBAction 섹션이 시작되고 collectionView isHidden 속성을 false로 설정하여 카드가 표시되도록 합니다.
• 사용자가 카드를 선택할 때마다 didSelectItemAt 메소드가 호출됩니다. 메소드에서 didSelectCard를 호출하여 메인 게임 로직을 구현합니다.

최종 GameController 구현은 다음과 같습니다.

class GameController: UIViewController {
 
    @IBOutlet weak var collectionView: UICollectionView!
    
    let game = MemoryGame()
    var cards = [Card]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        game.delegate = self
        
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.isHidden = true
        
        APIClient.shared.getCardImages { (cardsArray, error) in
            if let _ = error {
                // show alert
            }
            
            self.cards = cardsArray!
            self.setupNewGame()
        }
    }
    
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        
        if game.isPlaying {
            resetGame()
        }
    }
    
    func setupNewGame() {
        cards = game.newGame(cardsArray: self.cards)
        collectionView.reloadData()
    }
    
    func resetGame() {
        game.restartGame()
        setupNewGame()
    }
    
    @IBAction func onStartGame(_ sender: Any) {
        collectionView.isHidden = false
    }
}
 
// MARK: - CollectionView Delegate Methods
extension GameController: UICollectionViewDelegate, UICollectionViewDataSource {
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return cards.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CardCell", for: indexPath) as! CardCell
        cell.showCard(false, animted: false)
        
        guard let card = game.cardAtIndex(indexPath.item) else { return cell }
        cell.card = card
        
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let cell = collectionView.cellForItem(at: indexPath) as! CardCell
        
        if cell.shown { return }
        game.didSelectCard(cell.card)
        
        collectionView.deselectItem(at: indexPath, animated:true)
    }
}

이제 중요한 프로토콜에 대해 조금 이야기해 보겠습니다.

프로토콜

프로토콜 작업은 Swift 프로그래밍의 핵심입니다. 프로토콜은 클래스, 구조 또는 열거형에 대한 규칙을 정의하는 기능을 제공합니다. 이 원칙을 사용하면 모듈식 및 확장 가능한 코드를 작성할 수 있습니다. 실제로 이것은 GameController에서 collectionView에 대해 이미 구현하고 있는 패턴입니다. 이제 우리만의 버전을 만들어 보겠습니다. 구문은 다음과 같습니다.

protocol MemoryGameProtocol {
    //protocol definition goes here
}

우리는 프로토콜을 통해 클래스 구현을 위한 규칙이나 지침을 정의할 수 있다는 것을 알고 있으므로 프로토콜이 무엇이어야 하는지 생각해 봅시다. 총 XNUMX개가 필요합니다.

• 게임 시작: memoryGameDidStart.
• 메모리게임쇼카드(memoryGameShowCards) 카드를 뒤집어야 합니다.
• 카드를 뒤집어야 합니다: memoryGameHideCards.
• 게임 종료: memoryGameDidEnd.

네 가지 메서드 모두 GameController인 기본 클래스에 대해 구현될 수 있습니다.

메모리게임DidStart

이 메서드가 실행되면 게임이 시작되어야 합니다(사용자가 PLAY를 누름). 여기에서는 카드를 섞는 collectionView.reloadData()를 호출하여 콘텐츠를 다시 로드하겠습니다.

func memoryGameDidStart(_ game: MemoryGame) {
    collectionView.reloadData()
}

메모리게임쇼카드

collectionSDViewSelectItemAt에서 이 메소드를 호출합니다. 먼저 선택한 카드가 표시됩니다. 그런 다음 CardShown 배열에 일치하지 않는 카드가 있는지 확인합니다(cardShown 수가 홀수인 경우). 존재하는 경우 선택한 카드와 비교됩니다. 그림이 동일하면 두 카드 모두 표시된 카드에 추가되고 앞면이 위로 유지됩니다. 다른 경우 카드는 카드 표시 상태를 유지하고 둘 다 뒤집어 놓습니다.

메모리게임숨기기카드

카드가 일치하지 않으면 이 메서드가 호출되고 카드 이미지가 숨겨집니다.

표시 = 거짓

메모리게임이 종료되었습니다.

이 메소드가 호출되면 모든 카드가 이미 공개되어 있고 CardShown 목록에 있음을 의미합니다(cardShown.count =cards.count). 따라서 게임이 종료됩니다. 이 메서드는 isPlaying 변수를 false로 설정하기 위해 endGame()을 호출한 후에 호출되며, 그 후 게임 종료 메시지가 표시됩니다. 또한 AlertController는 컨트롤러에 대한 표시기로 사용됩니다. viewDidDisappear가 호출되고 게임이 재설정됩니다.

GameController의 모든 내용은 다음과 같습니다.

extension GameController: MemoryGameProtocol {
    func memoryGameDidStart(_ game: MemoryGame) {
        collectionView.reloadData()
    }
 
 
    func memoryGame(_ game: MemoryGame, showCards cards: [Card]) {
        for card in cards {
            guard let index = game.indexForCard(card)
                else { continue
            }        
            
            let cell = collectionView.cellForItem(
                at: IndexPath(item: index, section:0)
            ) as! CardCell
 
            cell.showCard(true, animted: true)
        }
    }
 
    func memoryGame(_ game: MemoryGame, hideCards cards: [Card]) {
        for card in cards {
            guard let index = game.indexForCard(card)
                else { continue
            }
            
            let cell = collectionView.cellForItem(
                at: IndexPath(item: index, section:0)
            ) as! CardCell
    
            cell.showCard(false, animted: true)
        }
    }
 
    func memoryGameDidEnd(_ game: MemoryGame) {
        let alertController = UIAlertController(
            title: defaultAlertTitle,
            message: defaultAlertMessage,
            preferredStyle: .alert
        )
 
        let cancelAction = UIAlertAction(
            title: "Nah", style: .cancel) {
            [weak self] (action) in
            self?.collectionView.isHidden = true
        }
 
        let playAgainAction = UIAlertAction(
            title: "Dale!", style: .default) {
            [weak self] (action) in
            self?.collectionView.isHidden = true
 
            self?.resetGame()
        }
 
        alertController.addAction(cancelAction)
        alertController.addAction(playAgainAction)
        
        self.present(alertController, animated: true) { }
    
        resetGame()
    }
}

사실 그게 전부입니다. 이 프로젝트를 사용하여 자신만의 게임 버전을 만들 수 있습니다.

즐거운 코딩하세요!

Skillbox는 다음을 권장합니다.

• 실기 코스 "모바일 개발자 PRO".
• 온라인 강좌 적용 "파이썬 데이터 분석가".
• XNUMX년 실습 코스 "저는 PRO 웹 개발자입니다".

출처 : habr.com