最近微信的飛機大戰非常流行，下載量非常高。

利用JS進行模擬制作了一個簡單的飛機大戰[此源碼有很多地方可以進行重構和優化]

[此游戲中沒有使用HTML5 任何瀏覽器都可以運行]。

效果圖：

原理：利用javascript setInterval函數不停的進行元素位置的切換和添加飛機子彈，在飛機和子彈的運動中進行位置

檢測，進行子彈和飛機的消失。

1、添加飛機

setInterval(function () {
            var flyDiv = $('<div class="flyDiv"></div>');
            flyDiv.css({left: Math.random() * 578, top: -22});
            flyDiv.appendTo(main);
        }, 3000);

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

2、添加子彈

    setInterval(function () {
            var flyZ = $('<span class="z"></span>');
            var l = m.offset().left + 23, t = m.offset().top;
            flyZ.css({left: l, top: t});
            flyZ.appendTo(main);
        }, 600);

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

3、飛機的運動

setInterval(function () {
            var allDiv = main.find('div'), allZ = main.find('span');
            for (var i = 0; i < allDiv.length; i++) {
                var f = $(allDiv[i]);
                var nowTop = f.offset().top;
                nowTop += 10;
                f.css({top: nowTop});
                for (var j = 0; j < allZ.length; j++) {
                    var z = $(allZ[j]);
                    if (testColl(
                            z.offset().left, z.offset().top, z.width(), z.height(),
                            f.offset().left, f.offset().top, f.width(), f.height()
                    )) {
                        z.remove();
                        f.remove();
                        sum.text(parseInt(sum.text()) + 1);
                    }
                }
                if (nowTop + 22 >= 400) {
                    f.remove();
                }
            }
        }, 60);

4、子彈的運動

    setInterval(function () {
            var allZ = main.find('span'),
                    allDiv = main.find('div');
            for (var i = 0; i < allZ.length; i++) {
                var z = $(allZ[i]);
                var nowTop = z.offset().top;
                nowTop -= 10;
                z.css({top: nowTop});

                for (var j = 0; j < allDiv.length; j++) {
                    var f = $(allDiv[j]);
                    if (testColl(
                            z.offset().left, z.offset().top, z.width(), z.height(),
                            f.offset().left, f.offset().top, f.width(), f.height()
                    )) {
                        z.remove();
                        f.remove();
                        sum.text(parseInt(sum.text()) + 1);
                    }
                }
                if (nowTop + 22 <= 0) {
                    z.remove();
                }
            }

        }, 60);

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

5、碰撞檢測

function testColl(x1, y1, w1, h1, x2, y2, w2, h2) {
            var l1 = x1;
            var r1 = x1 + w1;
            var t1 = y1;
            var b1 = y1 + h1;

            var l2 = x2;
            var r2 = x2 + w2;
            var t2 = y2;
            var b2 = y2 + h2;

            if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
                return false;
            }
            else {
                return true;
            }
        }

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

【完整源碼】

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

    <title> new document </title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #main {

             600px;

            height: 400px;

            border: solid 1px #000;

            background: #cccccc;

        }

        .flyDiv {

             20px;

            height: 20px;

            background: red;

            position: absolute;

        }

        .z {

            display: block;

             4px;

            background: #000000;

            height: 10px;

            position: absolute;

            top: 390px;

        }

        .m {

             50px;

            height: 50px;

            background: #000000;

            position: absolute;

            top: 345px;

            left: 275px;

        }

    </style>

</head>

<body>

<!-- html :begin -->

<div id="main"></div>

<div class="m" id="m"></div>

<div>

    打擊飛機數：<label id="sum">0</label>

</div>

<!-- html :end -->

</body>

<script src="js/jquery-1.10.2.min.js"></script>

<script>

    $(document).ready(function () {

        var main = $('#main'),

                m = $('#m'),

                sum = $('#sum');

        $(document).on('keydown', function (ev) {

            var oEvent = ev || window.event;

            var l = m.offset().left,

                    t = m.offset().top;

            switch (oEvent.keyCode) {

                case 37:

                    if (l >= 0) {

                        l -= 12;

                    }

                    break;

                /*    case 38:

                 if (t >= 0) {

                 t -= 2;

                 }

                 break;*/

                case 39:

                    if (!(l + 50 > 600)) {

                        l += 12;

                    }

                    break;

                case 40:

                    if (!(t + 50 > 400)) {

                        t += 12;

                    }

                    break;

            }

            m.css({left: l, top: t});

        });

        setInterval(function () {

            var flyDiv = $('<div class="flyDiv"></div>');

            flyDiv.css({left: Math.random() * 578, top: -22});

            flyDiv.appendTo(main);

        }, 3000);

        setInterval(function () {

            var allDiv = main.find('div'), allZ = main.find('span');

            for (var i = 0; i < allDiv.length; i++) {

                var f = $(allDiv[i]);

                var nowTop = f.offset().top;

                nowTop += 10;

                f.css({top: nowTop});

                for (var j = 0; j < allZ.length; j++) {

                    var z = $(allZ[j]);

                    if (testColl(

                            z.offset().left, z.offset().top, z.width(), z.height(),

                            f.offset().left, f.offset().top, f.width(), f.height()

                    )) {

                        z.remove();

                        f.remove();

                        sum.text(parseInt(sum.text()) + 1);

                    }

                }

                if (nowTop + 22 >= 400) {

                    f.remove();

                }

            }

        }, 60);

        setInterval(function () {

            var flyZ = $('<span class="z"></span>');

            var l = m.offset().left + 23, t = m.offset().top;

            flyZ.css({left: l, top: t});

            flyZ.appendTo(main);

        }, 600);

        setInterval(function () {

            var allZ = main.find('span'),

                    allDiv = main.find('div');

            for (var i = 0; i < allZ.length; i++) {

                var z = $(allZ[i]);

                var nowTop = z.offset().top;

                nowTop -= 10;

                z.css({top: nowTop});

                for (var j = 0; j < allDiv.length; j++) {

                    var f = $(allDiv[j]);

                    if (testColl(

                            z.offset().left, z.offset().top, z.width(), z.height(),

                            f.offset().left, f.offset().top, f.width(), f.height()

                    )) {

                        z.remove();

                        f.remove();

                        sum.text(parseInt(sum.text()) + 1);

                    }

                }

                if (nowTop + 22 <= 0) {

                    z.remove();

                }

            }

        }, 60);

        function testColl(x1, y1, w1, h1, x2, y2, w2, h2) {

            var l1 = x1;

            var r1 = x1 + w1;

            var t1 = y1;

            var b1 = y1 + h1;

            var l2 = x2;

            var r2 = x2 + w2;

            var t2 = y2;

            var b2 = y2 + h2;

            if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {

                return false;

            }

            else {

                return true;

            }

        }

    });

</script>

</html>

總結

以上是生活随笔為你收集整理的用Javascript模拟微信飞机大战游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。