【Python】那些年我們一起玩過的遊戲(四)-貪吃蛇(上)

A、提案企劃

一句話形容這個遊戲

• 闔家娛樂的對戰遊戲

遊戲類型

• 休閒類

遊戲特色

• 對戰
• 闔家娛樂

發想概念

• 藉由重製Blockade(封鎖線)遊戲學習Python語言

遊戲玩法

• 需兩人同時一起遊玩
• 控制不斷前進與的長條並阻擋對手繼續前進

目標族群

• 用Python學遊戲

發行平台

• Windows
• MAC
• Linux

預計製作期

• 7天

美術風格

• 復古字元風格

遊戲周邊

• 復古遊戲機

製作人員需求

• 企劃 x 1
• 美術 x 1
• 程式 x 1

收費方式

• 佛家弟子不談錢談緣，什麼是緣。。。50元(好冷)

製作預算

• 繼續燒熱血當預算

參考資料

• Jugando a Blockade 1976

B、執行企劃

前言

本企劃的重點依然還是以重製Blockade(封鎖線)遊戲來學習使用Python語言，希望讓您能在學習程式語言同時也能了解到遊戲的運作原理。

使用解析度

• 800 x 600

遊戲玩法

遊戲流程

遊戲畫面示意圖

細節說明

• 畫面上箭頭會持續朝前方移動
• 箭頭每移動一格線段就會增加一格
• 在箭頭移動中玩家可操控左右上下轉向
• 箭頭碰到我方或對方線段就算失敗，失敗後對方分數加1
• 雙方任一方先達到分數6遊戲結束

遊戲操作

鍵盤

Esc：結束遊戲

Enter：開始遊戲

P：開啟/關閉遊戲除錯模式

W：1P上移動

A：1P左移動

S：1P下移動

D：1P右移動

上：2P上移動

左：2P左移動

下：2P下移動

右：2P右移動

美術元件列表

• 字元”▨”，編碼1
• 字元”▦”，編碼2
• 字元”⠀”，編碼3
• 字元”6”，編碼6
• 字元”▴”，編碼10
• 字元”▾”，編碼11
• 字元”◂”，編碼12
• 字元”▸”，編碼13
• 字元”▵”，編碼20
• 字元”▿”，編碼21
• 字元”◃”，編碼22
• 字元”▹”，編碼23

Ｃ、開發日誌

開發工具

使用語言與版本

Python 3.7.0

安裝套件

在安裝套件前建議先檢查一下pip管理工具並更新，請在命令列輸入以下指令：

python -m pip install --upgrade pip

以下為所需安裝套件：

• PyGame - 遊戲開發套件

請在命令列輸入以下指令以進行安裝：

pip install pygame

第2~3天

系統分析與設計

關於文字模式

經歷過DOS時代的前輩們都非常熟習這個模式，在這模式下只能使用系統提供的ASCII碼來作畫面顯示，其實在Windows上也可以體驗文字模式，只要開啟 ”命令提示字元”程式。

言歸正傳提到文字模式主要是想說明本次的教學我們會以摸擬文字模式的風格來繪製遊戲畫面，也就是說我們遊戲的畫面繪製會把”字元”當作圖形來顯示，這樣會讓畫面的感覺更趨近街機版的Blockade(封鎖線)，接下來我們需要先選一套裡面有本次遊戲所需用到的圖案字型庫，在這邊我選用了微軟免費等寬字型(Cascadia Code)來當主要的字型庫，以下是字型庫下載網址，進入後請下載Cascadia.ttf檔案：

下載完畢後在Cascadia.ttf上快速點擊兩下，會出現以下視窗：

點擊”安裝”將此字形檔安裝進您的Windows系統，並且打開字元對應表程式：

將字形選到”Cascadia Code”，這些字元裡面的某些部分稍後會被我們選作遊戲的基本圖形使用，這在稍後的遊戲程式說明裡會在進一步解說。

關於陣列元素對應畫面技巧

何謂陣列元素對應畫面技巧？我們實際舉個例子來說明，會比較容易理解， 首先我們設定8x8二維陣列如下：

接下來在二維陣列內填入數字1如下：

然後判斷二維陣列只要填入1的地方就在畫面相對位置上顯示字元■，完成後就可以看到如下圖案：

這就是陣列元素對應畫面技巧，只要依照在二維陣列內填入代表各種圖形的數字，然後繪圖的時候在判斷二維陣列內的數字將相對應到的字元顯示在畫面上就可以了，這也是本次遊戲教學在顯示畫面時所使用到的技巧。

