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

更新於 2024/08/12閱讀時間約 4 分鐘
raw-image

前言

大家好,這篇文章主要介紹整個網站的架構以及用到的開發工具與套件,也回頭看看自己寫過的程式,哪些地方可以重構與優化的地方,幫自己 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

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

components

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

models

models

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

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

Server

Server

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

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

nodemon

nodemon

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

結語

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

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

參考網站


留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Johnson Huang的沙龍 的其他內容
24點數學遊戲是一款適合小朋友與想動動腦的朋友們的小遊戲,遊戲規則簡單易懂,可訓練邏輯能力。遊戲分為單人與多人模式,可以讓玩家自行挑戰高分或是與其他玩家競爭。算式中不同的數學符號會對應不同的加分機制。遊戲網站連結與專案 repo 也都提供在文章中。
由於最近比較忙碌停更了好一陣子,關於 Flutter 系列目前難產中XD,在開發 Flutter 遊戲之前,我正在進行一個桌遊專案的開發,因為我很喜歡玩桌遊,如果在外面無聊的時候打開手機就可以與朋友一同連線遊玩那該有多好(雖然現在手遊很多),所以我就開始了這個專案,目標是上架各式各樣的桌遊.....
前一篇我們介紹了遊戲模板的基本架構,在這篇文章中會記錄目前的開發進度,主要先把遊戲核心邏輯寫完,再慢慢完成其他功能,在這系列的文章中,我不會太聚焦於寫程式的部分,如果想看程式內容的話,可以到我的 github 上看喔,讓我們開始吧!
前一篇說到遊戲開發的契機以及介紹了開發工具與官方提供的遊戲模板,在這一篇文章中,會開始進行遊戲的設計與製作,目標是上架到 Google Play 與 App Store 平台上,讓我們開始吧!
前言 當今時代,遊戲已經不再只是單純的娛樂,更成為人們生活中不可或缺的一部分。隨著技術的發展,遊戲也從單機遊戲轉變成網路遊戲、手機遊戲、虛擬實境(VR)遊戲等多種形式。Flutter 作為一種跨平台的開發框架,正逐漸成為開發遊戲的一個重要工具。本系列文章將以「輕鬆入門 Flutter 遊戲開發」為題
24點數學遊戲是一款適合小朋友與想動動腦的朋友們的小遊戲,遊戲規則簡單易懂,可訓練邏輯能力。遊戲分為單人與多人模式,可以讓玩家自行挑戰高分或是與其他玩家競爭。算式中不同的數學符號會對應不同的加分機制。遊戲網站連結與專案 repo 也都提供在文章中。
由於最近比較忙碌停更了好一陣子,關於 Flutter 系列目前難產中XD,在開發 Flutter 遊戲之前,我正在進行一個桌遊專案的開發,因為我很喜歡玩桌遊,如果在外面無聊的時候打開手機就可以與朋友一同連線遊玩那該有多好(雖然現在手遊很多),所以我就開始了這個專案,目標是上架各式各樣的桌遊.....
前一篇我們介紹了遊戲模板的基本架構,在這篇文章中會記錄目前的開發進度,主要先把遊戲核心邏輯寫完,再慢慢完成其他功能,在這系列的文章中,我不會太聚焦於寫程式的部分,如果想看程式內容的話,可以到我的 github 上看喔,讓我們開始吧!
前一篇說到遊戲開發的契機以及介紹了開發工具與官方提供的遊戲模板,在這一篇文章中,會開始進行遊戲的設計與製作,目標是上架到 Google Play 與 App Store 平台上,讓我們開始吧!
前言 當今時代,遊戲已經不再只是單純的娛樂,更成為人們生活中不可或缺的一部分。隨著技術的發展,遊戲也從單機遊戲轉變成網路遊戲、手機遊戲、虛擬實境(VR)遊戲等多種形式。Flutter 作為一種跨平台的開發框架,正逐漸成為開發遊戲的一個重要工具。本系列文章將以「輕鬆入門 Flutter 遊戲開發」為題
你可能也想看
Google News 追蹤
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
投資新手大多從身邊市場開始著手,選擇台股市場入門,單筆投資或台股定期定額投資,隨著經驗累積,進入美股市場也是好選擇,這篇文章帶你前進美股投資,證券開戶選擇國內券商複委託,使用美股定期定額投資,並以國泰 CUBE App為例說明。 內容目錄: 1.一站式開戶:以國泰世華 CUBE App 為例
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
介紹一個優質的遊戲知識部落格:遊戲設計中藥鋪,其中「Game Design 資源分享表」十分推薦遊戲開發者閱讀。另外提到Gamker攻壳是一個專業的遊戲評鑑頻道,其深入的評論幫助作者入坑《健身環大冒險》。作者在後記也分享了自己在遊戲開發上的經歷和挑戰。
Thumbnail
其實有很多下載版的實用工具,免費的付費的我都有,但就懶得安裝懶得開,還是喜歡線上直接使用……
Thumbnail
這篇內容,將簡單介紹Asset Browser、Workspace、Inspector、Code Browser,作為入門的介面導覽。
Thumbnail
24點數學遊戲是一款適合小朋友與想動動腦的朋友們的小遊戲,遊戲規則簡單易懂,可訓練邏輯能力。遊戲分為單人與多人模式,可以讓玩家自行挑戰高分或是與其他玩家競爭。算式中不同的數學符號會對應不同的加分機制。遊戲網站連結與專案 repo 也都提供在文章中。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
這篇文章描述了作者從兼職開發轉為全職開發的過程,並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想,最後分享了專案管理和敏捷開發相關的文章與影片。
Thumbnail
網站設計怎麼做?你會嗎?直接教你把握關鍵重點!從基礎網站設計方法開始,4 步學規劃網站佈局、網站設計必備要素、做好互動與動畫效果,直接用工具來打造精美又吸引人的網站設計,留住客戶其實很簡單!快跟我們一起掌握網站設計技巧,提升顧客轉化率!
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
投資新手大多從身邊市場開始著手,選擇台股市場入門,單筆投資或台股定期定額投資,隨著經驗累積,進入美股市場也是好選擇,這篇文章帶你前進美股投資,證券開戶選擇國內券商複委託,使用美股定期定額投資,並以國泰 CUBE App為例說明。 內容目錄: 1.一站式開戶:以國泰世華 CUBE App 為例
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
介紹一個優質的遊戲知識部落格:遊戲設計中藥鋪,其中「Game Design 資源分享表」十分推薦遊戲開發者閱讀。另外提到Gamker攻壳是一個專業的遊戲評鑑頻道,其深入的評論幫助作者入坑《健身環大冒險》。作者在後記也分享了自己在遊戲開發上的經歷和挑戰。
Thumbnail
其實有很多下載版的實用工具,免費的付費的我都有,但就懶得安裝懶得開,還是喜歡線上直接使用……
Thumbnail
這篇內容,將簡單介紹Asset Browser、Workspace、Inspector、Code Browser,作為入門的介面導覽。
Thumbnail
24點數學遊戲是一款適合小朋友與想動動腦的朋友們的小遊戲,遊戲規則簡單易懂,可訓練邏輯能力。遊戲分為單人與多人模式,可以讓玩家自行挑戰高分或是與其他玩家競爭。算式中不同的數學符號會對應不同的加分機制。遊戲網站連結與專案 repo 也都提供在文章中。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
這篇文章描述了作者從兼職開發轉為全職開發的過程,並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想,最後分享了專案管理和敏捷開發相關的文章與影片。
Thumbnail
網站設計怎麼做?你會嗎?直接教你把握關鍵重點!從基礎網站設計方法開始,4 步學規劃網站佈局、網站設計必備要素、做好互動與動畫效果,直接用工具來打造精美又吸引人的網站設計,留住客戶其實很簡單!快跟我們一起掌握網站設計技巧,提升顧客轉化率!
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經