飞机大战小游戏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
        
        canvas {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <canvas id="canvas" height="700px" width="400">
    </canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var game = canvas.getContext("2d");

        //定义游戏状态
        // 第一阶段:游戏欢迎状态   0
        // 第二阶段:游戏加载状态   1	
        // 第三阶段:游戏运行状态   2	
        // 第四阶段:游戏暂停阶段   3
        // 第五阶段:游戏结束阶段   4
        const START = 0,
            LOADING = 1,
            RUNNING = 2,
            PASUE = 3,
            GAMEOVER = 4;
        var score = 0; //游戏得分
        var life = 10; //我的生命值
        var start_up = START; //游戏开关
        //加载游戏背景
        var w = 400,
            h = 700;
        //第一阶段开始:游戏欢迎阶段
        var Img = new Image();
        Img.src = "../images/06.png";
        //定义游戏背景
        var obj = {
                height: 771,
                width: 400,
                imgs: Img,
            }
            //定义背景对象的构造器
        function Bg(ppt) {
            this.imgs = ppt.imgs;
            this.width = ppt.width;
            this.height = ppt.height
            this.x1 = 0;
            this.x2 = 0;
            this.y1 = 0;
            this.y2 = -this.height
            this.draw = function() {
                game.drawImage(ppt.imgs, this.x1, this.y1);
                game.drawImage(ppt.imgs, this.x2, this.y2);
            }
            this.sport = function() {
                this.y1++;
                this.y2++;
                if (this.y1 == this.height) {
                    this.y1 = -(this.height)
                }
                if (this.y2 == this.height) {
                    this.y2 = -this.height;
                }
            }
        }
        var _bg = new Bg(obj);
        var logo = new Image();
        logo.src = "../images/07.png"

        // 第二阶段开始
        var lodings = [];
        lodings[0] = new Image();
        lodings[0].src = "../images/12.png";
        lodings[1] = new Image();
        lodings[1].src = "../images/13.png";
        lodings[2] = new Image();
        lodings[2].src = "../images/14.png";
        lodings[3] = new Image();
        lodings[3].src = "../images/15.png";

        var enter = {
            imgs: lodings,
            width: 196,
            height: 176,
            length: lodings.length
        }

        function ENTER(ppd) {
            this.startIndex = 0;
            this.paint = function() {
                    game.drawImage(ppd.imgs[this.startIndex], (w - ppd.width) / 2, (h - ppd.height) / 2);
                }
                //定义速度
            this.time = 0;
            //定义动画
            this.step = function() {
                this.time++
                    if (this.time % 25 == 0) {
                        this.startIndex++;
                    }
                if (this.startIndex == ppd.length) {
                    start_up = RUNNING;
                }
            }
            
        }
        var loding = new ENTER(enter);
        // 第三阶段游戏运行阶段       


        //我方飞机数据
        var plane = [];
        plane[0] = new Image();
        plane[0].src = "../images/2.png";
        plane[1] = new Image();
        plane[1].src = "../images/boom1.png";
        plane[2] = new Image();
        plane[2].src = "../images/boom2.png";
        plane[3] = new Image();
        plane[3].src = "../images/boom3.png";
        plane[4] = new Image();
        plane[4].src = "../images/boom4.png";

        var PLANE = {
            imgs: plane,
            length: plane.length,
            width: 84,
            height: 104,
            frame: 2
        }

        function PLANES(pdd) {
            this.width = pdd.width;
            this.length = pdd.length;
            this.height = pdd.height;
            this.x = (w - pdd.width) / 2 //              定义我方飞机的位置
            this.y = h - pdd.height;
            this.frame = pdd.frame;
            this.imgs = pdd.imgs;
            this.down = false; //用来判断飞机是否被撞击
            this.candel = false; // 定义飞机是否爆破完成,表示飞机还没有完全爆炸
            this.startIndex = 0;
            this.paint = function() {
                game.drawImage(this.imgs[this.startIndex], this.x, this.y);
            }
            this.step = function() {
                    //                  我方飞机的运动状态:(所以在此处要判断状态)
                    //                  1.正常状态
                    //                  2.爆破状态
                    if (!this.down) {
                        this.startIndex = 0;
                    } else { //被撞击了
                        this.startIndex++;
                        this.LIFE = 0;
                        if (this.startIndex == this.length) {
                            this.LIET++;
                            if (this.LIFE % 6 == 0) {
                                //生命减少了
                                life--;
                                if (life == 0) {
                                    start_up = GAMEOVER;
                                    //虽然游戏结束了但是还停留在最后一张图的状态
                                    this.startIndex = this.length - 1;
                                } else {
                                    PLANES1 = new PLANES(PLANE);
                                }
                            }
                        }
                    }
                }
                // 定义我方飞机碰撞的方法
            this.bang = function() {
                    this.down = true;
                }
                // 增加我方飞机射击的方法
                //定义射击速度初始值为0
            this.time = 0;
            this.shoot = function() {
                this.time++;
                if (this.time % 7 == 0) {
                    bullets.push(new BULLETS(BULLET));
                }
            }
        }
        //3.1.4创建我方飞机的对象实例
        var PLANES1 = new PLANES(PLANE);
        //飞机移动事件
        canvas.onmousemove = function(event) {
            if (start_up == RUNNING) {
                var x = event.offsetX;
                var y = event.offsetY;
                PLANES1.x = x - PLANES1.width / 2;
                PLANES1.y = y - PLANES1.height / 2;

            }
        }

        //制作子弹
        var bullet = new Image();
        bullet.src = "../images/011.png";
        var BULLET = {
                imgs: bullet,
                width: 127,
                height: 127
            }
            //创建子弹的构造器
        function BULLETS(pdd) {
            this.imgs = pdd.imgs;
            this.width = pdd.width;
            this.height = pdd.height;
            //子弹绘制的坐标
            this.x = PLANES1.x + PLANES1.width * 0.5 - this.width * 0.5;
            this.y = PLANES1.y * 1.1 - this.height * 1.1;
            this.paint = function() {
                game.drawImage(this.imgs, this.x, this.y);
                game.drawImage(this.imgs, this.x + 40, this.y + 20);
                game.drawImage(this.imgs, this.x - 40, this.y + 20);
            }
            this.step = function() {
                    this.y -= 10;
                }
                // 定义子弹碰撞属性    ,false表示没有碰撞  
            this.candel = false;
            this.bang = function() {
                this.candel = true;
            }
        }
        //创建存储子弹的数组
        var bullets = [];

        // 3.2.5 创建函数,用于绘制所有子弹
        function bulletpaint() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].paint();
            }
        }
        // 3.2.6 创建函数,用于控制所有子弹运动
        function bulletsStep() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].step();
            }
        }
        // 3.2.7 当子弹移动到画布之外时,删除该子弹
        function bulletsDel() {
            for (var i = 0; i < bullets.length; i++) {
                if (bullets[i].y < -bullets[i].height) {
                    bullets.splice(i, 1);
                }
            }
        }


        //制作敌方飞机,(三种)
        var enemy1 = [];
        enemy1[0] = new Image();
        enemy1[0].src = "../images/enemy1.png";
        enemy1[1] = new Image();
        enemy1[1].src = "../images/enemy1_down1.png";
        enemy1[2] = new Image();
        enemy1[2].src = "../images/enemy1_down2.png";
        enemy1[3] = new Image();
        enemy1[3].src = "../images/enemy1_down3.png";
        enemy1[4] = new Image();
        enemy1[4].src = "../images/enemy1_down4.png";

        var enemy1s = {
                imgs: enemy1,
                width: 57,
                height: 51,
                length: enemy1.length,
                type: 1,
                frame: 1,
                life: 50,
                score: 1
            }
            //第二种飞机
        var enemy2 = [];
        enemy2[0] = new Image();
        enemy2[0].src = "../images/enemy2.png";
        enemy2[1] = new Image();
        enemy2[1].src = "../images/enemy2_down1.png";
        enemy2[2] = new Image();
        enemy2[2].src = "../images/enemy2_down2.png";
        enemy2[3] = new Image();
        enemy2[3].src = "../images/enemy2_down3.png";
        enemy2[4] = new Image();
        enemy2[4].src = "../images/enemy2_down4.png";

        var enemy2s = {
            imgs: enemy2,
            width: 69,
            height: 95,
            length: enemy2.length,
            type: 2,
            frame: 1,
            life: 200,
            score: 5
        }

        //第三种飞机
        var enemy3 = [];
        enemy3[0] = new Image();
        enemy3[0].src = "../images/enemy3_hit.png";
        enemy3[1] = new Image();
        enemy3[1].src = "../images/enemy3_n1.png";
        enemy3[2] = new Image();
        enemy3[2].src = "../images/enemy3_n2.png";
        enemy3[3] = new Image();
        enemy3[3].src = "../images/enemy3_down1.png";
        enemy3[4] = new Image();
        enemy3[4].src = "../images/enemy3_down2.png";
        enemy3[5] = new Image();
        enemy3[5].src = "../images/enemy3_down3.png";
        enemy3[6] = new Image();
        enemy3[6].src = "../images/enemy3_down4.png";
        var enemy3s = {
                imgs: enemy3,
                width: 169,
                height: 260,
                length: enemy3.length,
                type: 3,
                frame: 2,
                life: 300,
                score: 20
            }
            //敌方飞机的构造函数
        function Enemy(config) {
            this.imgs = config.imgs;
            this.length = config.length;
            this.width = config.width;
            this.height = config.height;
            this.type = config.type;
            this.frame = config.frame;
            this.life = config.life;
            this.score = config.score;
            //              定义敌方飞机的坐标
            this.x = Math.random() * (w - this.width);
            this.y = -this.height;
            // 定义数组角标
            this.startIndex = 0;
            // 新增属性 - 表示当前绘制的图片
            //this.img = this.imgs[this.startIndex];
            // 新增状态 - 表示敌机是否被撞击
            this.down = false;
            // 新增状态 - 表示敌机是否被删除
            this.candel = false;
            this.paint = function() {
                game.drawImage(this.imgs[this.startIndex], this.x, this.y);
            }

            this.step = function() {
                    if (!this.down) {
                        /*
                         * 小、中飞机(1) - 角标为0
                         * 大飞机(2) - 角标在0和1之间切换
                         */

                        this.startIndex++;
                        this.startIndex = this.startIndex % this.frame;
                        this.y += 2;

                    } else {
                        // 爆破
                        /*
                         * 小和中飞机 - 1
                         * 大飞机 - 2
                         */
                        // 问题 - 刚进入爆破,只能执行一次                 
                        this.startIndex++;
                        if (this.startIndex == this.length) {
                            this.candel = true;
                            this.startIndex = this.length - 1;
                        }
                    }
                }
                //是否被碰撞的方法
            this.checkHit = function(wo) { //判断四个边
                    return wo.y + wo.height > this.y &&
                        wo.x + wo.width > this.x &&
                        wo.y < this.y + this.height &&
                        wo.x < this.x + this.width;
                }
                //敌方飞机碰撞以后的方法
            this.bang = function() {
                this.LIET = 0;
                this.LIET++;
                if (this.LIET % 1 == 0) {
                    console.log(123);
                    this.life--;
                    if (this.life == 0) {
                        this.down = true;
                        score += this.score;
                    }
                }
            }
        }

        //          3.3.4创建数组存放敌方飞机
        var enemise = [];
        //          3.3.5创建函数,往数组中添加数据
        function enterEnemise() {
            var rand = Math.floor(Math.random() * 100)
            if (rand < 10) {
                enemise.push(new Enemy(enemy1s));

            } else if (rand < 55 && rand > 50) {
                enemise.push(new Enemy(enemy2s));
            } else if (rand == 88) {
                //添加大飞机
                //大飞机尤其只有一个
                //并且把大飞机放在数组的第一位
                if (enemise[0].type != 3 && enemise.length > 0) {
                    enemise.splice(0, 0, new Enemy(enemy3s));
                }
            }
        }

        //函数绘制敌方飞机(因为敌方飞机在数组中,所以要循环遍历画出)
        function enemyPaint() {
            for (var i = 0; i < enemise.length; i++) {
                enemise[i].paint();
            }
        }
        //          3.3.7创建函数敌方飞机的运动    
        function enemyStep() {
            for (var i = 0; i < enemise.length; i++) {
                enemise[i].step();
            }
        }
        //          3.3.8创建函数删除敌方飞机
        function delenemy() {
            for (var i = 0; i < enemise.length; i++) {
                //                  console.log(enemise[i].candel)
                if (enemise[i].y > h || enemise[i].candel) {
                    enemise.splice(i, 1)
                        //                      arrayObject.splice(index,howmany,item1,.....,itemX)参数 描述 
                        //                      index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 
                        //                      howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 
                        //                      item1, ..., itemX 可选。向数组添加的新项目。 
                }
            }
        }

        //          3.3.9绘制碰撞以后的函数
        //          (在上面3.3.3敌方飞机的对象中定义了一个检测{我方飞机wo}是否碰撞的方法)
        //          (那个wo作为形参)(那么下面的hero作为我方飞机的实参传进去)(子弹的数组中的元素对象{bullets[j]}作为实参传进去)

        function hitEnemise() {
            for (var i = 0; i < enemise.length; i++) {
                //                  如果我方飞机撞到了敌方飞机以后
                if (enemise[i].checkHit(PLANES1)) {
                    //                      处理敌方飞机碰撞以后的逻辑
                    enemise[i].bang();
                    //                      处理我方飞机碰撞以后的逻辑
                    PLANES1.bang()
                }

                //                  子弹如果碰到敌方飞机以后
                for (var j = 0; j < bullets.length; j++) {
                    if (enemise[i].checkHit(bullets[j])) {
                        enemise[i].bang();
                        //                          子弹的碰撞逻辑
                        bullets[j].bang();
                    }
                }
            }
        }

        //          3.4绘制分数和生命值
        function scoreText() {
            game.font = "bold 24px 微软雅黑"
            game.fillText("score:" + score, 10, 30)
            game.fillText("life:" + life, 300, 30)
                // game.fillText("fill",red);
            var ziti = game.createLinearGradient(150, 0, 0, 150)
                //			2.设置渐变颜色及偏移度
            ziti.addColorStop(0, "blue");
            ziti.addColorStop(0.5, "pink");
            ziti.addColorStop(1, "red");
            game.fillStyle = ziti;

        }

        //游戏第四阶段游戏暂停
        canvas.onmouseout = function(event) {
            if (start_up == RUNNING) {
                start_up = PASUE;
                //创建暂停
            }
        }
        canvas.onmouseover = function(event) {
            if (start_up == PASUE) {
                start_up = RUNNING;
            }
        }
        var pauseimg = new Image();
        pauseimg.src = "../images/16.png";
        var suspend = {
                imgs: pauseimg,
                width: 187,
                height: 107
            }
            //绘制GAMEOVER文本
        function paintGO() {
            game.font = "bold 48px 微软雅黑";
            game.fillText("GAME OVER", (h / 2 * 0.15), (w / 2 * 1.6));
            var ziti = game.createLinearGradient(150, 0, 0, 150)
                //			2.设置渐变颜色及偏移度
            ziti.addColorStop(0, "blue");
            ziti.addColorStop(0.5, "pink");
            ziti.addColorStop(1, "red");
            game.fillStyle = ziti;
        }

        //创建暂停构造器
        function SUSPEND(pdd) {
            this.width = pdd.width;
            this.height = pdd.height;
            this.imgs = pdd.imgs;
            this.paint = function() {
                game.drawImage(pdd.imgs, (w - pdd.width * 1.5), (h - pdd.height) / 2);
            }

        }
        var SUSPEND = new SUSPEND(suspend);
        //游戏重新启动
        var imgS = new Image();
        imgS.src = "../images/17.png";
        imgS.onclick = function() {
                console.log(999)
           }
        canvas.addEventListener("click",function(e=e||window.e){
            	  console.log(e.offsetX,e.offsetY);
            	   if(start_up === START){
            	   	     if(e.offsetX>137 && e.offsetX <261 && e.offsetY >304 && e.offsetY<334){
            	   	     	      start_up = LOADING;
            	   	     }
            	   }
            	   if(start_up === GAMEOVER){
            	   	  	 if(e.offsetX>137 && e.offsetX <205 && e.offsetY >356 && e.offsetY<438){
            	   	     	     	start_up = LOADING;
//          	   	     	     	window.go(0);
									 score = 0; //游戏得分
        							 life = 10;
            	   	     }
            	   }       	      
            })
            //定义游戏核心控制器
        setInterval(function() {
            _bg.draw();
            _bg.sport();
            
            if (start_up == START) {
                game.drawImage(logo, 125, 300)
            } else if (start_up == LOADING) {
            	
                loding.paint();
                loding.step();
            } else if (start_up == RUNNING) {
                PLANES1.paint();
                PLANES1.step();
                PLANES1.shoot();
                bulletpaint();
                bulletsStep();
                bulletsDel();
                //创建敌方飞机
                enterEnemise()
                    //绘制敌方飞机
                enemyPaint();
                //绘制敌方飞机的运动
                enemyStep();
                //删除敌方飞机
                delenemy();
                //判断是否撞击
                hitEnemise();
                //绘制分数和生命值
                scoreText()
            } else if (start_up == PASUE) {
                PLANES1.paint();
                bulletpaint();
                enemyPaint();
                PLANES1.shoot();
                SUSPEND.paint();
            } else if (start_up == GAMEOVER) {
                PLANES1.paint();
                bulletpaint();
                enemyPaint();
                paintGO();
                scoreText();
                game.drawImage(imgS, 125, 350);                             
            	loding.startIndex = 0;
            }
        }, 20)
    </script>
</body>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值