Pong Game

《乓》（英語：Pong）是雅達利在1972年11月29日推出的一款投幣式街機遊戲。《乓》是一款乒乓球遊戲，其英文名稱「Pong」來自乒乓球被擊打後所發出的聲音。《乓》很多時候也被認為是電子遊戲歷史上第一個街機電子遊戲。在此遊戲中，玩家的目的就是在模擬乒乓球比賽中奪取高分以擊敗電腦玩家。此遊戲的開發者為艾倫·奧爾康。

Pong Game0. 本章重點1. 開始遊戲2 令球移動創建一個會動的球令球懂得撞牆反彈3. 製作player1球拍製作球拍令球拍懂得反彈球4. 製作player2球拍5. 計分6. 重啟遊戲7. 考考你附錄. 同一時間操控多個按鍵(選項)

0. 本章重點

建立processing.py程式最基本函數
劃圓和長方型
認識變數，認識global
認識keyPressed鍵盤輸入

1. 開始遊戲


1
def setup():
2
    size(800, 600)
3
def draw():
4
    ellipse(width/2, height/2, 15, 15)

Processing.py程式碼內置兩個函數
- setup()
  - 只會在程式執行時執行一次
  - 通常用來初始化程式
- draw()
  - 類似Arduino中的loop()
  - 會不斷重複執行
  - 通常用來實現動畫和互動等功能
- width和height是關鍵字
  - 對應size()中的長和寬
下一步，就要令中間的球移動

2 令球移動

創建一個會動的球


x
1
ballX=0
2
ballY=0
3
ballSpeedX=0
4
ballSpeedY=0
5

6
def setup():
7
    global ballX, ballY, ballSpeedX, ballSpeedY
8
    
9
    size(800, 600)
10
    ballX = width/2
11
    ballY = height/2
12
    ballSpeedX = -1
13
    ballSpeedY = random(-2, 2)
14
    
15
def draw():
16
    global ballX, ballY, ballSpeedX, ballSpeedY
17
   
18
    background(30)
19
    ballX += ballSpeedX
20
    ballY += ballSpeedY
21
    ellipse(ballX, ballY, 15, 15)


xxxxxxxxxx
4
1
ballX=0
2
ballY=0
3
ballSpeedX=0
4
ballSpeedY=0

創建4個變數，分別為ballX, ballY, ballSpeedX和ballSpeedY。對應的是球的x和y座標，球的x和y的速度。之後在setup()中預設球的位置和初速。(之所以不在一開始宣告就設定它們的值，而是在setup()中，是因為之後restart game時會方便很多)


xxxxxxxxxx
1
1
global ballX, ballY, ballSpeedX, ballSpeedY

Python語言跟其他語言比有點特別，所有的global變數，不需要特別宣告，就可以在所有函數中應用，但如果要在函數中要改變global變數的話，就需要在函數之內用keyword global將global變數宣告一次。


xxxxxxxxxx
4
1
ballX = width/2
2
ballY = height/2
3
ballSpeedX = -1
4
ballSpeedY = random(-2, 2)

一開始球在瑩幕正中，預設向player1(左邊)放向發去，所以ballSpeedX一開始是-1。


xxxxxxxxxx
2
1
ballX += ballSpeedX
2
ballY += ballSpeedY

之後每次draw()不停重覆時，就更新球的x和y座標，將其加上球的速度，這樣球就會不停移動。

令球懂得撞牆反彈


xxxxxxxxxx
25
1
ballX=0
2
ballY=0
3
ballSpeedX=0
4
ballSpeedY=0
5

6
def setup():
7
    global ballX, ballY, ballSpeedX, ballSpeedY
8
    
9
    size(800, 600)
10
    ballX = width/2
11
    ballY = height/2
12
    ballSpeedX = -1
13
    ballSpeedY = random(-2, 2)
14
    
15
def draw():
16
    global ballX, ballY, ballSpeedX, ballSpeedY
