飞机打方块(二)游戏界面制作

这篇具有很好参考价值的文章主要介绍了飞机打方块(二)游戏界面制作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、背景

1.新建bg节点 

飞机打方块(二)游戏界面制作,游戏

二、飞机节点功能实现

1.移动

1.新建plane节点 

飞机打方块(二)游戏界面制作,游戏

2.新建脚本GameController.ts,并绑定Canvas

飞机打方块(二)游戏界面制作,游戏

 GameControll.ts

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Node)
    canvas: cc.Node = null;

    @property({ type: cc.Node, displayName: "飞机(主角)", tooltip: "主角,也就是飞机节点" })
    plane: cc.Node = null;

    @property({ displayName: "飞机和炮弹是否能移动", tooltip: "飞机和炮弹是否能移动" })
    is_plane_move: boolean = true;



    onLoad() {

        //给Canvas绑定事件
        this.canvas.on(cc.Node.EventType.TOUCH_MOVE, this.onMove, this)
    }

    //移动飞机函数,当手指在屏幕上移动时将执行这个函数
    onMove(event: cc.Event.EventTouch) {
        //打印log
        console.log("手指在屏幕上移动了");

        /* 
        //触摸点的坐标
        var pos = new cc.Vec2(event.getLocationX(), event.getLocationY())
        //转换坐标
        //将一个点转换到节点(局部)空间坐标系,这个坐标系以锚点为位置
        pos = this.canvas.convertToNodeSpaceAR(pos)
        //给飞机赋值
        this.plane.position = cc.v3(pos) 
        */

        //获取触点在上一次事件时的位置对象,对象包含x和y属性
        if (this.is_plane_move == true) {
            let last_pos = event.getPreviousLocation();
            //获取触点位置
            let pos = event.getLocation()
            //做向量减法
            var dir = last_pos.sub(pos)
            //移动飞机的坐标
            this.plane.x -= dir.x;
            this.plane.y -= dir.y;
        }
    }

update(dt: number): void{

//屏幕上下左右,用来防止飞机飞出屏幕
        let l = (this.canvas.width / 2) + (this.plane.width / 2);
        let r = (this.canvas.width / 2) - (this.plane.width / 2);
        let t = (this.canvas.height / 2) - (this.plane.height / 2);
        let b = (this.canvas.height / 2) + (this.plane.height / 2);

        //超过边界检测
        if (this.plane.x > r) {
            this.plane.x = r;
        }
        if (this.plane.x < l) {
            this.plane.x = l;
        }
        if (this.plane.y > t) {
            this.plane.y = t;
        }
        if (this.plane.y < b) {
            this.plane.y = b;
        }
    }
}

 飞机打方块(二)游戏界面制作,游戏

三.子弹

1.新建粒子

飞机打方块(二)游戏界面制作,游戏

 2.新建Bullet脚本,新建bullet预制体

飞机打方块(二)游戏界面制作,游戏

Game.ts


    @property({ type: cc.Prefab, displayName: "炮弹预制体", tooltip: "炮弹的预制体,飞机每时每刻都在发射子弹" })
    bullet: cc.Prefab = null;


    @property({ displayName: "炮弹生成左侧坐标", tooltip: "炮弹生成左侧坐标,以飞机锚点为原点建立坐标系时炮弹的位置" })
    bullet_left_pos: cc.Vec2 = null;

    @property({ displayName: "炮弹生成右侧坐标", tooltip: "炮弹生成右侧坐标,以飞机锚点为原点建立坐标系时炮弹的位置" })
    bullet_right_pos: cc.Vec2 = null;


    @property({ type: cc.Float, displayName: "每秒发射几个炮弹", tooltip: "每秒发射几个炮弹,这个值是始终不变的,当这个值过大时,设备会明显卡顿" })
    bullet_num: number = 10;

    @property({ type: cc.Float, displayName: "炮弹发射速度", tooltip: "子弹发射速度,单位是每秒发射多少个像素,吃到buff会提高" })
    bullet_speed: number = 100;

    @property({ type: cc.Float, displayName: "炮弹攻击力", tooltip: "攻击力,炮弹打到障碍物时减少的生命值,吃到buff会提高" })
    ATK: number = 2;

    @property({ displayName: "是否可以发射炮弹", tooltip: "是否可以发射炮弹,为false时飞机将不再发射炮弹" })
    is_fire: boolean = true

    @property({ displayName: "飞机和炮弹是否能移动", tooltip: "飞机和炮弹是否能移动" })
    is_plane_move: boolean = true;


    //生成飞机左侧炮弹用的变量
    l: number = 0;
    //生成飞机右侧炮弹用的变量
    r: number = 0

