从零开始的泡泡龙游戏



  • 来玩泡泡龙

    花了一小时,做了准备工作

    0_1525269456973_QQ图片20180502215537.jpg

    发射泡泡

    按下屏幕可以发射泡泡,泡泡碰撞后,粘在上面

    0_1525327635185_Screenshot_20180503-140700.jpg

    泡泡粘贴的位置

    0_1525334610207_QQ截图20180503160252.png

    根据角度计算

    0_1525335750992_QQ截图20180503161857.png

    var radian = Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x )
    
    var angle = 180 / Math.PI * radian
    console.log("angle=", angle)
    if(angle>=45 && angle<=90){
        //右下角
    }
    else if(angle>90 && angle<=135){
        //左下角
    }
    else if(angle<45 && angle>=-45){
        //右
    }
    else if(angle<-45 && angle >= -90){
        //右上角
    }
    else if(angle<-90 && angle >= -135){
        //左上角
    }
    else{
        //左
    }
    

    消除计算

    每个发射球周围有六个球,依次计算他们是否跟发射球颜色相同,如果相同,再次递归,直到找不到相同颜色球

    function checkSameTypeSize(newI, newJ, tempType){
            console.log("checkSameTypeSize ", newI, newJ, tempType)
            var hasSize = 0
            var flag = newI%2
            var len = flag==0?9:10
            var otherLen = flag==1?9:10
    
            var tempPoint = new Array
    
            //左侧泡泡
            if(newJ-1>=0){
                if(level.arrays[newI][newJ-1] == tempType){
                    tempPoint.push(Qt.point(newI, newJ-1))
                }
            }
    
            //右侧泡泡
            if(newJ+1<=len-1){
                if(level.arrays[newI][newJ+1] == tempType){
                    tempPoint.push(Qt.point(newI, newJ+1))
                }
            }
            //上侧
            if(newI-1>=0){
    
                if(flag==0){
                    //上层是偶数行
                    if(newJ>=0){
                        //上左侧泡泡
                        //上左侧 存在
                        if(level.arrays[newI-1][newJ] == tempType){
                            tempPoint.push(Qt.point(newI-1, newJ))
                        }
                    }
                     //上右侧泡泡
                    if(newJ+1<=otherLen-1){
                        //存在
                        if(level.arrays[newI-1][newJ+1] == tempType){
                            tempPoint.push(Qt.point(newI-1, newJ+1))
                        }
                    }
                }
                else{
                    //上层是奇数行
                    if(newJ-1>=0){
                        //上左侧泡泡
                        //上左侧 存在
                        if(level.arrays[newI-1][newJ-1] == tempType){
                            tempPoint.push(Qt.point(newI-1, newJ-1))
                        }
                    }
                     //上右侧泡泡
                    if(newJ<=otherLen-1){
                        //存在
                        if(level.arrays[newI-1][newJ] == tempType){
                            tempPoint.push(Qt.point(newI-1, newJ))
                        }
                    }
                }
    
            }
    
            //下侧
            if(newI+1<level.arrays){
                if(flag==0){
                    //下层是偶数行
                    if(newJ>=0){
                        //下左侧泡泡
                        //下左侧 存在
                        if(level.arrays[newI+1][newJ] == tempType){
                            tempPoint.push(Qt.point(newI+1, newJ))
                        }
                    }
                     //下右侧泡泡
                    if(newJ+1<=otherLen-1){
                        //存在
                        if(level.arrays[newI+1][newJ+1] == tempType){
                            tempPoint.push(Qt.point(newI+1, newJ+1))
                        }
                    }
                }
                else{
                    //下层是奇数行
                    if(newJ-1>=0){
                        //下左侧泡泡
                        //下左侧 存在
                        if(level.arrays[newI+1][newJ-1] == tempType){
                            tempPoint.push(Qt.point(newI+1, newJ-1))
                        }
                    }
                     //上右侧泡泡
                    if(newJ<=otherLen-1){
                        //存在
                        if(level.arrays[newI+1][newJ] == tempType){
                            tempPoint.push(Qt.point(newI+1, newJ))
                        }
                    }
                }
            }
    
            var tempArrayFunc = new Array
    
            for(var p=0 in tempPoint){
                var pp = tempPoint[p]
                if(tempArray[pp.x][pp.y]==1){
                    //已经采集过这个点
                }
                else{
                    tempArray[pp.x][pp.y] = 1
                    tempArrayCaiji++
                    tempArrayFunc.push(Qt.point(pp.x, pp.y))
                }
            }
    
            //递归采集
            for(var p=0 in tempArrayFunc){
                var pp = tempArrayFunc[p]
                console.log("============pp", pp)
                checkSameTypeSize(pp.x, pp.y, tempType)
            }
    
        }
    

    粘贴位置优化

    六个方向每个角度为60

    边界碰撞优化

    碰撞边界后不超出边界,强制设置x,y坐标

    function checkScreen(x, y){
            var w = Screen.width
            var h = Screen.height
            var radian = Math.PI/180 * moveAngle
    
            var point = Qt.point(x,y)
    
            if(x<=2/* && moveAngle<-90*/){
                moveAngle = -(180+moveAngle)
                point.x = 2
                point.y = (fireBall.x-2)*Math.tan(radian) + fireBall.y
            }
            else if(x+ballRadius*2+2>=w /*&& moveAngle>-90*/){
                moveAngle = 180-moveAngle
                point.x = w-ballRadius*2-2
                point.y = (w-fireBall.x-ballRadius*2-2)*Math.tan(radian) + fireBall.y
            }
    
            return point
        }
    

    球与球碰撞优化

    碰撞前不移动发射球,检测到预碰撞后,下次坐标直接设置为正确的点位置

    分数

    //计分
    score += ballScore
    

    泡泡破碎

    0_1525404206965_ball1.gif

    破碎优化

    0_1525411221012_ball3.gif

    菜单与关卡

    0_1525420516148_Screenshot_20180504-155437.jpg

    0_1525420525652_Screenshot_20180504-155442.jpg

    未完待续



  • 这种游戏难吗
    难在哪里



  • @大黄老鼠 第一次做,难在计算消除的算法



  • 也是哦,消除算法第一眼可能看不出来怎么做的。还是有些难度的。😝 😝


  • 网站研运

    程序设计来说,算法还是挺重要的,然后呢,一些精美的图片,也会带来很棒的视觉效果。我喜欢这样的游戏。



  • 再来一个顶!支持一波


