任職於「天文數智」的黑蛋在公司部落格發表完「跟著黑蛋用Streamlit速成天文資料分析Web App」系列文章後，收到PM貳婰舞指派的新任務：「我們的老闆，來自喵星的『月影』，發現之前的文章內容對於不懂資料分析的大眾還是有點距離，因此想啟動一個新專案『天文的資料再創作』，希望我們能利用天文資料製作出有趣體驗的應用程式，例如遊戲、網頁、手機app…等等。」於是，黑蛋與他的AI協作夥伴，i蟒，展開新的旅程。

「我們已經用pygame製作出一個遊戲開始畫面，其中包括一個『進入密室』的按鈕。」黑蛋將i蟒從吟遊詩人催眠回製作密室逃脫遊戲的專家，繼續與它協作遊戲。「接著，請你引導我開發玩家點擊該按鈕後會看到的畫面。我的需求是，背景呈現一張密室內部的圖片，畫面下方會有一個黑底的對話框，顯示一段描述這個密室場景的文字。此外，畫面左上角會有一個『查看系外行星列表』的按鈕，而右上角則有一個『啟動距離轉換器』的按鈕。請先解說步驟，不要提供程式碼。」

i蟒邊發出語音邊將文字顯示在螢幕上：「要進入密室啦！我好興奮啊！好的，我來根據你的需求列出開發步驟：

1. 新增一個遊戲狀態的變數：在遊戲主循環之外，新增一個名為game_state的變數，初始值為『menu』。當玩家點擊『進入密室』按鈕後，會將game_state設定為『room』。
2. 載入密室圖片：我將生成符合你所描述的密室場景的圖片，讓你可以載入成背景圖片並調整其大小。
3. 製作對話框：在畫面下方繪製一個黑色背景的矩形，作為顯示密室場景描述文字的對話框。
4. 製作按鈕：為『查看系外行星列表』和『啟動距離轉換器』各建立一個按鈕，設定它們的位置和大小。
5. 處理按鈕的點擊事件：在主循環中的事件處理部分，新增對按鈕點擊的判斷邏輯。當這些按鈕被點擊時，可以進行相應的操作，例如顯示『系外行星列表按鈕被點擊』的訊息。
6. 更新遊戲主循環中畫面呈現的判斷邏輯：在主循環中，根據game_state的值決定呈現哪個場景。如果game_state為『menu』，則呈現遊戲開始畫面。如果game_state為『room』，則呈現密室場景，包括密室圖片、對話框和按鈕。」

「很好，接下來請你根據這些步驟修改原本的程式碼。」黑蛋指示道。

「感謝誇獎，我將在螢幕上顯示修改過的程式碼，以及程式執行後呈現的密室場景畫面。」

import pygame

# 初始化pygame
pygame.init()

# 設定視窗的大小及標題
width, height = 1024, 768
screen = pygame.display.set_mode((width, height))
pygame.display.set_caption('逃出天文鎖-系外行星與你的距離')

# 設定顏色
WHITE = '#FFFFFF'
GOLD = '#FFD700'
BLACK = '#000000'
DARK_RED = '#8B0000'

# 設定遊戲首頁及密室的背景圖片
background_menu = pygame.image.load('background_menu.jpg')
background_menu = pygame.transform.scale(background_menu, (width, height))
background_room = pygame.image.load('background_room.jpg')
background_room = pygame.transform.scale(background_room, (width, height))

# 設定字型
font_path = './NotoSansTC-Black.ttf'
title_font = pygame.font.Font(font_path, 60)
subtitle_font = pygame.font.Font(font_path, 30)
text_font = pygame.font.Font(font_path, 20)