17
   
18
    background(30)
19
    ballX += ballSpeedX
20
    ballY += ballSpeedY
21
    
22
    if ballY <= 0 or ballY >= height:
23
        ballSpeedY *= -1;
24
    
25
    ellipse(ballX, ballY, 15, 15)


xxxxxxxxxx
2
1
if ballY <= 0 or ballY >= height:
2
    ballSpeedY *= -1;

要令球懂得在上和上反彈，就要知道它的y座標，所以就用if去判斷它的y座標，如果是少於0或者大於height的話，則代表球已經出界，超出瑩幕範圍，這時就將球的y速度反轉，球就會反彈。(這也是為什麼需要特別去設定一個球的x和y速度的變數，而不直接用ballX+=1或ballY+=1)

3. 製作player1球拍

製作球拍


xxxxxxxxxx
40
1
ballX=0
2
ballY=0
3
ballSpeedX=0
4
ballSpeedY=0
5

6
player1X = 0
7
player1Y = 0
8

9
def setup():
10
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y
11
    
12
    size(800, 600)
13
    ballX = width/2
14
    ballY = height/2
15
    ballSpeedX = -1
16
    ballSpeedY = random(-2, 2)
17
    
18
    player1X = 10
19
    player1Y = height/2
20
    
21
def draw():
22
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y
23
   
24
    background(30)
25
    ballX += ballSpeedX
26
    ballY += ballSpeedY
27
    
28
    if ballY <= 0 or ballY >= height:
29
        ballSpeedY *= -1;
30
    
31
    ellipse(ballX, ballY, 15, 15)
32
    
33
    if keyPressed:
34
        if key == 'W' or key == 'w':
35
            player1Y -= 3
36
        if key == 'S' or key == 's':
37
            player1Y += 3
38
    
39
    rectMode(CENTER)
40
    rect(player1X, player1Y, 10, 50)

下一部就是要製作player的球拍，球拍我們用一個長方形去表示。


xxxxxxxxxx
2
1
player1X = 0
2
player1Y = 0

宣告2個變數，是球拍中心的xy座標位置。


xxxxxxxxxx
2
1
player1X = 10
2
player1Y = height/2

在setup()處，設定球拍的初始位置。


xxxxxxxxxx
8
1
if keyPressed:
2
    if key == 'W' or key == 'w':
3
        player1Y -= 3
4
    if key == 'S' or key == 's':
5
        player1Y += 3
6

7
rectMode(CENTER)
8
rect(player1X, player1Y, 10, 50)

在draw()的最下面，加入控制球拍的指令。keyPress為keyword，當你鍵盤任意按鍵初按下時就會是True，相反則為False。key也是keyword，用來回傳鍵盤按下的鍵相應的值，但值得注意的是，key並不會自動測空，舉例如果按了一下k，在按下一個按鍵之前，key會一直都是k

令球拍懂得反彈球


xxxxxxxxxx
43
1
ballX=0
2
ballY=0
3
ballSpeedX=0
4
ballSpeedY=0
5

6
player1X = 0
7
player1Y = 0
8

9
def setup():
10
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y
11
    
12
    size(800, 600)
13
    ballX = width/2
14
    ballY = height/2
15
    ballSpeedX = -1
16
    ballSpeedY = random(-2, 2)
17
    
18
    player1X = 10
19
    player1Y = height/2
20
    
21
def draw():
22
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y
23
   
24
    background(30)
25
    ballX += ballSpeedX
26
    ballY += ballSpeedY
27
    
28
    if ballY <= 0 or ballY >= height:
29
        ballSpeedY *= -1
30
    
31
    if ballX <= 10 and ballY >= player1Y - 25 and ballY <= player1Y +25:
32
        ballSpeedX *= -1
33
    
34
    ellipse(ballX, ballY, 15, 15)
35
    
36
    if keyPressed:
37
        if key == 'W' or key == 'w':
38
            player1Y -= 3
