Breakout

《Breakout》是一款由雅達利開發及發佈的街機遊戲。此遊戲是由諾蘭·布殊內爾和斯蒂夫·布里斯托構思，並且是參考1972年雅達利街機遊戲《乓》創作，於1976年4月發佈，並且已洐生了不少打磚塊作品，如《Gee Bee》和《快打磚塊》。

Breakout0. 本章重點1. 繪畫一個會彈牆的球1.1 Vector(向量)2. 製作會反彈球的彈板3. 美化一下更加像原版4. 製作磚頭5. 令磚頭消失6. 判斷贏或是輸7. 考考你

0. 本章重點

向量(Vector)
列表(list)
函數(function)
邏輯布林運算
程式常用技巧: 一鍵restart遊戲

1. 繪畫一個會彈牆的球

跟上一次一樣，我們先建立一個空間，畫一個會動的球，這個球在撞到左右兩邊的牆時會反彈。


x
1
ballPosX = 0
2
ballPosY = 0
3
ballVecX = 0
4
ballVecY = 0
5

6
def setup():
7
    global ballPosX, ballPosY, ballVecX, ballVecY
8
    
9
    size(800, 600)
10
    
11
    ballPosX = width/2
12
    ballPosY = height-20
13
    ballVecX = random(-5,5)
14
    ballVecY = -1
15
    
16
def draw():
17
    global ballPosX, ballPosY, ballVecX, ballVecY
18
    
19
    background(30)
20
    
21
    ballPosX = ballPosX + ballVecX
22
    ballPosY = ballPosY + ballVecY
23
    
24
    if (ballPosX <= 0 or ballPosX >= width):
25
        ballVecX *= -1
26
    if (ballPosY <= 0):
27
        ballVecY *= -1
28
    
29
    ellipse(ballPosX, ballPosY, 20, 20)

1.1 Vector(向量)

上述的程式碼沒有甚麼問題，一切都可以運作起來，但你想想，如果是2D遊戲，每個球的座標會有兩個變數，如果是3D的遊戲，每個球的座標就會是3個變數；除了變數較多外，這些變數也不好運作。

這裡介紹一個很好用的數學工具叫Vector(向量)。詳細的數學方面的教學可看看這裡。


xxxxxxxxxx
24
1
ballPos = PVector()
2
ballVec = PVector()
3

4
def setup():
5
    global ballPos, ballVec
6
    
7
    size(800, 600)
8
    
9
    ballPos = PVector(width/2, height-20)
10
    ballVec = PVector(random(-5,5), -1)
11

12
def draw():
13
    global ballPos, ballVec
14
    
15
    background(30)
16
    
17
    ballPos = ballPos.add(ballVec)
18
    
19
    if (ballPos.x <= 0 or ballPos.x >= width):
20
        ballVec.x *= -1
21
    if ballPos.y <=0:
22
        ballVec.y *= -1
23
    
24
    ellipse(ballPos.x, ballPos.y, 20, 20)


xxxxxxxxxx
2
1
ballPos = PVector()
2
ballVec = PVector()

就是宣告一個空的Vector


xxxxxxxxxx
2
1
ballPos = PVector(width/2, height-20)
2
ballVec = PVector(random(-5,5), -1)

跟上面分開宣告x和y一樣，但這裡只要集中x和y宣告一次就可以了。


xxxxxxxxxx
6
1
ballPos = ballPos.add(ballVec)
2

3
if (ballPos.x <= 0 or ballPos.x >= width):
4
    ballVec.x *= -1
5
if ballPos.y <=0:
6
    ballVec.y *= -1

之前是ballPosX加上ballVecX，ballPosY加上ballVecY，這裡其實都是做同一樣的事情，只是用向量的方式進行。

如果要指定一個向量(vector)的獨立軸的值(例如x軸)，可以用這樣表示: ballPos.x。

2. 製作會反彈球的彈板


xxxxxxxxxx
34
1
ballPos = PVector()
2
ballVec = PVector()
3

4
beam = PVector()
5

6
def setup():
7
    global ballPos, ballVec, beam