update(dt: number): void {
        //炮弹生成
        let time = 1 / this.bullet_num;

        //飞机左侧炮弹生成
        this.l += dt;
        if (this.l > time && this.is_fire == true) {
            //打印log
            console.log("生成左侧炮弹");
            //清零
            this.l = 0;
            //创建炮弹
            this.create_bullet(cc.v3(this.bullet_left_pos))
        }
        //飞机右侧炮弹生成
        this.r += dt
        if (this.r > time && this.is_fire == true) {
            console.log("飞机右侧炮弹生成");
            this.r = 0;
            this.create_bullet(cc.v3(this.bullet_right_pos))
        }
    }


//生成炮弹函数,pos以飞机锚点为原点建立坐标系时炮弹的位置
    create_bullet(pos: cc.Vec3) {
        //实例化新节点
        let node = cc.instantiate(this.bullet);
        //父节点为canvas
        node.parent = this.canvas;
        //获取x
        let x = pos.x + this.plane.x;
        //获取y
        let y = pos.y + this.plane.y;
        //将坐标转换
        let p = this.canvas.convertToNodeSpaceAR(cc.v3(x, y))
        //求出最终坐标
        let position: cc.Vec3 = cc.v3(p.x + (this.canvas.width / 2), p.y + (this.canvas.height / 2))
        //赋值
        node.position = cc.v3(position);
    }

Bullet.ts:

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    //子弹速度
    speed: number = 100;

    //子弹攻击力
    ATK: number = 2;

    onLoad(): void {
        //获取GameController脚本
        let gc = cc.find("Canvas").getComponent("GameController");
        //获取速度和攻击力并赋值
        let speed: number = gc.bullet_speed;
        let ATK: number = gc.ATK;
        this.speed = speed;
        this.ATK = ATK;
    }

    update(dt: number) {
        //获取GameController脚本
        let gc = cc.find("Canvas").getComponent("GameController");

        //自身移动
        if (gc.is_plane_move == true) {
            this.node.y += dt * this.speed;
        }
        //获取canvas节点
        let canvas = cc.find("Canvas");
        //如果自身到了屏幕最上方
        if (this.node.y >= (canvas.height / 2) + (this.node.height / 2)) {
            this.node.destroy();
            console.log("子弹超出了屏幕,自动销毁");
        }

    }
}

飞机打方块(二)游戏界面制作,游戏

 3.子弹信息显示:

1.新建state_lb_parent节点:

飞机打方块(二)游戏界面制作,游戏

 2.新建Label节点

飞机打方块(二)游戏界面制作,游戏

飞机打方块(二)游戏界面制作,游戏 绑定Canvas

飞机打方块(二)游戏界面制作,游戏

 GameController.ts

@property({ type: cc.Label, displayName: "显示状态的文字", tooltip: "显示状态的文字,显示射速,攻击力,两个label前后位置无所谓" })
    state_lb: cc.Label[] = [];



 update(dt: number): void {
        //炮弹生成
        let time = 1 / this.bullet_num;

        //飞机左侧炮弹生成
        this.l += dt;
        if (this.l > time && this.is_fire == true) {
            //打印log
            console.log("生成左侧炮弹");
            //清零
            this.l = 0;
            //创建炮弹
            this.create_bullet(cc.v3(this.bullet_left_pos))
        }
        //飞机右侧炮弹生成
        this.r += dt
        if (this.r > time && this.is_fire == true) {
            console.log("飞机右侧炮弹生成");
            this.r = 0;
            this.create_bullet(cc.v3(this.bullet_right_pos))
        }


        //显示状态
        //子弹射速
        let speed = Math.floor(this.bullet_speed);
        //子弹攻击力
        let ATK = Math.floor(this.ATK)
        //如果速度不为满级正常显示
        if (this.bullet_speed < 10000) {
            this.state_lb[0].string = "子弹射速:" + speed;
        }
        //如果速度不为满级正常显示
        else {
            this.state_lb[0].string = "子弹射速:Max";
        }
        this.state_lb[1].string = "子弹攻击力:" + ATK;
    }

 飞机打方块(二)游戏界面制作,游戏

 四、显示分数

1.新建摄像机 

飞机打方块(二)游戏界面制作,游戏

2.新建节点

 GameController.ts

@property({ type: cc.Label, displayName: "显示分数文字", tooltip: "显示分数的文字" })
    score_lb: cc.Label = null;


 //分数
    score: number = 0;

