飞机大战（JavaScript代码）

最新推荐文章于 2021-08-28 12:08:04 发布
最新推荐文章于 2021-08-28 12:08:04 发布
阅读量6.2k 收藏 15
点赞数 2
分类专栏： 小游戏=============
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanghui07216/article/details/51620189
版权

小游戏测试：http://handsomecui.top/feiji.html

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="content" content="text/html" charset="GB2312" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #contentdiv {
            position: absolute;
            left: 500px;
        }

        #startdiv {
            width: 320px;
            height: 568px;
            background-image: url(开始背景.png);
        }

        button {
            outline: none;
        }

        #startdiv button {
            position: absolute;
            top: 500px;
            left: 82px;
            width: 150px;
            height: 30px;
            border: 1px solid black;
            border-radius: 30px;
            background-color: #c4c9ca;
        }

        #maindiv {
            width: 320px;
            height: 568px;
            background-image: url(background_1.png);
            display: none;
        }

            #maindiv img {
                position: absolute;
                z-index: 1;
            }

        #scorediv {
            font-size: 16px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            left: 10px;
            display: none;
        }

        #scorediv {
            font-size: 18px;
            font-weight: bold;
        }

        #suspenddiv {
            position: absolute;
            top: 210px;
            left: 82px;
            display: none;
            z-index: 2;
        }

            #suspenddiv button {
                width: 150px;
                height: 30px;
                margin-bottom: 20px;
                border: 1px solid black;
                border-radius: 30px;
                background-color: #c4c9ca;
            }

        #enddiv {
            position: absolute;
            top: 210px;
            left: 75px;
            border: 1px solid gray;
            border-radius: 5px;
            text-align: center;
            background-color: #d7ddde;
            display: none;
            z-index: 2;
        }

        .plantext {
            width: 160px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            font-weight: bold;
        }

        #planscore {
            width: 160px;
            height: 80px;
            line-height: 80px;
            border-top: 1px solid gray;
            border-bottom: 1px solid gray;
            font-size: 16px;
            font-weight: bold;
        }

        #enddiv div {
            width: 160px;
            height: 50px;
        }

            #enddiv div button {
                margin-top: 10px;
                width: 90px;
                height: 30px;
                border: 1px solid gray;
                border-radius: 30px;
            }
    </style>
</head>

