> ## Content Index
> Fetch the complete content index at: https://ezslotdesign.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 老虎機前端開發 Part 2
- URL: https://ezslotdesign.com/slot-frontend02/
- Published: 2019-04-01T00:00:22.000Z
- Updated: 2026-08-19T13:30:39.000Z
- Description: 大家好，本系列會從前端的角度跟大家介紹一些老虎機的開發設計和心法，帶大家認識一下老虎機遊戲前端開發的流程。
- Author: 耀西中了一箭
- Tags: 老虎機程式

大家好，延續[上一篇](https://ezslotdesign.com/slot-frontend01/)的開發心法，第二個想說的心法是: “成長你的技能樹”，本篇將會聚焦在前端的部分，引導和介紹一些前端開發的技術和工具。

軟體的開發除了要學習程式語言，最重要的就是選擇開發技術和工具，而遊戲的開發工具選擇非常多，尤其我們做Client前端畫面的，資源和選擇也是非常豐富。

關於遊戲開發的工具，大家比較常聽到的可能有會常用來開發3A遊戲的[**Unreal Engine**](https://www.unrealengine.com/en-US/what-is-unreal-engine-4?ref=ezslotdesign.com) ，或是一直非常流行的[**Unity**](https://unity3d.com/?ref=ezslotdesign.com)，以博弈業來說 ，早期Adobe Flash 以及搭配視訊串流的技術，甚至在過去十年間讓線上博弈推上一波高峰 ，只可惜現在已經末期了，幾乎所有的廠商都慢慢捨棄掉Flash產品，轉型做 App 或是 Web 前端。

---

要學習什麼? 

之前曾經在[**介紹前端工作的文章**](https://ezslotdesign.com/work-exp10/)有提到，前端技術更新得很快，說真的要學也學不完，等你學完可能新的又出來了，學習好框架、JS 語法、CSS 技巧、打包以及發布工具等等的技能都是必須的，無論你是獨自開發或是團隊工作。至於有那些相關技術可以學習，可以參考最新的 [ **前端 Front-end 學習地圖**](https://github.com/goodjack/developer-roadmap-chinese?ref=ezslotdesign.com#%E5%89%8D%E7%AB%AF-frontend-%E8%B7%AF%E7%B7%9A%E5%9C%96)。

那為什麼要學習這麼多的前端技術和工具？首先它是一個熱門趨勢、 有著支持團隊開發的架構、易於實踐 RWD 響應式網頁、成熟的技術生態圈和工具，以及讓你成為一個**有價值的前端工程師**。

---

如何學習? 

因為是熱門的技術，所以網路上的學習資源其實非常的多，像是最近看到的一個[**前端課程教材**](https://github.com/5xRuby/5xtraining/blob/master/frontend.md?ref=ezslotdesign.com)，或是[**Udemy**](https://www.udemy.com/?ref=ezslotdesign.com)上搜尋都有很多完整的教學影片，另外就是直接找到你想學習的技術官網找tutorial或是example練習。當然，唯有動手做才是你自己的。

這邊也建議最好在實作中多看看別人怎麼寫 (從工作專案中成長也是很重要的)，不斷的google 、到 Stack Overflow 找答案 、不斷的從錯誤中學習 (Debug) … 當然重點就是**不要放棄**。

![](https://ezslotdesign.com/content/images/2026/06/image-115-opt.webp)

---

推薦的工具 

除了上述的前端的技術之外，也有不少好用的前端遊戲引擎和工具可以搭配，讓遊戲畫面的表現有更多的可能性。

1. 首先是**IDE工具**的部分，最紅的就是**[微軟的 vscode](https://code.visualstudio.com/?ref=ezslotdesign.com)**，免費、輕量、功能齊全，擴充套件非常的豐富，如果有預算的話則推薦**[WebStorm](https://www.jetbrains.com/webstorm/?ref=ezslotdesign.com)**也非常好用。
2. **動畫工具**我則是最喜歡的**[Greensock 的 Tweener](https://greensock.com/?ref=ezslotdesign.com)** ，語法簡單好上手，可以輕鬆的操作物件的位移和動作，非常適合做**老虎機的滾輪轉動效果**。
3. **遊戲引擎**部分我比較常用的是[**Pixi.js**，](http://www.pixijs.com/?ref=ezslotdesign.com)因為它:
- - 是個優質的 2D WebGL 引擎
  - 語法簡單
  - 操作Spine動畫容易
  - 簡易的粒子特效編輯製作

pixi 甚至剛好有範例是做老虎機的，有興趣也可以看看:

[https://pixijs.io/examples/#/demos/slots-demo.js](https://pixijs.io/examples/?ref=ezslotdesign.com#/demos/slots-demo.js) 

![](https://ezslotdesign.com/content/images/2026/06/image-116-opt.webp)

相對於後端需要的技能性質"深入且穩定"，我覺得前端技能的特質為"廣泛且彈性"，也是因為這個技能特質，所以有非常多種產品的可能性，也造就了非常多的職位需求，所以對想轉換跑道的人員是相對適合，但重點就是踏上這條路之後，你就必須持續學習，跟上技術的發展、不斷成長你的技能樹才會有競爭力

本篇比較重在引導和介紹，如果有什麼問題或是想要了解更多，都歡迎提出討論以及分享，之後的文章會再陸續提到關於博弈業的敏捷開發，或是老虎機遊戲架構設計的一些觀念，感謝各位的閱讀。