Html5 の 微信飞机大战

(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();
        });
    }
})();

演示出处：请点击打开