8
    
9
    size(800, 600)
10
    
11
    ballPos = PVector(width/2, height-20)
12
    ballVec = PVector(random(-5,5), -1)
13
    
14
    beam = PVector(width/2, height-15)
15
    rectMode(CENTER)
16

17
def draw():
18
    global ballPos, ballVec, beam
19
    
20
    background(30)
21
    
22
    ballPos = ballPos.add(ballVec)
23
    beam = PVector(mouseX, beam.y)
24
    
25
    if (ballPos.x <= 0 or ballPos.x >= width):
26
        ballVec.x *= -1
27
    if ballPos.y <=0:
28
        ballVec.y *= -1
29
    
30
    if ballPos.x >= beam.x - 25 and ballPos.x <= beam.x + 25 and ballPos.y >= height-15:
31
        ballVec.y *= -1
32
    
33
    ellipse(ballPos.x, ballPos.y, 20, 20)
34
    rect(beam.x, beam.y, 50, 10)


xxxxxxxxxx
1
1
beam = PVector()

宣告一個叫beam的向量。


xxxxxxxxxx
2
1
beam = PVector(width/2, height-15)
2
rectMode(CENTER)

在setup()中預返beam的位置，將rectMode()設定為CENTER。


xxxxxxxxxx
6
1
beam = PVector(mouseX, beam.y)
2

3
if ballPos.x >= beam.x - 25 and ballPos.x <= beam.x + 25 and ballPos.y >= height-15:
4
    ballVec.y *= -1
5
    
6
rect(beam.x, beam.y, 50, 10)

在draw()中，每幀都指定beam的位置為(mouseX, height-15)，跟上一次的Pong一樣，當球撞到板後，就反彈球。而今次我們最後將beam畫出來。

3. 美化一下更加像原版


xxxxxxxxxx
37
1
ballPos = PVector()
2
ballVec = PVector()
3

4
beam = PVector()
5
beamWidth = 100
6

7
def setup():
8
    global ballPos, ballVec, beam
9
    
10
    size(800, 600)
11
    
12
    ballPos = PVector(width/2, height-20)
13
    ballVec = PVector(random(-5,5), -1)
14
    
15
    beam = PVector(width/2, height-15)
16
    rectMode(CENTER)
17

18
def draw():
19
    global ballPos, ballVec, beam
20
    
21
    background(30)
22
    
23
    ballPos = ballPos.add(ballVec)
24
    beam = PVector(mouseX, beam.y)
25
    
26
    if (ballPos.x <= 0 or ballPos.x >= width):
27
        ballVec.x *= -1
28
    if ballPos.y <=0:
29
        ballVec.y *= -1
30
    
31
    if ballPos.x >= beam.x - beamWidth/2 and ballPos.x <= beam.x + beamWidth/2 and ballPos.y >= height-15:
32
        ballVec.y *= -1
33
    
34
    fill(198, 73, 75)
35
    noStroke()
36
    rect(ballPos.x, ballPos.y, 20, 20)
37
    rect(beam.x, beam.y, beamWidth, 10)


xxxxxxxxxx
1
1
beamWidth = 100

加入一個變數beamWidth用來控製球拍的寬度。


xxxxxxxxxx
2
1
if ballPos.x >= beam.x - beamWidth/2 and ballPos.x <= beam.x + beamWidth/2 and ballPos.y >= height-15:
2
        ballVec.y *= -1

原本球拍寬度為50時，球拍一半就是25，所以要用ballPos.x >= beam.x - 25 and ballPos.x <= beam.x + 25，現在設定了球拍的寬度為beamWidth，所以要改成為ballPos.x >= beam.x - beamWidth/2 and ballPos.x <= beam.x + beamWidth/2


xxxxxxxxxx
4
1
fill(198, 73, 75)
2
noStroke()
3
rect(ballPos.x, ballPos.y, 20, 20)
4
rect(beam.x, beam.y, beamWidth, 10)

最後將球和拍畫出來。顏色跟隨原版，沒有框線。

4. 製作磚頭