Log in to reply
 

走马观花

最近的回复

  • Z

    我按照楼主说的,除了windeployqt以外,还需要Qt\labs\folderlistmodel,QtQuick\Layouts,QtQuick\VirtualKeyboard,QtQuick.2,platforminputcontexts这么几个目录,另外Qt5Qml.dll, Qt5Quick.dll也要加进来,还是不行,楼主可以发个完整的文件夹给我吗,release模式的,debug模式没问题

    read more
  • 1.jpg

    简介

    USD全称是“Universal Scene Description”,它主要着力的是电影、游戏复杂制作的流程的规范化。这回我们主要来研究USD在Maya中有关渲染部分究竟是如何实现的。

    USD通过附属的子项目Hydra来实现在其工具“UsdView”以及Maya中渲染方面的实现。Hydra是一款经过多年锤炼的渲染引擎(据说自从2012年就开始研发),Hydra与Maya中有关渲染的结合得益于Maya支持第三方渲染框架通过它提出的“Viewport (1.0、2.0)”方式支持。

    初探

    我们打开USD项目,会发现它有很多子项目。其中包含了imaging和usd子项目。这里我们主要关注的是imaging项目。由单词意思可知,其主要关注的是产出图片的,也就是有关渲染的。
    ca7ce8ff-7e7d-4ec3-9246-fbee48109c7b-image.png

    有关Hydra是三个子项目。包含了hdSt、hdStream以及hdx。我们主要关注的是hdSt。因为这个项目是和OpenGL渲染密切相关的。由于OpenGL是做渲染的大家通用知识,因而它是我们关注的主要子项目。

    调试

    调试.jpg
    我们调试这部分代码,截了此图。我们在图中至少发现几个问题:

    Maya底层是用OpenSceneGraph(OSG)管理场景的。我们可以看到Maya 2018的文件夹里有很多OSG开头的动态链接库,这么说具体视口渲染的部分都是建立在OSG上的。Maya的Viewport 2.0也是建立在OSG上的。在可见的将来它们不会替换掉OSG。

    USD的Hydra和Maya结合的类叫做UsdMayaGLBatchRenderer。由名字可知,它仅工作在OpenGL下,换句话说,如果Maya使用的是DirectX11进行渲染的,那么它将会失效。
    d7063ec4-242e-40bd-bf05-5103c38fedf1-image.png

    libhd项目只是一个前端库,后端通过libhdx以及libhdSt来实现。尤其是libhdSt,它主要是和OpenGL打交道的。它十分复杂。主要基于的是OpenGL 3.3+,也就是包含了各种着色器以及高级栅格化技术,并且整合了网格细分库:OpenSubdiv。

    后续

    由于我们的研究方向是思考一个方式来让让Hydra支持过程化纹理,因此我们还需要继续对此进行研究。

    read more
  • 最近我开始在Maya工作啦。Maya是一款优秀的三维软件,可以处理布景、建模、纹理、装备、渲染等操作。而且它可以支持C++和Python的开发。文档也是非常多的(参考这里)。

    我们最近的工作呢,是想要利用Maya的资源,尤其是图片资源,来制作新的界面。由于Maya是基于Qt开发的,因此要获取图片资源,除了Maya文件夹里D:\Develop\Autodesk\Maya2018\icons文件之外,还需要从资源文件中获取到。而资源文件一般是编译成C++代码放在程序的某个位置了,所以我们一般是看不到的。我们就开始想,既然Maya能够成功地读取并且显示,我们通过Maya的插件开发,不也能够获取并且显示到需要的图标吗?由于Qt的经验,我开始研究通过写Maya插件来获取到Maya资源文件的方法。

    新打开Maya软件,点击右下角的脚本图标,我们开始输入脚本:
    ad141613-63a5-4a93-9b79-3d6ca44da782-image.png

    2、我们通过Qt for Python来从Maya中获取到图标信息。由于Maya是构建在Qt 5.6.1上的,当时还不叫Qt for Python,而是PySide2。当然用法也是差不多的。更重要的是Qt 5.6.1已经支持QML了,可以支持QML的基本绘图方法。所以我们打算结合Qt for Python和QML来实现相关的功能。其实这样一组合就和Maya没有什么关系了。剩下的都是Qt的技术。
    我们的脚本是这样的:

    from PySide2.QtQuick import QQuickView from PySide2.QtCore import QDir, QFileInfo, QUrl def getMayaResourceFileList( nameFilter ): dir = QDir( ":/" ) return dir.entryList( nameFilter ) view = QQuickView( ) view.setResizeMode( QQuickView.SizeViewToRootObject ) mainUrl = QUrl.fromLocalFile( "C:/Users/huawei/Documents/ImageGridView.qml" ) view.setSource( mainUrl ) view.show( ) rootItem = view.rootObject( ) if rootItem != None: rootItem.setProperty( "prefix", "qrc:/" ) rootItem.setProperty( "model", getMayaResourceFileList( '*.png' ) )

    其中C:/Users/huawei/Documents/ImageGridView.qml是我本地的路径,可以改为任意的路径甚至是http路径呢。

    我们还得完成ImageGridView.qml文件内容,其实也非常简单,大概是这样的: import QtQuick 2.6 GridView { id: root width: 320 height: 480 cellWidth: 80 cellHeight: 80 delegate: Image { width: 80 height: 80 source: root.prefix + modelData Text { anchors { left: parent.left right: parent.right bottom: parent.bottom } text: modelData wrapMode: Text.Wrap } } model: 40 property string prefix }

    22ae8472-0bb3-4342-ae72-e1cb54bd87a7-image.png

    4、这些文件准备就位了!我们打开一下Maya软件,看看结果~
    f430332d-c824-47d3-8d1c-b17b3c53bc97-image.png
    它是一个可滑动的界面,每行显示4列,然后下面是文字的内容,展示了图标的名称。我们可以借此工具拿到我们感兴趣的图标的路径,然后应用到我们制作的界面上。其实,如果你觉得图片好,也可以通过QImage以及QPixmap给转存出去自己用。

    如果你觉得文章很棒,记得点赞哦。

    read more

关注我们

微博
QQ群











召唤伊斯特瓦尔