39
        if key == 'S' or key == 's':
40
            player1Y += 3
41
    
42
    rectMode(CENTER)
43
    rect(player1X, player1Y, 10, 50)


xxxxxxxxxx
2
1
if ballX <= 10 and ballY >= player1Y - 25 and ballY <= player1Y +25:
2
    ballSpeedX *= -1

加入這一段程式，當球的中心座標符合三個範圍的話，球就會反彈(為簡化程式，沒有計算球的半徑，你可以自行考慮加入)

4. 製作player2球拍


xxxxxxxxxx
56
1
ballX=0
2
ballY=0
3
ballSpeedX=0
4
ballSpeedY=0
5

6
player1X = 0
7
player1Y = 0
8

9
player2X = 0
10
player2Y = 0
11

12
def setup():
13
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y, player2X, player2Y
14
    
15
    size(800, 600)
16
    ballX = width/2
17
    ballY = height/2
18
    ballSpeedX = -1
19
    ballSpeedY = random(-2, 2)
20
    
21
    player1X = 10
22
    player1Y = height/2
23
    
24
    player2X = width - 10
25
    player2Y = height/2
26
    
27
def draw():
28
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y, player2X, player2Y
29
   
30
    background(30)
31
    ballX += ballSpeedX
32
    ballY += ballSpeedY
33
    
34
    if ballY <= 0 or ballY >= height:
35
        ballSpeedY *= -1
36
    
37
    if ballX <= 10 and ballY >= player1Y - 25 and ballY <= player1Y +25:
38
        ballSpeedX *= -1
39
        
40
    if ballX >= width - 10 and ballY >= player2Y - 25 and ballY <= player2Y +25:
41
        ballSpeedX *= -1
42
    
43
    ellipse(ballX, ballY, 15, 15)
44
    
45
    if keyPressed:
46
        if key == 'W' or key == 'w':
47
            player1Y -= 3
48
        if key == 'S' or key == 's':
49
            player1Y += 3
50
        if key == 'O' or key == 'o':
51
            player2Y -= 3
52
        if key == 'L' or key == 'l':
53
            player2Y += 3
54
    rectMode(CENTER)
55
    rect(player1X, player1Y, 10, 50)
56
    rect(player2X, player2Y, 10, 50)


xxxxxxxxxx
2
1
player2X = 0
2
player2Y = 0

同樣地，加入變數去記錄球拍2的座標。


xxxxxxxxxx
2
1
player2X = width - 10
2
player2Y = height/2

在setup()中設定初始值。


xxxxxxxxxx
2
1
if ballX >= width - 10 and ballY >= player2Y - 25 and ballY <= player2Y +25:
2
    ballSpeedX *= -1

跟player1的球拍一樣，player2的球拍，要加入判斷式，如果球的x座標大於width-10，即player2球拍的右邊，同一時間又介乎於球拍的y輻範圍當中，就會反彈。


xxxxxxxxxx
1
1
rect(player2X, player2Y, 10, 50)

最後將player2的球拍畫出來。

5. 計分


xxxxxxxxxx
83
1
ballX=0
2
ballY=0
3
ballSpeedX=0
4
ballSpeedY=0
5

6
player1X = 0
7
player1Y = 0
8

9
player2X = 0
10
player2Y = 0
11

12
score1 = 0
13
score2 = 0
14

15
def setup():
16
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y, player2X, player2Y, score1, score2
17
    
18
    size(800, 600)
19
    ballX = width/2
20
    ballY = height/2
21
    ballSpeedX = -1
22
    ballSpeedY = random(-2, 2)
23
    
24
    player1X = 10
25
    player1Y = height/2
26
    
27
    player2X = width - 10
28
    player2Y = height/2
29
    
30
    score1 = 0
31
    score2 = 0
32
    
33
def draw():
34
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y, player2X, player2Y, score1, score2
35
   
36
    background(30)
37
    ballX += ballSpeedX