xxxxxxxxxx
57
1
ballPos = PVector()
2
ballVec = PVector()
3

4
beam = PVector()
5
beamWidth = 100
6

7
brickPos = []
8
brickState = [] 
9
brickWidth = 0
10
brickHeight = 0
11
brickColor = ["#C54846","#CE7238","#BB7C2F","#A29B27","#429143","#4350CC"]
12

13
def setup():
14
    global ballPos, ballVec, beam, brickPos, brickWidth, brickHeight
15
    
16
    size(800, 600)
17
    
18
    ballPos = PVector(width/2, height-20)
19
    ballVec = PVector(random(-5,5), -1)
20
    
21
    beam = PVector(width/2, height-15)
22
    rectMode(CENTER)
23
    
24
    brickWidth = width/16
25
    brickHeight = 20
26
    
27
    for i in range(6):
28
        elements = []
29
        for j in range(16):
30
            elements.append(PVector(j*brickWidth+brickWidth/2, i*brickHeight+50))
31
        brickPos.append(elements)
32

33
def draw():
34
    global ballPos, ballVec, beam, brickPos, brickWidth, brickHeight
35
    
36
    background(30)
37
    
38
    ballPos = ballPos.add(ballVec)
39
    beam = PVector(mouseX, beam.y)
40
    
41
    if (ballPos.x <= 0 or ballPos.x >= width):
42
        ballVec.x *= -1
43
    if ballPos.y <=0:
44
        ballVec.y *= -1
45
    
46
    if ballPos.x >= beam.x - beamWidth/2 and ballPos.x <= beam.x + beamWidth/2 and ballPos.y >= height-15:
47
        ballVec.y *= -1
48
    
49
    fill(198, 73, 75)
50
    noStroke()
51
    rect(ballPos.x, ballPos.y, 20, 20)
52
    rect(beam.x, beam.y, beamWidth, 10)
53
    
54
    for i in range(6):
55
        fill(brickColor[i])
56
        for j in range(16):
57
            rect(brickPos[i][j].x, brickPos[i][j].y, brickWidth, brickHeight)


xxxxxxxxxx
5
1
brickPos = []
2
brickState = [] 
3
brickWidth = 0
4
brickHeight = 0
5
brickColor = ["#C54846","#CE7238","#BB7C2F","#A29B27","#429143","#4350CC"]

在setup()之前，宣告所有磚的位置、狀況(是出現還是消失)、寬度、長度和每一行磚的顏色。值得注意的是brickPos和brickState，由於有6x16塊磚，而每塊磚都有自己的狀態，所以我們不可能用6x16個不同命名的變數去裝起它們，這裡我們用一個list去裝起它們。甚麼是list，可以參考這裡。


xxxxxxxxxx
8
1
brickWidth = width/16
2
brickHeight = 20
3

4
for i in range(6):
5
    elements = []
6
    for j in range(16):
7
        elements.append(PVector(j*brickWidth+brickWidth/2, i*brickHeight+50))
8
    brickPos.append(elements)

按著在setup()中，先定義每塊磚的長和寬。利用for 去重覆，每次更新每塊磚的位置。由於rectMode()是用CENTER，所以每塊磚的x座標要再加上半塊磚的距離。


xxxxxxxxxx
4
1
for i in range(6):
2
    fill(brickColor[i])
3
    for j in range(16):
4
        rect(brickPos[i][j].x, brickPos[i][j].y, brickWidth, brickHeight)

最後在draw()中，將所有的磚畫出來。每行的磚都有自己的顏色，這時就要用之前事前已經用list存好的brickColor[]

5. 令磚頭消失


xxxxxxxxxx
78
1
ballPos = PVector()
2
ballVec = PVector()
3

4
beam = PVector()
5
beamWidth = 100
6

7
brickPos = []
8
brickState = [] 
9
brickWidth = 0
10
brickHeight = 0
11
brickColor = ["#C54846","#CE7238","#BB7C2F","#A29B27","#429143","#4350CC"]
12

13
def setup():
14
    global ballPos, ballVec, beam, brickPos, brickWidth, brickHeight, brickState
