抽奖小游戏

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./index.css"/>
    </head>
        
    <body>
        <div id="app">
            
        </div>
        <script src="./tools.js" type="text/javascript" charset="utf-8"></script>
        <script src="./index.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            lottery.init({
                el : document.getElementById('app'),
                row : 4,
                col : 4,
                width : 100,
                height : 100,
                spacing : 5,
                lottery : ['一等奖', '二等奖', '三等奖','四等奖', '五等奖', '六等奖','七等奖', '八等奖', '九等奖','十等奖', '十一等奖', '十二等奖'],
            });
        </script>
    </body>
</html>

css代码：

.lottery {
    position: relative;
    
    user-select: none;
}
.lottery .lottery-items {
    background: #ff0000;
    text-align: center;    
    color: #FFFFFF;
    position: absolute;
}

.on {
    background: #FFFF00 !important;
    color: #FF0000 !important;
}
.lottery .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #ff0000;
    text-align: center;    
    color: yellow;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 10px;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
}

index.js代码：

// 步骤
// 1.拿到数据 initData
// 2.个数 去生成元素了   渲染 render
// 3.监听事件 handle


var lottery = {
    flag : false,
    index : 0,
    time : 200,
    timer : null,
    init: function(options) {
        this.initData(options);
        this.render();
        this.handle();
    },
    initData: function(options) {
        this.el = options.el;
        this.row = options.row; //格子的行数
        this.col = options.col; //格子的列数
        this.width = options.width || 100;
        this.height = options.height || 100;
        this.spacing = options.spacing || 5;
        this.lottery = options.lottery;
        this.childLength = this.row * this.col - (this.row - 2) * (this.col - 2); //格子个数
        this.domPosArr = this.getPosition(this.childLength); //每个格子的边框数据
        this.totalWidth = this.width * this.col + (this.col - 1) * this.spacing;
        this.totalHeight = this.height * this.row + (this.row - 1) * this.spacing;
    },
    getPosition: function(childLength) { //得到每个格子的位置信息
        var arr = [];
        //临界值点
        var criticalVal1 = 0;
        var criticalVal2 = this.col;
        var criticalVal3 = this.col + this.row - 1;
        var criticalVal4 = 2 * this.col + (this.row - 2);
        
        for (var i = 0; i < childLength; i++) {
            if (i >= criticalVal1 && i < criticalVal2) {
                arr[i] = {
                    top: '0px',
                    left: i * (this.width + this.spacing) + 'px',
                }
            } else if (i >= criticalVal2 && i < criticalVal3) {
                arr[i] = {
                    right: '0px',
                    top: (i + 1 - criticalVal2) * (this.height + this.spacing) + 'px',
                }
            } else if(i >= criticalVal3 && i < criticalVal4){
                arr[i] = {
                    bottom : '0px',
                    left : (criticalVal4 - i - 1 ) * (this.width + this.spacing) + 'px',
                }
            } else if(i >= criticalVal4){
                arr[i] = {
                    left : '0px',
                    bottom : (i - criticalVal4 + 1) * (this.height + this.spacing)   + 'px',
                }
            }
        }
        return arr;
    },
    render: function() {
        for (var i = 0; i < this.childLength ; i++) {
            var posInfo = this.domPosArr[i];
            var oDiv = document.createElement('div');
            oDiv.setAttribute('class', 'lottery-items');

            if (posInfo.top) {
                oDiv.style.top = posInfo.top;
            }
            if (posInfo.bottom) {
                oDiv.style.bottom = posInfo.bottom;
            }
            if (posInfo.left) {
                oDiv.style.left = posInfo.left;
            }
            if (posInfo.right) {
                oDiv.style.right = posInfo.right;
            }
            
            oDiv.style.width = this.width + 'px';
            oDiv.style.height = this.height + 'px';
            oDiv.style.lineHeight = oDiv.style.height;
            oDiv.innerText = i + 1;
            oDiv.dataset.praise = this.lottery[i];
            this.el.appendChild(oDiv);
        }
        
        //添加抽奖按钮
        var oDiv = document.createElement('div');
        oDiv.innerHTML = '点我抽奖';
        oDiv.setAttribute('class', 'btn');
        oDiv.style.width = (this.col - 2) * this.width + 'px';
        oDiv.style.height = (this.row - 2) * this.height + 'px';
        oDiv.style.lineHeight = oDiv.style.height;
        this.el.appendChild(oDiv);
        
        this.el.classList.add('lottery'); //预防 el 的 id改变后所造成样式不可用的问题 
        this.el.style.width = this.totalWidth + 'px';
        this.el.style.height = this.totalHeight + 'px';
    },
    handle: function() {
        var self = this;
        var oBtn = this.el.getElementsByClassName('btn')[0];
        addEvent(oBtn, 'click', function() {
            if(!self.flag) {
                self.startLottery();
            }
        });
    },
    startLottery : function () {
        this.flag = true;
        var onDom = this.el.getElementsByClassName('lottery-items')[this.index];
        onDom.classList.add('on');
        setTimeout(this.runner.bind(this), this.time);
    },
    runner : function() {
        clearTimeout(this.timer);
        var index = Math.floor(Math.random() * this.childLength);
        while(index === this.index) {
            index = Math.floor(Math.random() * this.childLength);
        }
        this.index = index;
        var onDom = this.el.getElementsByClassName('on')[0];
        onDom.classList.remove('on');
        
        onDom = this.el.getElementsByClassName('lottery-items')[this.index];
        onDom.classList.add('on');
        this.time -= 20;
         if(this.time < 20){
             this.end();
             return;
         }
         this.timer = setTimeout(this.runner.bind(this), this.time);
    },
    end : function () {
        var self = this;
        setTimeout(function() {
            alert(self.el.getElementsByClassName('lottery-items')[self.index].dataset.praise);
            self.resetting();
        }, 0);
    },
    resetting : function() {
        this.flag = false;
        this.index = 0;
        this.time = 500;
        this.el.getElementsByClassName('on')[0].classList.remove('on');
    },
};

猜你喜欢