update(dt: number): void {
        //炮弹生成
        let time = 1 / this.bullet_num;

        //飞机左侧炮弹生成
        this.l += dt;
        if (this.l > time && this.is_fire == true) {
            //打印log
            console.log("生成左侧炮弹");
            //清零
            this.l = 0;
            //创建炮弹
            this.create_bullet(cc.v3(this.bullet_left_pos))
        }
        //飞机右侧炮弹生成
        this.r += dt
        if (this.r > time && this.is_fire == true) {
            console.log("飞机右侧炮弹生成");
            this.r = 0;
            this.create_bullet(cc.v3(this.bullet_right_pos))
        }


        //显示状态
        //子弹射速
        let speed = Math.floor(this.bullet_speed);
        //子弹攻击力
        let ATK = Math.floor(this.ATK)
        //如果速度不为满级正常显示
        if (this.bullet_speed < 10000) {
            this.state_lb[0].string = "子弹射速:" + speed;
        }
        //如果速度不为满级正常显示
        else {
            this.state_lb[0].string = "子弹射速:Max";
        }
        this.state_lb[1].string = "子弹攻击力:" + ATK;


        //显示分数
        //如果分数小于1000正常显示
        if (this.score < 1000) {
            this.score_lb.string = "分数:" + Math.floor(this.score);
        }
        //如果分数大于1000小于10000就用k表示
        else if (this.score < 10000) {
            let s = (Math.floor(this.score) / 1000).toFixed(2);
            this.score_lb.string = "分数:" + s + "K";
        }
        //如果分数大于10000就用w表示
        else {
            let s = (Math.floor(this.score) / 10000).toFixed(2);
            this.score_lb.string = "分数:" + s + "W";
        }
    }

飞机打方块(二)游戏界面制作,游戏

 五、障碍

1.生成障碍

1.新建所有障碍父节点

飞机打方块(二)游戏界面制作,游戏

2.新建预制体barrier ,新建Barrier脚本

飞机打方块(二)游戏界面制作,游戏 3.新建子节点

飞机打方块(二)游戏界面制作,游戏

 GameController.ts

@property({ type: cc.Node, displayName: "所有障碍父节点", tooltip: "所有障碍父节点,这个节点用来消除所有障碍" })
    barrier_parent: cc.Node = null;


@property({ type: cc.Prefab, displayName: "障碍物预制体", tooltip: "障碍物预制体" })
    barrier: cc.Prefab = null;

@property({ displayName: "每个障碍物间距范围", tooltip: "每个障碍物间距范围,最小多少,最大多少" })
    barrier_spacing: cc.Vec2 = cc.v2(10, 50)

    @property({ displayName: "障碍物宽度(必填)", tooltip: "障碍物宽度(必填),代码将根据这个值来计算出障碍物生成的最佳位置" })
    barrier_width: number = 100;

    @property({ displayName: "障碍我高度(必填)", tooltip: "障碍物高度(必填),代码将根据这个值来计算出障碍物生成的最佳位置" })
    barrier_height: number = 100;

    @property({ displayName: "障碍物初始生命值", tooltip: "障碍物初始生命值,其实就是障碍物上面文字的数值,当值为0时障碍物销毁,但是这个值并不是障碍物初始的生命值,因为最终障碍物还加上了随机数" })
    barrier_health: number = 100;

    @property({ type: cc.Float, displayName: "障碍物移动速度", tooltip: "障碍物移动速度,单位是每秒多少个像素" })
    barrier_speed: number = 100;

    @property({ type: cc.Float, displayName: "障碍物生成时间间隔", tooltip: "障碍物生成时间间隔,通过控制这个来调整生成频率,最终的频率为(这个变量*Math.random())+(障碍物高/障碍物移动速度)" })
    generation_interval: number = 0.8;

    @property({ type: cc.Float, displayName: "每生成一次障碍物,障碍物锁增加的生命值", tooltip: "每生成一次障碍物,障碍物锁增加的生命值,最终结果是(这个变量*Math.random())" })
    increase: number = 2;


@property({ displayName: "是否生成障碍物", tooltip: "是否生成障碍物" })
    is_barrier_create: boolean = true;


 @property({ displayName: "障碍物和buff是否可以移动", tooltip: "障碍物和buff是否可以移动" })
    is_barrier_move: boolean = true;


//创建障碍物用的变量(当前)
    cre_bar: number = 0;
    //创建障碍物用的变量(满的)
    cre_bar_f: number = 0;




 onLoad() {

        cc.game.setFrameRate(90)

        //恢复游戏,避免游戏暂停导致无法继续
        cc.director.resume();

        //给Canvas绑定事件
        this.canvas.on(cc.Node.EventType.TOUCH_MOVE, this.onMove, this)

        //创建障碍物
        this.create_barrier();
        this.cre_bar_f = (this.barrier_height / this.barrier_speed) + Math.random() * this.generation_interval;

    }