15
    
16
    size(800, 600)
17
    
18
    ballPos = PVector(width/2, height-20)
19
    ballVec = PVector(random(-5,5), -1)
20
    
21
    beam = PVector(width/2, height-15)
22
    rectMode(CENTER)
23
    
24
    brickWidth = width/16
25
    brickHeight = 20
26
    
27
    for i in range(6):
28
        elements = []
29
        for j in range(16):
30
            elements.append(PVector(j*brickWidth+brickWidth/2, i*brickHeight+50))
31
        brickPos.append(elements)
32
        
33
    for i in range(6):
34
        stateElements = []
35
        for j in range(16):
36
            stateElements.append(True)
37
        brickState.append(stateElements)
38
        
39
def draw():
40
    global ballPos, ballVec, beam, brickPos, brickWidth, brickHeight, brickState
41
    
42
    background(30)
43
    
44
    ballPos = ballPos.add(ballVec)
45
    beam = PVector(mouseX, beam.y)
46
    
47
    if (ballPos.x <= 0 or ballPos.x >= width):
48
        ballVec.x *= -1
49
    if ballPos.y <=0:
50
        ballVec.y *= -1
51
    
52
    if ballPos.x >= beam.x - beamWidth/2 and ballPos.x <= beam.x + beamWidth/2 and ballPos.y >= height-15:
53
        ballVec.y *= -1
54
    
55
    fill(198, 73, 75)
56
    noStroke()
57
    rect(ballPos.x, ballPos.y, 20, 20)
58
    rect(beam.x, beam.y, beamWidth, 10)
59
    
60
    for i in range(6):
61
        fill(brickColor[i])
62
        for j in range(16):
63
            if isInBox(ballPos, brickPos[i][j]):
64
                brickState[i][j] = False
65
            if brickState[i][j]:
66
                rect(brickPos[i][j].x, brickPos[i][j].y, brickWidth, brickHeight)
67
                
68

69
def isInBox(_ballPos, _brickPos):
70
    x = _ballPos.x
71
    y = _ballPos.y
72
    bX = _brickPos.x
73
    bY = _brickPos.y
74
    w = brickWidth
75
    h = brickHeight
76
    
77
    if x >= bX - w/2 and x <= bX + w/2 and y >= bY - h/2 and y <= bY + h/2:
78
        return True


xxxxxxxxxx
5
1
for i in range(6):
2
    stateElements = []
3
    for j in range(16):
4
        stateElements.append(True)
5
    brickState.append(stateElements)

在setup()中，加入另一個for loop，初始化brickState變成6x16的2d list，並將全部內容都設為True。


xxxxxxxxxx
10
1
def isInBox(_ballPos, _brickPos):
2
    x = _ballPos.x
3
    y = _ballPos.y
4
    bX = _brickPos.x
5
    bY = _brickPos.y
6
    w = brickWidth
7
    h = brickHeight
8
    
9
    if x >= bX - w/2 and x <= bX + w/2 and y >= bY - h/2 and y <= bY + h/2:
10
        return True

在setup()和draw()之外，加入第3個自定的函數(function)。這個函數(function)你可以隨意命名，不一定要跟我一樣，函數(function)有2個參數(parameter)，python不需要跟其他程式一樣事前定義參數(parameter)的數據格式，你導入的引數(Argument)格式是甚麼就是甚麼，一般為了方便驅分，參數的命名如果跟全域變數(global varaiable)很像的話，都會在名字前面加入_。


xxxxxxxxxx
7
1
for i in range(6):
2
    fill(brickColor[i])
3
    for j in range(16):
4
        if isInBox(ballPos, brickPos[i][j]):
5
            brickState[i][j] = False
6
        if brickState[i][j]:
7
            rect(brickPos[i][j].x, brickPos[i][j].y, brickWidth, brickHeight)

每次在繪畫磚塊之時，檢查一下球有否撞過磚塊，如果有的話, 就將其狀態(brickState)設定為False，在繪畫時就不繪畫它。

6. 判斷贏或是輸