其實這技巧也常被用在PRG遊戲的地圖顯示上，這等以後有機會分享RPG類遊戲教學時在詳細說明。

第4~7天

程式碼說明

主程式

所有Blockade(封鎖線)的邏輯運作與繪圖方法都在這邊執行，已將程式碼放置GitHub Gist上，點選以下連結查看：

【play.py程式碼】

# 遊戲區大小. 

game_area_width  = 64

game_area_height = 48

# 遊戲區陣列. 

gameAreaArray =[[0]*game_area_height for i in range(game_area_width)]

# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

# 函數:秀字. 

# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

def showFont( text, x, y, color): 

  global canvas 

  text = font_24.render(text, True, color) 

  canvas.blit( text, (x,y))

# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

# 函數:判斷邊界-1P. 

# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

def ifBoundary1P(direction): 

  global gameAreaArray, game1P_x, game1P_y, playFial, score2P   

  # 判斷邊界. 

  if(game1P_x > game_area_width-2): 

    game1P_x = game_area_width-1 

  elif(game1P_x < 1): 

    game1P_x = 0 

  if(game1P_y > game_area_height-2): 

    game1P_y = game_area_height-1 

  elif(game1P_y < 1): 

    game1P_y = 0 

  

  # 設定失敗. 

  if(gameAreaArray[game1P_x][game1P_y] != 0): 

    playFial = 1 

    gameAreaArray[game1P_x][game1P_y] = 2 

    # 加對方分數. 

    score2P += 1 

  else: 

    # 箭頭. 

    if(direction==0): 

      gameAreaArray[game1P_x][game1P_y] = 10 

    elif(direction==1): 

      gameAreaArray[game1P_x][game1P_y] = 11 

    elif(direction==2): 

      gameAreaArray[game1P_x][game1P_y] = 12 

    elif(direction==3): 

      gameAreaArray[game1P_x][game1P_y] = 13

# 判斷邊界. 

  if(game1P_x > game_area_width-2): 

    game1P_x = game_area_width-1 

  elif(game1P_x < 1): 

    game1P_x = 0 

  if(game1P_y > game_area_height-2): 

    game1P_y = game_area_height-1 

  elif(game1P_y < 1): 

    game1P_y = 0

# 設定失敗. 

if(gameAreaArray[game1P_x][game1P_y] != 0): 

  playFial = 1 

  gameAreaArray[game1P_x][game1P_y] = 2 

  # 加對方分數. 

  score2P += 1 

else: 

  # 箭頭. 

  if(direction==0): 

    gameAreaArray[game1P_x][game1P_y] = 10 

  elif(direction==1): 

    gameAreaArray[game1P_x][game1P_y] = 11 

  elif(direction==2): 

    gameAreaArray[game1P_x][game1P_y] = 12 

  elif(direction==3): 

    gameAreaArray[game1P_x][game1P_y] = 13

# 初始. 

pygame.init() 

# 顯示Title. 

pygame.display.set_caption(u”封鎖線遊戲”) 

# 建立畫佈大小. 

canvas = pygame.display.set_mode((canvas_width, canvas_height))

# 時脈.                           

clock = pygame.time.Clock()                                                   # 設定字型.                           

font_24 = pygame.font.Font("Fonts/Cascadia.ttf", 24)                                                   # 重新開始遊戲.                           

restart()

# 1P位置.                                   

gameAreaArray[game1P_x][game1P_y] = 11                           

# 2P位置.                                   

gameAreaArray[game2P_x][game2P_y] = 20# 設定字型. 

font_24 = pygame.font.Font(“Fonts/Cascadia.ttf”, 24) 

# 重新開始遊戲. 

restart()

# 1P位置.                                   

gameAreaArray[game1P_x][game1P_y] = 11                           

# 2P位置.                                   

gameAreaArray[game2P_x][game2P_y] = 20

# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

# 判斷輸入. 

# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

for event in pygame.event.get(): 

  # 離開遊戲. 

  if event.type == pygame.QUIT: 

    running = False 

  # 判斷按下按鈕 

  if event.type == pygame.KEYDOWN: 

    # 判斷按下ESC按鈕 

    if event.key == pygame.K_ESCAPE: 

      running = False 

    # 除錯訊息開關. 

    elif event.key == pygame.K_p: 

      debug_message = not debug_message 

    # 0:遊戲結束. 

    if gameMode == 0:  

      # 開始遊戲. 

      if event.key == pygame.K_RETURN: 

        # 初始分數. 

        score1P = 0 

        score2P = 0 

        # 重新開始遊戲. 

        restartTime = 0 

        restart() 

        # 設定開始遊戲. 

        gameMode = 1

