Lottery

Lottery machine. Recreated from example: https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/index.html

by the_voder

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扭蛋机</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="bg">
    <span id="message">点击抽奖</span>
    <div class="lotterybg">
        <canvas id="myCanvas" width="285px" height="170px"></canvas>
        <img src="https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/lighting.png" class="lighting"/>
    </div>
</div>
<img src="https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/start-btn.png" id="start" onclick="play()"/>
<div class="award"><span id="awardBall"></span></div>
<img src="https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/1.png" id="ball1" class="imgSrc">
<img src="https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/2.png" id="ball2" class="imgSrc">
<img src="https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/3.png" id="ball3" class="imgSrc">
<img src="https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/4.png" id="ball4" class="imgSrc">
<script src="js/main.js"></script>
</body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    border: none;
}

.bg {
    background: url(https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/bg.png) top no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    width: 400px;
    height: 100%;
    margin-top: 0;
    margin-left: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
}

#message {
    position: absolute;
    text-align: center;
    height: 25px;
    font-size: 22px;
    margin-top: 110px;
    margin-left: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
}

.lotterybg {
    background: url(../img/lotterybg.png) top no-repeat;
    background-size: 100%;
    overflow: visible;
    width: 80%;
    height: 100%;
    margin-top: 160px;
    margin-left: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
}

#myCanvas {
    position: absolute;
    border: none;
    width: 285px;
    height: 170px;
    margin-top: 15px;
    margin-left: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
}

.lighting {
    display: block;
    max-width: 99%;
    margin-top: 0;
    margin-left: 0;
}

#start {
    position: absolute;
    z-index: 3;
    width: 202px;
    margin-top: 413px;
    margin-left: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
}

.imgSrc {
    display: none;
   ...

JavaScript

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var ball1 = document.getElementById('ball1');//图片对象
var ball2 = document.getElementById('ball2');//图片对象
var ball3 = document.getElementById('ball3');//图片对象
var ball4 = document.getElementById('ball4');//图片对象
var ballList = [ball1, ball2, ball3, ball4];//图片对象数组
var ballNum = 4;//扭蛋机里面的小球数
var awardList = [];//扭蛋机中的小球集合
var timer;//计时器
var award = document.getElementById('awardBall');
var message = document.getElementById('message');

function init() {//初始化
    for (let i = 0; i < ballNum; i++) {//随机生成各色小球
        let index = Math.floor(4 * Math.random());
        awardList[i] = new Ball(index, ballList[index]);//新建小球对象
    }
    window.clearInterval(timer);//清除计时器
    timer = setInterval(function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布
        for (let i = 0; i < awardList.length; i++) {
            awardList[i].run();
        }//使小球运动
    }, 15);
}

function Ball(index, img) {
    this.r = 30;//小球半径
    this.x = this.rand(canvas.width - this.r * 2);//小球初始横坐标
    this.y = this.rand(canvas.height - this.r * 2);//小球初始纵坐标
    this.color = index;//小球颜色，以下标表示
    this.img = img;//小球素材
    do {
        this.speedX = this.rand(20) - 10;
    } while (this.speedX < 5);//小球横坐标改变速度
    do {
        this.speedY = this.rand(20) - 10;
    } while (this.speedY < 5);//小球纵坐标改变速度
}

Ball.prototype = {
    rand: function (num) {//随机数
        return Math.random() * num;
    },
    run: function () {//小球运动函数
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x > canvas.width - this.r * 2) {//小球碰到右边界，横坐标速度变为负
            this.speedX = -this.speedX;
        }
        if (this.x < 0) {//小球碰到左边界，横坐标速度变为正
            this.speedX = Math.abs(this.speedX);
        }
        if (this.y > canvas.height - this.r * 2) {//小球碰到下边界，纵坐标速度变为负
            this.speedY = -this.speedY;
        }
        if (this.y < 0) {//小球碰到上边界，纵坐标速度变为正
            this.speedY =...