jquery实现H5红包雨游戏

今天使用jquery 封装了一个红包雨的插件，方便大家一块学习参考使用

(function ($) {
    //el操纵对象，option属性值
    $.backward = function (el, option) {
        var dom = $(el);
        //var lo.vars = $.extend({}, $.backward.default, option); //合并成新对象，则是新的属性列表
        //定义其他属性
        var timer = null, countDownTimer = null;
        var selectCount = 0;
        var second = 10;//秒
        var millisecond = 99;//毫秒
        var parentW = $(window).width();
        var parentH = $(window).height();
        var h = parseInt(parentH / 6 * 1.5);
        var top = -h;
        var method = {};
        //私有方法,私有方法之间可互相调用
        method = {
            timerStart: function () {
                var that = this;
                countDownTimer = setInterval(function () {
                    let second_str, millisecond_str;
                    millisecond--;
                    if (millisecond <= 0) {
                        millisecond = 99;
                        second--;
                    }
                    second_str = second;
                    millisecond_str = millisecond;
                    if (second < 10) {
                        second_str = '0' + second;
                    }
                    if (millisecond < 10) {
                        millisecond_str = '0' + millisecond;
                    }

                    if (second <= 0 && millisecond <= 30) {
                        document.getElementById('timetext').innerHTML = '00:00'
                        that.timerStop();
                    } else {
                        document.getElementById('timetext').innerHTML = second_str + ':' + millisecond_str;
                    }
                }, 12);//每隔50毫秒执行一次timer函数
            },
            //暂停函数
            timerStop: function () {
                window.clearInterval(countDownTimer);
                window.clearInterval(timer);
                this.gameStop();
            },
            //开始游戏
            gameStart: function () {
                var that = this;
                for (var i = 0; i < 4; i++) {
                    that.addRow();
                }
                this.timerStart();
                timer = setInterval(function () {
                    that.movePosition();
                    that.resetPosition();
                }, 15);
            },
            //添加一行
            addRow: function () {
                var oRow = $("<div></div>")
                oRow.attr('class', 'row');
                // var cells = ['cell','cell','cell','cell'];
                // var s = Math.floor(Math.random()*4);
                // cells[s] = "cell block";
                var oCell = null;
                let cells = this.shuffle();
                cells.forEach((item) => {
                    let randomBoolean = Math.random() >= 0.5;
                    let itemName = item.split(".")
                    oCell = $('<div class="cell" data-name="' + itemName[0] + '"><div class="status"></div><img src="./images/' + item + '" alt="" /></div>');
                    if (randomBoolean == false && itemName[0] != 'zongzi') {
                        oCell.addClass('disabled')
                    }
                    oRow.append(oCell);
                })
                var fChild = dom.find('.row').first();
                if (fChild.length == 0) {
                    dom.append(oRow);
                } else {
                    oRow.insertBefore(fChild);
                }
            },
            //点击元素
            clickRow: function (that) {
                if (that.attr('data-name') == 'zongzi' && that.hasClass('disabled') == false) {
                    selectCount++;
                    that.find('.status').addClass('success')
                    this.playAudio('zongzi');
                } else if (that.attr('data-name') != 'zongzi' && that.hasClass('disabled') == false) {
                    console.log('error');
                    that.find('.status').addClass('error')
                    this.playAudio('error');
                    this.timerStop()
                }
            },
            //删除最后一行
            delRow: function () {
                dom.find('.row').last().remove();
            },
            //移动位置
            movePosition: function () {
                top += 5;
                dom.css({ top: top + 'px' })
            },
            //重置位置并删除最后一个
            resetPosition: function () {
                if (top >= 0) {
                    top = -h
                    dom.css({ top: top + 'px' })
                    this.addRow();
                }
                var rows = dom.find('.row');
                for (var i = 0; i < rows.length; i++) {
                    if ($(rows[i]).offset().top >= parentH + h) {
                        this.delRow();
                    }
                }

            },
            //游戏结束
            gameStop: function () {
                if (selectCount >= 30) {
                    $(".game-popup-04").show();
                } else if (selectCount < 30) {
                    let popupBox = $(".game-popup-01");
                    popupBox.find('em').html(selectCount + '分');
                    popupBox.show();
                }
            },
            playAudio: function (type = 'zongzi') {
                if (type == 'zongzi') {
                    const audio = document.getElementById("audio-element");
                    audio.currentTime = 0;
                    audio.play();
                } else {
                    const audio = document.getElementById("audio-element-error");
                    audio.currentTime = 0;
                    audio.play();
                }
            },
            //打乱顺序
            shuffle: function () {
                let temp = [];
                var arr = ["alpine.png", "zongzi.png", "wave_img.png"];
                for (let i = arr.length; i > 0; i--) {
                    let temRandom = Math.floor(Math.random() * i)
                    temp.push(arr[temRandom])
                    arr.splice(temRandom, 1)//抽取一张后，要除去这张牌，然后在剩下的牌中继续抽
                }
                return temp
            },
            //日志输出
            log: function (obj) {
                console.log(obj);
            },
        }

        //公有方法（特权方法），供类外调用
        this.init = function () {
            /*调用私有函数*/
            //method.gameStart();
            var clickEvent = "ontouchstart" in document.documentElement ? "touchstart" : "click";
            $(document).on(clickEvent, ".game-box .cell", function () {
                var that = $(this)
                method.clickRow(that);
            });
        }
        this.start = function () {
            method.gameStart();
        }
    }

    //可设置默认属性

    $.backward.default = {

    }
})(jquery);

以上这篇jquery实现H5红包雨游戏就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。