从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏 _水果机

项目体验地址
免费视频教程
游戏介绍
幸运水果机是一款街机游戏，游戏界面由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+CSS3，来开发一个集趣味性与技术性于一体的H5小游戏，项目使用到了以下知识点：
读者对象
学习本课程的同学，了解一点HTML/CSS/JS基础知识即可，我们会就地讲解项目中用到的css，js基础知识点，先举一些小的示例，来阐明知识点的用法，再说明如何在本项目中应用，应用在哪块功能的实现上。比如标准文档流，定位，浮动，盒子模型，CSS3弹性盒子，CSS3高级选择器，背景图片，json，map，定时器，随机数，dom操作，模板字符串，是综合运用前端基础知识的当前互联网上少见优秀综合案例。
幸运水果机之原生js实现 1. 安装插件Live

文章插图
2. 水果机轮盘界面设计 2.1 轮盘界面设计之基本方格
demo1.html

苹果
香蕉
桔子
苹果
香蕉
桔子

li{border: 1px solid red;list-style: none;width: 50px;height: 50px;text-align: center;line-height: 50px;}
运行效果

文章插图
可以看到每个li独占一行，因为li是块级元素，必须使li脱离标准文档流，才能水平排布。
标准文档流
标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。
一般在HTML元素分为两种：块级元素和行内元素。像div,p,ul,li这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列；
行内元素是在一行中水平布置，从左到右的排列；span,,a等属于行内元素。
2.2 绝对定位VS相对定位
demo2.html代码：

Documentul{border: 1px solid red;height: 500px;padding: 0;position: relative;}li{border: 1px solid red;list-style: none;width: 50px;height: 50px;text-align: center;line-height: 50px;position: absolute;top: 20px;left: 50px;}苹果

文章插图
运行效果

文章插图
2.3 内部样式
demo3.html

Titleul{/*border: 1px solid red;*/position: relative;height: 500px;width: 500px;margin-left: auto;margin-right: auto;}li{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;position: absolute;}苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果
苹果

效果：

文章插图
2.4 背景图片
demo4.html

Titleli{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;/* position: absolute; *//*background-image: url("images/77.png");*/background-size: contain;/*left:0px;*//*top:0px;*/}

效果：

文章插图
2.5 综合在一起

Titleul{/*border: 1px solid red;*/position: relative;height: 500px;width: 500px;margin-left: auto;margin-right: auto;}li{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;position: absolute;background-size: contain;/*left:0px;*//*top:0px;*/}

最终效果：

文章插图
3. 使用原生JS动态生成水果机轮盘 3.1 JS动态创建HTML元素
分2步：
1.创建元素（.）
2.添加元素（）

这是一个段落 。

这是另一个段落 。

再看一个例子

文章插图
3.2 JS控制元素样式
style属性
html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style 。使用JS，通过对象的style属性可以设置元素的任意css样式，看一个例子：

helloworld

文章插图
3.3 认识JSON
JSON（）、采用完全独立于编程语言的文本格式来存储和表示数据。
1、对象
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
var person = { "name":"huochai", "age":29, "school":{ "name":"diankeyuan", "location":"beijing" }};
2.数组

var students =[{"sno":"001","name":"jack","age":130},{"sno":"002","name":"tame","age":120},{"sno":"003","name":"cule","age":110}];

看一个例子：
json

文章插图
3.4 模板字符串

var name = "Neo";var occupation = "programmer";//不使用模板字符串拼接var str1 = "He is " + name + ",he is a " + occupation;//使用模板字符串拼接var str2 = `He is ${name},he is a ${occupation}`;console.log(str1)console.log(str2)

3.5 综合在一起

Titleul{/*border: 1px solid red;*/position: relative;height: 500px;width: 500px;margin-left: auto;margin-right: auto;}li{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;position: absolute;background-size: contain;/*left:0px;*//*top:0px;*/}

文章插图
4. 让跑灯跑起来 4.1 JS中的2种定时器周期性定时器
Title0

文章插图
2. 一次性定时器
Title0
4.2 JS中的随机数

var num = Math.random();//0--1之间的数[0,1)console.log(num);//0-10之间的整数var num2 = num*10;var num3 = parseInt(5.69);console.log(num3);var num = parseInt(Math.random()*10);console.log(num);// 30-50之间的整数// 0--20之间的整数+30var num2 = parseInt(Math.random()*20) + 30;console.log(num2);

文章插图
4.3 CSS中的z-index属性

Titlebody{position: relative;}#one{height: 100px;width: 100px;background-color: red ;position: absolute;left:0;top: 0;z-index: 10;}#two{height: 80px;width: 80px;background-color: blue ;position: absolute;left:0;top: 0;z-index: 20;}

4.4 整合在一起
html

css

 #footer{width: 500px;margin: 0px auto;}#active{width: 50px;height: 50px;position: absolute;background-color: rgba(255,0,0,0.4);z-index: 1000;left:0;top: 0;display: none;}ul{/*border: 1px solid red;*/position: relative;height: 500px;width: 500px;margin-left: auto;margin-right: auto;}li{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;position: absolute;background-size: contain;/*left:0px;*//*top:0px;*/}

js

4.5 实现小灯变速旋转
【从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏】

//给开始按钮绑定事件处理函数var btn = document.getElementById('btn');var index = 0;//当前active div应该和哪个下标的水果重合btn.onclick = function () {//实现转灯的转动//算出本次需要转动的步数（非固定的），随机的步数//步数又不能太少，至少需要转3圈，加上一个随机的步数（0-20）var step = fruits.length * 2 + parseInt(Math.random() * 35);var timerID = 0function turnOneStep() {console.log(step)//让转灯转动一格，行走一步//让隐藏的div显示，改变div的left和top来实现转灯的转动var div = document.getElementById('active');div.style.display = 'block';div.style.left = fruits[index].left;div.style.top = fruits[index].top;step--;if (step == 0)//就应该停止定时器{clearTimeout(timerID);var msg = document.getElementById('msg');msg.innerHTML = fruits[index].content + ':' + fruits[index].score;return;}index++;if (index == fruits.length) {index = 0;}timerID = setTimeout(turnOneStep, 1200/step);}//启动一个定时器，让转灯转动turnOneStep(step);}