xxxxxxxxxx
111
1
ballPos = PVector()
2
ballVec = PVector()
3

4
beam = PVector()
5
beamWidth = 100
6

7
brickPos = []
8
brickState = [] 
9
brickWidth = 0
10
brickHeight = 0
11
brickColor = ["#C54846","#CE7238","#BB7C2F","#A29B27","#429143","#4350CC"]
12

13
gameOver = False
14

15
def setup():
16
    global ballPos, ballVec, beam, brickPos, brickWidth, brickHeight, brickState
17
    
18
    size(800, 600)
19
    
20
    ballPos = PVector(width/2, height-20)
21
    ballVec = PVector(random(-5,5), -5)
22
    
23
    beam = PVector(width/2, height-15)
24
    rectMode(CENTER)
25
    
26
    brickWidth = width/16
27
    brickHeight = 20
28
    
29
    for i in range(6):
30
        elements = []
31
        for j in range(16):
32
            elements.append(PVector(j*brickWidth+brickWidth/2, i*brickHeight+50))
33
        brickPos.append(elements)
34
        
35
    for i in range(6):
36
        stateElements = []
37
        for j in range(16):
38
            stateElements.append(True)
39
        brickState.append(stateElements)
40
        
41
    gameOver = False    
42
                             
43
def draw():
44
    if not gameOver:
45
        runGame()
46
        checkIfWin()
47
        checkIfLose()
48

49
def isInBox(_ballPos, _brickPos):
50
    x = _ballPos.x
51
    y = _ballPos.y
52
    bX = _brickPos.x
53
    bY = _brickPos.y
54
    w = brickWidth
55
    h = brickHeight
56
    
57
    if x >= bX - w/2 and x <= bX + w/2 and y >= bY - h/2 and y <= bY + h/2:
58
        return True
59
    
60
def runGame():
61
    global ballPos, ballVec, beam, brickPos, brickWidth, brickHeight, brickState
62
    
63
    background(30)
64
        
65
    ballPos = ballPos.add(ballVec)
66
    beam = PVector(mouseX, beam.y)
67
    
68
    if (ballPos.x <= 0 or ballPos.x >= width):
69
        ballVec.x *= -1
70
    if ballPos.y <=0:
71
        ballVec.y *= -1
72
    
73
    if ballPos.x >= beam.x - beamWidth/2 and ballPos.x <= beam.x + beamWidth/2 and ballPos.y >= height-15:
74
        ballVec.y *= -1
75
        ballVec.x += random(-5,5)
76
    
77
    fill(198, 73, 75)
78
    noStroke()
79
    rect(ballPos.x, ballPos.y, 20, 20)
80
    rect(beam.x, beam.y, beamWidth, 10)
81
    
82
    for i in range(6):
83
        fill(brickColor[i])
84
        for j in range(16):
85
            if isInBox(ballPos, brickPos[i][j]):
86
                brickState[i][j] = False
87
            if brickState[i][j]:
88
                rect(brickPos[i][j].x, brickPos[i][j].y, brickWidth, brickHeight)
89

90
def checkIfLose():
91
    global gameOver
92
    if (ballPos.y >= height):
93
        gameOver = True
94
        textSize(48)
95
        textAlign(CENTER, CENTER)
96
        text("GAME OVER", width/2, height/2)
97

98
def checkIfWin():
99
    global gameOver
100
    
101
    hasTrue = False
102
    
103
    for i in range(6):
104
        for j in range(16):
105
            hasTrue = hasTrue or brickState[i][j]
106
    
107
    if hasTrue == False:
108
        gameOver = True
109
        textSize(48)
110
        textAlign(CENTER, CENTER)
111
        text("YOU WIN", width/2, height/2)


xxxxxxxxxx
29
1
def runGame():
2
    global ballPos, ballVec, beam, brickPos, brickWidth, brickHeight, brickState
3
    
4
    background(30)
5
        
6
    ballPos = ballPos.add(ballVec)
7
    beam = PVector(mouseX, beam.y)
8
    
9
    if (ballPos.x <= 0 or ballPos.x >= width):