update(dt: number): void {
        //炮弹生成
        let time = 1 / this.bullet_num;

        //飞机左侧炮弹生成
        this.l += dt;
        if (this.l > time && this.is_fire == true) {
            //打印log
            console.log("生成左侧炮弹");
            //清零
            this.l = 0;
            //创建炮弹
            this.create_bullet(cc.v3(this.bullet_left_pos))
        }
        //飞机右侧炮弹生成
        this.r += dt
        if (this.r > time && this.is_fire == true) {
            console.log("飞机右侧炮弹生成");
            this.r = 0;
            this.create_bullet(cc.v3(this.bullet_right_pos))
        }


        //生成障碍物
        //如果能生成障碍物就加
        if (this.is_barrier_create == true) {
            this.cre_bar = this.cre_bar + dt;
        }
        //可以生成障碍物时
        if (this.cre_bar >= this.cre_bar_f) {
            this.cre_bar = 0;
            this.cre_bar_f = (this.barrier_height / this.barrier_speed) + (Math.random() * this.generation_interval);
            this.create_barrier();
        }



        //显示状态
        //子弹射速
        let speed = Math.floor(this.bullet_speed);
        //子弹攻击力
        let ATK = Math.floor(this.ATK)
        //如果速度不为满级正常显示
        if (this.bullet_speed < 10000) {
            this.state_lb[0].string = "子弹射速:" + speed;
        }
        //如果速度不为满级正常显示
        else {
            this.state_lb[0].string = "子弹射速:Max";
        }
        this.state_lb[1].string = "子弹攻击力:" + ATK;


        //显示分数
        //如果分数小于1000正常显示
        if (this.score < 1000) {
            this.score_lb.string = "分数:" + Math.floor(this.score);
        }
        //如果分数大于1000小于10000就用k表示
        else if (this.score < 10000) {
            let s = (Math.floor(this.score) / 1000).toFixed(2);
            this.score_lb.string = "分数:" + s + "K";
        }
        //如果分数大于10000就用w表示
        else {
            let s = (Math.floor(this.score) / 10000).toFixed(2);
            this.score_lb.string = "分数:" + s + "W";
        }
    }




//创建障碍物函数
    create_barrier(): void {
        //l为最左边,也就是从哪里生成,就是屏幕最左边加上一个随机数
        let l = ((-this.canvas.width / 2) + (this.barrier_width / 2)) + Math.random() * 100;
        //r为最右边,也就是从哪里结束生成,就是屏幕最右边减去一个随机数
        let r = (this.canvas.width / 2) - (this.barrier_width / 2) - Math.random() * 50;
        //获取屏幕最上面的Y坐标
        let top = (this.canvas.height / 2) + (this.barrier_height / 2);
        //获取障碍物之间的间距,值是随机的
        let barrier_spacing = this.randomNumber(this.barrier_spacing.x, this.barrier_spacing.y);

        //while循环生成障碍物
        //如果左边小于右边
        while (l < r) {
            let barrier = cc.instantiate(this.barrier);
            barrier.parent = this.barrier_parent;
            barrier.position = cc.v3(l, top)
            //随机数生成障碍物的间距
            barrier_spacing = this.randomNumber(this.barrier_spacing.x, this.barrier_spacing.y);
            //打印log
            console.log("生成障碍物,目前值为:" + l.toString());

            //左边的值加上障碍物宽和障碍物的间距
            l = l + this.barrier_width + barrier_spacing;
        }
//障碍物的生命值加上障碍物的宽和障碍物的间距
        this.barrier_health += Math.floor(Math.random() * this.increase)
    }



    //随机函数 min为最小值,max为最大值,将返回一个number,值大小的范围为min-max
    randomNumber(min: number, max: number) {
        return (Math.round(Math.random() * (min - max) + max))
    }

Barrier.ts


const { ccclass, property } = cc._decorator;

@ccclass
export default class Barrier extends cc.Component {

    @property({ type: cc.Label, displayName: "显示数值的文字", tooltip: "显示数值的文字" })
    num_lb: cc.Label = null;

    //@property({type: cc.Float, displayName: "自身数值", tooltip: "自身数值,当数值为0时当前节点销毁"})
    num: number = 20;

    //自身速度
    speed: number = 2;


    onLoad(): void {
        //自身和文字随机颜色    
        this.node.color = cc.color(this.random_color().x, this.random_color().y, this.random_color().z, 255);
        this.num_lb.node.color = cc.color(this.random_color().x, this.random_color().y, this.random_color().z, 255);

        //防止颜色一样
        //如果自身和文字颜色一样
        if (this.num_lb.node.color == this.node.color) {
            //文字如果不为红色
            if (this.num_lb.node.color != cc.color(255, 0, 0, 255)) {
                //文字变为红色
                this.num_lb.node.color = cc.color(255, 0, 0, 255);
            } else {
                //如果不,则变成黑色
                this.num_lb.node.color = cc.color(0, 0, 0, 255);
            }
        }

        //获取GameController脚本
        let gc = cc.find("Canvas").getComponent("GameController");
        //获取脚本下障碍物的生命值并加上随机数
        let h = (gc.barrier_health) + Math.floor(Math.random() * 10);
        //获取脚本下障碍物的速度
        let s = gc.barrier_speed;

        //赋值
        this.num = h;
        this.speed = s;
    }

    //随机颜色函数
    random_color(): cc.Vec3 {
        let r = this.randomNumber(0, 255);
        let g = this.randomNumber(0, 255);
        let b = this.randomNumber(0, 255);
        return (cc.v3(r, g, b))
    }


    update(dt: number) {
        //将自身生命值取整
        let num = Math.floor(this.num);
        //在Label上显示
        this.num_lb.string = num.toString();

        //获取GameController脚本
        let gc = cc.find("Canvas").getComponent("GameController");

        //自身移动
        if (gc.is_barrier_move == true) {
            this.node.y -= dt * this.speed;
        }
        //获取canvas节点
        let canvas = cc.find("Canvas");
        //如果自身到了屏幕最下方
        if (this.node.y <= -(canvas.height / 2)) {
            //获取GameController脚本
            let gc = cc.find("Canvas").getComponent("GameController");
            //调用游戏结束函数
            /* gc.gameOver() */
        }
    }


    // 随机数函数 min为最小值 max为最大值 将返回一个number,值大小的范围为min-max
    randomNumber(min: number, max: number): number {
        return (Math.round(Math.random() * (min - max) + max));
    }
}

4.绑定Canvas 

飞机打方块(二)游戏界面制作,游戏

飞机打方块(二)游戏界面制作,游戏

 2.消除障碍

GameController.ts

onLoad() {

        cc.game.setFrameRate(90)

        //恢复游戏,避免游戏暂停导致无法继续
        cc.director.resume();

        //给Canvas绑定事件
        this.canvas.on(cc.Node.EventType.TOUCH_MOVE, this.onMove, this)


        //开启碰撞引擎
        let manager = cc.director.getCollisionManager();
        manager.enabled = true;
        //如果要调试
        if (this.is_debug == true) {
            // 是否绘制碰撞组件的形状,默认为不绘制
            manager.enabledDebugDraw = true;
            //是否绘制碰撞组件的包围盒,默认为不绘制
            manager.enabledDrawBoundingBox = true;
        }
        //创建障碍物
        this.create_barrier();
        this.cre_bar_f = (this.barrier_height / this.barrier_speed) + Math.random() * this.generation_interval;

    }

Brrier.ts

 //碰撞回调
    //当碰撞产生的时候调用other产生碰撞的另一个组件 self产生碰撞的自身的碰撞组件
    onCollisionEnter(other, self) {
        if (other.node.group == "bullet") {
            
            //获取GameController脚本
            let gc = cc.find("/Canvas").getComponent("GameController");
            //获取Bullet脚本
            let c = other.getComponent("Bullet");

            //从脚本获取攻击力较少自身生命值
            this.reduce_num(c.ATK);

            //销毁子弹
            other.node.destroy();
        }
        //如果自身生命值小于0
        if (this.num <= 0) {
            //自身销毁
            this.node.destroy();
        }
    }

飞机打方块(二)游戏界面制作,游戏

3.拓展 (改变模型,加上血条)

1.改变模型

新建sprite节点

飞机打方块(二)游戏界面制作,游戏

飞机打方块(二)游戏界面制作,游戏 

 2.加上血条显示

1.新建Progress Bar节点 

飞机打方块(二)游戏界面制作,游戏

 飞机打方块(二)游戏界面制作,游戏

Barrier.ts


@property({ type: cc.ProgressBar, displayName: "显示血量血条", tooltip: "显示血量血条" })
    bloodBar: cc.ProgressBar = null;

 @property({ type: gc, displayName: "GameController脚本所在节点", tooltip: "GameController脚本所在节点" })
    gc: gc = null

    h: number = 0;

onLoad(): void {
        //自身和文字随机颜色    
        this.node.color = cc.color(this.random_color().x, this.random_color().y, this.random_color().z, 255);
        this.num_lb.node.color = cc.color(this.random_color().x, this.random_color().y, this.random_color().z, 255);
        //防止颜色一样
        //如果自身和文字颜色一样
        if (this.num_lb.node.color == this.node.color) {
            //文字如果不为红色
            if (this.num_lb.node.color != cc.color(255, 0, 0, 255)) {
                //文字变为红色
                this.num_lb.node.color = cc.color(255, 0, 0, 255);
            } else {
                //如果不,则变成黑色
                this.num_lb.node.color = cc.color(0, 0, 0, 255);
            }
        }
        //获取GameController脚本
        let gc = cc.find("Canvas").getComponent("GameController");
        //获取脚本下障碍物的生命值并加上随机数
        let h = (gc.barrier_health) + Math.floor(Math.random() * 10);
        //获取脚本下障碍物的速度
        let s = gc.barrier_speed;
        this.bloodBar.progress = 1.0;
        //赋值
        this.num = h;
        this.speed = s;
    }

//减少自身生命值函数
    reduce_num(num: number) {
        //获取GameController脚本
        let gc = cc.find("Canvas").getComponent("GameController");
        this.num -= num;
        this.h = (gc.barrier_health) + Math.floor(Math.random() * 10);
        this.bloodBar.progress = this.num / this.h;
    }

 飞机打方块(二)游戏界面制作,游戏

 

