Greenfoot接龍（一）—由上而下的物件導向程式設計（上） 發表於：Greenfoot教師工作坊(五) 時間：2012/6/15(五) 14:00 地點：南港高中 （共四集，請續點閱） http://www.slideshare.net/imacat/solitaire-with-greenfoot-1 http://www.slideshare.net/imacat/solitaire-with-greenfoot-2 http://www.slideshare.net/imacat/solitaire-with-greenfoot-3 http://www.slideshare.net/imacat/solitaire-with-greenfoot-4

1. Greenfoot 接龍（一）
由上而下的物件導向程
式設計（上）
依瑪貓／楊士青
imacat@mail.imacat.idv.tw
2012/6/15

2. 「接龍遊戲—由上而下的物件導向程式設計」簡報由 依瑪貓╱楊士青 製作，
以 創用CC Attribution-ShareAlike 3.0 Unported 授權條款 釋出。

3. 自我介紹
依瑪貓╱楊士青
臺灣師範大學資訊教育研究所碩一研究生

4. 物件導向程式設計
Object-Oriented Programming
(OOP)

5. 物件導向程式設計的特色
「物件導向程式設計」的設計單位是「物
件」，貼近我們對實體世界的概念理解。
「程序性程式設計 Procedural
Programming 」的設計單位是「程序
Procedures 」：
流程 Flow
函式 Functions
副程式 Subroutines
Pokkunuri, B. P. (1989, November). Object oriented programming. ACM
SIGPLAN Notices, 24(11), 96-101. doi:10.1145/71605.71612

6. 物件導向程式設計的特色
「物件導向程式設計」的設計單位是「物
件」，貼近我們對實體世界的概念理解，
比較容易把我們的概念理解，直接轉換為
程式碼。
「程序性程式設計」的設計單位是「程序」，比
物件抽象，較難由設計理解的概念，轉換為程
式碼。

7. 物件導向程式設計的特色
程序性程式設計的單 開始 結束
位是程序。
輸 判
入 斷 處理 3
1 2
程式 1 程式 2 程式 3
…… …… ……
…… …… ……

8. 物件導向程式設計的特色
物件導向程式設計， 物
較容易支援由上 件2
（觀念）而下（程 物
件1
物
件3
式碼）的程式設計
。
程式 1 程式 2 程式 3
…… …… ……
…… …… ……

9. 實例說明

10. 請新建專案「 solitaire 」，
並將隨附圖片複製到 images 目錄下。

11. 請先回憶一下接龍怎麼玩。
上網搜尋 Solitaire Flash 遊戲試玩，
回憶一下。

12. Solitaire 接龍遊戲
請先回憶一下接龍怎
麼玩。上網搜尋
Solitaire Flash遊
戲試玩，回憶一下
。
rbell rbell@21cn.com. Solitaire. Retrieved from
http://www.thepcmanwebsite.com/media/flash_solitaire/

13. 接龍遊戲

14. 如何撰寫接龍遊戲的程式？

15. 一、設計類別 (Class) 和物件 (Object)

16. 接龍的牌桌

17. 牌桌上有什麼？

18. 牌桌上有什麼？
52 張撲克牌
未翻開的牌疊
已翻開的牌疊
暫放的牌疊（共七疊）
歸整好的牌疊（共四疊）

19. 牌桌上有什麼？

20. 牌桌上有什麼？

21. 牌桌上有什麼？

22. 牌桌上有什麼？
撲克牌
未翻開的牌疊（共一疊）
已翻開的牌疊（共一疊）
暫放的牌疊（共七疊）
歸整好的牌疊（共四疊）

23. 牌桌上有什麼？
撲克牌
撲克牌疊
未翻開的牌疊（共一疊）
已翻開的牌疊（共一疊）
暫放的牌疊（共七疊）
歸整好的牌疊（共四疊）

24. 步驟一：建立類別
牌桌
撲克牌
撲克牌疊
未翻開的牌疊
已翻開的牌疊
暫放的牌疊
歸整好的牌疊