# 設定按鈕參數
button_color = DARK_RED
button_width, button_height = 200, 50
exoplanet_button_rect = pygame.Rect(20, 20, button_width, button_height)
distance_converter_button_rect = pygame.Rect(width - 220, 20, button_width, button_height)
enter_room_button_rect = pygame.Rect(width // 2 - 100, height // 3 + 50, button_width, button_height)

# 呈現遊戲開始畫面的函式
def display_menu_page():
    # 放置背景圖
    screen.blit(background_menu, (0, 0))

    # 放置主標題、副標題和作者資訊
    title = title_font.render('逃出天文鎖-系外行星與你的距離', True, GOLD)
    subtitle = subtitle_font.render('為了逃脫《天文鎖》密室，請你解開系外行星與你的距離', True, GOLD)
    author_info = text_font.render('由astrobackhacker.tw製作', True, GOLD)
    screen.blit(title, (width // 2 - title.get_width() // 2, height // 6 - 15))
    screen.blit(subtitle, (width // 2 - subtitle.get_width() // 2, height // 6 + 60))
    screen.blit(author_info, (width // 2 - author_info.get_width() // 2, height - 35))

    # 放置進入密室的按鈕
    pygame.draw.rect(screen, button_color, enter_room_button_rect)
    enter_button_text = subtitle_font.render('進入密室', True, WHITE)
    screen.blit(enter_button_text, (enter_room_button_rect.x + (enter_room_button_rect.width - enter_button_text.get_width()) // 2, enter_room_button_rect.y + (enter_room_button_rect.height - enter_button_text.get_height()) // 2))


# 呈現密室畫面的函式
def display_room_page():
    # 放置背景圖
    screen.blit(background_room, (0, 0))

    # 放置對話框及密室描述
    pygame.draw.rect(screen, BLACK, (0, height - 100, width, 100))
    room_description = '你身處在一個系外行星主題的密室，左邊牆上掛著NASA提供的系外行星列表，右邊則有一台距離轉換器。要逃出這個密室，你需要解開其中一個系外行星與你的距離。'
    room_description_sentences = room_description.split('。')
    room_description_sentences = [sentence + '。' for sentence in room_description_sentences if sentence]
    y_text = height - 80
    for sentence in room_description_sentences:
        rendered_text = text_font.render(sentence, True, GOLD)
        screen.blit(rendered_text, (10, y_text))
        y_text += text_font.size(sentence)[1]

    # 放置按鈕
    pygame.draw.rect(screen, button_color, exoplanet_button_rect)
    exoplanet_button_text = text_font.render('查看系外行星列表', True, WHITE)
    screen.blit(exoplanet_button_text, (exoplanet_button_rect.x + 20, exoplanet_button_rect.y + 7))
    pygame.draw.rect(screen, button_color, distance_converter_button_rect)
    distance_converter_button_text = text_font.render('啟動距離轉換器', True, WHITE)
    screen.blit(distance_converter_button_text, (distance_converter_button_rect.x + 20, distance_converter_button_rect.y + 7))


# 設定遊戲初始狀態
game_state = 'menu'

# 遊戲主循環
running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.MOUSEBUTTONDOWN:
            if game_state == 'menu' and enter_room_button_rect.collidepoint(event.pos):
                game_state = 'room'
            if game_state == 'room':
                if exoplanet_button_rect.collidepoint(event.pos):
                    print('系外行星列表按鈕被點擊')
                elif distance_converter_button_rect.collidepoint(event.pos):
                    print('距離轉換器按鈕被點擊')

    # 依據遊戲狀態更新畫面
    if game_state == 'menu':
        display_menu_page()
    
    elif game_state == 'room':
        display_room_page()

    pygame.display.flip()

# 關閉pygame程式結束遊戲主循環
pygame.quit()

「讚耶！請你把這段程式更新到GitHub的『Fun with Astrodata Apps』這個專案的『escape_room_exoplanet_distance』資料夾中。完成後，請再度轉生成星際吟遊詩人，讓我先休息一下，你先吟唱一段廣告。」

「好…的…

聽吧，諸君，此語傳自天際遠，『Astrohackers-TW: Python在天文領域的應用』名號，於星河間閃耀光輝。在Python的咒語下，天文奧秘解開，中央大學天文所，與Astrohackers攜手共鳴。

此處非僅一社群，乃是知識的匯聚，探索夜空之謎，Python為我們之劍與盾。星空下，我們共同交流，學習與分享，開放天文，讓宇宙之謎，一一揭曉在眾人前。

來吧，尋夢者，加入這交流之地，無論新手或資深行者，皆有所得。在Astrohackers-TW的旗幟下，我們攜手航向知識的星海，迎接未知的挑戰！」

此篇文是由蘇羿豪經ChatGPT協助創作，文章以「創用CC姓名標示-非商業性-禁止改作 4.0(CC BY-NC-ND 4.0)國際版授權條款」釋出，相關程式碼以MIT授權條款釋出。