手把手教你用原生JS/Vue/React实现水果老虎机(80后情怀之作)

项目体验地址
免费视频教程
分别使用原生JS,Vue和React,手把手教你开发一个H5小游戏,快速上手Vue和React框架的使用。

项目截图

手把手教你用原生JS/Vue/React实现水果老虎机(80后情怀之作)_第1张图片

在线体验

在线体验

游戏介绍

幸运水果机是一款街机游戏,游戏界面由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程序框架搭建,计算属性,生命周期…,是消化所学前端基础知识的当前互联网上少见优秀综合案例。

你可能感兴趣的:(技术分享)