H5-canvas-原生-编写俄罗斯转盘抽奖系统

最新推荐文章于 2025-04-29 14:26:38 发布

WebCoderT

最新推荐文章于 2025-04-29 14:26:38 发布

阅读量731

点赞数

分类专栏： canvas 文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_46819856/article/details/115011194

版权

canvas 专栏收录该内容

3 篇文章

订阅专栏

先放上写好之后的样子
在这里插入图片描述
这里面的图片素材是我从别人的网站的拔下来的，如果需要删除的话请联系我哈。
为什么我要写这个呢，因为闲的，然后看见了这个东西，结果下载还要收费，我一想，算了吧，素材扒下来自己写一个。然后就有了后面的代码
这个是文件结构
在这里插入图片描述
下面直接上代码里面有注释
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幸运大转盘</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .allCanvas {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 50px auto;
            background-color: rgba(0, 0, 0, .1);
        }

        #canvasbg {
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
        }

        #canvasboxs {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }

        #canvasbtn {
            position: absolute;
            z-index: 2;
            top: 180px;
            left: 180px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="allCanvas">
    <canvas id="canvasbg" width="500" height="500"></canvas>
    <canvas id="canvasboxs" width="500" height="500"></canvas>
    <canvas id="canvasbtn" width="140" height="140"></canvas>
</div>
<script src="js/common.js"></script>
<script src="js/main.js"></script>
<script src="js/background.js"></script>
<script src="js/boxs.js"></script>
<script src="js/button.js"></script>
</body>
</html>

js/background.js

//背景渲染函数
function drawbg() {
    ctxbg.clearRect(-WIDTH / 2, -HEIGHT / 2, WIDTH, HEIGHT);
    ctxbg.drawImage(imagebg, (-WIDTH / 2) + (WIDTH * 0.05), (-HEIGHT / 2) + (HEIGHT * 0.05), WIDTH * 0.9, HEIGHT * 0.9);
}

js/boxs.js

function drawboxs() {
    positionlist = [];
    ctxboxs.clearRect(-WIDTH / 2, -HEIGHT / 2, WIDTH, HEIGHT);
    for (let i = 0; i < 8; i++) {
        fill(i);
    }
}

function fill(num) {
    if (num % 2 == 0) {
        ctxboxs.fillStyle = "#F8C950";
        ctxboxs.strokeStyle = "#F8C950";
    } else {
        ctxboxs.fillStyle = "#FBFBE0";
        ctxboxs.strokeStyle = "#FBFBE0";
    }
    ctxboxs.beginPath();
    ctxboxs.moveTo(0, 0);
    ctxboxs.arc(0, 0, 190, num * (Math.PI / 4), (num + 1) * (Math.PI / 4));
    let obj = {
        a: {
            x: (190 * Math.cos((num * (Math.PI / 4)) + deg)),
            y: (190 * Math.sin((num * (Math.PI / 4)) + deg))
        },
        b: {
            x: (190 * Math.cos((num + 1) * (Math.PI / 4) + deg)),
            y: (190 * Math.sin((num + 1) * (Math.PI / 4) + deg))
        }
    };
    positionlist.push({
        x: (obj.a.x + obj.b.x) / 2,
        y: (obj.a.y + obj.b.y) / 2
    });
    ctxboxs.closePath();
    ctxboxs.stroke();
    ctxboxs.fill();
    filltext(num);
}

function filltext(num) {
    ctxboxs.save();
    ctxboxs.rotate(Math.PI / 4 * num);
    ctxboxs.translate(Math.cos(Math.PI / 8) * (Math.cos(Math.PI / 8) * 190), Math.sin(Math.PI / 8) * (Math.cos(Math.PI / 8) * 190));
    ctxboxs.save();
    ctxboxs.rotate(Math.PI / 8 * 5);
    ctxboxs.textAlign = "center";
    ctxboxs.fillStyle = 'black';
    ctxboxs.fillText(boxlist[num], 0, 0);
    ctxboxs.restore();
    ctxboxs.save();
    ctxboxs.translate(Math.cos(Math.PI / 8) * (Math.cos(Math.PI / 8) * 190) - 160, Math.sin(Math.PI / 8) * (Math.cos(Math.PI / 8) * 190) - 95);
    ctxboxs.rotate(Math.PI / 8 * 5);
    ctxboxs.drawImage(boximagelist[num], 0, 0, 60, 60);
    ctxboxs.restore();
    ctxboxs.restore();
}

