本課程除了互動遊戲的設計，以及 Canvas 動畫的實驗之外，資料表單與界面的應用也相當重要。 因此，期末報告主要分兩個部份，一題是寫出一個 JSON 的資料表，然後匯入到 JavaScript 為主的網頁中， 進行資料的分析、展示與應用，包括點餐功能、購物車功能、服飾樣板販售功能的網頁，都可以使用這樣的技巧，因此， 期末第一題，請大家自行設計一個與上述功能有關的資料來處理，題目不拘。

• JSON 資料表的製作：

就類似我們在第 10 章的作業提到的 API 功能，只是做成一個 txt 的檔案來取代，輸出的則是直接輸出所有的資訊即可。 至於這個檔案的內容格式你也能自訂，依據你的網頁需求來設計即可。不過還是有些需要注意的部份，底下是以點餐系統為主來設計時， 你的 JSON 表單需要有的資訊：

• 至少需要 15 個以上的餐點
• 每個餐點需要的資料，包括：
  • 圖示檔名網址 (圖示需要自行上傳，且不能有版權爭議)
  • 餐點名稱
  • 餐點價格
  • 餐點份量
  • 餐點的相關介紹
  • 其他你認為需要的部份

• JavaScript 為主的系統設計

以點餐系統為例，我們至少需要有：餐點展示的頁面、點擊餐點後出現餐點資料的視窗、填寫資料之後系統防呆後與彙整後的資料、最終點餐準備送出的提示頁面， 以及最終匯出成為 JSON 格式的輸出資料 (無須寫入系統，但需要展現出來)。這樣才算是一個完整的點餐系統。亦即需要的頁面至少需要有底下的功能：

• 使用 Ajax 的功能，匯入上個 JSON 表單的資料
• 製作一個畫面，可以依據上述的 JSON 列出所有的餐點圖示與內容
• 提供使用者點餐的畫面，可以總結點餐的結果
• 最終列出點餐的結果，並且轉成 JSON 格式。
• 如果能夠用上拖曳等 API 的行為，完善使用者界面，會更好！

本課程最後都在玩 Canvas，包括遊戲與動畫，都可以用到這個有趣的玩意兒。不但可以透過簡單的網頁直接玩遊戲，連許多遊戲動畫的繪製， 也能夠使用這個 Canvas 來達成。請模仿第 12 章的作業 - 射擊遊戲那個作業，自行發想不同的互動遊戲，遊戲至少需要包含底下的項目：

• 需要使用到 Canvas 動畫設計影像或背景等部份 - 最好是能夠有動態的顯示部份
• 需要有過關與失敗的限制 (通常是時間，或者是時間內完成的數量等)
• 過關或失敗需要有不同的展示畫面
• 遊戲中需要有音效，背景音樂可有可無
• 無論過關或失敗，都需要將所有的事件移除，讓使用者無法持續操作。

不能使用本教材已經使用的射擊遊戲來開發你的期末遊戲，不過，你可以使用類似翻牌遊戲、猜拳遊戲、野球權遊戲、貪吃蛇遊戲、打字練習遊戲、 配對遊戲等，都可以！重點是，不要抄襲！助教會拿你們的程式碼上網比對！所以，不要抄襲！