jquery实现手机端移动端抢红包效果代码-html代码-BFW代码库

代码语言：html

所属分类：红包

代码描述：jquery实现手机端移动端抢红包效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <script>
        (function () {
            var five = new Image(); //5
            five.src = "//repo.bfw.wiki/bfwrepo/image/60d9bb7dd08dc.png";

            var ten = new Image(); //100
            ten.src = "//repo.bfw.wiki/bfwrepo/image/60d9bb8c0b48c.png";

            var empty = new Image(); //空的
            empty.src = "//repo.bfw.wiki/bfwrepo/image/60d9bba118803.png";

            var zad = new Image(); //炸弹
            zad.src = "//repo.bfw.wiki/bfwrepo/image/60d9bbe819c12.png";



            var moneyEnum = {
                five: {
                    image: five,
                    speed: 8,
                    value: 5,
                    widths: 127,
                    heights: 143,
                }, ten: {
                    image: ten,
                    speed: 10,
                    value: 10,
                    widths: 127,
                    heights: 143,
                }, empty: {
                    image: empty,
                    speed: 8,
                    value: 0,
                    widths: 127,
                    heights: 143,
                }, zad: {
                    image: zad,
                    speed: 8,
                    value: -10,
                    widths: 83,
                    heights: 71,
                }
            };




            var money = function (x, type) {
                this.x = x;
                this.y = 0;
                this.type = type;
                this.status = 0; //0正在掉落，1接住 ，2没接住
                this.widths = moneyEnum[this.type].widths;
                this.heights = moneyEnum[this.type].heights;


            }

            money.prototype.draw = function () {
                if (this.status == 0) {
                    context.drawImage(moneyEnum[this.type].image, this.x, this.y, moneyEnum[this.type].widths, moneyEnum[this.type].heights);
                }
            }

            money.prototype.drop = function () {
                //速度叠加
                this.y += moneyEnum[this.type].speed;


                if (this.status == 0 && body.mainpen.y > this.y && body.mainpen.y < this.y + this.heights && body.mainpen.x > this.x && body.mainpen.x < this.x + this.widths) {
                    //

                    this.status = 1;

                    score += moneyEnum[this.type].value; //记录总分数

                    if (moneyEnum[this.type].image == five) {
                        five_num += 1;

                    } else if (moneyEnum[this.type].image == ten) {
                        console.log('100元红包');
                        ten_num += 1;
                        time += 1;

                    } else if (moneyEnum[this.type].image == empty) {
                        console.log('没有点中');
                        empty_num += 1;
                    } else if (moneyEnum[this.type].image == zad) {
                        //炸弹
                        console.log('炸弹');
                        zad_num += 1;
                        time -= 1;
                    }

                } else if (this.y >= 1039) {
                    this.status = 2;
                }
                this.draw();
            }

            window.money = money;
        })();
        (function () {
            var pen = function () {}

            window.pen = pen;
        })();
        (function () {
            var Body = function () {
                var that = this;
                this.moneyList = [];
                this.mainpen = new pen();


                document.addEventListener('touchstart', touch, false);
                document.addEventListener('touchend', touch, false);
                var touchx;
                var touchy;
                function touch(event) {
                    //点击
                    var event = event || window.event;
                    switch (event.type) {
                        case "touchstart":
                            that.mainpen.x = event.touches[0].clientX;
                            that.mainpen.y = event.touches[0].clientY;
                            break;

                        case "touchend":
                            that.mainpen.x = 0;
                            that.mainpen.y = 0;
                            break;
                    }
                }


                var addInterval = setInterval(function () {
                    if (!isEnd) {
                        that.addMoney(Math.random() *130 + 50);
                    } else {
                        clearInterval(addInterval);
                    }
                },
                    500);

            }



            Body.prototype.clear = function () {
                //清屏
                context.clearRect(0,
                    0,
                    canvasWidth,
                    canvasHeight);
            }

            Body.prototype.addMoney = function (x) {
                //掉钱
                var random = Math.floor(Math.random() * 4);
                if (random == 0 && five_num_left >= 0 && !isEnd) {
                    this.moneyList.push(new money(x, "five"));
                } else if (random == 1 && ten_num_left >= 0 && !isEnd) {
                    this.moneyList.push(new money(x, "ten"));
                } else if (random == 2 && empty_num_left >= 0 && !isEnd) {
                    this.moneyList.push(new money(x, "empty"));
                } else if (random == 3 && empty_num_left >= 0 && !isEnd) {
                    this.moneyList.push(new money(x, "zad"));
                }
            }

            Body.prototype..........完整代码请登录后点击上方下载按钮下载查看