【Day 08】實作 2D 打磚小蜜蜂遊戲畫面的 HTML5 架構（2）

2024 iThome 鐵人賽

DAY 8

自我挑戰組

從零開始全端實作 Express.js + TypeScript + DevOps 系列第 8 篇

16th鐵人賽 html html5

csning1998

2024-09-18 23:39:47

163 瀏覽

分享至

點我查看目錄

前言

在前一天的文章中，我們從我們延續上次的部份，繼續完成遊戲的其他畫面。主要以以下的成就、設定、以及分數與統計頁面，基本上可以把遊戲分為兩個主要區域：

遊戲頁面選單：就是放一些需要轉移到其他頁面的連結。主要以以下內容為主，後續就為以 ...(a) 做帶入，實作頁面時就把代號替換成以下程式碼：
```
  <nav>
      <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="game.html">Game</a></li>
          <li><a href="accomplishments.html">Accomplishments</a></li>
          <li><a href="statistics.html">Score & Stats</a></li>
          <li><a href="settings.html">Settings</a></li>
      </ul>
  </nav>
```
但實際上要在遊戲頁面中呈現哪些超連結，就要看這頁面的 Context 來判斷了。很多時候實做起來才會知道這樣設計合理與否，我們先不在這邊贅述 UI 與 UX 的討論環節。
資訊內容：這個頁面主要要呈現給玩家的資訊或選項。

因為很多遊戲功能都要在實做時才會「想到」而加上，因此以下就先給出基本架構囉。以下都以「資訊內容」為主

實做網頁架構

Step 6: 設計成就頁面 (Accomplishments Page)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accomplishments</title>
</head>
<body>
    <header>
        <h1>Accomplishments</h1>
        ... (a)
    </header>

    <main>
        <section id="accomplishments-list">
            <h2>Unlocked Accomplishments</h2>
            <ul>
                <li>Reached 1000 points</li>
                <li>Defeated 10 enemies</li>
                <li>Completed a level without losing lives</li>
                <li>Used Magnet power-up 5 times</li>
            </ul>

            <h3>Upcoming Accomplishments</h3>
            <ul>
                <li>Reach 5000 points</li>
                <li>Defeat 50 enemies</li>
                <li>Complete 5 levels in a row without dying</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Breakout Game. All rights reserved.</p>
    </footer>
</body>
</html>

在遊戲中會設定「成就」頁面，就是希望玩家可以持續在遊戲中持續自我挑戰，尤其是在多人線上遊戲中更是如此。那我們將「已解鎖的成就」（Unlocked）和「即將解鎖的挑戰」（Upcoming）先分開處理；但其實也可以放在一起，再透過 CSS 與 JavaScript 分出這兩者。那我在此先分開處理，這樣一般在視覺上，玩家遊戲工程師就會比較直觀區分出哪些目標已經完成、哪些目標還未達成。

這裡我們一樣使用 <section> 來分開成就清單，因為這些成就之間都是高度相關的，因此相較於使用 <div> 來說，使用 <section> 還是比較合適。而我們區分開來之後，就可以用 <ui> 跟 <li> 來建立「無序列表」。但試想我們之後可能會設定 100 個成就、甚至更多，總不可能都塞在 HTML 裡面吧？因此我們之後可以用 JSON 的方式對此進行處理。

Step 7: 設計設定頁面 (Settings Page)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Settings</title>
</head>
<body>
    <header>
        <h1>Accomplishments</h1>
					... (a)
    </header>
    <main>
        <section id="game-controls">
            <h3>Controls</h3>
            <ul>
                <li>Move: Arrow Keys or WASD</li>
                <li>Shoot: Spacebar</li>
                <li>Pause: P</li>
            </ul>
        </section>
    </main>
</body>
</html>

遊戲設定基本上是絕對不可少的，主要是因為每一個玩家都會有自己在玩遊戲的習慣或偏好，例如有人不喜歡 BGM、有人習慣 WASD 而不是操作方向鍵…等。試想我們在遊戲中功能越多的時候，大家就會傾向於把常用的功能放在一起，這樣依照自己習慣操作起來就會比較順手。我在上面列了三個範例：

**移動：**能用方向鍵或 WASD。
**射擊：**這通常跟「快捷鍵」有關，大部份遊戲的射擊的設定都是空白鍵。
**暫停：**遊戲暫停鍵設定為 P 鍵，對應到英文的 Pause。

我們也可以實做一個鍵盤 GUI 來讓玩家依照習慣自己設定按鍵，例如十幾年前的楓之谷就有這些按鈕，你會發現功能+技能多到隨便放就滿了：

Source：https://forum.gamer.com.tw/Co.php?bsn=7650&sn=4873848

在後續的實作中，我們也會持續擴展這個設定頁面，讓玩家能夠自訂按鍵快捷鍵設定。而在技術面，我們可以透過 JavaScript 與資料庫來紀錄玩家的偏好設定，然後儲存到後端資料庫中，這樣玩家在下次在同裝置或不同裝置進行登入時，都可以直接自動套用上去。

Step 8: 設計分數與統計頁面 (Score & Statistics Page)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Score & Statistics</title>
</head>
<body>
    <header>
        <h1>Score & Statistics</h1>
				... (a)
    </header>

    <main>
        <section id="score-stats">
            <h2>Player Statistics</h2>
            <table>
                <tr>
                    <th>Statistic</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Total Score</td>
                    <td><span id="total-score">0</span></td>
                </tr>
                <tr>
                    <td>Total Play Time</td>
                    <td><span id="total-play-time">0</span> minutes</td>
                </tr>
                <tr>
                    <td>Total Deaths</td>
                    <td><span id="total-deaths">0</span></td>
                </tr>
                <tr>
                    <td>Levels Completed</td>
                    <td><span id="levels-completed">0</span></td>
                </tr>
            </table>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Breakout Game. All rights reserved.</p>
    </footer>
