长知识!手把手写代码实现轮盘滚动抽奖!

发布时间:2024年01月12日

?在当今数字化时代,抽奖活动已经成为各种营销活动、节日庆典甚至是私人派对的必备环节。而其中,轮盘滚动抽奖更是因其独特的趣味性和紧张感,备受大众喜爱。但是,如何将这个传统游戏与现代科技完美结合,让参与者感受到全新的体验呢?接下来,就让我们一起手把手地实现一个轮盘滚动抽奖程序!

效果展示

?一、准备工作

在开始编写代码之前,我们需要准备一些工具和环境。首先,你需要一个文本编辑器,如Notepad++或Visual Studio Code,用于编写代码,并安装一个浏览器用于启动浏览抽奖程序。设定轮盘抽奖的需求和界面布局。一般来说,轮盘抽奖的界面应包含轮盘、奖项、抽奖按钮等元素。在设计时,我们应注重界面的简洁明了,以便用户能快速理解活动规则并参与抽奖。

二、编程语言选择

对于轮盘滚动抽奖程序,我们可以选择多种编程语言来实现。在这里,我们以最传统的前端三剑客(HTML+ CSS+ JS)实现,介绍如何编写一个简单的轮盘滚动抽奖程序。

三 代码讲解
HTML:画布布局
<div class="prizeCircle">
 <canvas id="circle" width="300px" height="300px">抱歉!浏览器不支持。</canvas><!--画出图片,奖品轮盘-->
 <canvas id="circle01" width="200px" height="200px">抱歉!浏览器不支持。</canvas><!--箭头指针-->
 <canvas id="circle02" width="150px" height="150px">抱歉!浏览器不支持。</canvas><!--中间圆圈 白色圈-->
 <canvas id="circle03" width="200px" height="200px">抱歉!浏览器不支持。</canvas><!--中间小圆 红色圈、抽奖文字-->
 <button id="tupBtn" class="taoge_btn"></button><!--中间抽奖按钮覆盖-->
</div>
CSS:页面样式
*{padding: 0px;margin: 0px;font-size: 16px;}
.prizeCircle{width: 300px;height: 300px;margin: 100px auto;position: relative; }
.prizeCircle canvas{position: absolute;}
#circle{background-color: white;border-radius: 100%;}
#circle01,#circle03{left: 50px;top: 50px;z-index: 30;}
#circle02{left: 75px;top: 75px;z-index: 20;}
#circle{-o-transform: transform 6s;-ms-transform: transform 6s;-moz-transform: transform 6s;  
-webkit-transform: transform 6s;transition: transform 6s;-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;}
.taoge_btn{width: 60px;height: 60px;left: 120px;top: 120px;border-radius: 100%;
position: absolute;cursor: pointer;border: none;background: transparent;
outline: none;z-index: 40;}
JS:整体画布布局,抽奖动画

画布加载抽奖轮盘

function createImg(){
    const myImg = new Image()
	myImg.src = '抽奖底盘图片.png'
	myImg.onload = function () {
		ctx.drawImage( this, 0, 0, 300, 300 )
    }
}

画布绘制抽奖指针相关

function initPoint(){
   //箭头指针
   ctx1.beginPath();
   ctx1.moveTo(132,24);
   ctx1.lineTo(110,62);
   ctx1.lineTo(120,70);
   ctx1.lineTo(132,24);
   ctx1.fillStyle = "red";
   ctx1.fill();
   ctx1.closePath();
   //中间圆圈 白色圈
   ctx2.beginPath();
   ctx2.arc(75,75,55,0,Math.PI*2,false);
   ctx2.fillStyle = "#FAFAFA";
   ctx2.fill();
   ctx2.closePath();
   //中间小圆 红色圈
   ctx3.beginPath();
   ctx3.arc(100,100,40,0,Math.PI*2,false);
   ctx3.fillStyle = "red";
   ctx3.fill();
   ctx3.closePath();
   //小圆文字 开始抽奖
   ctx3.font = "Bold 20px Microsoft YaHei";
   ctx3.textAlign='start';
   ctx3.textBaseline='middle';
   ctx3.fillStyle = "#009688";
   ctx3.beginPath();
   ctx3.fillText('开始',80,90,40);
   ctx3.fillText('抽奖',80,110,40);
   ctx3.fill();
   ctx3.closePath();
  }

?抽奖随机控制与轮盘滚动效果

//转盘初始化
 var info = ["再接再厉","五等奖","再接再厉","四等奖","再接再厉","三等奖","二等奖","一等奖"]; 
//转盘旋转
 function runCup(){
  probability();
  var degValue = 'rotate('+angles+'deg'+')';
  $('#circle').css('-o-transform',degValue);   //Opera
  $('#circle').css('-ms-transform',degValue);   //IE浏览器
  $('#circle').css('-moz-transform',degValue);   //Firefox
  $('#circle').css('-webkit-transform',degValue);  //Chrome和Safari
  $('#circle').css('transform',degValue);
 }
 
 //各奖项对应的旋转角度
 function probability(){
  //获取随机数
  var num = parseInt(Math.random()*7);
  //旋转角度
  angles = 2160 * rotNum + 1800 + 45 * num;
  //顺时钟旋转,例如选择45度,则奖品是notice[7]
  notice = info[(8 - num) % 8];
 }
四、运行程序

在编写完代码后,你可以通过浏览器运行程序。在运行程序时,点击中间抽奖,程序会随机选择一个奖品并输出中奖信息。点赞收藏不迷路哦!

文章来源:https://blog.csdn.net/weixin_38283545/article/details/135544720
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。