Hello Everybody,
I am new to programming so I here is my question. I want to develop
a card matching app using Xcode 12 and SwiftUI. I want to use a LazyViewGrid to randomly generate PNG images that I put in my Assets folder. Can someone steer me in the right direction on the code
that I would need to use to successfully do this?
Have you built the UIKit Match App project that Chris Ching has on YouTube? The video’s were recorded back in 2017.
Here is the playlist: How To Build a Match Game - Lesson 1 (Here's the app you'll build) - YouTube
Thank you Chris. I’ll try the UIKIT Match app from Chris Ching. I’m not sure how much different Xcode was in 2017 but I’ll take a look. I saw a match game using a LazyVGrid on the Stanford University website with Paul Hagerty but he was using emojis to create his demo as the playing cards so substituting the emojis with the png images didn’t work using the code he used.
Im pretty sure that concept of the “war card game” fits your need for this array of images… Since its just type of card array but randomized… There has been posts here sharing that they did this i think… Try checking out the free 14 lesson course as it covers the whole war card game app
Here is something you could try to see if it works for you. Start a new project and name it whatever. Take all you images and name them in a sequence like … card-1, card-2, card-3, etc. Lets say 9 images. That will get you 3 rows of 3 images which fits well on the 12 promax simulator. Then put all those images in your asset folder. Next create a new file and call it “Card.swift”. Just a regular swift file not the SwiftUI one. Put the code below in that file…
import Foundation
struct Card: Identifiable {
var id = UUID()
var name: String
}
let matchCards = (1...9).map { Card(name: "card-\($0)") }
Now go back to your ContentView file and try this code…
import SwiftUI
struct ContentView: View {
private var gridItemLayout = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
var body: some View {
LazyVGrid(columns: gridItemLayout, spacing: 20) {
ForEach(matchCards.indices) { index in
Image(matchCards[index].name)
.resizable()
.scaledToFill()
.frame(minWidth: 0, maxWidth: .infinity)
.frame(height: 200)
.cornerRadius(10)
}
}
.padding(.all, 10)
}
}
That should give you a start. I do recommend going through the classes here though, but I also remember what its like to want to create something and have no idea how because what you want is more advanced than what you know. I will leave it up to you to figure out how this works and how to go from here. Hope this helps start you out