38
    ballY += ballSpeedY
39
    
40
    if ballY <= 0 or ballY >= height:
41
        ballSpeedY *= -1
42
    
43
    if ballX <= 10 and ballY >= player1Y - 25 and ballY <= player1Y +25:
44
        ballSpeedX *= -1
45
        
46
    if ballX >= width - 10 and ballY >= player2Y - 25 and ballY <= player2Y +25:
47
        ballSpeedX *= -1
48

49
    if ballX <= 0:
50
        score2+=1
51
        ballX = width/2
52
        ballY = height/2
53
        ballSpeedX = 1
54
        ballSpeedY = random(-2, 2)
55
        
56
    if ballX >= width:
57
        score1+=1
58
        ballX = width/2
59
        ballY = height/2
60
        ballSpeedX = -1
61
        ballSpeedY = random(-2, 2)
62
    
63
    ellipse(ballX, ballY, 15, 15)
64
    
65
    if keyPressed:
66
        if key == 'W' or key == 'w':
67
            player1Y -= 3
68
        if key == 'S' or key == 's':
69
            player1Y += 3
70
        if key == 'O' or key == 'o':
71
            player2Y -= 3
72
        if key == 'L' or key == 'l':
73
            player2Y += 3
74
    rectMode(CENTER)
75
    rect(player1X, player1Y, 10, 50)
76
    rect(player2X, player2Y, 10, 50)
77
    
78
    textSize(60)
79
    textAlign(CENTER, CENTER)
80
    text(score1, width/4, 50)
81
    text(score2, width*3/4, 50)
82
    stroke(255)
83
    line(width/2, 10, width/2, height - 10)


xxxxxxxxxx
2
1
score1 = 0
2
score2 = 0

先宣告兩個變數去儲存兩個玩家的分數。再在setup()時設定為0


xxxxxxxxxx
13
1
if ballX <= 0:
2
    score2+=1
3
    ballX = width/2
4
    ballY = height/2
5
    ballSpeedX = 1
6
    ballSpeedY = random(-2, 2)
7

8
if ballX >= width:
9
    score1+=1
10
    ballX = width/2
11
    ballY = height/2
12
    ballSpeedX = -1
13
    ballSpeedY = random(-2, 2)

如果球的x座標少於0或者大於width，則代表球已經出了界，這時就要為相對應的玩家加上一分，而球的球速也要重新放到起始點再來一局。


xxxxxxxxxx
6
1
textSize(60)
2
textAlign(CENTER, CENTER)
3
text(score1, width/4, 50)
4
text(score2, width*3/4, 50)
5
stroke(255)
6
line(width/2, 10, width/2, height - 10)

最後，在draw()的最底下，加上文字，用來顯示兩個分數。

6. 重啟遊戲


xxxxxxxxxx
86
1
ballX = 0
2
ballY = 0
3
ballSpeedX = 0
4
ballSpeedY = 0
5

6
player1X = 0
7
player1Y = 0
8

9
player2X = 0
10
player2Y = 0
11

12
score1 = 0
13
score2 = 0
14

15
def setup():
16
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y,  player2X, player2Y, score1, score2
17
    
18
    size(800, 600)
19
    ballX = width/2
20
    ballY = height/2
21
    ballSpeedX = -1
22
    ballSpeedY = random(-2, 2)
23
    
24
    player1X = 10
25
    player1Y = height/2
26
    
27
    player2X = width - 10
28
    player2Y = height/2
29
    
30
    score1 = 0
31
    score2 = 0
32
    
33
    
34
def draw():
35
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y, player2X, player2Y, score1, score2
36
    
37
    background(30)
38
    ballX += ballSpeedX
39
    ballY += ballSpeedY
40
    
41
    if ballY <= 0 or ballY >= height:
42
        ballSpeedY *= -1
43
    
44
    if ballX <= 10 and ballY >= player1Y - 25 and ballY <= player1Y +25:
