从零开始手把手教你使用原生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小游戏,项目使用到了以下知识点:

  • CSS:盒子模型,定位,浮动,CSS3的Flex弹性盒模型,图片背景,CSS3选择器...
  • JS:json,map,定时器,随机数,dom操作,模板字符串...

读者对象

学习本课程的同学,了解一点HTML/CSS/JS基础知识即可,我们会就地讲解项目中用到的css,js基础知识点,先举一些小的示例,来阐明知识点的用法,再说明如何在本项目中应用,应用在哪块功能的实现上。比如标准文档流,定位,浮动,盒子模型,CSS3弹性盒子,CSS3高级选择器,背景图片,json,map,定时器,随机数,dom操作,模板字符串,是综合运用前端基础知识的当前互联网上少见优秀综合案例。

幸运水果机之原生js实现

1. 安装vscode插件Live Server

从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第1张图片

2. 水果机轮盘界面设计

2.1 轮盘界面设计之基本方格

demo1.html


  
  • 苹果
  • 香蕉
  • 桔子
  • 苹果
  • 香蕉
  • 桔子
    li{
      border: 1px solid red;
      list-style: none;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }

运行效果
从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第2张图片

可以看到每个li独占一行,因为li是块级元素,必须使li脱离标准文档流,才能水平排布。

标准文档流

标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。

一般在HTML元素分为两种:块级元素和行内元素。像div,p,ul,li这些的元素属于块级元素,块级元素是从上到下一行一行的排列;默认一个块级元素会占用一行,而跟在后面的元素会另起一行排列;

行内元素是在一行中水平布置,从左到右的排列;span,strong,a等属于行内元素。

2.2 绝对定位VS相对定位

demo2.html代码:




  
  
  Document
  


  
  • 苹果

运行效果
从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第3张图片

2.3 内部样式

demo3.html




    
    Title
    


  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果
  • 苹果

效果:
从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第4张图片

2.4 背景图片

demo4.html




    
    Title
    


效果:
从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第5张图片

2.5 综合在一起




    
    Title
    


最终效果:
从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第6张图片

3. 使用原生JS动态生成水果机轮盘

3.1 JS动态创建HTML元素

分2步:
1.创建元素(document.createElement)
2.添加元素(appendChild)






  

这是一个段落。

这是另一个段落。

再看一个例子






  

从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第7张图片

3.2 JS控制元素样式

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






  

helloworld

从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第8张图片

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}
              ];

看一个例子:





    
    json
    









从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第9张图片

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 综合在一起




    
    Title
    
    


从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第10张图片

4. 让跑灯跑起来

4.1 JS中的2种定时器

  1. 周期性定时器



    
    Title
    


0

从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第11张图片

  1. 一次性定时器




  
  Title
  



  

0

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);

从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏_第12张图片

4.3 CSS中的z-index属性




    
    Title
    


4.4 整合在一起

html


css

 

js

 

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,css3,游戏)