<body>
    <div id="contentdiv">
        <div id="startdiv">
            <button οnclick="begin()">开始游戏</button>
        </div>
        <div id="maindiv">
            <div id="scorediv">
                <label>分数：</label>
                <label id="label">0</label>
            </div>
            <div id="suspenddiv">
                <button>继续</button><br />
                <button>重新开始</button><br />
                <button>回到主页</button>
            </div>
            <div id="enddiv">
                <p class="plantext">飞机大战分数</p>
                <p id="planscore">0</p>
                <div><button οnclick="jixu()">继续</button></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //获得主界面
        var mainDiv = document.getElementById("maindiv");
        //获得开始界面
        var startdiv = document.getElementById("startdiv");
        //获得游戏中分数显示界面
        var scorediv = document.getElementById("scorediv");
        //获得分数界面
        var scorelabel = document.getElementById("label");
        //获得暂停界面
        var suspenddiv = document.getElementById("suspenddiv");
        //获得游戏结束界面
        var enddiv = document.getElementById("enddiv");
        //获得游戏结束后分数统计界面
        var planscore = document.getElementById("planscore");
        //初始化分数
        var scores = 0;

        /*
        创建飞机类
        */
        function plan(hp, X, Y, sizeX, sizeY, score, dietime, sudu, boomimage, imagesrc) {
            this.planX = X;
            this.planY = Y;
            this.imagenode = null;
            this.planhp = hp;
            this.planscore = score;
            this.plansizeX = sizeX;
            this.plansizeY = sizeY;
            this.planboomimage = boomimage;
            this.planisdie = false;
            this.plandietimes = 0;
            this.plandietime = dietime;
            this.plansudu = sudu;
            //行为
            /*
            移动行为
            */
            this.planmove = function () {
                if (scores <= 50000) {
                    this.imagenode.style.top = this.imagenode.offsetTop + this.plansudu + "px";
                }
                else if (scores > 50000 && scores <= 100000) {
                    this.imagenode.style.top = this.imagenode.offsetTop + this.plansudu + 1 + "px";
                }
                else if (scores > 100000 && scores <= 150000) {
                    this.imagenode.style.top = this.imagenode.offsetTop + this.plansudu + 2 + "px";
                }
                else if (scores > 150000 && scores <= 200000) {
                    this.imagenode.style.top = this.imagenode.offsetTop + this.plansudu + 3 + "px";
                }
                else if (scores > 200000 && scores <= 300000) {
                    this.imagenode.style.top = this.imagenode.offsetTop + this.plansudu + 4 + "px";
                }
                else {
                    this.imagenode.style.top = this.imagenode.offsetTop + this.plansudu + 5 + "px";
                }
            }
            this.init = function () {
                this.imagenode = document.createElement("img");
                this.imagenode.style.left = this.planX + "px";
                this.imagenode.style.top = this.planY + "px";
                this.imagenode.src = imagesrc;
                mainDiv.appendChild(this.imagenode);
            }
            this.init();
        }

        /*
        创建子弹类
        */
        function bullet(X, Y, sizeX, sizeY, imagesrc) {
            this.bulletX = X;
            this.bulletY = Y;
            this.bulletimage = null;
            this.bulletattach = 1;
            this.bulletsizeX = sizeX;
            this.bulletsizeY = sizeY;
            //行为
            /*
            移动行为
            */
            this.bulletmove = function () {
                this.bulletimage.style.top = this.bulletimage.offsetTop - 20 + "px";
            }
            this.init = function () {
                this.bulletimage = document.createElement("img");
                this.bulletimage.style.left = this.bulletX + "px";
                this.bulletimage.style.top = this.bulletY + "px";
                this.bulletimage.src = imagesrc;
                mainDiv.appendChild(this.bulletimage);
            }
            this.init();
        }

        /*
        创建单行子弹类
        */
        function oddbullet(X, Y) {
            bullet.call(this, X, Y, 6, 14, "buttle1.png");
        }

        /*
        创建敌机类
        */
        function enemy(hp, a, b, sizeX, sizeY, score, dietime, sudu, boomimage, imagesrc) {
            plan.call(this, hp, random(a, b), -100, sizeX, sizeY, score, dietime, sudu, boomimage, imagesrc);
        }
        //产生min到max之间的随机数
        function random(min, max) {
            return Math.floor(min + Math.random() * (max - min));
        }

        /*
        创建本方飞机类
        */
        function ourplan(X, Y) {
            var imagesrc = "myplane.png";
            plan.call(this, 1, X, Y, 66, 80, 0, 660, 0, "本方飞机爆炸.gif", imagesrc);
            this.imagenode.setAttribute('id', 'ourplan');
        }

        /*
        创建本方飞机
        */
        var selfplan = new ourplan(120, 485);
        //移动事件
        var ourPlan = document.getElementById('ourplan');
        var yidong = function () {
            var oevent = window.event || arguments[0];
            var chufa = oevent.srcElement || oevent.target;
            var selfplanX = oevent.clientX - 500;
            var selfplanY = oevent.clientY;
            ourPlan.style.left = selfplanX - selfplan.plansizeX / 2 + "px";
            ourPlan.style.top = selfplanY - selfplan.plansizeY / 2 + "px";
            //    document.getElementsByTagName('img')[0].style.left=selfplanX-selfplan.plansizeX/2+"px";
            //    document.getElementsByTagName('img')[0]..style.top=selfplanY-selfplan.plansizeY/2+"px";
        }
        /*
        暂停事件
        */
        var number = 0;
        var zanting = function () {
            if (number == 0) {
                suspenddiv.style.display = "block";
                if (document.removeEventListener) {
                    mainDiv.removeEventListener("mousemove", yidong, true);
                    bodyobj.removeEventListener("mousemove", bianjie, true);
                }
                else if (document.detachEvent) {
                    mainDiv.detachEvent("onmousemove", yidong);
                    bodyobj.detachEvent("onmousemove", bianjie);
                }
                clearInterval(set);
                number = 1;
            }
            else {
                suspenddiv.style.display = "none";
                if (document.addEventListener) {
                    mainDiv.addEventListener("mousemove", yidong, true);
                    bodyobj.addEventListener("mousemove", bianjie, true);
                }
                else if (document.attachEvent) {
                    mainDiv.attachEvent("onmousemove", yidong);
                    bodyobj.attachEvent("onmousemove", bianjie);
                }
                set = setInterval(start, 20);
                number = 0;
            }
        }
        //判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件
        var bianjie = function () {
            var oevent = window.event || arguments[0];
            var bodyobjX = oevent.clientX;
            var bodyobjY = oevent.clientY;
            if (bodyobjX < 505 || bodyobjX > 815 || bodyobjY < 0 || bodyobjY > 568) {
                if (document.removeEventListener) {
                    mainDiv.removeEventListener("mousemove", yidong, true);
                }
                else if (document.detachEvent) {
                    mainDiv.detachEvent("onmousemove", yidong);
                }
            }
            else {
                if (document.addEventListener) {
                    mainDiv.addEventListener("mousemove", yidong, true);
                }
                else if (document.attachEvent) {
                    mainDiv.attachEvent("nomousemove", yidong);
                }
            }
        }
        //暂停界面重新开始事件
        //function chongxinkaishi(){
        //    location.reload(true);
        //    startdiv.style.display="none";
        //    maindiv.style.display="block";
        //}
        var bodyobj = document.getElementsByTagName("body")[0];
        if (document.addEventListener) {
            //为本方飞机添加移动和暂停
            mainDiv.addEventListener("mousemove", yidong, true);
            //为本方飞机添加暂停事件
            selfplan.imagenode.addEventListener("click", zanting, true);
            //为body添加判断本方飞机移出边界事件
            bodyobj.addEventListener("mousemove", bianjie, true);
            //为暂停界面的继续按钮添加暂停事件
            suspenddiv.getElementsByTagName("button")[0].addEventListener("click", zanting, true);
            //    suspenddiv.getElementsByTagName("button")[1].addEventListener("click",chongxinkaishi,true);
            //为暂停界面的返回主页按钮添加事件
            suspenddiv.getElementsByTagName("button")[2].addEventListener("click", jixu, true);
        }
        else if (document.attachEvent) {
            //为本方飞机添加移动
            mainDiv.attachEvent("onmousemove", yidong);
            //为本方飞机添加暂停事件
            selfplan.imagenode.attachEvent("onclick", zanting);
            //为body添加判断本方飞机移出边界事件
            bodyobj.attachEvent("onmousemove", bianjie);
            //为暂停界面的继续按钮添加暂停事件
            suspenddiv.getElementsByTagName("button")[0].attachEvent("onclick", zanting);
            //    suspenddiv.getElementsByTagName("button")[1].attachEvent("click",chongxinkaishi,true);
            //为暂停界面的返回主页按钮添加事件
            suspenddiv.getElementsByTagName("button")[2].attachEvent("click", jixu, true);
        }
        //初始化隐藏本方飞机
        selfplan.imagenode.style.display = "none";

        /*
        敌机对象数组
        */
        var enemys = [];

        /*
        子弹对象数组
        */
        var bullets = [];
        var mark = 0;
        var mark1 = 0;
        var backgroundPositionY = 0;
        /*
        开始函数
        */
        function start() {
            mainDiv.style.backgroundPositionY = backgroundPositionY + "px";
            backgroundPositionY += 0.5;
            if (backgroundPositionY == 568) {
                backgroundPositionY = 0;
            }
            mark++;
            /*
            创建敌方飞机
            */

            if (mark == 20) {
                mark1++;
                //中飞机
                if (mark1 % 5 == 0) {
                    enemys.push(new enemy(6, 25, 274, 46, 60, 5000, 360, random(1, 3), "中飞机爆炸.gif", "enemy3_fly_1.png"));
                }
                //大飞机
                if (mark1 == 20) {
                    enemys.push(new enemy(12, 57, 210, 110, 164, 30000, 540, 1, "大飞机爆炸.gif", "enemy2_fly_1.png"));
                    mark1 = 0;
                }
                    //小飞机
                else {
                    enemys.push(new enemy(1, 19, 286, 34, 24, 1000, 360, random(1, 4), "小飞机爆炸.gif", "enemy1_fly_1.png"));
                }
                mark = 0;
            }

            /*
            移动敌方飞机
            */
            var enemyslen = enemys.length;
            for (var i = 0; i < enemyslen; i++) {
                if (enemys[i].planisdie != true) {
                    enemys[i].planmove();
                }
                /*
                如果敌机超出边界,删除敌机
                */
                if (enemys[i].imagenode.offsetTop > 568) {
                    mainDiv.removeChild(enemys[i].imagenode);
                    enemys.splice(i, 1);
                    enemyslen--;
                }
                //当敌机死亡标记为true时，经过一段时间后清除敌机
                if (enemys[i].planisdie == true) {
                    enemys[i].plandietimes += 20;
                    if (enemys[i].plandietimes == enemys[i].plandietime) {
                        mainDiv.removeChild(enemys[i].imagenode);
                        enemys.splice(i, 1);
                        enemyslen--;
                    }
                }
            }

            /*
            创建子弹
            */
            if (mark % 5 == 0) {
                bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left) + 31, parseInt(selfplan.imagenode.style.top) - 10));
            }

            /*
            移动子弹
            */
            var bulletslen = bullets.length;
            for (var i = 0; i < bulletslen; i++) {
                bullets[i].bulletmove();
                /*
                如果子弹超出边界,删除子弹
                */
                if (bullets[i].bulletimage.offsetTop < 0) {
                    mainDiv.removeChild(bullets[i].bulletimage);
                    bullets.splice(i, 1);
                    bulletslen--;
                }
            }

            /*
            碰撞判断
            */
            for (var k = 0; k < bulletslen; k++) {
                for (var j = 0; j < enemyslen; j++) {
                    //判断碰撞本方飞机
                    if (enemys[j].planisdie == false) {
                        if (enemys[j].imagenode.offsetLeft + enemys[j].plansizeX >= selfplan.imagenode.offsetLeft && enemys[j].imagenode.offsetLeft <= selfplan.imagenode.offsetLeft + selfplan.plansizeX) {
                            if (enemys[j].imagenode.offsetTop + enemys[j].plansizeY >= selfplan.imagenode.offsetTop + 40 && enemys[j].imagenode.offsetTop <= selfplan.imagenode.offsetTop - 20 + selfplan.plansizeY) {
                                //碰撞本方飞机，游戏结束，统计分数
                                selfplan.imagenode.src = "本方飞机爆炸.gif";
                                enddiv.style.display = "block";
                                planscore.innerHTML = scores;
                                if (document.removeEventListener) {
                                    mainDiv.removeEventListener("mousemove", yidong, true);
                                    bodyobj.removeEventListener("mousemove", bianjie, true);
                                }
                                else if (document.detachEvent) {
                                    mainDiv.detachEvent("onmousemove", yidong);
                                    bodyobj.removeEventListener("mousemove", bianjie, true);
                                }
                                clearInterval(set);
                            }
                        }
                        //判断子弹与敌机碰撞
                        if ((bullets[k].bulletimage.offsetLeft + bullets[k].bulletsizeX > enemys[j].imagenode.offsetLeft) && (bullets[k].bulletimage.offsetLeft < enemys[j].imagenode.offsetLeft + enemys[j].plansizeX)) {
                            if (bullets[k].bulletimage.offsetTop <= enemys[j].imagenode.offsetTop + enemys[j].plansizeY && bullets[k].bulletimage.offsetTop + bullets[k].bulletsizeY >= enemys[j].imagenode.offsetTop) {
                                //敌机血量减子弹攻击力
                                enemys[j].planhp = enemys[j].planhp - bullets[k].bulletattach;
                                //敌机血量为0，敌机图片换为爆炸图片，死亡标记为true，计分
                                if (enemys[j].planhp == 0) {
                                    scores = scores + enemys[j].planscore;
                                    scorelabel.innerHTML = scores;
                                    enemys[j].imagenode.src = enemys[j].planboomimage;
                                    enemys[j].planisdie = true;
                                }
                                //删除子弹
                                mainDiv.removeChild(bullets[k].bulletimage);
                                bullets.splice(k, 1);
                                bulletslen--;
                                break;
                            }
                        }
                    }
                }
            }
        }
        /*
        开始游戏按钮点击事件
        */
        var set;
        function begin() {

            startdiv.style.display = "none";
            mainDiv.style.display = "block";
            selfplan.imagenode.style.display = "block";
            scorediv.style.display = "block";
            /*
            调用开始函数
            */
            set = setInterval(start, 20);
        }
        //游戏结束后点击继续按钮事件
        function jixu() {
            location.reload(true);
        }
    </script>
