🔢

SwiftUIで作る数字当てゲームのiOSアプリ開発記

に公開
Swift
SwiftUI
プログラミング
iosアプリ開発
コード解説
tech

SwiftUIで数字当てゲームのiOSアプリを開発しました。このアプリは、ランダムに選ばれた3つの数字を当てるシンプルなゲームです。この記事では、アプリの開発背景、技術スタック、設計、開発プロセスについて紹介します。

※開発の体験談や学びについてはnote版の記事で詳しくまとめています。

技術スタック

  • Swift + SwiftUI
  • ロジック実装は playground で検証
  • デザインは ZStack + LinearGradient で表現

ゲームのルール

コンピュータが選んだ3桁の数字を、プレイヤーが10回以内に当てるゲームです。
ヒントは次の通り：

  • 「桁と数字が一致 → ヒット」
  • 「桁は違うが数字が一致 → ブロー」

プログラムのフローチャート

流れ図をxmindで整理しました。

背景とUIの実装

背景グラデーションの実装

private func backGroundColor() -> LinearGradient {
    let start = UnitPoint(x: 0.0, y: 0.0)
    let end = UnitPoint(x: 1.0, y: 1.0)
    
    let colors = Gradient(colors: [Color.blue, Color(UIColor.purple)])
    // LinearGradientで背景のグラデーションを作成
    return LinearGradient(gradient: colors, startPoint: start, endPoint: end)
}

ZStackに配置

ZStack {
    // 背景を画面全体に反映
    self.backGroundColor().edgesIgnoringSafeArea(.all)
    Text("数字当てゲーム")
        .font(.largeTitle)
        .foregroundColor(.white)
}

開発での課題と解決策

  • ポップアップ表示
    → SwiftUIのAlertやSheetで対応
  • 背景グラデーション
    → LinearGradient + ZStackで解決
  • テストの効率化
    → Playgroundでの実験を重ねる

今後の拡張案

  • ゲーム難易度の調整
  • 対戦プレイ機能
  • データ保存機能（CoreDataやUserDefaults）

アプリリンク

https://apple.co/3odHKs2

Discussion