[遊戲開發] maore 線上桌遊網站上線啦
閱讀時間約 2 分鐘
前言
由於最近比較忙碌停更了好一陣子，關於 Flutter 系列目前難產中XD，在開發 Flutter 遊戲之前，我正在進行一個桌遊專案的開發，因為我很喜歡玩桌遊，如果在外面無聊的時候打開手機就可以與朋友一同連線遊玩那該有多好(雖然現在手遊很多)，所以我就開始了這個專案，目標是上架各式各樣的桌遊，讓玩家可以在網頁上就可以遊玩。
網站命名
命名往往都是一個難題，不管是遊戲角色暱稱ああああああ、你的綽號等等，總是讓我們傷透腦筋，一定要取一個有梗好記的名稱，因為我喜歡貓所以想取個跟貓有關的名字，某天在網路上看到貓咪打人的影片突然來了靈感，就決定是你了貓蕊取自台語而英文名稱就是 maore 啦，就是貓你一拳的意思，連 Logo 都畫好了。
Logo
網站架構
網站頁面目前總共三頁分別為：
- 首頁 - 列出所有遊戲
首頁
- 遊戲頁 - 該遊戲介紹以及可以建立房間、加入房間
遊戲頁
- 房間頁 - 顯示當前玩家資訊、聊天視窗、遊戲設定、開始遊戲、準備遊戲
房間頁
遊戲列表
目前共有兩款遊戲
- 象棋(暗棋)
這一款是第一款上架的遊戲，遊戲規則相對簡單，適合當第一款練習的遊戲，現在只有標準模式，未來規劃會作連吃模式。
象棋(暗棋)
- 數學算式牌
運用手牌中的數字搭配數學符號解題，這是我第一個原創遊戲，目前還是很陽春，之後可以加一些道具功能牌使遊戲更有變化性。
數學算式牌
- 排七
經典撲克牌遊戲，下一款預計要做的遊戲，撲克牌類型的遊戲蠻具有挑戰性的，UI 呈現以及邏輯複雜度都比前兩個要來的困難。
開發工具
由於我想要有更好的 SEO(搜尋引擎最佳化)，而我擅長的前端框架是 React，所以我選擇用 Next.js 來開發，搭配 custom server express.js 來實作後端。
多人連線遊戲的實作十分複雜，一般會想到用 socket.io 來做這個即時連線功能，某天我在看線上教學時發現 colyseus 套件，這個套件主要專注在多人連線這塊，並提供了創建房間、加入房間、房間設定等等方便的方法可以使用，大大降低了開發成本，讓我可以專注在遊戲開發上。
結語
目前遊戲已經上線了並掛在 GCP 上，大家有興趣都可以上去玩看看，但由於是一個人開發所以 bug 應該會不少XD，之後會陸陸續續更新遊戲開發進度或是一些系統功能的實作當作自己的開發日誌。
P.S. 關於 maore 這個名字，上線後一搜尋竟然先找到馬約特語的搜尋結果，看來SEO 還有待改善，網站描述與頁面資訊都還沒提供完整。
google 結果
最後附上網站連結以及專案連結，可以的話幫我 github 按個星星，謝謝大家^^
7會員
9內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
這篇文章介紹一位獨立開發者如何設計一個嶄新的異世界魔法系統，融合現實中的科學概念與虛構現象，創造出獨特的法術特性與規則。內容涵蓋法術場、海平面、法術反應、法術反噬及法術動量等多種設定，展示了遊戲潛在的深度與玩樂體驗，並邀請讀者關注開發進度與試玩資訊。
文章介紹了遊戲的核心事件，包括選牌、出牌和計算分數的邏輯與實作。首先介紹遊戲開始時的選牌事件，接著解析出牌事件及算式計算的過程，最後詳述分數計算的邏輯。
本篇介紹單人遊戲的核心架構與邏輯，涵蓋發牌、抽牌、出牌及遊戲結算等重要步驟。文章也詳細介紹了使用 socket.io 建立連線的過程，並說明如何利用 React Hooks 管理遊戲狀態，提及後端伺服器如何處理玩家加入房間的事件，並簡要介紹了房間資訊的管理，此文將分為多篇進一步介紹遊戲事件部分。
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
遊戲是元宇宙的重要組成部分和試驗場。
在我的構想中，元宇宙可以成為一種綜合應用介面，使人們能夠在三維的環境中，更有效率地完成任務。
想像我們去超市時，自然地掃視貨架找到所需產品。若同樣情形換到網路購物平台，一個貨架的商品可能要分散在多個分頁中。
「各位空中的聽友恁好，刷落來，袂為大家播送耶這條歌---《昨日重現 Yesterday Once More》，是由住在遠遠耶澳洲耶好朋友阿蓮點的歌，多謝收聽！」
這首卡本特兄妹的《昨日重現》，發表於1973年，由哥哥理查．卡本特作詞作曲，到現在還是很受到全球歌迷的喜愛，<Every sha-la-l
超夯的奶酥你吃過了嗎><原本只有在網路上觀望而已
被我意外的發現實體快閃店面 而且還超級多人排隊!
原本只有快閃一個月的正面奶酥！
現在正式轉為正櫃！
想吃的朋友 可以到【PARK2 草悟廣場 1F】排隊購入🤣
貼心提醒🏷奶酥醬一律從官網訂購，現場無法選購!
如果想從戲劇找尋「事變」的緣由，編劇的任務之一自是要將這些「史實」（或/與 「傳聞」）轉化成「合理的戲劇情節」。也就是說，在創作過程中，創作者要不斷提醒自身創作的「核心目標」，才不至於在填補（fill-in）這些「歷史圖像」中的「盲點」（blind spot）中迷失在散漫無章的想像風暴中。
「人、事、時、地、物」是一般戲劇創作中最重要的五項元素，ˋ藉由操控「主元素」和 「背景元素」的關係，戲劇創作者可以巧妙影響閱聽者對「主元素」的觀感。雖然一般人的閱聽習慣會將焦點集中在「人物」上，但是我們也可以嘗試將焦點轉在「事物」上，但這樣一來，不免涉及道創作者對史實的解讀。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
這篇文章介紹一位獨立開發者如何設計一個嶄新的異世界魔法系統，融合現實中的科學概念與虛構現象，創造出獨特的法術特性與規則。內容涵蓋法術場、海平面、法術反應、法術反噬及法術動量等多種設定，展示了遊戲潛在的深度與玩樂體驗，並邀請讀者關注開發進度與試玩資訊。
文章介紹了遊戲的核心事件，包括選牌、出牌和計算分數的邏輯與實作。首先介紹遊戲開始時的選牌事件，接著解析出牌事件及算式計算的過程，最後詳述分數計算的邏輯。
本篇介紹單人遊戲的核心架構與邏輯，涵蓋發牌、抽牌、出牌及遊戲結算等重要步驟。文章也詳細介紹了使用 socket.io 建立連線的過程，並說明如何利用 React Hooks 管理遊戲狀態，提及後端伺服器如何處理玩家加入房間的事件，並簡要介紹了房間資訊的管理，此文將分為多篇進一步介紹遊戲事件部分。
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
遊戲是元宇宙的重要組成部分和試驗場。
在我的構想中，元宇宙可以成為一種綜合應用介面，使人們能夠在三維的環境中，更有效率地完成任務。
想像我們去超市時，自然地掃視貨架找到所需產品。若同樣情形換到網路購物平台，一個貨架的商品可能要分散在多個分頁中。
「各位空中的聽友恁好，刷落來，袂為大家播送耶這條歌---《昨日重現 Yesterday Once More》，是由住在遠遠耶澳洲耶好朋友阿蓮點的歌，多謝收聽！」
這首卡本特兄妹的《昨日重現》，發表於1973年，由哥哥理查．卡本特作詞作曲，到現在還是很受到全球歌迷的喜愛，<Every sha-la-l
超夯的奶酥你吃過了嗎><原本只有在網路上觀望而已
被我意外的發現實體快閃店面 而且還超級多人排隊!
原本只有快閃一個月的正面奶酥！
現在正式轉為正櫃！
想吃的朋友 可以到【PARK2 草悟廣場 1F】排隊購入🤣
貼心提醒🏷奶酥醬一律從官網訂購，現場無法選購!
如果想從戲劇找尋「事變」的緣由，編劇的任務之一自是要將這些「史實」（或/與 「傳聞」）轉化成「合理的戲劇情節」。也就是說，在創作過程中，創作者要不斷提醒自身創作的「核心目標」，才不至於在填補（fill-in）這些「歷史圖像」中的「盲點」（blind spot）中迷失在散漫無章的想像風暴中。
「人、事、時、地、物」是一般戲劇創作中最重要的五項元素，ˋ藉由操控「主元素」和 「背景元素」的關係，戲劇創作者可以巧妙影響閱聽者對「主元素」的觀感。雖然一般人的閱聽習慣會將焦點集中在「人物」上，但是我們也可以嘗試將焦點轉在「事物」上，但這樣一來，不免涉及道創作者對史實的解讀。