手把手教你用JS/Vue/React實現幸運水果機（80後情懷之做）

項目體驗地址
免費視頻教程
分別使用原生JS，Vue和React，手把手教你開發一個H5小遊戲，快速上手Vue和React框架的使用。

項目截圖

在線體驗

在線體驗

遊戲介紹

幸運水果機是一款街機遊戲，遊戲界面由24個方格拼接成一個正方形，每一個方格中都有一個不一樣的水果圖形，方格下都有一個小燈。玩家使用遊戲幣選擇但願押注的目標，按下開始後，小燈開始繞着正方形中每一個格子轉。當小燈停下時，若是停在玩家押注的目標上則可贏取相應的遊戲幣。

物品：遊戲中的物品有八種，分別爲：蘋果、西瓜、木瓜、橙子、鈴鐺、7七、雙星，這些物品又分爲大小兩種。還有BAR圖標，分爲2種。

賠率：如下爲全部固定賠率物品的賠率。·全部其餘小的物品（小7七、小星星、小西瓜、小鈴鐺、小木瓜、小橙子） 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程序框架搭建，計算屬性，生命週期...，是消化所學前端基礎知識的當前互聯網上少見優秀綜合案例。