45
        ballSpeedX *= -1
46
    
47
    if ballX >= width - 10 and ballY >= player2Y - 25 and ballY <= player2Y +25:
48
        ballSpeedX *= -1
49
        
50
    if ballX <=0:
51
        score2 += 1
52
        ballX  = width/2
53
        ballY = height/2
54
        ballSpeedX = 1
55
        ballSpeedY = random(2, -2)
56

57
    if ballX >= width:
58
        score1 += 1
59
        ballX  = width/2
60
        ballY = height/2
61
        ballSpeedX = 1
62
        ballSpeedY = random(2, -2)   
63
    
64
    ellipse(ballX, ballY, 15,15)
65
    
66
    if keyPressed:
67
        if key == 'W' or key == 'w':
68
            player1Y -=3
69
        if key == 'S' or key == 's':
70
            player1Y +=3
71
        if key == 'O' or key == 'o':
72
            player2Y -=3
73
        if key == 'L' or key == 'l':
74
            player2Y +=3
75
        if key == 'R' or key == 'r':
76
            setup()   
77
    rectMode(CENTER)
78
    rect(player1X, player1Y, 10, 50)
79
    rect(player2X, player2Y, 10, 50)
80
    
81
    textSize(60)
82
    textAlign(CENTER, CENTER)
83
    text(score1, width/4, 50)
84
    text(score2, width*3/4, 50)
85
    stroke(255)
86
    line(width/2, 10, width/2, height - 10)


xxxxxxxxxx
2
1
if key == 'R' or key == 'r':
2
    setup()

在按鍵當中，加入指令，如果按下r鍵的話，就重新執行一次setup()，將所有變數都變回預設值，這也是為甚麼我們經常多此一舉，明明一開始已宣告了一個變數，但又要在setup()中設定它的值多一次。

7. 考考你

請自行為遊戲加入：

嘗試加快球和球拍的移動速度；
球並非一接觸到球拍就會立即反彈，如果將球拍和球一放大就會尤其明顯，嘗試將球接觸到球拍的時機修改一下令遊戲看起來更正常；
將球拍的長度設定成一個變數，另外開設變數(例如叫counter1, counter2)，球每次撞上球拍，counter1或counter2都會對應地加1(視乎撞上的是player1還是player2)，而隨著每次球撞到球拍，球拍的長度都會相應地減少，令遊戲越來越難玩。

附錄. 同一時間操控多個按鍵(選項)

這一節的內容會比較進階，內面的內容會涉及到列表(list), 函數(function)和event，建議你可以先看看第二節的內容再回來修改這一節的遊戲。

當你自己一個人在測試時，你應該不太會發現這問題，但如果真的兩個人一起玩時，就會發現，當一個人在按按鍵，另一個玩家就會停下來。這是因為在processing.py的程式，在每次draw()執行時key只會有一個值，所以當一個按鍵按下時，另一個是不會有反應的。

要解決這個問題，就需要有一個變數去紀錄低按鍵的變化。


xxxxxxxxxx
107
1
ballX = 0
2
ballY = 0
3
ballSpeedX = 0
4
ballSpeedY = 0
5

6
player1X = 0
7
player1Y = 0
8

9
player2X = 0
10
player2Y = 0
11

12
score1 = 0
13
score2 = 0
14

15
Keys = [False, False, False, False, False]
16

17
def setup():
18
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y,  player2X, player2Y, score1, score2
19
    
20
    size(800, 600)
21
    ballX = width/2
22
    ballY = height/2
23
    ballSpeedX = -1
24
    ballSpeedY = random(-2, 2)
25
    
26
    player1X = 10
27
    player1Y = height/2
28
    
29
    player2X = width - 10
30
    player2Y = height/2
31
    
32
    score1 = 0
33
    score2 = 0
34
    
35
    
36
def draw():
37
    global ballX, ballY, ballSpeedX, ballSpeedY, player1X, player1Y, player2X, player2Y, score1, score2