# 1:遊戲中. 

    elif gameMode == 1: 

      # — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

      # 1P-上. 

      if event.key == pygame.K_w: 

        game1P_direction = 0 

      # — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

      # 1P-下. 

      elif event.key == pygame.K_s: 

        game1P_direction = 1 

      # — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

      # 1P-左. 

      elif event.key == pygame.K_a: 

        game1P_direction = 2 

      # — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

      # 1P-右. 

      elif event.key == pygame.K_d: 

        game1P_direction = 3 

      # — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

      # 2P-上. 

      if event.key == pygame.K_UP: 

        game2P_direction = 0 

      # — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

      # 2P-下. 

      elif event.key == pygame.K_DOWN: 

        game2P_direction = 1 

      # — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

      # 2P-左. 

      elif event.key == pygame.K_LEFT: 

        game2P_direction = 2 

      # — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

      # 2P-右. 

      elif event.key == pygame.K_RIGHT: 

        game2P_direction = 3

# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

# 遊戲模式. 

# 0:遊戲結束. 

if gameMode == 0: 

  # 清除顯示區. 

  for y in range(18,24): 

    for x in range(25,40): 

      gameAreaArray[x][y] = 3 

      # 顯示GameOver與雙方分數. 

      showFont( “GAME”, 380, 240, green) 

      showFont( “OVER”, 380, 262, green) 

      showFont( str(score1P), 340, 262, green) 

      showFont( str(score2P), 460, 262, green)

# 還沒分出勝負. 

if (playFial == 0): 

  if(move): 

    # 1P位置. 

    gameAreaArray[game1P_x][game1P_y] = 1 

    # 1P前進方向. 

    # 0:上. 

    if (game1P_direction == 0): 

      game1P_y -= 1 

    # 1:下. 

    elif (game1P_direction == 1): 

      game1P_y += 1 

    # 2:左. 

    elif (game1P_direction == 2): 

      game1P_x -= 1 

    # 3:右. 

    elif (game1P_direction == 3): 

      game1P_x += 1 

    # 1P判斷邊界. 

    ifBoundary1P(game1P_direction) 

  else: 

    # 2P位置. 

    gameAreaArray[game2P_x][game2P_y] = 1 

    # 2P前進方向. 

    # 0:上. 

    if (game2P_direction == 0): 

      game2P_y -= 1 

    # 1:下. 

    elif (game2P_direction == 1):  

      game2P_y += 1 

    # 2:左. 

    elif (game2P_direction == 2): 

      game2P_x -= 1 

    # 3:右. 

    elif (game2P_direction == 3): 

      game2P_x += 1 

    # 1P判斷邊界. 

    ifBoundary2P(game2P_direction) 

  move = not move

# 分出勝負. 

else: 

  # 1P失敗，閃爍失敗處. 

  if(playFial==1): 

    if(gameAreaArray[game1P_x][game1P_y]==2):

      gameAreaArray[game1P_x][game1P_y] = 3 

    else: 

      gameAreaArray[game1P_x][game1P_y] = 2 

  # 2P失敗，閃爍失敗處. 

  elif(playFial==2): 

    if(gameAreaArray[game2P_x][game2P_y]==2):

      gameAreaArray[game2P_x][game2P_y] = 3 

    else: 

      gameAreaArray[game2P_x][game2P_y] = 2 

  # 重新開始遊戲時間. 

  restartTime += 1 

  if((restartTime / fps) == 3): 

    # 判斷遊戲結束. 

    if(score1P >=6 or score2P >= 6): 

      # 設定遊戲結束. 

      gameMode = 0 

    else: 

      restartTime = 0 

      restart() # 重新開始遊戲.

# 在畫面上繪製閃爍的失敗點與分數

