项目体验地址
免费视频教程
分别使用原生 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 程序框架搭建，计算属性，生命周期 …，是消化所学前端基础知识的当前互联网上少见优秀综合案例。