六、Buff

1.生成buff

1.新建显示获得buff类型节点

飞机打方块(二)游戏界面制作,游戏

2.新建Buff脚本,新建buff预制资源

飞机打方块(二)游戏界面制作,游戏

 3.新建buff子节点

飞机打方块(二)游戏界面制作,游戏

GameController.ts

@property({ type: cc.Prefab, displayName: "buff预制体", tooltip: "buff预制体" })
    buff: cc.Prefab = null;


 //创建障碍物函数
    create_barrier(): void {
        //l为最左边,也就是从哪里生成,就是屏幕最左边加上一个随机数
        let l = ((-this.canvas.width / 2) + (this.barrier_width / 2)) + Math.random() * 100;
        //r为最右边,也就是从哪里结束生成,就是屏幕最右边减去一个随机数
        let r = (this.canvas.width / 2) - (this.barrier_width / 2) - Math.random() * 50;
        //获取屏幕最上面的Y坐标
        let top = (this.canvas.height / 2) + (this.barrier_height / 2);
        //获取障碍物之间的间距,值是随机的
        let barrier_spacing = this.randomNumber(this.barrier_spacing.x, this.barrier_spacing.y);

        //while循环生成障碍物
        //如果左边小于右边
        while (l < r) {
            //利用随机数,有概率生成buff球
            let n = Math.random() * 100;
            if (n > this.probability) {
                let barrier = cc.instantiate(this.barrier);
                barrier.parent = this.barrier_parent;
                barrier.position = cc.v3(l, top)
            } else if (n < this.probability) {
                //生成buff球,Y坐标是屏幕上方
                let buff = cc.instantiate(this.buff);
                buff.parent = this.barrier_parent;
                buff.position = cc.v3(1, top);
            }
            //随机数生成障碍物的间距
            barrier_spacing = this.randomNumber(this.barrier_spacing.x, this.barrier_spacing.y);
            //打印log
            /*  console.log("生成障碍物,目前值为:" + l.toString()); */

            //左边的值加上障碍物宽和障碍物的间距
            l = l + this.barrier_width + barrier_spacing;
        }

        //障碍物的生命值加上障碍物的宽和障碍物的间距
        this.barrier_health += Math.floor(Math.random() * this.increase)
    }

 Buff.ts

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {


    //自身移动速度
    speed: number = 2;

    onLoad(): void {
        //获取GameController脚本
        let gc = cc.find("Canvas").getComponent("GameController");
        //获取障碍物移动速度
        let s = gc.barrier_speed;
        this.speed = s;
    }

    update(dt: number) {
        //获取GameController脚本
        let gc = cc.find("Canvas").getComponent("GameController");
        //自身移动
        if (gc.is_barrier_move == true) {
            this.node.y -= dt * this.speed;
        }
    }

}

4.绑定Canvas飞机打方块(二)游戏界面制作,游戏

2.buff碰撞 

1.新建double_lb节点

飞机打方块(二)游戏界面制作,游戏

 Buff.ts

//碰撞回调
    onCollisionEnter(other,self){
         //获取GameController脚本
         let gc = cc.find("Canvas").getComponent("GameController");

         //如果子弹射速满了,就不增加射速了
         if(gc.bullet_speed<10000){
            //随机数0-10
            let n = this.randomNumber(0,10);
            //有一半几率执行子弹加速函数
            //也有一半几率执行子弹加攻击函数
            if(n>5){
                //加速buff
                gc.enhance_speed();
            }else{
                //加攻击buff
                gc.enhance_ATK();
            }
         }else{
            gc.enhance_ATK()
         }
         //自身销毁
         this.node.destroy()
    }



    // 随机数函数 min为最小值 max为最大值 将返回一个number,值大小的范围为min-max
    randomNumber (min: number, max: number): number {
        return(Math.round(Math.random() * (min - max) + max));
    }

GameController.ts

@property({ type: cc.Node, displayName: "显示获得buff类型的label", tooltip: "显示获得buff类型的label" })
    label_parent: cc.Node = null;


    @property({ type: cc.Node, displayName: "显示双倍分数的label", tooltip: "显示双倍分数的label" })
    double_lb: cc.Node = null;

@property({ type: cc.Prefab, displayName: "buff预制体", tooltip: "buff预制体" })
    buff: cc.Prefab = null;


    @property({ displayName: "是否双倍分数", tooltip: "是否双倍分数" })
    is_double: boolean = false;


