JS+html实现简单的飞机大战

敌机类JS
/**
 * Created by mac on 2016-07-22.
 */
/**
 * 使用闭包函数法不能实现相关功能。
 */
(function (window) {
    //enemyType敌机1（d_j_1.gif）：0，
    //敌机3（d_j_3.gif）:1
    var enemy_top;
    var enemy_index;
    var EnemyPlane2 = function (enemyType) {
        enemy_index = enemyIndex;
        this.init(enemyType);
        enemy_top = this.initialEnemyTop();
        this.startMove();
    };
    EnemyPlane2.prototype.initialEnemyTop = function () {

        var Postion = $("#bg #" + enemy_index).css("top");
        Postion = Postion.substring(0, Postion.length - 2);
        Postion = parseInt(Postion);
        return Postion;
    };
    EnemyPlane2.prototype.init = function (enemyType) {
        var enemy = "<div class=‘enemyPlane‘ id=‘" + enemy_index + "‘></div>";
        $("#bg").append(enemy);
        //Math.random();//生成一个0到1的随机数；
        //parseInt();//取整
        //$("#bg div:eq(0)").css("width"="72px");单个参数的用法
        var enemy_left = parseInt(Math.random() * (530 - 64));
        switch (enemyType) {
            case 0:
                $("#bg #" + enemy_index).css({
                    "width": "47px",
                    "height": "72px",
                    "background": "url(‘./game_images/d_j_1.gif‘) no-repeat",
                    "left": enemy_left + "px"
                });
                break;
            case 1:
                $("#bg #" + enemy_index).css({
                    "width": "64px",
                    "height": "56px",
                    "background": "url(‘./game_images/d_j_3.gif‘) no-repeat",
                    "left": enemy_left + "px"
                });
                break
        }
    };
    EnemyPlane2.prototype.startMove = function () {
        var planeHeight = $("#bg #" + enemy_index).css("height");
        planeHeight = planeHeight.substring(0, planeHeight.length - 2);
        planeHeight = parseInt(planeHeight);
        if ((enemy_top + planeHeight) > 598) {
            $("#bg #" + enemy_index).remove();//与empty()的区别在于是否将本身删除。它们的子元素都会被删除

        }
        else {
            //enemy_top += 3;
            //$("#bg #"+enemy_index).css("top",enemy_top + "px");
            $("#bg #" + enemy_index).animate({"top": (600 - planeHeight) + "px"}, 4000, function () {
                $("#bg #" + enemy_index).hide();
                $("#bg #" + enemy_index).remove();
            });
        }
    };
    window.EnemyPlane2 = EnemyPlane2;
})(window);
/**
 * 通过类的思想，实现飞机的控制；
 * @param enemyType
 * @constructor
 */
function EnemyPlane() {
    var enemy_top;
    var enemy_type;
    var enemyId;
    init();
    function initialEnemyTop() {
        var Postion = $("#bg #e" + enemyId).css("top");
        Postion = Postion.substring(0, Postion.length - 2);
        Postion = parseInt(Postion);
        return Postion;
    }

    function init() {
        //随机生成飞机类型；
        enemy_type = (parseInt(Math.random() * 10) > 5) ? 0 : 1;
        //随机生成飞机id
        enemyId = parseInt(Math.random() * 10000);
        //向#bg中添加飞机；
        var enemy = "<div class=‘enemyPlane‘ id=‘e" + enemyId + "‘></div>";
        $("#bg").append(enemy);
        //获取敌机的值；
        enemy_top = initialEnemyTop();
        //Math.random();//生成一个0到1的随机数；
        //parseInt();//取整
        //$("#bg div:eq(0)").css("width"="72px");单个参数的用法
        //随机生成敌机开始时的Left值
        var enemy_left = parseInt(Math.random() * (530 - 64));
        //根据随机出来的飞机类型，对飞机属性进行设置；
        switch (enemy_type) {
            case 0:
                $("#bg #e" + enemyId).css({
                    "width": "47px",
                    "height": "72px",
                    "background": "url(‘./game_images/d_j_1.gif‘) no-repeat",
                    "left": enemy_left + "px"
                });
                break;
            case 1:
                $("#bg #e" + enemyId).css({
                    "width": "64px",
                    "height": "56px",
                    "background": "url(‘./game_images/d_j_3.gif‘) no-repeat",
                    "left": enemy_left + "px"
                });
                break;
        }
        //敌机开始移动
        startMove();
    }

    //敌机开始移动
    function startMove() {
        //获取敌机的高度
        var planeHeight = $("#bg #e" + enemyId).css("height");
        planeHeight = planeHeight.substring(0, planeHeight.length - 2);
        planeHeight = parseInt(planeHeight);
        //获取敌机的宽度
        var planeWidth = $("#bg #e" + enemyId).css("width");
        planeWidth = planeWidth.substring(0, planeWidth.length - 2);
        planeWidth = parseInt(planeWidth);
        //随机获取敌机的Left（只有飞机走折线时采用）
        var planeLeft = parseInt(Math.random() * (530 - planeWidth));
        //随机敌机是走折线，还是走直线；
        if (parseInt(Math.random() * 10) > 5) {
            $("#bg #e" + enemyId).animate({"top": (600 - planeHeight) + "px"}, 3000, function () {
                var planeHeight1 = $("#bg #e" + enemyId).css("top");
                planeHeight1 = planeHeight1.substring(0, planeHeight1.length - 2);
                planeHeight1 = parseInt(planeHeight1);
                enemyDismiss();
            });
        }
        else {
            //走折线时，第一次位置变化
            $("#bg #e" + enemyId).animate({"top": (300 - planeHeight) + "px", "left": "1px"}, 1500, ‘linear‘);
            //第二次位置变化
            $("#bg #e" + enemyId).animate({
                "top": (600 - planeHeight) + "px",
                "left": planeLeft + "px"
            }, 1500, ‘linear‘, function () {
                //销毁敌机
                enemyDismiss();
            });
        }
    }

    //销毁敌机
    function enemyDismiss() {
        $("#bg #e" + enemyId).hide();
        $("#bg #e" + enemyId).remove();
    }

    function getEnemyPosition() {
        var position_top = $("#bg #e" + enemyId).css("top");
        var position_left = $("#bg #e" + enemyId).css("left");
        var position = {"top": position_top, "left": position_left};
        return position;
    }
}

