手把手教你用JS/Vue/React實現幸運水果機（80後情懷之作）
項目體驗地址
免費影片教程
分別使用原生JS，Vue和React，手把手教你開發一個H5小遊戲，快速上手Vue和React框架的使用。
項目截圖
在線體驗
遊戲介紹
幸運水果機是一款街機遊戲，遊戲介面由24個方格拼接成一個正方形，每個方格中都有一個不同的水果圖形，方格下都有一個小燈。玩家使用遊戲幣選擇希望押注的目標，按下開始後，小燈開始繞著正方形中每個格子轉。當小燈停下時，如果停在玩家押注的目標上則可贏取相應的遊戲幣。
物品：遊戲中的物品有八種，分別為：蘋果、西瓜、木瓜、橙子、鈴鐺、77、雙星，這些物品又分為大小兩種。還有BAR圖標，分為2種。
賠率：以下為所有固定賠率物品的賠率。·所有其他小的物品（小77、小星星、小西瓜、小鈴鐺、小木瓜、小橙子） 1：2
蘋果 1：5·橙子 1：10·木瓜 1：15·鈴鐺 1：20·西瓜 1：20·雙星 1：30·77 1：40·小BAR 1：25·中BAR 1：50·大BAR 1：100
當玩家中獎之後，玩家點擊「開始」按鈕為收分，再次點擊「開始」按鈕為按照上一次押注再次進行遊戲。如果玩家要重新押注，在押注物品上直接押注即可。在押注的同時會將中獎的金額收入「當前餘額」區中。
如果玩家沒有中獎，則玩家點擊「開始」按鈕為按照上一次押注再次進行遊戲。
課程目標
我們使用原生JS，Vue和React三種開發方法，來開發一個集趣味性與技術性於一體的H5小遊戲，通過這個小遊戲的開發，我們在鞏固常用的CSS和JS知識的同時，可以深刻地體會到Vue和React這種MVVM模式的框架的開發思想以及優於傳統DOM操作的地方，並且可以快速上手Vue和React這兩種當前最火熱的前端框架的使用。
- 實踐CSS的常用技術：盒子模型，定位，浮動，CSS3的Flex彈性盒模型，圖片背景，CSS3選擇器…
- 實踐JS常用開發技巧：json，map，定時器，隨機數，dom操作，模板字元串…
- 快速入門vue框架的應用
- 快速入門react框架的應用
- 對比原生js，vue框架和react框架開發的優缺點。
讀者對象
學習本課程的同學，了解一點HTML/CSS/JS基礎知識即可，我們會就地講解項目中用到的css，js基礎知識點，先舉一些小的示例，來闡明知識點的用法，再說明如何在本項目中應用，應用在哪塊功能的實現上。比如標準文檔流，定位，浮動，盒子模型，CSS3彈性盒子，CSS3高級選擇器，背景圖片，json，map，定時器，隨機數，dom操作，模板字元串，react程式框架搭建，react組件劃分思想，vue程式框架搭建，計算屬性，生命周期…，是消化所學前端基礎知識的當前互聯網上少見優秀綜合案例。