//增加子弹射速
    enhance_speed() {
        //增加射速
        this.bullet_speed = this.bullet_speed + this.add_buff_num[0];
        //射速加的越来越多
        this.add_buff_num[0] = this.add_buff_num[0] * 1.1;

        //新建一个label来显示吃到的buff
        //新建节点
        let node = new cc.Node
        //父节点是label_parent,这个节点上有Layout组件
        node.parent = this.label_parent;
        //添加cc.Label
        node.getComponent(cc.Label);
        //显示内容
        node.getComponent(cc.Label).string = "子弹射速提升";
        //定时器1秒后销毁
        this.scheduleOnce(function () {
            node.destroy();
        }, 1);


        //双倍分数
        this.double_score(8);
    }


    //增强子弹攻击力
    enhance_ATK() {
        //增加攻击力
        this.ATK = this.ATK + this.add_buff_num[1];
        //攻击力加的越来越多
        this.add_buff_num[1] = this.add_buff_num[1] * 1.1;

        // 新建一个label来显示吃到的buff
        // 新建节点
        let node = new cc.Node;
        // 父节点是label_parent,这个节点上有Layout组件
        node.parent = this.label_parent;
        // 添加cc.Label
        node.addComponent(cc.Label);
        // 显示内容
        node.getComponent(cc.Label).string = "子弹攻击力提升";
        // 定时器 1秒后销毁
        this.scheduleOnce(function () {
            node.destroy();
        }, 1);

        // 双倍分数
        this.double_score(8);
    }

    //双倍分数函数,执行后得分翻倍,time为多少秒后恢复
    double_score(time: number) {
        let self = this;
        //开启双倍分数并且显示文字
        this.is_double = true;
        this.double_lb.active = true;
        //定时器关闭双倍分数并且隐藏文字
        this.scheduleOnce(function () {
            self.is_double = false;
            self.double_lb.active = false;
        }, time);
    }

2.绑定Canvas

飞机打方块(二)游戏界面制作,游戏

飞机打方块(二)游戏界面制作,游戏

七、加分

Barrier.ts

//碰撞回调
    //当碰撞产生的时候调用other产生碰撞的另一个组件 self产生碰撞的自身的碰撞组件
    onCollisionEnter(other, self) {
        if (other.node.group == "bullet") {
            
            //获取GameController脚本
            let gc = cc.find("/Canvas").getComponent("GameController");
            //获取Bullet脚本
            let c = other.getComponent("Bullet");

            //从脚本获取攻击力较少自身生命值
            this.reduce_num(c.ATK);
             // 如果可以加双倍分数
            if(gc.is_double==true){
                //加分
                gc.add_score((c.ATK)*2)
            }
            //如果不可以加双倍分数
            if(gc.is_double == false){
                gc.add_score(c.ATK);
            }
            //销毁子弹
            other.node.destroy();
        }
        //如果自身生命值小于0
        if (this.num <= 0) {
            //自身销毁
            this.node.destroy();
        }
    }

GameController.ts