实现子弹类JS
/**
 * Created by mac on 2016-07-23.
 */
function bullets(left,top){
    /**
     * 子弹的图片信息
     * width: 9px;
     * height: 37px;
     */
    /**
     * 我方飞机的图片信息
     * width: 60px;
     * height: 60px;
     */

    var planeLeft = left;
    var planeTop = top;
    var bulletTop;
    var bulletLeft;
    var bullet_controller;
    var randomID;
    var boom_controller;
    var boomID;
    initial();
    function initial(){
        randomID = parseInt(Math.random() * 10000);
        var bull = "<div class=‘bullets‘ id=‘b"+randomID+"‘></div>";
        //console.log(bull);
        $("#myPlane").after(bull);
        bulletTop = planeTop - 39;
        bulletLeft = planeLeft + 25.5;
        $("#b"+randomID).css({"top":bulletTop+"px","left":bulletLeft+"px"});
        bullet_controller = setInterval(startMove,10);
    }
    function startMove(){
        if(bulletTop > 0){
            bulletTop -= 3;
            $("#b"+randomID).css("top",bulletTop + "px");
            enemyShoot();
        }
        else {
            stopMove();
        }
    }
    function stopMove(){
        clearInterval(bullet_controller);
        $("#b"+randomID).remove();
    }
    //判断子弹否击中敌机
    function enemyShoot(){
        var enemies = $(".enemyPlane");
        //console.log(enemies);
        for (var i=0;i<enemies.length;i++){

            var position_left = $(".enemyPlane").eq(i).css("left");
            var position_top = $(".enemyPlane").eq(i).css("top");

            var position = {"left":getIntFromStr(position_left),"top":getIntFromStr(position_top)};
            if(calcEnemyShoot(position)){
                enemyShotHandle(position);
                //敌机消失；
                $(".enemyPlane").eq(i).stop();
                $(".enemyPlane").eq(i).remove();
                break;//当一颗子弹击中目标后需要将循环结束
            }
        }
    }
    function enemyShotHandle(position){
        //设置boom的属性
        boomID = parseInt(Math.random() * 10000);
        var boom = "<div style=‘width: 160px;height: 160px;position: absolute;overflow: visible;‘ id=‘boom"+boomID+"‘></div>";
        $("#bg").append(boom);
        $("#boom" + boomID).css("top",(parseInt(position.top) - 50)+"px");
        $("#boom" + boomID).css("left",(parseInt(position.left) - 55)+"px");
        $("#boom" + boomID).css("background","url(‘./game_images/0.gif‘) no-repeat");
        stopMove();//将子弹清除
        boom_controller = setTimeout(boomHandle,200);
    }
    function boomHandle(){
        //先将boom图片加载，然后将boom图片消失
        $("#boom" + boomID).css("background","url(‘./game_images/b.gif‘) no-repeat");
        $("#boom" + boomID).remove();
        clearTimeout(boom_controller);
    }
    //计算是否击中敌机
    function calcEnemyShoot(position){
        //bullet的top:bulletTop;
        //bullet的Left:bulletLeft;
        //子弹的Top应该在飞机（top，top+60)之间（60是取飞机的一个大致的长度）。Left应该在敌机的(left,left+50)之间
        if(bulletTop < (parseInt(position.top) + 60) && bulletTop > parseInt(position.top) ){
            if(bulletLeft > parseInt(position.left) && bulletLeft < (parseInt(position.left) + 50)){
                return true;
            }
        }
        return false;
    }
    //获取敌机位置
    function getEnemyPosition(enemy){
        var position_left = enemy.css("left");
        var position_top = enemy.css("top");
        return {"left":getIntFromStr(position_left),"top":getIntFromStr(position_top)};
    }
    //将位置信息中的"px"去掉；
    function getIntFromStr(str){
        //console.log(str);
        str = str.substring(0,str.length - 2);
        return str;
    }
}