原生JS实现H5转盘游戏的示例代码

2024-09-29 19:44:05

1. 基础的页面布局（index.html）

这里不做过多解释了，就是一些页面布局

大家直接复制粘贴过去用就行（是不是很贴心~）

1.1 html布局

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/style.css" rel="external nofollow" >
    <title>九宫格抽奖</title>
</head>

<body>
    <div class="container">
        <p>H5转盘抽奖（可自由设置概率）</p>
        <ul class="lottery">
            <li class="item lottery-item-0">华为手机</li>
            <li class="item lottery-item-1">iPhone 手机</li>
            <li class="item lottery-item-2">谢谢惠顾</li>
            <li class="item lottery-item-7">小熊抱枕</li>
            <li class="item start" οnclick="start(event)" data-able="1">开始</li>
            <li class="item lottery-item-3">小度音响</li>
            <li class="item lottery-item-6">电风扇</li>
            <li class="item lottery-item-5">格力冰箱</li>
            <li class="item lottery-item-4">小米手环</li>
        </ul>
    </div>
  </body>
</html>

1.2 css布局（style.css）

@charset "UTF-8";
html{
	height: 100%;
	font-size: 16px;
}
body{
    font-family:-apple-system-font, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: subpixel-antialiased;
}
body, a, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, article, section, div, p, header, footer, menu, input, img{
	margin: 0;
	padding: 0;
}
img{
    vertical-align: middle;
}
p, h1, h2, h3, h4, h5, h6,ul{
	-webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-padding-start: 0;
    -moz-margin-before: 0;
    -moz-margin-after: 0;
    -moz-padding-start: 0;
    -moz-padding-end: 0;
}
/* clear float */
.clearfix:after {
    content:"";
    display: block;
    clear:both;
}
  /* Responsive Layout */
li{
	list-style: none;
}
a{
	text-decoration: none;
}
input{
	-webkit-appearance: none;
}
input:focus{
    outline: none;
}

header{
    height: .88rem;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}
.header-back{
    width: .36rem;
    height: .36rem;
    float: left;
    margin-top: .27rem;
    margin-left: .28rem;
}
.header-title{
    float: left;
    font-weight: 600;
    width: 90%;
    font-size: .36rem;
    color: #333;
    text-align: center;
    line-height: .88rem;
}
.container{
    font-size: 24px;
    text-align: center;
    padding-top: 50px;
}
.lottery{
    font-size: .32rem;
    width: 6rem;
    height: 6rem;
    margin: .2rem auto;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    border: 1px solid #000;
}
.item{
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    color: orangered;
    font-weight: bold;
    text-align: center;
    border: 1px solid orangered;
    box-sizing: border-box;
    background-size: 100%;
}
.active{
    background: #ffe6cc;
}

button:focus{
    outline: none;
}
.lottery-item-0{
    background-image: url('../img/huawei.png');
}
.lottery-item-1{
    background-image: url('../img/iphone.jpg');
}
.lottery-item-4{
    background-image: url('../img/xiaomi.jpg');
}
.lottery-item-7{
    background-image: url('../img/xiaoxiong.jpg');
}
.lottery-item-3{
    background-image: url('../img/xiaodu.jpg');
}
.lottery-item-6{
    background-image: url('../img/dfs.jpg');
}
.lottery-item-5{
    background-image: url('../img/bingxiang.jpg');
}

2. 工具函数（用于调整概率）

此工具函数传入一个二维数组，用于调整概率
默认商品概率相同，调用的时候 randomNum() 时候不传参数即可
也可以自由设置概率

function randomNum(arr){
    // 1. 容错处理
    arr = arr || [];
    // ES6 Map对象： 键与值的集合 方便访问其键与值
    let m = new Map(arr);
    // 计算概率
    let probability = 0;
    // console.log(m.values())
    for (const i of m.values()) {
        probability += i;
    }

   if(probability > 1){
        // 给一个友好的提示
        alert("概率总和不能大于1，小学数学是体育老师教的？？？");
        return false;
   }

    // 剩下没有定义的各自能占多少概率。
    // size 返回映射中的元素数
    let remainProbability = (1 - probability) / (8 - m.size);
    console.log(remainProbability)
     // 生成随机值，跟i对应的概率比较，
     let res = 0, r = Math.random();
     for (let i = 0; i < 8; i++) {
         // 有就取值 没有就随机取
         m.has(i) ? res += m.get(i) : res += remainProbability;
        //  console.log("res= "+ res);
        //  console.log("r= "+ r);
         if (res > r) {
             return i;
         }
     }
}

3. 传参及接收值配置

     let step = 0, //计数器
         timeInterval = 2, //速度控制器
         final, //最终位置
         looperFun, // setTimeout的返回值
         prizeList = ['华为', 'iPhone X', '谢谢惠顾', '小度音响', '手环', '格力冰箱', '电风扇', '小熊抱枕'];
        // 开始游戏
        function start(e){
            if(e.target.dataset.able === "1"){
                // 随机0-7
                // 设置抽奖概率 不传参的话这几个商品几率相等
                // let arr = [[0,0],[1,0.5],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0]];
                // final = randomNum(arr);
                final = randomNum();	// 这里不传参 概率均等
                console.log(final);
                if(final === false){
                    console.log("出错了");
                    return false;
                }
                e.target.setAttribute('data-able', 0);
                looperFun = setTimeout(looper, 100);
            }else{
                console.log("什么垃圾玩意，点不了");
                return false;
            }
        }

传参的二维数组第一个值代表商品id，第二个值为分配的概率

// 设置抽奖概率 不传参的话这几个商品几率相等
// let arr = [[0,0],[1,0.5],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0]];

4. dom 操作方法及具体逻辑处理

// 获取元素
function $my(classes){
    return document.querySelector(classes);
}

// 旋转九宫格
function looper(){
    // 移除上一个被选中的样式
    $my(".active") &&　$my(".active").classList.remove("active");

    // 转了超过3圈后才能停止。
    if (step >= 24 + final) {
        $my('.lottery-item-' + final).classList.add('active');
        step = final;
        setTimeout(() => {
            $my('.start').setAttribute('data-able', 1);
            alert('恭喜你，抽中了' + prizeList[final]);
        }, 100);
        clearTimeout(looperFun);
        return;
    }
    //当前转圈到的位置。
    let index = step % 8;
    $my('.lottery-item-' + index).classList.add('active');
    step++;
    // 下次变色的时间。
    let duration;
    if (step >= (16 + final)) { //在剩余一圈时候开始减速
        timeInterval += 1;
    } else {
        if (timeInterval <= 2) {
            timeInterval = 2; //时间缩短不能太小。
        }
        // 越来越快
        timeInterval--;
    }
    duration = timeInterval * 50;
    looperFun = setTimeout(looper, duration);
}

5. FAQ（注意事项）

1.手机端和PC端都可以操作

2.商品图需要自己引入一下

3.注意引入路径问题

4.js文件可以只写一个（第三步和第四步放一起就行）

以上就是原生JS实现H5转盘游戏的示例代码的详细内容，更多关于JS转盘游戏的资料请关注我们其它相关文章！

JS实现简单的抽奖转盘效果示例

本文实例讲述了JS实现简单的抽奖转盘效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS抽奖转盘</title> <style> *{ margin:0; padding:0; list-style: none; } .big{
基于javascript实现九宫格大转盘效果

本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九宫格大转盘</title> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height:
JS旋转实现转盘抽奖效果

本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码,供大家参考,具体内容如下闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域比如,我选择了"区域2",结果就是这样具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入) HTML文件: <!DOCTYPE html> <html> <head> <meta charset=
利用Javascript实现简单的转盘抽奖

首先来看看接口说明: var _rotate = new iRotate('#div',{ start : 0, //开始角度,可不写,默认0 end :45, //结束角度 time :5000, //持续时间,可不写,默认1000 easing : 'easeOut', //动画形式,目前只有'linear'和'easeOut'两种,可不写,默认'easeOut' callback : function(){ //回调函数 //this为当前对象 } }); _rotate.stop(fu
js实现转盘抽奖功能

本文实例为大家分享了js实现转盘抽奖功能的具体代码,供大家参考,具体内容如下效果:点击抽奖按钮,转盘开始旋转数圈后停止示例: 抽奖html代码: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q
js抽奖转盘实现方法分析

本文实例讲述了js抽奖转盘实现方法.分享给大家供大家参考,具体如下: HTML 这里.left 固定了圆的宽度和高度,还有canvas也设置了固定宽高绘制圆心的坐标也就出来了 (203,203) 抽奖转盘是由一个大圆和一个内圆完成 :大圆负责绘制上奖品 ,内圆负责确定指针的位置,指针直接使用图片,决定位置确定 <div class="left"> <div class="turnplate" style="background:#1b
js实现大转盘抽奖游戏实例

本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
原生JS实现音乐播放器的示例代码

本文主要介绍了原生JS实现音乐播放器的示例代码,分享给大家,具体如下: 效果图音乐播放器播放控制播放进度条控制歌词显示及高亮播放模式设置播放器属性归类按照播放器的功能划分,对播放器的属性和DOM元素归类,实现同一功能的元素和属性保存在同一对象中,便于管理和操作 const control = { //存放播放器控制 play: document.querySelector('#myplay'), ... index: 2,//当前播放歌曲序号 ... } const audioFi
基于JS实现Flappy Bird游戏的示例代码

前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟.玩家必须保护小鸟免于与管道等障碍物相撞.每次小鸟通过管道时,分数都会增加一.当小鸟与管道碰撞或因重力而坠落时,游戏结束.以下部分描述了构建此游戏必须采取的步骤. 游戏可以通过这个链接进入完整源码地址实现代码 HTML 部分:在此部分中,创建和加载游戏的元素.选择背景.鸟类.障碍和得分元素的图像.接下来,我们创建并链接 style.css 和 index.js 文件. <!DOCTYPE html> <html>
基于JS实现蜘蛛侠动作游戏的示例代码

目录代码结构代码展示 HTML JS 项目运行游戏截图整个游戏源码是由html.js. css.图片等代码完成的,无后端数据保存功能. 代码结构 js文件夹是游戏事件控制文件 vapp文件夹是游戏图片文件 icon.png 是网页游戏图标 index.html 是游戏主页代码展示 HTML index.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
基于JS实现飞机大战游戏的示例代码

目录演示技术栈源码定义敌方战机定义我方战机碰撞检测演示技术栈今天没有什么特别要讲的,要不我们提前介绍下次要做的技术吧.你不说话就是同意了.我们开始了. 下图是正则表达式的一些总结大家可以先看看哦 (function() { /** * 1. JavaScript使用正则式的函数 */ const str = "abchelloasdasdhelloasd"; // 1. 查找 console.log(str.search("h")); // 3 /
原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
基于JS实现接粽子小游戏的示例代码

目录游戏设计游戏实现添加粽子元素粽子掉落难度选择开始游戏总结端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS 实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,不用担心端午没粽子了. 游戏设计在游戏屏幕内,会随机的从顶部掉落粽子,通过鼠标移动到粽子上并点击,成功接住粽子,得到积分.在设置面板中,可以设置游戏难度,分为简单.很难.超级难三种等级,不同等级的积分也是不同的,玩家可根据自己的手速进行设置.游戏结束后,可看到自己的成绩.实现出来的效果如下(可
原生js实现简单的模态框示例

html部分: <img src="images/8.jpg" alt=""> <button class="btn" id="showMax">显示大图</button> <div id="modalBox" class="modalBox"> <div class="modalBox-matter"> &
浅谈原生JS实现jQuery的animate()动画示例

本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助. 参数介绍: obj 执行动画的元素 css JSON数值对,形式为"{属性名: 属性值}",指要执行动画的书序及其对应值 interval 属性每执行一次改变的时间间隔 speedFactor 速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1) func 执行完动画后的回调函数注意: 必须为每一个元素分别添加一个定时器,否则会互相影响. cur != css[arr
原生JS封装拖动验证滑块的实现代码示例

前言星期六闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库. 最终效果分析看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup 其次要支持用户传入放置这个组件的dom元素和完成的回调事件. 最终如何使用? 我们先来看下使用方式,再来决定我们怎么编写这个库具体使用就是这样的,我们还想用户能通过import等方式使用,所以我们就要支持esM
原生js实现贪吃蛇游戏

原生JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下代码: <script> var timer = null; var oMain = document.getElementById("main"); function Map(atom,xnum,ynum){//地图,设置单位大小,及根据单位大小创建地图 this.atom = atom; this.xnum = xnum; this.ynum = ynum; this.create = func