</body>
</html>

JavaScript实现飞机大战
编程界明世隐的博客
08-04 3万+
系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 引言： 之前我有用Java写过一个飞机大战，感觉挺受欢迎的，有的小伙伴想用Javasript写，我这次就按我的思路写了一个版本。 实现思路 分2张画布来实现，画布1仅仅用来绘制背景图，画布2用来绘制游戏相关的动态内容。 创建我方飞机 定时创建敌机 开启主线程，用来刷新画布2. 代码实现 编写页面 <!DOCTYPE html&
游戏‘微信打飞机’ 第一课
babyandinsectinsect的博客
10-16 285
#include #pragma comment( linker, "/subsystem:\"console\" /entry:\"mainCRTStartup\"" ) #pragma comment(lib, "YZKGame.lib")  void gameMain(void) { setGameTitle("微信打飞机"); setGameSize(338, 600);
微信飞机大战js
weixin_30252155的博客
08-17 213
体验一下：https://oleolema.github.io/Plane%20Wars/ Game类 (function () { var Game = window.Game = function () { //获取画布 this.canvas = document.getElementsByClassName('mycanvas')[0]...
js实现打飞机
02-21
js实现打飞机游戏，面向对象！
Cocos2d-JS实现的打飞机
何小成的成长记录
09-05 5438
一、前言今天我们来讲一个最最最常见的一个小游戏——打飞机！是的，打飞机！还记得小时候在玩儿的雷电，应该是打飞机最早的样子了吧。直到现在，也有微信打飞机，全民飞机大战，全民打飞机等游戏的出现，这些游戏基本都是在我们小时候玩儿的打飞机的原型上增加特效音效以及更多新的玩儿法，在这基础上进行的创新。其实作为开发者来说，仔细看这款游戏，也并不是什么高大上的游戏，其他很多元素、逻辑，都是我们常见的，比如滚动背景
飞机大战JavaScript代码
最新发布
04-07
很抱歉，我是一名语言模型AI，无法提供完整的JavaScript代码。但是，以下是一个简单的示例代码，可以让你开始编写飞机大战游戏： ``` // 创建画布 var canvas = document.createElement('canvas'); var ctx = ...
JS网页版飞机大战游戏代码
06-24
《JS网页版飞机大战游戏代码解析》 在网页游戏领域，JS（JavaScript）以其灵活性和强大的功能成为构建交互式体验的首选语言。本篇将详细探讨"JS网页版飞机大战游戏"这一主题，通过深入理解游戏代码，我们将揭示其...
飞机大战-HTML-JavaScript-代码
05-24
《飞机大战-HTML-JavaScript-代码》是一个适合前端学习者探索和借鉴的项目，它以HTML为基础，结合CSS样式和JavaScript实现了一款动态的、带有特效的网页游戏。在这个项目中，我们可以深入理解到前端开发的核心技术...
HTML5游戏全民飞机大战源代码
03-18
【HTML5游戏全民飞机大战源代码】是一款基于HTML5技术开发的轻量级游戏，它展示了HTML5在游戏开发中的应用潜力。HTML5是超文本标记语言的最新版本，提供了许多增强网页交互性和多媒体功能的新特性，使得无需Flash或...
原生js实现 打飞机游戏demo
08-06
简单的利用原生js实现打飞机游戏，代码易懂，没有复杂的逻辑，适用于初学js的新手练习
js小游戏实现简单打飞机
04-01
由于这只是基本实现，所以没有兼容性可言，火狐，马桶等流畅运行，IE就算了，没考虑过，供新手了解一下还是可以的，注释我感觉写的挺多的吧，每个实现都有注释。
JavaScript微信小游戏飞机大战
12-06
1.动画原理 我们平时看的动画片，为什么能动起来呢？其实是因为它们都是由一张张图片组成的，在短暂的时间播放多张图片就感觉画面是动的了。那我们如果想让飞机图片动起来，就需要不停地画飞机，并改变坐标，从而实现移动。 2.如何不停地画飞机 想让程序不停地画飞机，我们不可能说把一行代码打上个几百次吧！对，我们只需要学习定时器就可以不停地画飞机了。定时器代码如下
javascript实现微信飞机大战
01-18
使用javascript实现微信飞机大战的案例。。。。。。。
WEB案例大全(HTML+CSS H5+CS3 JS)(附带JS打飞机游戏)
05-23
内附: 1. HTML+CSS案例 26个(包含3个项目) 2. HTML5+CSSS3案例 10个 3.JavaScript案例 51个(包括打飞机游戏-原创) 说明: 如上案例供使用者参考，案例可能会存在一些BUG(因为一些是初学的时候写的)， 可以根据自己的情况来完善功能
用js实现的飞机大战的代码以及素材分享给大家
04-24
用js实现的飞机大战的代码以及素材分享给大家
js通过面向对象方法编写微信飞机大战
qq_42704540的博客
03-19 990
通过面向对象的思想进行编写，主要使用了继承的方法，在编程中要考虑创建的每一个对象都需要包含那些属性。 html页面，代码如下： <body> <div id="content"> <div id="start"> <input type="button" value="开始游戏" id="begin"> </div&gt...
js模仿微信打飞机游戏代码
m0_60942487的博客
08-28 306
效果： 部分代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/&.
微信飞机大战
Hello,I am Waleee
07-29 770
总共写了12个版本，每个版本实现一个功能，有详细分析图 最终效果： 源代码：http://download.csdn.net/detail/qq_24082497/9589373微信飞机大战游戏开发 1：课程需要的基础知识：HTML+CSS+JS—————-0.1版—————–1,游戏开始界面 2,开始按钮响应 3,进入游戏界面—————-0.2版—————–1，添加计分器 2，添加暂
js射击类游戏实现_【玩转IT】JS面向对象编程轻松实现打飞机游戏
weixin_30550287的博客
01-06 1431
1.游戏概述目前很多常见的小游戏都是通过纯前端技术开发完成的，比如大家经常玩的2048、别踩白块等等。前端常见的技术HTML5、CSS3、JAVASCRIPT、ES6、以及canvas、WebGL等等都能够做出非常好玩的小游戏。今天给大家分享一个前端小游戏“打飞机”，既简单又有趣，希望对你学习前端有所帮助。下图是游戏运行效果图，实际运行效果更好哦，如下：下面我们来详细的介绍一下这款有趣的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值