项目体验地址
免费视频教程
游戏介绍
幸运水果机是一款街机游戏，游戏界面由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小游戏，项目使用到了以下知识点：
- CSS：盒子模型，定位，浮动，CSS3的Flex弹性盒模型，图片背景，CSS3选择器...
- JS：json，map，定时器，随机数，dom操作，模板字符串...
读者对象
学习本课程的同学，了解一点HTML/CSS/JS基础知识即可，我们会就地讲解项目中用到的css，js基础知识点，先举一些小的示例，来阐明知识点的用法，再说明如何在本项目中应用，应用在哪块功能的实现上。比如标准文档流，定位，浮动，盒子模型，CSS3弹性盒子，CSS3高级选择器，背景图片，json，map，定时器，随机数，dom操作，模板字符串，是综合运用前端基础知识的当前互联网上少见优秀综合案例。
幸运水果机之原生js实现
1. 安装vscode插件Live Server
2. 水果机轮盘界面设计
2.1 轮盘界面设计之基本方格
demo1.html
<body> <ul> <li>苹果</li> <li>香蕉</li> <li>桔子</li> <li>苹果</li> <li>香蕉</li> <li>桔子</li> </ul></body> 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,strong,a等属于行内元素。
2.2 绝对定位VS相对定位
demo2.html代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul{ 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; } </style></head><body> <ul> <li>苹果</li> </ul></body></html>运行效果
2.3 内部样式
demo3.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> 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; } </style></head><body><ul> <li style="left:0px;top:0px;">苹果</li> <li style="left:50px;top:0px;">苹果</li> <li style="left:100px;top:0px;">苹果</li> <li style="left:150px;top:0px;">苹果</li> <li style="left:200px;top:0px;">苹果</li> <li style="left:250px;top:0px;">苹果</li> <li style="left:300px;top:0px;">苹果</li> <li style="left:300px;top:50px;">苹果</li> <li style="left:300px;top:100px;">苹果</li> <li style="left:300px;top:150px;">苹果</li> <li style="left:300px;top:200px;">苹果</li> <li style="left:300px;top:250px;">苹果</li> <li style="left:300px;top:300px;">苹果</li> <li style="left:250px;top:300px;">苹果</li> <li style="left:200px;top:300px;">苹果</li> <li style="left:150px;top:300px;">苹果</li> <li style="left:100px;top:300px;">苹果</li> <li style="left:50px;top:300px;">苹果</li> <li style="left:0px;top:300px;">苹果</li> <li style="left:0px;top:250px;">苹果</li> <li style="left:0px;top:200px;">苹果</li> <li style="left:0px;top:150px;">苹果</li> <li style="left:0px;top:100px;">苹果</li> <li style="left:0px;top:50px;">苹果</li></ul></body></html>效果：
2.4 背景图片
demo4.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> li{ 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;*/ } </style></head><body><ul> <li style="background-image: url('images/77.png')"></li></ul></body></html>效果：
2.5 综合在一起
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> 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;*/ } </style></head><body><ul> <li style="left:0px;top:0px;background-image: url('images/orange.png');"></li> <li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li> <li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li> <li style="left:150px;top:0px;background-image: url('images/bar.png');"></li> <li style="left:200px;top:0px;background-image: url('images/apple.png');"></li> <li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li> <li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li> <li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li> <li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li> <li style="left:300px;top:150px;background-image: url('images/cha.png');"></li> <li style="left:300px;top:200px;background-image: url('images/apple.png');"></li> <li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li> <li style="left:300px;top:300px;background-image: url('images/orange.png');"></li> <li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li> <li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li> <li style="left:150px;top:300px;background-image: url('images/77.png');"></li> <li style="left:100px;top:300px;background-image: url('images/apple.png');"></li> <li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li> <li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li> <li style="left:0px;top:250px;background-image: url('images/star.png');"></li> <li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li> <li style="left:0px;top:150px;background-image: url('images/cha.png');"></li> <li style="left:0px;top:100px;background-image: url('images/apple.png');"></li> <li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li></ul></body></html>最终效果：
3. 使用原生JS动态生成水果机轮盘
3.1 JS动态创建HTML元素
分2步：
1.创建元素（document.createElement）
2.添加元素（appendChild）
<!DOCTYPE html><html><body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> let para = document.createElement("p"); para.innerText = "这是新段落。"; let element = document.getElementById("div1"); element.appendChild(para); </script></body></html>再看一个例子
<!DOCTYPE html><html><body> <div id="div1"> </div> <script> let ul = document.createElement('ul') let div = document.getElementById('div1') for (let i = 0; i < 3; i++){ let li = document.createElement('li') li.innerText = i; ul.appendChild(li) } div.appendChild(ul) </script></body></html>3.2 JS控制元素样式
style属性
html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。使用JS，通过对象的style属性可以设置元素的任意css样式，看一个例子：
<!DOCTYPE html><html><body> <div id="div1"> <p id="content">helloworld</p> </div> <script> let p = document.querySelector('p') p.style.color = 'red' p.style.fontSize = '30px' </script></body></html>3.3 认识JSON
JSON（JavaScriptObject Notation）、采用完全独立于编程语言的文本格式来存储和表示数据。
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} ];看一个例子：
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>json</title> <script> var imgData={ "name":"图片描述和图片相对路径", "title":"logo图片","url":"logo.png" }; console.log( imgData.name ); console.log( imgData["name"] ); var json1={"name":"这里是一组图片的文字描述和图片相对路径", "title":["logo图片","图片1","图片2","图片3"], "url":["logo.png","1.png","2.png","3.png"] }; console.log( json1.name); console.log( json1.url ); console.log( json1.url[1] ); var json2 ={ "name":"图片描述和图片相对路径", "imgData":[ { "name":"图片1", "title":"logo图片1","url":"logo1.png" } , { "name":"图片2", "title":"logo图片2","url":"logo2.png" } , { "name":"图片3", "title":"logo图片3","url":"logo3.png" } ] }; console.log( json2.name ); console.log( json2.imgData[0].name ); </script></head><body></body></html>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 综合在一起
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> 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;*/ } </style> <script> window.onload = function () { var fruits = [ {left:'0px',top:'0px',content:'桔子',src:'b_orange.png',score:10}, {left:'50px',top:'0px',content:'铃铛',src:'b_alarm.png',score:20}, {left:'100px',top:'0px',content:'小BA',src:'s_bar.png',score:50}, {left:'150px',top:'0px',content:'BA',src:'b_bar.png',score:100}, {left:'200px',top:'0px',content:'苹果',src:'b_apple.png',score:5}, {left:'250px',top:'0px',content:'小苹果',src:'s_apple.png',score:2}, {left:'300px',top:'0px',content:'椰子',src:'b_coconut.png',score:15}, {left:'300px',top:'50px',content:'西瓜',src:'b_watermelons.png',score:25}, {left:'300px',top:'100px',content:'小西瓜',src:'s_watermelons.png',score:2}, {left:'300px',top:'150px',content:'XX',src:'cha.png',score:0}, {left:'300px',top:'200px',content:'苹果',src:'b_apple.png',score:5}, {left:'300px',top:'250px',content:'小桔子',src:'s_orange.png',score:2}, {left:'300px',top:'300px',content:'桔子',src:'b_orange.png',score:10}, {left:'250px',top:'300px',content:'铃铛',src:'b_alarm.png',score:20}, {left:'200px',top:'300px',content:'小77',src:'s_77.png',score:2}, {left:'150px',top:'300px',content:'77',src:'b_77.png',score:40}, {left:'100px',top:'300px',content:'苹果',src:'b_apple.png',score:5}, {left:'50px',top:'300px',content:'小椰子',src:'s_coconut.png',score:2}, {left:'0px',top:'300px',content:'椰子',src:'b_coconut.png',score:15}, {left:'0px',top:'250px',content:'星星',src:'b_star.png',score:30}, {left:'0px',top:'200px',content:'小星星',src:'s_star.png',score:2}, {left:'0px',top:'150px',content:'XX',src:'cha.png',score:0}, {left:'0px',top:'100px',content:'苹果',src:'b_apple.png',score:5}, {left:'0px',top:'50px',content:'小铃铛',src:'s_alarm.png',score:2} ]; var ul = document.getElementById('machine'); for(var i = 0; i < fruits.length; i++) { //动态的创建li元素 var li = document.createElement('li'); li.style.left = fruits[i].left; li.style.top = fruits[i].top; li.style.backgroundImage = `url('images/${fruits[i].src}')`; ul.appendChild(li); } } </script></head><body><ul id = 'machine'> <!--<li style="left:0px;top:0px;background-image: url('images/orange.png');"></li>--> <!--<li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li>--> <!--<li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li>--> <!--<li style="left:150px;top:0px;background-image: url('images/bar.png');"></li>--> <!--<li style="left:200px;top:0px;background-image: url('images/apple.png');"></li>--> <!--<li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li>--> <!--<li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li>--> <!--<li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li>--> <!--<li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li>--> <!--<li style="left:300px;top:150px;background-image: url('images/cha.png');"></li>--> <!--<li style="left:300px;top:200px;background-image: url('images/apple.png');"></li>--> <!--<li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li>--> <!--<li style="left:300px;top:300px;background-image: url('images/orange.png');"></li>--> <!--<li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li>--> <!--<li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li>--> <!--<li style="left:150px;top:300px;background-image: url('images/77.png');"></li>--> <!--<li style="left:100px;top:300px;background-image: url('images/apple.png');"></li>--> <!--<li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li>--> <!--<li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li>--> <!--<li style="left:0px;top:250px;background-image: url('images/star.png');"></li>--> <!--<li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li>--> <!--<li style="left:0px;top:150px;background-image: url('images/cha.png');"></li>--> <!--<li style="left:0px;top:100px;background-image: url('images/apple.png');"></li>--> <!--<li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li>--></ul></body></html>4. 让跑灯跑起来
4.1 JS中的2种定时器
- 周期性定时器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script>// setInterval(fun,time)// function hello() {// console.log('hello');// }// setInterval(hello, 1000);// var timerID = setInterval(fun,time);//返回值就是定时器id// //停止定时器// clearInterval(timerID); var count = 1; window.onload = function () { var h2 = document.getElementById('count'); //启动定时器 var timerID = setInterval(function () { h2.innerHTML = count++; if(count == 11) { //停止定时器 clearInterval(timerID); } },1000); } </script></head><body><h2 id="count"> 0</h2></body></html>- 一次性定时器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var count = 1; var h2 = document.getElementById('count'); function counter() { h2.innerHTML = count++; if (count < 11) { setTimeout(counter, 1000) } } setTimeout(counter, 1000) } </script></head><body> <h2 id="count"> 0 </h2></body></html>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之间的整数+30 var num2 = parseInt(Math.random()*20) + 30; console.log(num2);4.3 CSS中的z-index属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ 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; } </style></head><body><div id="one"></div><div id="two"></div></body></html>4.4 整合在一起
html
<body><ul id = 'machine'><div id="active"></div></ul><div id="footer"> <div id="msg"></div> <button id="btn">开始</button></div></body>css
<style> #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;*/ } </style>js
<script> window.onload = function () { //给开始按钮绑定事件处理函数 var index = 0;//当前active div应该和哪个下标的水果重合 var btn = document.getElementById('btn'); btn.onclick = function () { //实现转灯的转动 //算出本次需要转动的步数（非固定的），随机的步数 //步数又不能太少，至少需要转3圈，加上一个随机的步数（0-20） var step = fruits.length * 3 + parseInt(Math.random()*20); //启动一个定时器，让转灯转动 var timerID = setInterval(function () { //让转灯转动一格，行走一步 //让隐藏的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)//就应该停止定时器 { clearInterval(timerID); var msg = document.getElementById('msg'); msg.innerHTML = fruits[index].content + ':' + fruits[index].score; return; } index++; if(index == fruits.length) { index=0; } },100); } } </script>4.5 实现小灯变速旋转
//给开始按钮绑定事件处理函数 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 = 0 function 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); }完整教程
https://www.jianshu.com/p/528...