update(dt: number): void {
        //炮弹生成
        let time = 1 / this.bullet_num;

        //飞机左侧炮弹生成
        this.l += dt;
        if (this.l > time && this.is_fire == true) {
            //打印log
            /* console.log("生成左侧炮弹"); */
            //清零
            this.l = 0;
            //创建炮弹
            this.create_bullet(cc.v3(this.bullet_left_pos))
        }
        //飞机右侧炮弹生成
        this.r += dt
        if (this.r > time && this.is_fire == true) {
            /* console.log("飞机右侧炮弹生成"); */
            this.r = 0;
            this.create_bullet(cc.v3(this.bullet_right_pos))
        }


        //生成障碍物
        //如果能生成障碍物就加
        if (this.is_barrier_create == true) {
            this.cre_bar = this.cre_bar + dt;
        }
        //可以生成障碍物时
        if (this.cre_bar >= this.cre_bar_f) {
            this.cre_bar = 0;
            this.cre_bar_f = (this.barrier_height / this.barrier_speed) + (Math.random() * this.generation_interval);
            this.create_barrier();
        }



        //显示状态
        //子弹射速
        let speed = Math.floor(this.bullet_speed);
        //子弹攻击力
        let ATK = Math.floor(this.ATK)
        //如果速度不为满级正常显示
        if (this.bullet_speed < 10000) {
            this.state_lb[0].string = "子弹射速:" + speed;
        }
        //如果速度不为满级正常显示
        else {
            this.state_lb[0].string = "子弹射速:Max";
        }
        this.state_lb[1].string = "子弹攻击力:" + ATK;


        //显示分数
        //如果分数小于1000正常显示
        if (this.score < 1000) {
            this.score_lb.string = "分数:" + Math.floor(this.score);
        }
        //如果分数大于1000小于10000就用k表示
        else if (this.score < 10000) {
            let s = (Math.floor(this.score) / 1000).toFixed(2);
            this.score_lb.string = "分数:" + s + "K";
        }
        //如果分数大于10000就用w表示
        else {
            let s = (Math.floor(this.score) / 10000).toFixed(2);
            this.score_lb.string = "分数:" + s + "W";
        }





    //加分函数
    add_score(num: number) {
        this.score = this.score + num;
    }

飞机打方块(二)游戏界面制作,游戏文章来源地址https://www.toymoban.com/news/detail-660510.html

到了这里,关于飞机打方块(二)游戏界面制作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 用Devc++与easyx一步一步做游戏[启动界面部分]-之按钮制作

    前面我们介绍了如何为dev c++配置好easyx,至于用easyx能够做一些什么呢?大用处我不敢说,用来学习了解消息机制还是不错的。这我们来实现一个简单的游戏启动界面的设计,主要是按钮的设计。总体设计好的效果如下: GIF截图看不到鼠标移动的效果,实际上这里是随着鼠标

    2024年01月15日
    浏览(44)
  • Unity3D学习之UI系统——用NGUI制作游戏登陆界面

    会省略一些东西,可以看我的NGUI的博客 设置UI分辨率自适应 设置Root 的层级 和摄像机渲染的层级为UI 主摄像机不渲染UI 一般都是美术给一个示意图,然后按示意图上拼面板 3.1.1 制作图集 制作两个新图集 3.1.2 拖面板 检查DrawCall 3.1.3 面板基类 创建面板基类, 首先设置成单例

    2024年02月19日
    浏览(74)
  • 基于JavaFX的扫雷游戏实现(二)——游戏界面

      废话环节:看过上期文章的小伙伴现在可能还是一头雾水,怎么就完成了核心内容,界面呢?哎我说别急让我先急,博主这不夜以继日地肝出了界面部分嘛。还是老规矩,不会把所有地方都照顾到,只挑一些有代表性的内容介绍,您各位多担待🙏。另外博主的JavaFX是跟着

    2024年02月12日
    浏览(44)
  • 飞机打方块(四)游戏结束

    1.新建gameover节点 2.绑定canvas 3.新建gameover容器  4.新建文本节点 2.游戏结束逻辑  Barrier.ts  GameController.ts 1.新建button按钮节点,绑定按钮事件  GameController.ts  2.绑定canvas   复活一次后   1.新建button按钮节点,绑定按钮事件  GameController 1.新建button按钮节点,绑定按钮事件   

    2024年02月12日
    浏览(33)
  • C#开发的OpenRA游戏的游戏界面内鼠标处理窗口

    C#开发的OpenRA游戏的游戏界面内鼠标处理窗口 OpenRA游戏里,游戏上面所有物品显示,都是基于窗口容器。 前面也讨论过,其实就是基于ingame.yaml文件来布局和创建的, 在ingame.yaml文件里,根窗口Container@INGAME_ROOT,共有六个子节点: Children:     LogicKeyListener@GLOBAL_KEYHANDLER:   

    2024年02月11日
    浏览(42)
  • 拼图小游戏(实现游戏主界面)(未连接数据库)

    基于IDEA,创建窗体进行游戏 默认的用户名和密码为:zhangsan,123                                         lisi,1234

    2024年01月16日
    浏览(47)
  • 使用Pygame创建一个简单游戏界面

    首先需要安装Pygame 模块,在Python代码中添加引用。 1. 引用代码如下: 2. 定义初始化窗口函数: 在初始化窗口函数中,定义窗口大小和窗口标题。 3. 创建一个循环,不断更新界面和检测事件 加载背景图片,将背景图片对象放置在窗口上,位置(0,0) 最左角,图片有实际的

    2024年02月13日
    浏览(47)
  • 【C#项目实战】控制台游戏勇士斗恶龙(1)——游戏初始设置以及开始界面

    君兮_的个人主页 即使走的再远,也勿忘启程时的初心 C/C++ 游戏开发 Hello,米娜桑们,这里是君兮_,最近开始正式的步入学习游戏开发的正轨,想要通过写博客的方式来分享自己学到的知识和经验,这就是开设本专栏的目的。希望这些独立的C#小项目能对做游戏的你有所帮助,

    2024年02月09日
    浏览(51)
  • C#开发的OpenRA游戏加载界面的实现

    C#开发的OpenRA游戏加载界面的实现 游戏的UI是一个游戏必备, 但是游戏的UI都是自己处理的,不能使用像Windows自带的UI。 这样游戏的UI,其实也是使用游戏的方式来显示的, 只不过使用了低帧率的方式来显示。 比如OpenRA游戏界面,就会显示如下: 游戏的界面有很多,先从一

    2024年02月01日
    浏览(50)
  • 游戏界面设计:打造吸引人的视觉体验

    如何进行游戏界面设计?游戏UI界面设计的前景如何?我相信这是许多UI设计师和想要转向UI设计的设计师非常关心的问题。今天,小将和你谈谈。 首先,游戏界面设计师的前景仍然很好。游戏用户界面是一门研究人机交互的学科,是一个新兴的热门方向和活跃的领域。此外,

    2024年02月06日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包