21點APP

要做出的效果
一、跟電腦PK
二、可以下注籌碼

接下來,我們就來開始操作~

首先,我先在這網址找了撲克牌的牌面,並且放進Assets裡面。

放進Assets裡後,為了讓在後面寫程式時,可以跑出對應的image圖片,所以我先把圖片名稱都改掉,如下圖。

接著在Storyboard裡建立一些元件,例如顯示牌的image view、顯示剩餘籌碼金額的label….之類的東西。建立好之後,我們再來把它們outlet出來。

這邊要特別注意一個地方,21點的遊戲規則是在遊玩過程中,莊家跟玩家的牌最多只能出現五張牌。所以我在畫面上會放上玩家跟莊家各五個image view。但在後續寫程式碼時,為了更方便地寫程式碼,我在outlet image view的時候,先把其中一個image view設定成outlet collection,然後再把其餘四個image都拉進去,如附圖,大家就能看到我的pcCardsImage IBOutlet總共有五個image view。

接下來這張會把所有outlet跟元件全部對應起來,讓大家方便看(雖然線條畫起來好像還是很亂)。

這邊大家能發現到黃色線條對應出的字「這裡有還沒打字的label」,這個用意是後面跑程式碼時來判斷是莊家贏還是玩家贏時,會顯示出來的label。但由於現在遊戲剛開始沒有輸贏,因此在這裡我會先把他設定隱藏起來。

個人覺得先把這個大工程完成後,我們就完成三分之一了,剩下的就是如果打出程式,以及跑程式的時候有什麼問題需要修正。

接下來,一副撲克牌有四種花色,每個花色又有十三張牌,所以我們要建立出一個File來讓程式碼知道我們這些花色、牌是什麼屬性,方便我們寫程式碼。

然後這個畫面我們選Swift File,再點擊next。

這邊我們能看到,我把這個file命名為card,然後在裡面struct Card以及屬性,這邊大家會看到number,可能會覺得很奇怪,之所以我會在這邊寫這個number屬性是整數,是為了方便後面我們要讓程式碼判斷莊家跟玩家的牌點數加總起來誰大誰小,以及點數是否爆了。在這裡我設定:
當出現A時,number會直接回傳整數11,以此類推。

這邊做好後,我們回到程式碼頁面來宣告一些變數、常數、還有花色、牌點數的陣列、function之類的。

做到這裡,應該會有很多同學跟我一樣困惑,想說怎麼可以馬上就想到要設定這些像是剩餘籌碼金額、玩家點數、牌的數量…等東西。

像我自己在做的時候,我也是在打程式碼的時候卡住,發現我需要有變數來幫助我寫程式,我才又回過頭來宣告變數的。

如果真的想不出來就趕快求助彼得潘或是多看看其他人寫的作業程式碼,不管是哪個,一定都會對你有所幫助。

拉回正題,我們宣告完這些東西後,就開始連結各種button!

加籌碼button

顧名思義:點擊一次就會+50元賭金的button。
在這裡的程式碼很簡單,我在連IBAction時,只要點擊一次,我就能自動+50元的賭金。所以會變動的有:變數betDollars(賭金)還有現在賭金的label。

開始button

在設定完賭金後,按開始的按鈕會發給莊家跟玩家各兩張牌。
*在for i in 0…1{ ….}裡,可以看到我在設定playerCardsImage[i].image = UIImage(named: playerCard[i].suit + playerCard[i].rank)
會發現[]裡面我都打i,而i之所以從0開始算是因為陣列排第一的物件,都是「第0個」。

加牌Button

*playerCard.append(cards[cardsIndex-1])
在[]裡大家會發現我寫cardsIndex -1,在這裡舉個例子讓大家更簡單明瞭:
當現在畫面中的牌數只有一張時,cardsIndex會是1,但我要呈現的imageview是一個collection,第一張照片會是第「0」個。
所以在這裡我才會寫cardsIndex-1。

停牌button

下一局的button

在下一局的button我卡關,原因有三點:

一、我的程式碼怎麼打都會死掉跑不動,後面在檢查的時候才發現因為前面我在拉IBAction時,不小心拉了兩次,所以才會造成這樣的錯誤。
*要找連的IBAction有沒有多連,先點選你要找的元件(紅色框框),再按右上角的藍色框框這個東西,去查看綠色框框裡面有沒有多連結出來的IBAction。如果有多連的,就要按叉叉把它殺掉!

二、因為我要重置撲克牌照片,讓他像最一開始開啟畫面時一樣,不會有鋪克牌顯示在畫面上,所以我寫了一個重置圖片的迴圈(因為有五張照片,所以要跑五次),讓玩家跟莊家的牌image是nil。

三、在一開始我沒寫綠色框框裡的程式碼前,我只要每次跑程式,按下一局重新開始後,牌永遠都是一樣的牌。後來發現是因為我沒有先移除掉原本玩家跟莊家牌的陣列(pcCard跟playerCard)跟洗牌shuffle。

這次21點app的點數就到這裡囉~

以下附上模擬器操作畫面&GitHub網址~

--

--