25. 步驟一：建立類別
牌桌上的每個東西，都對應到我們建立的一
個 class 。
物件導向程式設計，把我們理解的抽象概念，直
接對應到 class ，寫成 class 。

26. 接下來為方便進行分享，
請載入隨附的 solitaire-1 專案。

27. 建好類別後，接下來要建立物件。
我們把剛剛建好的牌疊，
產生物件加到牌桌上。

28. 步驟二：加上撲克牌疊
import greenfoot.*; // （ World 、 Actor 、 GreenfootImage 、 GreenfootSound 、 Greenfoot 及 MouseInfo ）
import java.util.ArrayList;
/**
* 牌桌。
*
* @author 依瑪貓
* @version 2012/6/15
*/
public class Table extends World
{
/** 未翻開的撲克牌疊。 */
private UnflippedPile unflippedPile = null;
/** 已翻開的撲克牌疊。 */
private FlippedPile flippedPile = null;
/** 暫放區的撲克牌疊。 */
private ArrayList<WorkingPile> workingPiles = new ArrayList<WorkingPile>();
/** 歸整區的撲克牌疊。 */
private ArrayList<ResultPile> resultPiles = new ArrayList<ResultPile>();

29. 步驟二：加上撲克牌疊（續）
public class Table extends World
{
/** 取得未翻開的撲克牌疊。 */
public UnflippedPile getUnflippedPile() {
return unflippedPile;
}
/** 取得已翻開的撲克牌疊。 */
public FlippedPile getFlippedPile() {
return flippedPile;
}
/** 取得暫放區的撲克牌疊。 */
public ArrayList<WorkingPile> getWorkingPiles() {
return workingPiles;
}
/** 取得歸整區的撲克牌疊。 */
public ArrayList<ResultPile> getResultPiles() {
return resultPiles;
}
}

30. 步驟二：加上撲克牌疊（續）
public class Table extends World
{
public Table() {
// 建立 600x400 方格的新世界，方格大小為 1x1 像素。
super(600, 400, 1);
// 加上牌牌桌上的牌疊。
addPiles();
}
}

31. 步驟二：加上撲克牌疊（續）
public class Table extends World
{
/**
* 加上牌牌桌上 的牌 疊。
*/
private void addPiles()
{
unflippedPile = new UnflippedPile(); // 加上 未 翻開 的撲 克 牌疊 。
addObject(unflippedPile, 48, 57);
flippedPile = new FlippedPile(); // 加上 已 翻開 的撲 克 牌疊 。
addObject(flippedPile, 132, 57);
for (int i = 1; i <= 7; i++) { // 加上 暫 放區 的撲 克 牌疊 。
WorkingPile pile = new WorkingPile();
workingPiles.add(pile);
addObject(pile, -36 + 84 * i, 165);
}
for (int i = 1; i <= 4; i++) { // 加上 歸 位區 的撲 克 牌疊 。
ResultPile pile = new ResultPile();
resultPiles.add(pile);
addObject(pile, 216 + i * 84, 57);
}
}
}

32. 步驟二：加上撲克牌疊
（結果）

33. 接下來我們要加上撲克牌。
撲克牌洗牌後，放在未翻開的牌疊上。

34. 先看 Card 撲克牌和 Pile 牌疊的文件，
看看有哪些方法可以用。

35. Card 撲克牌的文件說明

36. Pile 牌疊的文件說明

37. 步驟三：加上撲克牌
用 Card(Card.Suit suit, int value) 建立撲
克牌。
用 addCard(Card newCard) 把撲克牌放到
牌堆。

38. 步驟三：加上撲克牌
public class Table extends World
{
public Table() {
// 建立 600x400 方格的新世界，方格大小為 1x1 像素。
super(600, 400, 1);
// 加上牌牌桌上的牌疊。
addPiles();
// 加上撲克牌。
addCards();
}
}

39. 步驟三：加上撲克牌（續）
import java.util.Collections;
public class Table extends World
{
/**
* 加上撲克牌。
*/
private void addCards()
{
ArrayList<Card> cards = new ArrayList<Card>(); // 產生撲克牌。
for (Card.Suit suit : Card.Suit.values()) {
for (int value = 1; value <= 13; value++) {
cards.add(new Card(suit, value));
}
}
Collections.shuffle(cards); // 洗牌
for (Card card : cards) { // 撲克牌加到未翻開的撲克牌疊。
unflippedPile.addCard(card);
}
}
}

40. 步驟三：加上撲克牌

41. 放好牌後，
下面的暫放區，要先發好一些牌。

42. 發牌的時候
第一疊發一張，第二疊發兩張，
第三疊發三張，依此類推發七疊。
每疊最後一張牌要翻開。

43. 步驟四：發牌到下面的暫放區
用 takeTopCard() 抽出最上面的撲克牌。
用 turnFaceUp() 翻正面，或用
turnFaceDown() 翻背面。
用 addCard(Card card) 把牌放到暫放區的
牌堆。

44. 步驟四：發牌到下面的暫放區
public class Table extends World
{
public Table() {
// 建立 600x400 方格的新世界，方格大小為 1x1 像素。
super(600, 400, 1);
// 加上牌牌桌上的牌疊。
addPiles();
// 加上撲克牌。
addCards();
// 發牌到暫放區。
dealToWorkingPiles();
}
}

45. 步驟四：發牌到下面的暫放區
public class Table extends World
{
/**
* 發牌到暫放區。
*/
private void dealToWorkingPiles()
{
for (int i = 1; i <= workingPiles.size(); i++)
{
WorkingPile target = workingPiles.get(i - 1);
for (int j = 1; j <= i; j++) { // 第 i 疊牌要發 i 張牌。
Card card = unflippedPile.takeTopCard();
target.addCard(card);
}
// 最上面一張撲克牌要翻開。
Card card = target.getTopCard();
card.turnFaceUp();
}
}
}

46. 步驟四：發牌到下面的暫放區

47. 問題

48. 暫放區的撲克牌，
下面的牌被上面的牌蓋掉了，
怎麼辦？

49. 第二張牌要放在第一張下面一點，
第三張牌要放在第二張下面一點，
第四張牌要放在第三張下面一點，
依此類推。

50. 繼承 (Inheritance) 和覆寫
(Override)
子類別 (subclass) 要是沒有覆寫掉父類別
(superclass) 的方法，就會繼承 (inherit)
父類別的方法。
我們原來在 WorkingPile 沒有覆寫
addCard() ，所以會繼承自 Pile 的
addCard() ，新加的牌會放到牌疊的正上方。

51. 繼承 (Inheritance) 和覆寫
(Override)
子類別可以覆寫 (override) 父類別的方法。
這樣可以在不改寫呼叫者程式的情況下，
子類別做一些自己特有的調整。
現在我們要在 WorkingPile 覆寫 addCard() ，
來蓋掉父類別 Pile 的 addCard() 方法，把新
加的牌往下面放一點，露出前面的牌。

52. 繼承 (Inheritance) 和覆寫
(Override)
覆寫時，子類別 (subclass) 可以呼叫
super ，呼叫父類別 (superclass) 中被覆
寫掉的方法，例如 super.addCard() 。
要呼叫父類別 (superclass) 的父類別
(superclass) 時，則用
super.super.addCard() 。
super() 則是指父類別的建構子。
super(600,400,1) 為 World 的建構子，可查
World 的 API 文件說明。

53. 步驟五：覆寫 addCard() 方法
/**
* 暫存區的撲克牌疊。
*/
public class WorkingPile extends Pile
{
/**
* 加一張撲克牌。覆寫（蓋掉）繼承的方法。
*
* @param newCard 要加上去的撲克牌
*/
public void addCard(Card newCard)
{
super.addCard(newCard);
// 把新加上的牌放下面一點，露出前面的牌。
newCard.setLocation(newCard.getX(), newCard.getY() + (getSize() - 1) * 16);
}
}

54. 步驟五：覆寫 addCard() 方法

55. 中場休息
歡迎提出問題