10
        ballVec.x *= -1
11
    if ballPos.y <=0:
12
        ballVec.y *= -1
13
    
14
    if ballPos.x >= beam.x - beamWidth/2 and ballPos.x <= beam.x + beamWidth/2 and ballPos.y >= height-15:
15
        ballVec.y *= -1
16
        ballVec.x += random(-5,5)
17
    
18
    fill(198, 73, 75)
19
    noStroke()
20
    rect(ballPos.x, ballPos.y, 20, 20)
21
    rect(beam.x, beam.y, beamWidth, 10)
22
    
23
    for i in range(6):
24
        fill(brickColor[i])
25
        for j in range(16):
26
            if isInBox(ballPos, brickPos[i][j]):
27
                brickState[i][j] = False
28
            if brickState[i][j]:
29
                rect(brickPos[i][j].x, brickPos[i][j].y, brickWidth, brickHeight)

首先開一個函數叫runGame()，將所有原本在draw()之中的內容都剪下貼上到這個函數之中。留意一下，在這裡的第16行，被加入了一句ballVec.x += random(-5,5)，令到每次當球反彈時，不會根據物理原理跟隨法線反彈，而是會隨機加一點亂數，放便消除所有的磚，否則有一些磚可能要花十分多時間才會消除。


xxxxxxxxxx
1
1
gameOver = False

在程式最開始的宣告區，開一個變數叫gameOver，在setup()中設定它為False。


xxxxxxxxxx
5
1
def draw():
2
    if not gameOver:
3
        runGame()
4
        checkIfWin()
5
        checkIfLose()

在原本的draw()中，修改一下，如果gameOver是False的話，即代表遊戲還沒有結束，所以就要runGame()即繼續遊戲，之後額外加多2個函數，分別去檢查遊戲是贏了還是輸了。


xxxxxxxxxx
7
1
def checkIfLose():
2
    global gameOver
3
    if (ballPos.y >= height):
4
        gameOver = True
5
        textSize(48)
6
        textAlign(CENTER, CENTER)
7
        text("GAME OVER", width/2, height/2)

要檢查是否輸就很簡單，如果球飛出了畫面，就即是輸了，所以檢查ballPos.y，如果大於height的話即出了界，就判定其為輸。


xxxxxxxxxx
14
1
def checkIfWin():
2
    global gameOver
3
    
4
    hasTrue = False
5
    
6
    for i in range(6):
7
        for j in range(16):
8
            hasTrue = hasTrue or brickState[i][j]
9
    
10
    if hasTrue == False:
11
        gameOver = True
12
        textSize(48)
13
        textAlign(CENTER, CENTER)
14
        text("YOU WIN", width/2, height/2)

要檢查是否贏就一點複雜，首先要參考一下下表:

在邏輯運算中，or 的邏輯運算，兩個輸入只要有一個是True，就會得出結果為True。所以一開始我們設定一個叫hasTrue的變數，一開始的值是False，之後將所有的brickState[][]都和這個變數or一次，如果其中一個(例如是第2個)是True的話，那麼結果就會變成True，之後即使再or其他的brickState[][]，brickState[][]的狀態即使是False，之前的結果也已經轉成了True，所以再or也是True。除非全部的brickState[][]都是False，那麼跟hasTrue全部or一次的結果才會是False。(這是一個寫遊戲很常用的技巧，可以記一下，之後寫遊戲會經常用得著)

7. 考考你

請自行為遊戲加入：

按下鍵盤的r鍵後會自動重啟這個遊戲；
加入生命值，如果出了界的話，不會立即gameover，而是會減少生命值，例如有3次機會，出界3次後少gameover。再將生命值用文字顯示在最上方正中，像原版一樣；
加入分數(score)，每當消除一塊磚就加1分，將分數顯示在遊戲左上角；
加入回合制，完成了一關之後，可以開始下一回合，下一回合的磚頭數量(例如行數加多一行)會有變化，每兩至三關球的速度會加速，消滅磚塊的分數也會跟據回合倍增變成第1關1分, 第2關2分等等。