(function () {    var imageUrl = "images/";    //获取画布对象    var c = $("#game-box").get(0);    //手机屏幕自适应    (function () {        $(window).on("resize", resize);        resize();        function resize() {            $(c).attr("height", $(window).height() < 800 ? $(window).height() : 800);            $(c).attr("width", $(window).width() < 480 ? $(window).width() : 480);        }    })();    //创建画布    var cxt = c.getContext("2d");    //图片资源, 存放图片对象    var sources = [];    //新建图片方法    function creatImg(src) {        if (typeof sources[src] != "undefined") {            return sources[src];        }        sources[src] = new Image();        sources[src].src = src;        return sources[src];    }    $(function () {        var images = ['bg.jpg', 'loading1.png', 'loading2.png', 'loading3.png', 'logo.png'];        loadImages(images, loading);    });    function loading() {        var loadingTime = 0;        var refresh = function () {            drawBg();            drawLogo();            load();            loadingTime++;        }        var loadingClock = setInterval(refresh, 1);        function drawBg() {            var bg_img = creatImg("bg.jpg");            var bg_img_width = bg_img.width;            var bg_img_height = bg_img.height;            cxt.drawImage(bg_img, 0, 0, bg_img_width, bg_img_height);        }        function drawLogo() {            var logo_img = creatImg("logo.png");            var logo_width = logo_img.width;            var logo_height = logo_img.height;            var c_width = $(c).width();            var x = (c_width - logo_width) / 2;            var y = 100;            cxt.drawImage(logo_img, x, y, logo_width, logo_height);        }        function load() {            if (loadingTime == 600) {                loadingTime = 0;            }            var pic = creatImg("loading" + (parseInt(loadingTime / 200) + 1) + ".png");            var pic_width = pic.width;            var pic_height = pic.height;            var c_width = $(c).width();            var x = (c_width - pic_width) / 2;            cxt.drawImage(pic, x, 220, pic_width, pic_height);        }        var images = ['cartridge.png', 'die1.png', 'die2.png', 'me.png', 'plain1.png', 'plain2.png', 'plain3.png', 'plain1_die1.png', 'plain1_die2.png', 'plain1_die3.png', 'plain2_die1.png', 'plain2_die2.png', 'plain2_die3.png', 'plain2_die4.png', 'plain3_die1.png', 'plain3_die2.png', 'plain3_die3.png', 'plain3_die4.png', 'plain3_die5.png', 'plain3_die6.png', 'me_die1.png', 'me_die2.png', 'me_die3.png', 'me_die4.png'];        loadImages(images, function () {            main();            clearInterval(loadingClock);        });    }    function loadImages(images, callback) {        var loadedImages = 0;        var numImages = images.length;        for (var i in images) {            sources[images[i]] = new Image();            sources[images[i]].src = imageUrl + images[i];            sources[images[i]].onload = function () {                loadedImages++;                if (loadedImages >= numImages) {                    callback();                }            };        }    }    function main() {        var modal = {            "show": function (s) {                $("#modal").find(".content").html(s);                $("#modal").removeClass("hide");            },            "hide": function () {                $("#modal").addClass("hide");            }        };        var bg_img = creatImg("bg.jpg");        var bg_img_width = bg_img.width;        var bg_img_height = bg_img.height;        cxt.drawImage(bg_img, 0, 0, bg_img_width, bg_img_height);        var c_width = $(c).width();        var c_height = $(c).height();        var me = {};        me.status = true;        me.model = creatImg("me.png");        me.width = c_width / 480 * me.model.width;        me.height = me.width / me.model.width * me.model.height;        me.move = function (x, y) {            me.x = x - me.width / 2;            me.y = y - me.height / 2;            var c_width = $(c).width();            var c_height = $(c).height();            me.x = me.x > c_width - me.width ? c_width - me.width : me.x;            me.x = me.x < 0 ? 0 : me.x;            me.y = me.y > c_height - me.height ? c_height - me.height : me.y;        }        me.moveing = function () {            if (!me.status) {                return;            }            cxt.drawImage(me.model, me.x, me.y, me.width, me.height);        }        me.cartridges = [];        me.cartridge = function (x, y) {            var cartridgeModel = creatImg("cartridge.png");            this.model = cartridgeModel;            this.x = x;            this.y = y;            this.width = c_width / 480 * cartridgeModel.width;            this.height = this.width / cartridgeModel.width * cartridgeModel.height;        }        me.attackTime = 0;        me.attack = function () {            if (!me.status) {                return;            }            me.attackTime++;            if (me.attackTime % 20 != 0) {                return;            }            me.attackTime = 0;            var cartridge = new me.cartridge(0, 0);            cartridge.x = me.x + (me.width - cartridge.width) / 2;            cartridge.y = me.y - cartridge.height;            me.cartridges.push(cartridge);        }        me.attacking = function () {            me.attack();            var cartridgeSpeed = 10;            me.cartridges.map(function (cartridge, cartridgeIndex) {                cxt.drawImage(cartridge.model, cartridge.x, cartridge.y, cartridge.width, cartridge.height);                if (cartridge.y <= 0) {                    me.cartridges.splice(cartridgeIndex, 1);                }                game.plains.map(function (plain) {                    var X = cartridge.x;                    var nextY = cartridge.y - cartridgeSpeed;                    if (                        X > plain.x                     && X < (plain.x + plain.width)                     && nextY < (plain.y + plain.height + plain.speed)                     && cartridge.y >= (plain.y + plain.height)                    ) {                        me.cartridges.splice(cartridgeIndex, 1);                        plain.byAttack();                    }                });                cartridge.y = cartridge.y - cartridgeSpeed;  //子弹向上移动            });        }        me.die = function () {            if (!me.status) {                return;            }            $(c).off("mousemove");            c.removeEventListener("touchmove");            me.status = false;            var dieSpeed = 25;            var x = this.x;            var y = this.y;            var h = this.height;            var w = this.width;            game.plainsDies.push((new die()));            function die() {                var dieTime = 4 * dieSpeed;                this.animationTime = 4 * dieSpeed;                this.call = function () {                    if (this.animationTime == 1) {                        game.over();                    }                    var dieModel = creatImg("me_die" + (parseInt((dieTime - this.animationTime) / dieSpeed) + 1) + ".png");                    cxt.drawImage(dieModel, x, y, w, h);                    this.animationTime--;                }            }        }        var game = {};        game.score = 0;        game.me = me;        game.time = 0;        game.refresh = function () {            game.time += 0.001;            game.bgScroll();            game.addPlain();            game.plainsScroll();            game.me.moveing();            game.me.attacking();            game.plainsDying();            $("#score").html(game.score);        }        game.bgScrollTime = 0;        game.bgScroll = function () {            game.bgScrollTime += 0.5;            if (game.bgScrollTime > bg_img_height) {                game.bgScrollTime = 0;            }            cxt.drawImage(bg_img, 0, game.bgScrollTime - bg_img_height, bg_img_width, bg_img_height);            cxt.drawImage(bg_img, 0, game.bgScrollTime, bg_img_width, bg_img_height);        }        game.plains = [];        game.plainsNum = 0;        game.addPlain = function () {            if (game.bgScrollTime % 60 != 0) {                return;            }            if (game.plainsNum == 25) {                game.plainsNum = 0;            }            game.plainsNum++;            switch (true) {                case game.plainsNum % 13 == 0:                    game.plains.push(new plain(3, 0.3));                    break;                case game.plainsNum % 6 == 0:                    game.plains.push(new plain(2, 0.3));                    break;                default:                    game.plains.push(new plain(1, 0.3));                    break;            }        }        game.plainsScroll = function () {            game.plains.map(function (plain, plainIndex) {                if (!plain.status) {                    game.plains.splice(plainIndex, 1);                    return;                }                cxt.drawImage(plain.model, plain.x, plain.y, plain.width, plain.height);                if (isCollide(plain)) {                    game.me.die();                }                if (plain.y > c_height) {                    game.plains.splice(plainIndex, 1);                }                plain.y = plain.y + plain.speed;            });            //推断是否和玩家的飞机碰撞            function isCollide(plain) {                var plainTopLeft = [plain.x, plain.y];                var plainBottomRight = [plain.x + plain.width, plain.y + plain.height];                var meTopLeft = [game.me.x + game.me.width / 3, game.me.y];                var meBottomRight = [game.me.x + (game.me.width * 2 / 3), game.me.y + (game.me.height * 2 / 3)];                var collideTopLeft = [Math.max(plainTopLeft[0], meTopLeft[0]), Math.max(plainTopLeft[1], meTopLeft[1])];                var collideBottomRight = [Math.min(plainBottomRight[0], meBottomRight[0]), Math.min(plainBottomRight[1], meBottomRight[1])];                if (collideTopLeft[0] < collideBottomRight[0] && collideTopLeft[1] < collideBottomRight[1]) {                    return true;                }                return false;            }        }        game.plainsDies = [];        game.plainsDying = function () {            game.plainsDies.map(function (plainDie, plainDieIndex) {                if (plainDie.animationTime == 0) {                    game.plainsDies.splice(plainDieIndex, 1);                    return;                }                plainDie.call();            });        }        game.over = function () {            $(c).removeClass("playing");            clearInterval(game.clock);            modal.show(game.score);        }        game.clear = function () {            game.me.x = ($(c).width() - game.me.width) / 2;            game.me.y = $(c).height() - game.me.height;            game.plains = [];            game.plainsDies = [];            game.plainsNum = 0;            game.time = 0;            game.bgScrollTime = 0;            game.score = 0;            game.me.status = true;        }        game.start = function () {            $(c).addClass("playing");            $(c).on("mousemove", function (e) {                var x = e.clientX - $(this).offset().left;                var y = e.clientY;                me.move(x, y);            });            c.addEventListener("touchmove", function (e) {                e.preventDefault();                var touch = e.targetTouches[0];                me.move(touch.pageX, touch.pageY);            });            modal.hide();            game.clear();            game.clock = setInterval(function () {                game.refresh();            }, 7);        }        game.start();        //飞机类        function plain(type) {            this.type = type;            this.hp;  //飞机生命值            this.height;            this.width;            this.maxSpeed;            this.dieTime;            this.status = true;  //飞机死了没            var dieSpeed = 25;  //死亡动画播放速度            switch (type) {                case 1:                    this.hp = 1;                    this.score = 1000;                    this.modelimg = "plain1.png";                    this.maxSpeed = 5;                    this.dieTime = dieSpeed * 3;                    break;                case 2:                    this.hp = 6;                    this.score = 8000;                    this.modelimg = "plain2.png";                    this.maxSpeed = 2;                    this.dieTime = dieSpeed * 4;                    break;                case 3:                    this.hp = 15;                    this.score = 30000;                    this.modelimg = "plain3.png";                    this.maxSpeed = 1.5;                    this.dieTime = dieSpeed * 6;                    break;            }            this.model = creatImg(this.modelimg);            this.width = c_width / 480 * this.model.width;            this.height = this.width / this.model.width * this.model.height;            this.x = Math.random() * (c_width - this.width);            this.y = -(this.height);            var maxSpeed = game.time > 10 ? 10 : game.time;            this.speed = Math.random() * (maxSpeed - 1) + 1;            this.speed = this.speed < 0.5 ? Math.random() * 0.5 + 0.5 : this.speed;            this.speed = this.speed > this.maxSpeed ? this.maxSpeed : this.speed;            this.die = function () {                var plainType = this.type;                var plainX = this.x;                var plainY = this.y;                var plainW = this.width;                var plainH = this.height;                game.plainsDies.push((new die(this.dieTime)));                function die(dieTime) {                    var dieTime = dieTime;                    this.animationTime = dieTime;                    this.call = function () {                        if (this.animationTime <= 0) {                            return;                        }                        var dieModel = creatImg("plain" + plainType + "_die" + (parseInt((dieTime - this.animationTime) / dieSpeed) + 1) + ".png");                        cxt.drawImage(dieModel, plainX, plainY, plainW, plainH);                        this.animationTime--;                    }                }            }            this.byAttack = function () {                this.hp--;                if (this.hp <= 0) {                    game.score += this.score;                    this.status = false;                    this.die();                }            }        }        $("#modal").on("click", "button", function () {            game.start();        });    }})();

演示出处：