手把手教你用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程序框架搭建，计算属性，生命周期...，是消化所学前端基础知识的当前互联网上少见优秀综合案例。