[遊戲開發] 24點數學遊戲 - 網站製作篇(一)

前言

大家好，這篇文章主要介紹整個網站的架構以及用到的開發工具與套件，也回頭看看自己寫過的程式，哪些地方可以重構與優化的地方，幫自己 Code Review，首先這個網站建構在 Next.js 框架上，用的是 14 以上的版本，Next.js 在 13 版本後開始推出了 App Router 的架構，跟以往的 Pages Router 也很大的不同，相似的地方在於不需要特別定義路由來指定頁面，只需設定好資料夾結構即可，那我們就開始介紹吧。

開發工具

1. 原始碼編輯器 - Visual Studio Code
2. 開發執行環境 - Node.js
3. 開發框架 - Next.js
4. CSS框架 - Tailwind CSS
5. UI Library - shadcn/ui
6. 動畫 Library - framer motion
7. 多人連線套件 - socket.io
8. 狀態管理工具 - zustand
9. js 超集合語言 - Typescript
10. 版本控制 - git

以上是主要是用到的套件與開發工具，其中比較重要的兩個套件是 Next.js 與 socket.io，為了解決 SEO 以及自己的技能樹是 React 所以選擇使用 Next.js 來開發，因為要做多人連線的功能，socket.io 是使用度很高的套件，網路上使用的人也很多，如果遇到問題的話很好找答案且使用起來非常簡單。

網站架構

首先在安裝完 VScode、Node.js、git 後可以在終端機下以下指令：

git clone https://github.com/JohnsonHuang555/math24master.git

把整個專案下載下來到根目錄下

npm install

安裝專案使用到的套件

npm run dev

把專案運行起來並跑在 http://localhost:3000，接著就可以在本地端進行開發與測試

網站架構

上圖是整個網站架構，app 為 Next.js 13 以上的版本所推出的新頁面結構。

app router

資料夾結構會對應到網址例如：

single-play => https://math24master.com/single-play

multiple-play => https://math24master.com/multiple-play

Page

每個資料夾下需要有 page.tsx 才會讀取到路徑，畫面呈現的程式碼會寫在這裡，在 app 底下的 page 就是首頁 https://math24master.com。

Layout

主要用來設計頁面的模板，可以把不會變動的區塊例如：header、footer 定義在這裡，當切換頁面的時候，Layout 不會 rerender，Template 則相反，詳細的用法可以到 Next.js 官方文件查看。

components

上圖為所有元件，把重複性的區塊抽成元件能夠幫助一樣的功能或區塊的程式碼重複利用，達到易維護、易測試、易閱讀的目的，把相同功能或類型的元件再分類會容易找到，一眼就會看出它的作用。

models

上圖是 models，因為使用了 Typescript 要定義各種類型，可以減少許多開發中的低級錯誤，例如打錯字😂，也可以明確知道物件中的屬性成員是哪種型別，方便在開發的時候發現問題。

public 是放 Asset 的地方，例如圖檔、字型等等，這邊就不放圖了。

Server

上圖是 server 的入口點，Next.js 可以客製化自己的 server，我在 server 中初始化了 socket.io 並設定連線及所有事件。

在開發 node 時候每次啟動時都要下 node server/index.js 實在是很不方便，因此我使用了 nodemon 這個套件，它可以幫助我們自動重啟，增加開發上的效率。

nodemon

上圖我們把用的的指令交給 nodemon 來執行，當儲存檔案後他會重新執行 exec 的指令，因為我們是 typescript 所以要用 ts-node 來啟動。

結語

這篇文章介紹了網站的架構以及用到的開發工具，每種套件就可以再寫幾篇文章來介紹了，需要動畫就上網找 github 星星最多最多人用且簡單好上手的，不想慢慢切版切元件，就上網找哪些適合自己網站的 UI Library，這都是開發上的樂趣，一步步把網站建構起來的過程，之後的文章會把每個大項切成小項介紹，或是各種套件的使用方式。

謝謝您的閱讀，我們下篇文章見 ^^

參考網站