</body>
</html>

統計遊戲畫面應該是遊戲裡面，最重要的一環了。這重要的不是對玩家本身，而是對遊戲工程師或遊戲公司來說，這些資料都會相當有商業價值。我們以「玩家的行為模式」為例，這些包含遊戲時間、通關數、或是最常使用的武器或技能等，遊戲工程師就可以分析出哪些遊戲機制比較符合需求，或者玩家經常在哪些環節卡關。這些資訊就可以用來進行調整（Tweaking），例如提高或降低難度、或新增更多道具或技能等，讓玩家的可以為了破關而取得這些新道具，這背後又是一個商業模式阿～

統計數據還有一個最常見的用途，就是設計「排行榜」。也就是說，遊戲設計師可以用玩家在遊戲中的一些數據，例如單次關卡最高分、單次攻擊最大值、最短破關時間…等，做成該伺服器的排行榜。有時候也會對此設計一些組隊活動來參加線上賽季，甚至是實體電競等。但你回歸到最本質的問題，就會思考「為何這活動、這些功能會這樣做？原因是什麼？」很多時候答案就會回到一個「因為統計數據顯示這樣做 ... blablabla，因此我們做這樣的或動可以幫助公司或玩家 ... blablabla。」

我們就在以上簡單列出幾個統計數據囉，這是呈現給玩家看的，包含總分、遊戲總時間、死亡次數、以及通關等級這四個。我們通常在這使用表格的方式呈現，因此我們寫一個 <table> 的元素。

Step 9: 設計玩家資料頁面 (User Profile Page)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="User profile page for the 2D Breakout Game">
    <title>User Profile - 2D Breakout Game</title>
</head>

<body>
    <header>
        <h1>User Profile</h1>
				... (a)
    </header>

    <main>
        <!-- Profile Section -->
				... (b)

        <!-- Editable User Information -->
				... (c)
    </main>

    <!-- Footer -->
    <footer>
        <p>&copy; 2024 2D Breakout Game. All Rights Reserved.</p>
        <p><a href="privacy-policy.html">Privacy Policy</a> | <a href="terms.html">Terms of Use</a></p>
    </footer>

</body>
</html>

相信大家在註冊網頁時，都有填寫過包括使用者名稱、電子郵件、還有上傳個人大頭貼。一般來說這都是一個 User Profile Page 裡面相當基本的內容，當然也包含可變更與不可變更的資料。舉例來說，玩家的生日、個人 ID、以及一些以「電子郵件」做為帳號的遊戲，這些資料都是不可變更的；而可以變更的資料就很多了，例如密碼、手機號碼、信用卡資訊、大頭貼、姓名或暱稱等。有些人會在意隱私功能，因此這邊還會需要增設簡單的「隱私權設定」，或是可以單純讓玩家留空。

通常我們如果加入這些個人資料在遊戲中，通常都是這遊戲帶有「社群」的功能，無論是聊天機制、或是可以發文的論壇、或是單純的排行榜等。

那針對以上內容，我們可以額外拆分成（b）以及（c）部份，分述如下：

Profile Section 玩家資料區塊
```
<section id="profile">
    <h2>Your Profile</h2>
    <div id="profile-info">
        <p>Username: <span id="username">somebody</span></p>
        <p>Email: <span id="email">somebody@helloworld.com</span></p>
        <img src="profile-pic.jpg" alt="User's profile picture" width="150">
    </div>
</section>
```
- 我們透過 <span id="username">和<span id="email"> 來顯示玩家目前的帳號以及電子郵件地址（當然有些人偏好設定隱藏）。
- 而 img 標記則是用來顯示玩家上傳的大頭街，我們在這裡設定固定寬度（width="150"）來控制圖片尺寸。
Editable User Information 可編輯的玩家資料區塊
```
<section id="edit-profile">
    <h2>Edit Profile</h2>
    <form action="/update-profile" method="post">
        <label for="username">Change Username:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="email">Change Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <input type="submit" value="Update Profile">
    </form>
</section>
```
在這個區塊中，玩家可以編輯自己的資料，主要包括修改使用者名稱和電子郵件。一般情況下，我們使用HTML表單 <form> 來收集玩家輸入的資料，並透過 POST 方法將資料傳送到後端處理。我們先假定目標是一個名為 /update-profile 的伺服器路徑。而下方的按鈕功能等就不再贅述了，可以參考上一篇在登入表單中的實做部份，有針對語法進行詳細說明

總結

你會發現，HTML 這類的標記語言，就是只要學會一些基本的邏輯，剩下就是套用到各種版面進行對應的功能的實做，無論在頁面安排、超連結、表單、表格、按鈕等都是如此。那還有要考量的，就是「如何讓結構便於管理」，這就像我們要新增新的功能，如果我們的網頁分區是支離破碎的，那在後續要實做新功能的時候，就會容易出現功能不連貫的情況，或是 A 頁面與 B 頁面呈現的基礎架構或重新導向連結完全錯誤...等，這些都是我們要注意的。那我們以上實做了基本的功能，後續還會對此進行擴充。相關的程式碼，週末會放在 GitHub 上給大家參考。

而相同的手法在 CSS 實做中也是一樣，但因為 CSS 有大量「美感偏好」這類的主觀因素在影響，因此會讓人覺得 CSS 很困難。但其實，我們一樣只要掌握一些基本原則，以及語法的用途，就會發現其實 CSS 沒有大家想像中困難。