从零开始手把手教你使用原生JSCSS3实现老虎水果机游戏

35次阅读

共计 15833 个字符，预计需要花费 40 分钟才能阅读完成。

项目体验地址
免费视频教程

游戏介绍

幸运水果机是一款街机游戏，游戏界面由 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 种定时器

  1. 周期性定时器
<!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>

  1. 一次性定时器
<!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…

正文完
javascript
发表至： javascript
2020-06-22
 0
ES6之Reflect
数据结构-栈
浅析webpack源码之convert-argv模块（二）
关于javascript:如何打造一个高性能的前端智能推理引擎