js炫酷飞机大战

自然醒L

已于 2023-10-24 20:38:31 修改

阅读量179

点赞数 6

文章标签： 1024程序员节前端

于 2023-10-24 20:33:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62981580/article/details/134020212

版权

素材

方法及思路

1、构造函数方式创建敌方飞机，定义移动函数（每次top值为上次top值加速度）
2、计时器固定时间调用构造函数，构造函数传入的值用随机数传入，构造的新敌方飞机加入敌方飞机数组
3、通过循环遍历所有敌方飞机，如果top值大于650，删除子节点，删除对应敌方飞机
4、背景图动画，用计数器改变背景图定位实现动画效果（判定如果位置等于840时，重新从0开始）

5、创建我方飞机，当鼠标移动时将坐标赋值给我方飞机（注意边界判定，飞机不要除动画外）

6、判定游戏结束，敌方飞机X坐标>=我方飞机X坐标&&敌方飞机X坐标<=我方飞机坐标+我方飞机宽度&&敌方飞机Y坐标>=我方飞机Y坐标&&敌方飞机Y坐标<=我方飞机Y坐标+我方飞机宽度（这4个条件必须都满足才碰撞）
7、构造函数创建子弹，并加入到子弹数组里，定义属性，定位应定位于我方飞机正前方，定义移动函数（每次top值为上次top值-速度值）
8、计时器创建子弹速度，移动时创建子弹,判定如果子弹top值小于-650，删除子弹节点及对应子弹数组
9、写碰撞函数子弹X坐标>=敌方飞机X坐标&&子弹X坐标<=敌方飞机X坐标+敌方飞机宽度&&子弹Y坐标>=敌方飞机Y坐标&&子弹Y坐标<=敌方飞机Y坐标+敌方飞机高度
10、碰撞函数如果生效，移除子弹和敌方飞机，并且分数加一
11、当点击结束界面初始化界面（刷新界面）

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <style>
            div{
                margin: 0 auto;
                width: 480px;
                height: 650px;
            }
            canvas{
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <div>
            <canvas id="myCanvas" width="480" height="650"></canvas>
        </div>
    </body>

定义各个部分状态

var START = 0;//第一阶段，欢迎阶段
            var STARTING = 1;//第二阶段，加载阶段
            var RUNNING = 2;//第三阶段，运行阶段
            var PAUSE = 3;//第三阶段，暂停阶段
            var GAMEOVER = 4;//第四阶段，游戏结束阶段
            // 0.2 定义一个标识，表示当前游戏处于哪个阶段
            var state = START;
            // 0.3 定义当前画布的宽高度
            var WIDTH = myCanvas.width;
            var HEIGHT = myCanvas.height;
            // 0.4 定义游戏得分
            var score = 0;
            // 0.5 定义我方飞机的生命值
            var life = 3;

定义背景部分

  //1.1.3 定义背景对象的构造函数  
            function Bg(config){
                this.imgs = config.imgs;
                this.width = config.width;
                this.height = config.height;
                // 定义绘制背景图片的坐标值
                this.x1 = 0,
                this.y1 = 0;
                this.x2 = 0;
                this.y2 = -this.height;
                // 定义绘制背景图片的方法
                this.paint = function(){
                    context.drawImage(this.imgs,this.x1,this.y1)
                    context.drawImage(this.imgs,this.x2,this.y2)
                }
                // 定义背景图片运动的方法
                this.step = function(){
                    // 控制两张向下移动
                    this.y1 ++;
                    this.y2 ++;
                    // 判断两张图片的临界点
                    if(this.y1 == this.height){
                        this.y1 = -this.height
                    }
                    if(this.y2 == this.height){
                        this.y2 = -this.height
                    }
                }
            }

全局控制器

setInterval(function(){
                // 绘制背景图片
                sky.paint()
                // 背景图片运动会
                sky.step()
                switch(state){
                    case START :
                        context.drawImage(logo,40,0)
                        break;
                    case STARTING : 
                        loading.paint()
                        loading.step()
                        break;
                    case RUNNING : 
                        hero.paint()
                        hero.step()
                        hero.shoot()
                        bulletsPaint()
                        bulletsStep()
                        bulletsDel()
                        enterEnemies()
                        paintEnemies()
                        stepEnemies()
                        delEnemies()
                        hitEnemies()
                        paintText()
                        break;
                    case PAUSE :
                        hero.paint()
                        paintEnemies()
                        bulletsPaint()
                        paintText()
                        context.drawImage(pause,150,300)
                        break;
                    case GAMEOVER :
                        hero.paint()
                        paintEnemies()
                        bulletsPaint()
                        paintText()
                        paintOver()
                        break;
                }
            },80)

这样我们就走完了大部分的思路，以上就是利用js制作的一个简易的飞机大战