碼上快樂

相關內容    簡體    繁體

JS+html實現簡單的飛機大戰

本文轉載自   查看原文   2016-07-30 20:33   15351    javaScript

摘要：通過原生的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 onclick="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;
    }
}

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 js+html實現玫瑰花綻放 js+html實現簡易網頁計算器 js+html預覽PDF 原生js面向對象實現飛機大戰小游戲（有BOSS，含源碼） python實例：利用pygame實現小游戲“飛機大戰” python項目飛機大戰 pygame制作飛機大戰 C++飛機大戰 python飛機大戰代碼 python-pygame實現飛機大戰-添加背景以及飛機運動
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM