Qt第三方库QML-Box2D——使用它创建一个飞翔的蝙蝠

最新推荐文章于 2025-06-26 15:04:51 发布

daainini

最新推荐文章于 2025-06-26 15:04:51 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： QML Box2D

本文链接：https://blog.youkuaiyun.com/iloveqt5/article/details/21416155

QML Box2D 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用QML与Box2D开发的简单蝙蝠飞行游戏项目。游戏模仿了FlappyBird的基本玩法，玩家通过点击屏幕控制蝙蝠飞行，避开石壁障碍。文中分享了游戏的主要源代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前些时间很火的游戏Flappy Bird，试玩了下，让它虐无数遍，自己做一个弄简单点。于是仿制它做了个飞翔的蝙蝠。

本来想让蝙蝠飞在黝黑的石洞中，而不碰石壁的。后来界面似乎有些悲惨……

基本还是能用的，算是QML-Box2D的入门作品。这里发出它的源码。

gif录制的很糟糕,有些卡啊……

看不到图的点这里：http://my.poco.cn/album/album_show_details.php?user_id=61595702&item_id=194536272

main.qml:

import QtQuick 2.0
import Box2D 1.1
import QtSensors 5.0
import "img"
import "fns.js" as Fns
Rectangle {
    id:mainWin
    width: 480
    height: 800
    color: "black"
    Image {
        id: back
        anchors.fill: parent
        source: "img/back.png"
    }
    World {
        id: world;
        anchors.fill: parent
        Bat {//蝙蝠
            id: bat
            width:mainWin.width/4
            height:mainWin.width/4
            x:mainWin.width*3/5
            y:mainWin.height*2/5
            playing : false
        }
        Wall {//天花板
            id: ceiling
            height: 4
            anchors { left: parent.left; right: parent.right; top: parent.top }
        }
        Wall {//地面
            id: ground
            height: mainWin.height/8
            anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
        }
        Wall {//左边墙
            id: l_wall
            height: mainWin.height
            width: 4
            anchors { left: parent.left; top: parent.top; bottom: parent.bottom }
        }
        Wall {//右边墙
            id: r_wall
            height: mainWin.height
            width: 4
            anchors { right: parent.right; top: parent.top; bottom: parent.bottom }
        }
        StoneWall{//第一对石头的上面一个
            id:s1
            x:-width
            y:ceiling.height
            width:parent.width/6
            height:parent.height-ceiling.height-ground.height
            NumberAnimation {//绑定在石头上的动画，让石头平滑的移动
                id:xAni1
                target: s1;
                property :"x"
                from: -s1.width;
                to: mainWin.width;
                duration: 3000
                // running: false
            }
        }
        StoneWall{//第一对石头的下面那个
            id:s1_2
            x:s1.x
            y:ceiling.height+s1.height+parent.height/3
            width:s1.width
            height:parent.height-ceiling.height-ground.height-s1.height-parent.height/3
        }
        StoneWall{
            id:s2
             x:-3*width
             y:ceiling.height
             width:parent.width/6
             height:world.height*(Math.floor(5+Math.random()*(50-5))/100);
            NumberAnimation {
                id:xAni2
                target: s2;
                property :"x"
                from: -s2.width;
                to: mainWin.width;
                duration: 3000
                running: false
            }
        }
        StoneWall{
            id:s2_2
            x:s2.x
            y:ceiling.height+s2.height+parent.height/3
            width:s2.width
            height:parent.height-ceiling.height-ground.height-s2.height-parent.height/3
        }
    }

    //显示飞行持续时间的label
    CountTime{
        id:time
        width: parent.width/5
        height: time.width/3
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 30
        visible: false
    }
    MouseArea{//点击屏幕时执行的动作
        anchors.fill: parent
        onClicked: {
            if(mainWin.state=="ready")//初始准备状态
            {
                mainWin.state="fly";
                 bat.setLinearVelocity(0,-600);
            }else if(mainWin.state=="fly")
            {
                bat.setLinearVelocity(0,-600)//给bat一个向上的速度
            }else
            {

            }
        }
    }
    //显示结果与历史成绩的界面，发现这个result需要放在上边MouseArea后，result的鼠标区域才有效……
    Result{
        id:result
        anchors.centerIn: parent
        visible: false
        text:"持续时间："+time.text+"秒"
    }
    states: [//共三个状态，准备、飞行、结果显示。
        State {
            name: "ready"//准备状态
            PropertyChanges { target: bat; playing: false }
            PropertyChanges { target: bat; x:mainWin.width*3/5 }
            PropertyChanges { target: bat; y:mainWin.height*2/5 }
            PropertyChanges { target: time; visible:false}
            PropertyChanges { target: result; visible:false}

            PropertyChanges { target: s1; x:-s1.width}
            PropertyChanges { target: s2; x:-s2.width*3}

        },
        State {
            name: "fly"//飞行状态
            PropertyChanges { target: bat; playing: true }
            PropertyChanges { target: time; visible:true}
            PropertyChanges { target: result; visible:false}

        },
        State {
            name: "result"//结束时显示结果
            PropertyChanges { target: bat; source:"img/deadBat.png" }
            PropertyChanges { target: time; visible:false}
            PropertyChanges { target: result; visible:true}
        }
    ]
    onStateChanged: {//状态变化时，该显示的图层及执行的动作
        if(mainWin.state==="ready")
        {
            world.gravity = Qt.point(0, 0)//准备阶段，让重力为0，使蝙蝠不下落
            bat.angularVelocity=0;//使其角速度为0
            bat.rotation=0;
            bat.linearVelocity=Qt.point(0,0);//使其线速度为0，防止重新启动游戏时蝙蝠在x或y上有初速度
        }else if(mainWin.state==="fly")
        {
            t1.start();//飞行时，启动定时装置，让石头运动
            t2.start();
            world.gravity = Qt.point(0, -35)
            Fns.s=0;

        }else
        {
            xAni1.stop();
            xAni2.stop();
            t1.stop();
            t2.stop();

        }
    }
    Timer {//用于检测石头是否已冲出屏幕右方
        id:t1
        interval: 100; repeat: true
        running: false
        onTriggered:{
            if(xAni1.running===false)
            {
                xAni1.restart()//重启动画，让石头再次从左方运动到右方
                s1.height=world.height*(Math.floor(5+Math.random()*(50-5))/100);

            }
            if(xAni2.running===false && s1.x>mainWin.width/2-s1.width/2 )
            {
                xAni2.restart()
                s2.height=world.height*(Math.floor(5+Math.random()*(50-5))/100);
            }
            Fns.s= Fns.s+1;
            time.text=Math.round(Fns.s)/10;
        }

    }
    Timer {//用于隔2秒后启动另一个石头
        id:t2
        interval: 1600;
        repeat: false
        running: false
        onTriggered:{
            xAni2.start()
        }

    }
    Component.onCompleted: {
        mainWin.state="ready";

    }
}

Bat.qml

import QtQuick 2.0
import Box2D 1.1
import "img"
Body {
    property alias playing: batImg.playing
    property alias source: batImg.source
    sleepingAllowed: false
	bodyType: Body.Dynamic
    fixtures: Box {
        id:b
        width:parent.width*2/3
        height:parent.height/3
        anchors.centerIn: parent
        density: 1;
        friction: 0.3;
        restitution: 0.2;
    }

    AnimatedImage {
        id:batImg
        anchors.fill: parent
        source: "img/bat.gif"
    }
    Connections{
        target: b
        onBeginContact : {
            mainWin.state="result"
            console.log("re")
        }
    }
}

Wall.qml

import QtQuick 2.0
import Box2D 1.1

Body {
    bodyType: Body.Static
    fixtures: Box { anchors.fill: parent }
    Image {
        id: img
        anchors.fill: parent
        source: "img/process.png"
    }
}

StoneWall.qml

import QtQuick 2.0
import Box2D 1.1
import "img"
Body{
    id:st
    bodyType: Body.Static
    fixtures: Box {anchors.fill: parent}
    Image {
        anchors.fill: parent
        source: "img/stone.png"
    }
}

其它次要的就不贴了