js/button.js

function drawbtn() {
    ctxbtn.drawImage(imagejt, -imagejt.width * 0.15, -imagejt.height * 0.15, imagejt.width * 0.3, imagejt.height * 0.3);
    ctxbtn.drawImage(imagego, -imagego.width * 0.15, -imagego.height * 0.15, imagego.width * 0.3, imagego.height * 0.3);
}

document.getElementById("canvasbtn").addEventListener("click", function () {
    begin();
});

js/common.js

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function ( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
            return window.setTimeout(callback, 1000 / 60);
        };
})();

//开始游戏
function begin() {
    if (timer == null) {
        timer = setInterval(() => {
            if (speed < 20 && speedMax === 0) {
                speed += Math.random();
            } else if (speed > 20 && speedMax < 10) {
                speedMax += Math.random();
            } else if (speedMax >= 10 && speed > 1.1) {
                speed -= Math.random();
            } else {
                speed = 0;
                speedMax = 0;
                clearInterval(timer);
                timer = null;
                end();
                setTimeout(function () {
                    speed = 0.1;
                }, 1000);
            }
        }, 100)
    }
}

//结束游戏
function end() {
    space = [];
    for (let i = 0; i < positionlist.length; i++) {
        space.push((Math.pow(positionlist[i]["x"], 2) + Math.pow(positionlist[i]["y"] + 100, 2)))
    }
    alert(`恭喜你获得奖品：${boxlist[space.indexOf(Math.min(...space))]}`)
}

js/main.js

document.body.onload = game;//初始化函数

var WIDTH = 500;//canvas的宽度
var HEIGHT = 500;//canvas的高度

//背景画布
var canvasbg = document.getElementById("canvasbg");//背景画布
var ctxbg = null;//背景画布的画笔
var imagebg = new Image();//背景图片-圆

//奖品画布
var canvasboxs = document.getElementById("canvasboxs");//奖品画布
var ctxboxs = null;//奖品画布的画笔
var boxlist = ["10元现金", "15元加油卡", "20元优惠券", "25元加油卡", "25元现金", "100元优惠券", "谢谢惠顾", "15元加油卡"];//奖品列表
var boximagelist = [new Image(), new Image(), new Image(), new Image(), new Image(), new Image(), new Image(), new Image()];//奖品图片列表
var positionlist = [];//确定位置
var space = [];//距离判断
var deg = 0;//总旋转度数
var speed = 0.1;//旋转速度
var speedMax = 0;//最大旋转速度
var timer = null;//旋转定时器

//按钮画布
var canvasbtn = document.getElementById("canvasbtn");//按钮画布
var ctxbtn = null;//按钮画布的画笔
var imagego = new Image();//GO文字图
var imagejt = new Image();//按钮图


function game() {
    init();
    loop();
}

function init() {
    initbg();
    initboxs();
    initbtn();
}

function loop() {
    requestAnimFrame(loop);
    ctxbg.rotate(0.3 * Math.PI / 180);
    drawbg();
    ctxboxs.rotate(speed * Math.PI / 180);
    deg += speed * Math.PI / 180;
    drawboxs();
}

function initbg() {
    ctxbg = canvasbg.getContext("2d");
    ctxbg.translate(WIDTH / 2, HEIGHT / 2);
    imagebg.src = "./images/bg.png";
}

function initboxs() {
    ctxboxs = canvasboxs.getContext("2d");
    ctxboxs.translate(WIDTH / 2, HEIGHT / 2);
    boximagelist[0].src = "./images/1.png";
    boximagelist[1].src = "./images/2.png";
    boximagelist[2].src = "./images/3.png";
    boximagelist[3].src = "./images/4.png";
    boximagelist[4].src = "./images/5.png";
    boximagelist[5].src = "./images/6.png";
    boximagelist[6].src = "./images/7.png";
    boximagelist[7].src = "./images/8.png";
    // drawboxs();
}

function initbtn() {
    ctxbtn = canvasbtn.getContext("2d");
    imagego.src = "./images/go.png";
    imagejt.src = "./images/jt.png";
    ctxbtn.translate(70, 70);
    imagego.onload=function(){
        imagejt.onload = function () {
            drawbtn();
        }
    };
}