38
    
39
    background(30)
40
    ballX += ballSpeedX
41
    ballY += ballSpeedY
42
    
43
    if ballY <= 0 or ballY >= height:
44
        ballSpeedY *= -1
45
    
46
    if ballX <= 10 and ballY >= player1Y - 25 and ballY <= player1Y +25:
47
        ballSpeedX *= -1
48
    
49
    if ballX >= width - 10 and ballY >= player2Y - 25 and ballY <= player2Y +25:
50
        ballSpeedX *= -1
51
        
52
    if ballX <=0:
53
        score2 += 1
54
        ballX  = width/2
55
        ballY = height/2
56
        ballSpeedX = 1
57
        ballSpeedY = random(2, -2)
58

59
    if ballX >= width:
60
        score1 += 1
61
        ballX  = width/2
62
        ballY = height/2
63
        ballSpeedX = 1
64
        ballSpeedY = random(2, -2)   
65
    
66
    ellipse(ballX, ballY, 15,15)
67
    
68
    if Keys[0] and player1Y > 0:
69
        player1Y -=3
70
    if Keys[1] and player1Y < height:
71
        player1Y +=3
72
    if Keys[2] and player2Y > 0:
73
        player2Y -=3
74
    if Keys[3] and player2Y < height:
75
        player2Y +=3
76
    if Keys[4]:
77
        setup()
78
  
79
    rectMode(CENTER)
80
    rect(player1X, player1Y, 10, 50)
81
    rect(player2X, player2Y, 10, 50)
82
    
83
    textSize(60)
84
    textAlign(CENTER, CENTER)
85
    text(score1, width/4, 50)
86
    text(score2, width*3/4, 50)
87
    stroke(255)
88
    line(width/2, 10, width/2, height - 10)
89
        
90
def setKey(input, state):
91
    if input == 'W' or input == 'w':
92
        Keys[0] = state
93
    if input == 'S' or input == 's':
94
        Keys[1] = state
95
    if input == 'O' or input == 'o':
96
        Keys[2] = state
97
    if input == 'L' or input == 'l':
98
        Keys[3] = state
99
    if input == 'R' or input == 'r':
100
        Keys[4] = state
101

102
def keyPressed():
103
  setKey(key, True)
104

105

106
def keyReleased():
107
  setKey(key, False)


xxxxxxxxxx
1
1
Keys = [False, False, False, False, False]

在程式的最上方宣告變數中，開一個Keys的列表(list)變數。至於列表(list)是甚麼，可以參考這裡。


xxxxxxxxxx
18
1
def setKey(input, state):
2
    if input == 'W' or input == 'w':
3
        Keys[0] = state
4
    if input == 'S' or input == 's':
5
        Keys[1] = state
6
    if input == 'O' or input == 'o':
7
        Keys[2] = state
8
    if input == 'L' or input == 'l':
9
        Keys[3] = state
10
    if input == 'R' or input == 'r':
11
        Keys[4] = state
12

13
def keyPressed():
14
  setKey(key, True)
15

16

17
def keyReleased():
18
  setKey(key, False)

在程式的最低下，新增3個函數。由於在draw()的內置變數key每次只會有一個值，所以我們新增一個函數(function)叫setKey()，當每次特定的按鍵(w, s, o, l, r)按下時，就將相對應的Keys[]內容轉成True，相反當按鍵釋放時就設為False。


xxxxxxxxxx
10
1
if Keys[0] and player1Y > 0:
2
    player1Y -=3
3
if Keys[1] and player1Y < height:
4
    player1Y +=3
5
if Keys[2] and player2Y > 0:
6
    player2Y -=3
7
if Keys[3] and player2Y < height:
8
    player2Y +=3
9
if Keys[4]:
10
    setup()

最後在draw()中，將原本的按鍵部分，修改成剛剛設定的Keys[]列表，順便也加一些限制給它以免玩家的球拍會飛出畫面以外。