Building My First iOS Application

Welcome to the wild, wild, wonderful world of iOS app development, where dreams are coded into reality, and caffeine fuels our relentless pursuit of innovation. Imagine yourself in a tech startup's open office, buzzing with the low hum of creativity, the rhythmic click-clack of mechanical keyboards, and the occasional expletive-laden outburst as someone battles with building the next Tim Cook-level application.

In this article, we're diving headfirst into the adventure of creating a basic two-player card game. Get ready to turn lines of code into an engaging, interactive experience that will bring your vision to life on the screen.

THE SETUP

Before we can start coding, we need to get our development environment up and running. This involves a few key steps to ensure we have everything in place to build and test our iOS application. Here’s what you need to do:

Install Xcode: Xcode is Apple’s integrated development environment (IDE) for macOS. It includes everything you need to create apps for all Apple devices. Head over to the Mac App Store and download the latest version of Xcode. Once it's installed, open it up and take a moment to familiarize yourself with the interface.
Create a New Project:
Launch Xcode and create a new project by selecting "Create a new Xcode project" from the welcome screen. Choose the "App" template under the iOS tab, and click "Next." Fill in the project details:
- Product Name: Give your game a name (e.g., "CardGame").
- Team: Select your Apple ID or team if you’re part of one.
- Organization Name: Your company or personal name.
- Organization Identifier: A unique identifier, typically a reverse domain name (e.g., com.yourname).
- Language: Swift.
- User Interface: SwiftUI.
Set Up Version Control:

Version control is essential for any development project. Xcode integrates seamlessly with Git, allowing you to track changes and collaborate with others. Initialize a Git repository by selecting the "Create Git repository on my Mac" option when setting up your project.
Familiarize Yourself with SwiftUI:

SwiftUI is Apple’s framework for building user interfaces across all Apple platforms. Spend some time exploring the basics of SwiftUI if you're not already familiar with it. Apple’s official documentation and tutorials are great resources.
Set Up Your Simulator:

Xcode comes with a built-in simulator that allows you to test your app on various virtual devices. Select the iPhone model you want to use from the device toolbar and launch the simulator to ensure everything is working correctly.
Prepare Your Assets:

Gather all the necessary assets for your card game. This includes images for the cards, backgrounds, and any other graphical elements you'll need. Make sure your assets are appropriately sized and formatted for iOS.

With everything set up, we’re now ready to dive into the coding phase. In the next section, we'll start by laying out the basic structure of our card game and implementing the core functionality. So, roll up your sleeves, fire up Xcode, and let’s bring this game to life!

THE BUILD

Now that we have our development environment ready, it's time to jump into the fun part: building our game. We're going to create a simple yet engaging card game with a deck of 13 cards, where each card ranks from 2 to 14. Here's the plan:

Two sets of cards are placed on the board.
A random function generates a card for each player.
The player with the higher card wins the round and earns a point.
The game continues until all cards are played, and the player with the most points wins.

Let's get started!

Step 1: Define the Player variable

Create a rewrite Swift file named ContentView.swift and define a variable for our card player:

//    player card
    @State var player_card:String = "back"
    @State var player_card2:String = "back"

//  player score value
    @State var player_scorevalue:Int = 0
    @State var player_scorevalue2:Int = 0

//    player rounds
    @State var player_rounds:Int = 0

Step 2: Create the Random deck function

In the same file, add a function to generate and shuffle a deck of cards:

func Deal(){

//     Player Random number generator
        var PlayerScoreValue:Int = Int.random(in: 2...14)
        var PlayerScoreValue2:Int = Int.random(in: 2...14)

//        Card generator
        player_card = "card" + String(PlayerScoreValue)
        player_card2 = "card" + String(PlayerScoreValue2)

        if PlayerScoreValue > PlayerScoreValue2 {
            player_scorevalue += 1
        }else{
            player_scorevalue2 += 1
        }

        player_rounds += 1;

    }

Step 3: Set Up the Game Board

Create a Game UI. This view will display the cards and the scores for each player:

var body: some View {
        ZStack {
            Image("background-plain")
            VStack{
                Image("logo")
                HStack{
                    Image(player_card)
                    Image(player_card2)
                }
                Button{
                    Deal()
                }label: {
                    Image("button")
                }
                .padding(.all)
                HStack{
                    VStack{
                        Text("Player 1")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        Text(String(player_scorevalue))
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                            .padding(.all, 3.0)
                    }
                    .padding(.all)
                    VStack{
                        Text("Player 2")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        Text(String(player_scorevalue2))
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                            .padding(.all, 3.0)
                    }
                    .padding(.all)
                }
                .padding(.all, 18.0)

                Text(String(player_rounds))
                    .font(.title)
                    .fontWeight(.heavy)
                    .foregroundColor(Color.red)
                    .padding(.all)
                    .frame(width: nil)
                    .border(Color.white, width: 3)
                    .cornerRadius(10.0)


            }
        }
        .padding()

Step 4: Final Code

Finally, the code :

import SwiftUI

struct ContentView: View {

//    player card
    @State var player_card:String = "back"
    @State var player_card2:String = "back"

//  player score value
    @State var player_scorevalue:Int = 0
    @State var player_scorevalue2:Int = 0

//    player rounds
    @State var player_rounds:Int = 0

    var body: some View {
        ZStack {
            Image("background-plain")
            VStack{
                Image("logo")
                HStack{
                    Image(player_card)
                    Image(player_card2)
                }
                Button{
                    Deal()
                }label: {
                    Image("button")
                }
                .padding(.all)
                HStack{
                    VStack{
                        Text("Player 1")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        Text(String(player_scorevalue))
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                            .padding(.all, 3.0)
                    }
                    .padding(.all)
                    VStack{
                        Text("Player 2")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        Text(String(player_scorevalue2))
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                            .padding(.all, 3.0)
                    }
                    .padding(.all)
                }
                .padding(.all, 18.0)

                Text(String(player_rounds))
                    .font(.title)
                    .fontWeight(.heavy)
                    .foregroundColor(Color.red)
                    .padding(.all)
                    .frame(width: nil)
                    .border(Color.white, width: 3)
                    .cornerRadius(10.0)


            }
        }
        .padding()
    }

    func Deal(){

//     Player Random number generator
        var PlayerScoreValue:Int = Int.random(in: 2...14)
        var PlayerScoreValue2:Int = Int.random(in: 2...14)

//        Card generator
        player_card = "card" + String(PlayerScoreValue)
        player_card2 = "card" + String(PlayerScoreValue2)

        if PlayerScoreValue > PlayerScoreValue2 {
            player_scorevalue += 1
        }else{
            player_scorevalue2 += 1
        }

        player_rounds += 1;

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Thank you for taking the time to read this article! I hope you found it informative and useful.

👍 If you appreciated this post, please give it a like!

🔄 Feel free to share this with anyone who might benefit from it.

💬 I’d love to hear your thoughts and any tips you might have — drop a comment below!

👤 Follow me for more insightful blogs in the future!

Support my work with a coffee ☕ — thank you for your generosity!

Blog