2019全新力作!發洩壓力的點擊遊戲-Angry Man!

Grotion
Grotion
Nov 4 · 8 min read

(1) App 操作的影片或 gif

(2) GitHub 連結

(3) 特製的 App 畫面截圖

(4) 文字說明

在寫程式的時候再設定Form的樣式有些問題,最後使用Clipped()將旁邊不要的外框修掉。在撰寫ActionSheet時也卡了很久,不知道該如何檢視玩家所選的是哪個選項,後來也未能完成。在點擊畫面中,可以調整Image的大小,但原本想要的效果為根據縮放大小而點擊範圍根著縮放,後來做出來的效果為只要點擊在Frame都算點擊,與縮放無關。也很感謝Peter都很及時也很準確地解決我的問題,才能順利的完成我的App。

(5) 重點程式碼講解

Toggle("Do you want a profile picture?", isOn: $isProfile)
.frame(width:300)

TextField("Your Name", text: $name)
.overlay(RoundedRectangle(cornerRadius:20).stroke(Color.black, lineWidth: 1))
.frame(width:300)
.multilineTextAlignment(.center)

Stepper(value: $age, in: 1...120){
if age == 1 {Text("\(age) year old")}
else {Text("\(age) years old")}
}

上面程式碼主要是使用Toggle設定玩家的頭像、使用TextField設定玩家姓名以及Stepper設定玩家年齡。

Form
{
Toggle("Do you want to show your gender?", isOn: $isGender)
if isGender{
Picker("Gender", selection: $selectGender){
ForEach(genders, id: \.self){
(gender) in
Text(gender)
}
}.pickerStyle(SegmentedPickerStyle())
}
DatePicker("Your Birthday", selection: $birthday, in:...Date(), displayedComponents: .date)
}

上面程式碼為Form裡包含可以使用Toggle隱藏的性別選擇以及DatePicker可以選擇生日。

Button(action:{
if self.name == ""
{
self.showNameAlert = true
}
else
{
self.showGamePage = true
}})
{
HStack
{
Text("START")
.fontWeight(.semibold)
.font(.title)
Image(systemName: "play")
.font(.title)
}
.padding()
.foregroundColor(Color.white)
.background(Color.red)
.cornerRadius(40)
}
.alert(isPresented: $showNameAlert)
{
() -> Alert in
return Alert(title: Text("Opps!!!"), message: Text("You haven't enter you name."))
}
.sheet(isPresented: self.$showGamePage)
{
GameView(showGamePage: self.$showGamePage, isProfile: self.$isProfile, name: self.$name, birthday: self.$birthday, age: self.$age, isGender: self.$isGender, selectGender: self.$selectGender)
}
}

上面程式碼為Start按鈕,包含Alert判斷玩家名稱是否有輸入以及使用Sheet將Binding的參數傳入GameView()。

Button(action:{
self.hitcount[self.selectedIndex] += 1
self.totalhitTime += 1
if self.totalhitTime % 25 == 0 || self.hitcount[self.selectedIndex] == 50
{
self.showHitAlert = true
}})
{
if self.hitcount[self.selectedIndex] >= 50
{
Image(angry[selectedIndex])
.renderingMode(.original)
.resizable()
.scaledToFit()
.scaleEffect(scale)
.brightness(self.brightnessAmount)
.frame(width:300, height:200)
}
else
{
Image(pickName[selectedIndex])
.renderingMode(.original)
.resizable()
.scaledToFit()
.scaleEffect(scale)
.brightness(self.brightnessAmount)
.frame(width:300, height:200)
}
}
.alert(isPresented: $showHitAlert)
{
() -> Alert in
if self.hitcount[self.selectedIndex] == 50
{
return Alert(title: Text("\(pickName[selectedIndex]) is Angry!!"),message: Text("You've hit \(totalhitTime) times in total!"), dismissButton: .default(Text("Keep Going!")))
}
else
{
return Alert(title: Text("You've hit \(totalhitTime) times in total!"), dismissButton: .default(Text("Keep Going!")))
}
}

上面程式碼為Image的Button判斷玩家點擊了幾次,每點擊25次會跳出Alert,在每張照片被點擊50次時亦會跳出Alert。

struct BrightnessSlider: View
{
@Binding var brightnessAmount: Double

var body: some View
{
HStack
{
Text("Brightness")
Slider(value: self.$brightnessAmount, in: 0...1, minimumValueLabel: Image(systemName: "sun.max.fill").imageScale(.small), maximumValueLabel: Image(systemName: "sun.max.fill").imageScale(.large)){Text("")}
}
}
}

上面程式碼為亮度及縮放的Slider,傳入Binding參數以及將此兩個Slider作為Extract Subview。

(6) 封面圖片

海大 iOS App 程式設計

學習 Swift iOS App 開發的海大學生作品集

    Grotion

    Written by

    Grotion

    海大 iOS App 程式設計

    學習 Swift iOS App 開發的海大學生作品集

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade