zoukankan      html  css  js  c++  java
  • H5转盘游戏

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大转盘抽奖</title>
    <link href="./css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery.2.0.0.js"></script>
    <script type="text/javascript" src="js/awardRotate.js"></script>
    <script type="text/javascript">
    var turnplate = {
    restaraunts: [], //大转盘奖品名称
    colors: [], //大转盘奖品区块对应背景颜色
    outsideRadius: 192, //大转盘外圆的半径
    textRadius: 155, //大转盘奖品位置距离圆心的距离
    insideRadius: 68, //大转盘内圆的半径
    startAngle: 0, //开始角度
    randomRate: [], //控制获奖率,百分制(相加需等于100%),对应restaraunts(顺序需要保持一致),
    bRotate: false, //false:停止;ture:旋转
    i: 0
    };
    $(document).ready(function () {
    //动态添加大转盘的奖品与奖品区域背景颜色
    turnplate.restaraunts = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖", "liu等奖", "七等奖 ", "八等奖", "九等奖", "十等奖"];
    turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];

    var rotateTimeOut = function () {
    $('#wheelcanvas').rotate({
    angle: 0,
    animateTo: 2160,
    duration: 1000,
    callback: function () {
    alert('网络超时,请检查您的网络设置!');
    }
    });
    };
    //旋转转盘 item:奖品位置; txt:提示语;
    var rotateFn = function (item, txt) {
    var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
    if (angles < 270) {
    angles = 270 - angles;
    } else {
    angles = 360 - angles + 270;
    }
    $('#wheelcanvas').stopRotate();
    $('#wheelcanvas').rotate({
    angle: 0,
    animateTo: angles + 1800,
    duration: 8000,
    callback: function () {
    // alert(txt);
    turnplate.bRotate = !turnplate.bRotate;
    }
    });
    };
    // var i = 0;
    $('.pointer').click(function () {
    if (turnplate.i == 1) {
    turnplate.randomRate = ["100%", '0%', '0%', '0%', '0%', '0%', '0%', '0%', '0%', '0%'];
    } else {
    turnplate.randomRate = ['10%', '10%', '10%', '10%', '10%', '10%', '10%', '10%', '10%', '10%'];
    }
    turnplate.i++;
    if (turnplate.bRotate) return;
    turnplate.bRotate = !turnplate.bRotate;
    //获取随机数(奖品个数范围内)
    var item = rnd(turnplate.randomRate);
    //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
    rotateFn(item, turnplate.restaraunts[item - 1]);
    });
    });

    function rnd(rate) {
    var random = Math.floor(Math.random() * 100);

    var myRandom = [];
    var randomList = [];
    var randomParent = [];
    for (var i = 0; i < 100; i++) {
    myRandom.push(parseInt([i]) + 1);
    }
    for (var i = 0; i < rate.length; i++) {
    var temp = [];
    var start = 0;
    var end = 0;
    randomList.push(parseInt(rate[i].split('%')[0]));
    for (var j = 0; j < randomList.length; j++) {
    start += randomList[j - 1] || 0
    end += randomList[j]
    }
    temp = myRandom.slice(start, end);
    randomParent.push(temp)
    }
    for (var i = 0; i < randomParent.length; i++) {
    if ($.inArray(random, randomParent[i]) > 0) {
    return (i + 1)
    }
    }

    }

    //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
    window.onload = function () {
    drawRouletteWheel();
    };

    function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
    //根据奖品个数计算圆周角度
    var arc = Math.PI / (turnplate.restaraunts.length / 2);
    var ctx = canvas.getContext("2d");
    //在给定矩形内清空一个矩形
    ctx.clearRect(0, 0, 422, 422);
    //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
    ctx.strokeStyle = "#FFBE04";
    //font 属性设置或返回画布上文本内容的当前字体属性
    ctx.font = '16px Microsoft YaHei';
    for (var i = 0; i < turnplate.restaraunts.length; i++) {
    var angle = turnplate.startAngle + i * arc;
    ctx.fillStyle = turnplate.colors[i];
    ctx.beginPath();
    //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线(用于创建圆或部分圆)
    ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
    ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
    ctx.stroke();
    ctx.fill();
    //锁画布(为了保存之前的画布状态)
    ctx.save();

    //----绘制奖品开始----
    ctx.fillStyle = "#E5302F";
    var text = turnplate.restaraunts[i];
    var line_height = 17;
    //translate方法重新映射画布上的 (0,0) 位置
    ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

    //rotate方法旋转当前的绘图
    ctx.rotate(angle + arc / 2 + Math.PI / 2);

    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果,如字体、颜色、图片效果。(具体根据实际情况改变) **/
    if (text.indexOf("M") > 0) {//流量包
    var texts = text.split("M");
    for (var j = 0; j < texts.length; j++) {
    ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
    if (j == 0) {
    ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
    } else {
    ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
    }
    }
    } else if (text.indexOf("M") == -1 && text.length > 6) {//奖品名称长度超过一定范围
    text = text.substring(0, 6) + "||" + text.substring(6);
    var texts = text.split("||");
    for (var j = 0; j < texts.length; j++) {
    ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
    }
    } else {
    //在画布上绘制填色的文本。文本的默认颜色是黑色
    //measureText()方法返回包含一个对象,该对象包含以像素计的指定字体宽度
    ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
    }

    //添加对应图标
    if (text.indexOf("猫币") > 0) {
    var img = document.getElementById("shan-img");
    img.onload = function () {
    ctx.drawImage(img, -15, 10);
    };
    ctx.drawImage(img, -15, 10);
    } else if (text.indexOf("谢谢参与") >= 0) {
    var img = document.getElementById("sorry-img");
    img.onload = function () {
    ctx.drawImage(img, -15, 10);
    };
    ctx.drawImage(img, -15, 10);
    }
    //把当前画布返回(调整)到上一个save()状态之前
    ctx.restore();
    //----绘制奖品结束----
    }
    }
    }

    </script>
    </head>
    <body style="background: rgb(100, 130, 51); overflow-x: hidden;">
    <img src="images/1.png" id="shan-img" style="display:none;">
    <img src="images/2.png" id="sorry-img" style="display:none;">
    <div class="banner">
    <div class="turnplate"
    style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;margin-top:30%;">
    <canvas class="item" id="wheelcanvas" width="422px" height="422px" style="transform: rotate(252deg);"></canvas>
    <img class="pointer" src="images/turnplate-pointer.png">
    </div>
    </div>

    </body>
    </html>
  • 相关阅读:
    BZOJ5212 ZJOI2018历史(LCT)
    BZOJ5127 数据校验
    253. Meeting Rooms II
    311. Sparse Matrix Multiplication
    254. Factor Combinations
    250. Count Univalue Subtrees
    259. 3Sum Smaller
    156. Binary Tree Upside Down
    360. Sort Transformed Array
    348. Design Tic-Tac-Toe
  • 原文地址:https://www.cnblogs.com/shenbo666/p/10045585.html
Copyright © 2011-2022 走看看