仿Flappy Bird小游戏详细教程（含素材and文档）-游戏中判断两个矩形是否重叠

教程目录：

1. 小游戏展示
2. 下载游戏引擎
3. 创作一个移动的背景
4. 让阿菌煽动翅膀
5. 让阿菌模拟重力下坠
6. 让阿菌可以摸鱼
7. 编写游戏开始与结束
8. 编写 boss 剧情
9. 部署到服务器，在手机玩耍
10. 视频教程链接

有兴趣深入的同学后续可以考虑用 cocos 的 Prefab 预制资源功能实现哦

首先我们在节点树上添加三条小鱼，依次均匀排列到屏幕外侧：

然后编写逻辑让小鱼依次入场：

update(dt){
    //...
    // 小鱼移动的逻辑
    this.moveFish(this.fish1)
    this.moveFish(this.fish2)
    this.moveFish(this.fish3)
    //...
}

// 小鱼移动的逻辑
moveFish(fish: cc.Node) {
    // 定义小鱼每帧移动的速度比背景快一点点
    fish.x -= 3
    if (fish.x < -355) {
        // 移动到屏幕外则重新置位
        fish.x = 605
        // 考虑到小鱼可能被吃掉，重新置位后要显示出来
        fish.active = true
        // 设置阿菌可以摸到下一条小鱼
        this.canEatFish = true
        // 给小鱼设置一个随机的 y 坐标
        fish.y = 658 - 1316 * Math.random()
    }
}

然后编写阿菌是否碰到了小鱼的逻辑：

// 判断阿菌是否摸鱼，阿菌的长宽 100，小鱼的长宽 70
judgeAjunEatFish(fish: cc.Node) {
    // 阿菌两个点的坐标
    let jx1 = this.ajun.x - 50
    let jy1 = this.ajun.y - 50
    let jx2 = this.ajun.x + 50
    let jy2 = this.ajun.y + 50

    //小鱼两个点的坐标
    let fx1 = fish.x - 35
    let fy1 = fish.y - 35
    let fx2 = fish.x + 35
    let fy2 = fish.y + 35

    //判断阿菌和小鱼是否重叠，先判断阿菌和小鱼永远不相交的情况，然后取反
    if (!(jy1 > fy2 || jx1 > fx2 || jy2 < fy1 || jx2 < fx1) && this.canEatFish) {
        // 和小鱼重叠即得分
        this.scoreCounter += 1
        // 把分数转为字符串显示到游戏界面中
        this.scoreLabel.string = this.scoreCounter.toString()
        // 一条小鱼只能吃一次
        this.canEatFish = false
        // 吃完后设置小鱼不可见
        fish.active = false
    }
}

记得要定义计分器哦：

// 计分器
scoreCounter: number = 0

@property(cc.Label)
scoreLabel: cc.Label = null

推荐阅读：微信飞机大战小游戏详细教程