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

摘要：通过原生的js+html实现简单的飞机大战小游戏效果，如图所示：

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

实现代码如下：

1.自己的飞机实现

飞机html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打飞机</title>
    <style>
        #bg {
            position: relative;
            width: 530px;
            height: 600px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            background: url("game_images/bg.png") no-repeat 0 -9399px;
        }

        #myPlane {
            position: absolute;
            width: 60px;
            height: 60px;
            background:url('game_images/my_air.gif') no-repeat;
            top: 530px;
            left: 235px;
            overflow: visible;
        }
        .enemyPlane{
            position: absolute;
            width: 47px;
            height: 72px;
            background:url("game_images/d_j_1.gif") no-repeat;
            top: 3px;
            left: 240px;
            overflow: visible;
        }
        .bullets{
            position: absolute;
            width: 9px;
            height: 37px;
            background:url("game_images/my_ari_1.gif") no-repeat;
        }
    </style>
</head>
<body>
<div id="bg">
    <div id="myPlane"></div>
    <!--<div class="enemyPlane"></div>-->

</div>
<button onclick="bgStopMove()">停止</button>
<!--<button οnclick="bgStartMove()">启动</button>-->

</body>
<script type="text/javascript" src="EnemyPlane.js"></script>
<script type="text/javascript" src="bullets.js"></script>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script>
    bgStartMove();
    //敌机控制
    var enemy_controller;
    //背景图的相关设置：
    var bg_coordinate = -100;
    var bg_move_controller;
    //用户飞机的相关设置
    var move_speed = 11;
    var myPlane_style_left = initialDOMPosition("myPlane","left");
    var myPlane_style_top = initialDOMPosition("myPlane","top");

    function bgMove() {
        if (bg_coordinate > -1) {
            bg_coordinate = -9399;
        }
        bg_coordinate += 1;
        document.getElementById("bg").setAttribute("style", "background: red url('game_images/bg.png') no-repeat 0 " + bg_coordinate + "px;")
    }
    function bgStartMove() {
        bg_move_controller = setInterval(bgMove, 30);
    }
    function bgStopMove() {
        clearInterval(bg_move_controller);
    }
    function initialDOMPosition(DOMId,leftOrTop) {
        var myDiv = document.getElementById(DOMId);
        //获取指定DOM的style:
        var myPlaneStyle = document.defaultView.getComputedStyle(myDiv, null);
        var Position;
        if (leftOrTop == "left") {
            Position = myPlaneStyle.left;
        }
        else if (leftOrTop == "top") {
            Position = myPlaneStyle.top;
        }
        Position = Position.substring(0, Position.length - 2);
        Position = parseInt(Position);//将字符串转化为整型；
        return Position;
    }
    function shoot(){
        var planeLeft = initialDOMPosition("myPlane","left");
        var planeTop = initialDOMPosition("myPlane","top");
        var myBullet = new bullets(planeLeft,planeTop);
    }

    document.onkeydown = function () {
        var key = event.keyCode;
        switch (key) {
            case 32://发子弹
                shoot();
                break;
            case 38://上
                myPlaneMoveTop();
                break;
            case 40://下
                myPlaneMoveDown();
                break;
            case 37://左
                myPlaneMoveLeft();
                break;
            case 39://右
                myPlayMoveRight();
                break;
        }
        //方向键：上：38；下：40；左：37；右：39；
        //空格：32

    };
    function myPlaneMoveDown(){
        if(myPlane_style_top < 540){
            myPlane_style_top += move_speed;
            document.getElementById("myPlane").setAttribute("style","top:"+myPlane_style_top+"px;left:"+myPlane_style_left+"px;");
        }
    }
    function myPlaneMoveTop(){
        if(myPlane_style_top > 3){
            myPlane_style_top -= move_speed;
            document.getElementById("myPlane").setAttribute("style","top:"+myPlane_style_top+"px;left:"+myPlane_style_left+"px;");
        }
    }
    function myPlaneMoveLeft() {
        //向左移动不能超过bg的边界；
        if (myPlane_style_left > 1) {
            myPlane_style_left -= move_speed;
            document.getElementById("myPlane").setAttribute("style", "left:" + myPlane_style_left + "px;top:"+myPlane_style_top+"px;");
        }
    }
    function myPlayMoveRight() {
        //向左移动不能超过bg的边界；
        //相对于图片左边的坐标，所以坐标是：530 - 60；
        if (myPlane_style_left < 470) {
            myPlane_style_left += move_speed;
            document.getElementById("myPlane").setAttribute("style", "left:" + myPlane_style_left + "px;top:"+myPlane_style_top+"px;");
        }
    }

    //敌机的自动调用
    enemy_controller = setInterval(springEnemy,3000);
    function springEnemy(){
        var count = parseInt((Math.random() * 10)/2);
        for (var i=0;i<count;i++){
            var enemy = new EnemyPlane();
        }
    }
</script>
</html>

index控制HTML：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body><style type="text/css">
    #bg{
        background-color: blueviolet;width: 500px; height: 500px;border: red 1px solid;

    }
    #m{border:rebeccapurple 1px solid;background-color: red;width: 50px; height: 50px;}
</style>
<div id="bg">
    <div id="m"></div>
</div>
<div id="send"></div>
<input type="button" value="开始"  onclick="startinterval()">
<input type="button" value="结束"  onclick="closeinterval()">

<script type="text/javascript">
//    document.onkeydown =function (){
//        var ke=event.keyCode;
//        alert(ke);
//    }
var  i=0;
var top_1=0;
var endsetinterval;
    function getid()
{
//    i+=1document.getElementById("send"
top_1+=5;


        document.getElementById("m").setAttribute("style","margin-top:"+top_1+"px;");
    }
//    setTimeout(getid,1000);

function  startinterval(){

    endsetinterval=setInterval(getid,1000);

};
    function  closeinterval(){
        clearInterval(endsetinterval);
    }
</script>
</body>
</html>

2.敌机的飞机 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;
    }

3.子弹实现 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+html实现简单的飞机大战

相关推荐