if (playFial > 0): 

  # 1P失敗，2P閃爍分數. 

  if(playFial==1): 

    if(gameAreaArray[game1P_x][game1P_y]==2): 

      showFont( str(score2P), ((CONST_STARTING_2P_POS_X)*12)+15, ((CONST_STARTING_2P_POS_Y + 2)*12), green) 

      showFont( str(score1P), ((CONST_STARTING_1P_POS_X)*12)+15, ((CONST_STARTING_1P_POS_Y — 2)*12), green) 

  # 2P失敗，1P閃爍分數. 

  elif(playFial==2): 

    if(gameAreaArray[game2P_x][game2P_y]==2): 

      showFont( str(score1P), ((CONST_STARTING_1P_POS_X)*12)+15, ((CONST_STARTING_1P_POS_Y — 2)*12), green) 

    showFont( str(score2P), ((CONST_STARTING_2P_POS_X)*12)+15, ((CONST_STARTING_2P_POS_Y + 2)*12), green)

# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

# 設定外框. 

gameAreaArray[32][0]=6 

for x in range(game_area_width): 

  if(gameAreaArray[x][0]==0): 

    gameAreaArray[x][0] = 1 

  if(gameAreaArray[x][game_area_height-1]==0): 

    gameAreaArray[x][game_area_height-1] = 1 

for y in range(game_area_height): 

  if(gameAreaArray[0][y]==0): 

    gameAreaArray[0][y] = 1 

  if(gameAreaArray[game_area_width-1][y]==0):

    gameAreaArray[game_area_width-1][y] = 1

# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 

# 繪製遊戲區. 

ix = 15 

iy = 2 

for y in range(game_area_height): 

  for x in range(game_area_width): 

    # 方塊. 

    if(gameAreaArray[x][y]==1): 

      showFont( u”▨”, ix, iy, green) 

    # 死亡. 

    elif(gameAreaArray[x][y]==2): 

      showFont( u”▦”, ix, iy, green) 

    # 空白. 

    elif(gameAreaArray[x][y]==3): 

      showFont( u”⠀”, ix, iy, green) 

    # 6

    elif(gameAreaArray[x][y]==6): 

      showFont( u”6", ix, iy, green) 

    # 1p-上箭頭. 

    elif(gameAreaArray[x][y]==10): 

      showFont( u”▴”, ix, iy, green) 

    # 1p-下箭頭. 

    elif(gameAreaArray[x][y]==11): 

      showFont( u”▾”, ix, iy, green) 

    # 1p-左箭頭. 

    elif(gameAreaArray[x][y]==12): 

      showFont( u”◂”, ix, iy, green) 

    # 1p-右箭頭. 

    elif(gameAreaArray[x][y]==13): 

      showFont( u”▸”, ix, iy, green) 

    # 2p-上箭頭. 

    elif(gameAreaArray[x][y]==20): 

      showFont( u”▵”, ix, iy, green) 

    # 2p-下箭頭. 

    elif(gameAreaArray[x][y]==21): 

      showFont( u”▿”, ix, iy, green) 

    # 2p-左箭頭. 

    elif(gameAreaArray[x][y]==22): 

      showFont( u”◃”, ix, iy, green) 

    # 2p-右箭頭. 

    elif(gameAreaArray[x][y]==23): 

      showFont( u”▹”, ix, iy, green) 

    # 除錯. 

    if(debug_message): 

      if(gameAreaArray[x][y]!=0): 

        # 顯示陣列編碼. 

        showFont( str(gameAreaArray[x][y]), ix, iy, (255, 0, 0)) 

        # 顯示FPS. 

        showFont( u”FPS:” + str(int(clock.get_fps())), 8, 2, (255, 255, 255)) 

      ix+=12 

    ix = 15 

    iy+=12

# 除錯. 

if(debug_message): 

  if(gameAreaArray[x][y]!=0): 

    # 顯示陣列編碼. 

    showFont( str(gameAreaArray[x][y]), ix, iy, (255, 0, 0)) 

    # 顯示FPS. 

    showFont( u”FPS:” + str(int(clock.get_fps())), 8, 2, (255, 255, 255))

執行遊戲

• 請在命令列下輸入python play.py 以執行遊戲

GitHub下載原始碼

後記

這次貪吃蛇系列很罕見的分成上下兩期來寫，主要是因為在找貪吃蛇相關資料的時候，發現原來貪吃蛇的玩法是從Blockade(封鎖線)這款遊戲變形而來，並且在看了Blockade(封鎖線)遊玩影片後發現其封閉式的雙打體驗還滿吸引我的，所以就決定上篇先以致敬Blockade(封鎖線)為開頭，下篇再將大家帶入主題貪吃蛇，順便也讓大家了解到原來貪吃蛇是從Blockade(封鎖線)變形而來的這個冷知識，希望大家會喜歡，本次教學也到這邊結束囉，接下來敬請期待下篇的貪吃蛇教學。