【QML】分享一个纯QML实现的2048小游戏

随着QT6的问世，UI设计+Qt代码联动的设计方式在Qt Creator中已经变成了不可用状态（虽然可以手动打开），官方开始推广用QML来进行界面设计，当时蠢蠢欲动做了一个小游戏，忽然想起来分享一下，代码开源在本人github上，欢迎拉取

一、Git开源地址：https://github.com/xutengteng/2048

二、代码说明

主要逻辑都在几个qml文件中

三、主要逻辑说明

本游戏主要逻辑没有参考网上，是按照我自己的想法写的，不知道有没有更优解，主要是方块的合并算法和随机方块的生成算法，一下罗列一下主要逻辑，详细代码还需参考git

1.合并算法我主要分四步（三个模块）：

缩进
矩阵变换
合并
最后再缩进

缩进主要作用是让方块每行都处于两两相邻状态，方便比较，合并后会产生空挡，所以要再缩进一次

    /*************************缩进***********************/function move_retract(){var i=0for(i;i<4;i++){if(item.itemArray[0+i*4] === 0){item.itemArray[0+i*4] = item.itemArray[1+i*4]item.itemArray[1+i*4] = item.itemArray[2+i*4]item.itemArray[2+i*4] = item.itemArray[3+i*4]item.itemArray[3+i*4] = 0}if(item.itemArray[1+i*4] === 0){item.itemArray[1+i*4] = item.itemArray[2+i*4]item.itemArray[2+i*4] = item.itemArray[3+i*4]item.itemArray[3+i*4] = 0}if(item.itemArray[2+i*4] === 0){item.itemArray[2+i*4] = item.itemArray[3+i*4]item.itemArray[3+i*4] = 0}}}

矩阵变换是为了应对四个方向的滑动，通过把格子下标进行左右翻转和对角线翻转，任意方向的滑动都可当作左划，代码量骤减

 function r_2_l(){//左右互换下标var i=0var dt0,dt1,dt2,dt3for(i;i<4;i++){dt0 = item.itemArray[0+i*4]dt1 = item.itemArray[1+i*4]dt2 = item.itemArray[2+i*4]dt3 = item.itemArray[3+i*4]item.itemArray[0+i*4] = dt3item.itemArray[1+i*4] = dt2item.itemArray[2+i*4] = dt1item.itemArray[3+i*4] = dt0}}function u_2_l(){//对角线互换下标var i=0var dt1,dt2,dt3,dt6,dt7,dt11dt1 = item.itemArray[1]dt2 = item.itemArray[2]dt3 = item.itemArray[3]dt6 = item.itemArray[6]dt7 = item.itemArray[7]dt11 = item.itemArray[11]item.itemArray[1] = item.itemArray[4]item.itemArray[2] = item.itemArray[8]item.itemArray[3] = item.itemArray[12]item.itemArray[6] = item.itemArray[9]item.itemArray[7] = item.itemArray[13]item.itemArray[11]= item.itemArray[14]item.itemArray[4] = dt1item.itemArray[8] = dt2item.itemArray[12]= dt3item.itemArray[9] = dt6item.itemArray[13]= dt7item.itemArray[14]= dt11}function d_2_l(mode){if(mode === "end"){//先左右，再对角线r_2_l()u_2_l()}if(mode === "start"){//先对角线，再左右u_2_l()r_2_l()}}

基于以上两个算法，合并时只考虑一个方向上一行中两两相邻方块就可以了

    /***************************合并***********************/function add(){var i=0for(i;i<4;i++){move_retract()if(item.itemArray[0+i*4]===item.itemArray[1+i*4]){//1=2item.itemArray[0+i*4] = 2*item.itemArray[0+i*4]score += item.itemArray[0+i*4]item.itemArray[1+i*4] = 0if(item.itemArray[2+i*4]===item.itemArray[3+i*4]){//3=4item.itemArray[1+i*4] = 2*item.itemArray[2+i*4]score += item.itemArray[1+i*4]item.itemArray[2+i*4] = 0item.itemArray[3+i*4] = 0}}else if(item.itemArray[1+i*4]===item.itemArray[2+i*4]){//2=3item.itemArray[1+i*4] = 2*item.itemArray[1+i*4]score += item.itemArray[1+i*4]item.itemArray[2+i*4] = item.itemArray[3+i*4]item.itemArray[2+i*4] = 0}else if(item.itemArray[2+i*4]===item.itemArray[3+i*4]){//3=4item.itemArray[2+i*4] = 2*item.itemArray[2+i*4]score += item.itemArray[2+i*4]item.itemArray[3+i*4] = 0}else{score += 0}move_retract()}}

2.随机方块生成

    /******************在空闲位置随机产生方块******************/property var freeArray:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]property var rand_posproperty var rand_numfunction random_rec(){var zero = 0for(var i=0;i<16;i++){//寻找空闲位if(item.itemArray[i] === 0){freeArray[zero] = izero++}}if(zero !== 0){//仍有空位rand_pos = Math.floor(Math.random()*zero)console.log("rand_pos:",rand_pos+1)rand_num = Math.pow(2,Math.floor(Math.random()*2)+1)item.itemArray[freeArray[rand_pos]] = rand_numconsole.log("rand_num:",rand_num)freeArray={}}else//无空位，退出{console.error("game over")console.error(score)//提示分数，刷新纪录，重新开始max_number.text = score//fina.visible = true}}

这个写了没几个小时，细节没怎么扣，分数统计懒得写了，毕竟不是做项目，但重要逻辑已实现，仅作为QML学习

【QML】分享一个纯QML实现的2048小游戏相关推荐

分享一个C语言矿井逃生迷宫小游戏【附源码】
用C语言写的一个迷宫小游戏,游戏玩法是通过鼠标控制帽子上的灯走出迷宫 // 定义常量 #define PI 3.141592653589 // 圆周率 #define UNIT_GROUND 0 // ...
分享一个最近很火的前端小游戏
作者前些时间看到一个找牛的小游戏,大概就是点击画面会发出动物叫声,根据声音大小来判断点击位置与牛的位置距离,以此来寻找隐藏的牛(点击到牛),于是作者将其复刻(框架VUE) 接下来是源代码 <te ...
分享一个谷歌浏览器在断网下的小游戏
1.前言平时我们如果看到这个页面心情一定会可不开心对吧,因为没网了呀. TIM截图20181016091344.png 但是不知道发现没有, 未连接到互联网几个字上,有一只可爱的小恐龙,咱们按下空格 ...
bash shell实现2048小游戏详解
目录前言重要变量功能函数退出处理 print_board generate_piece push_pieces apply_push check_moves key_react save_ga ...
分享一个纯css灯笼
分享一个纯css灯笼,各位大佬转载请注明出处!!! *{margin: 0;padding: 0;box-sizing: border-box;}body{background: #000;}.lan ...
一个简单的2048小游戏
2048小游戏的核心是:通过控制键盘上的"上"."下"."左"."右"键来实现数字的移动.相加.以及生成新的数字. 上图 ...
安装Docker，在本机上跑一个‘2048’小游戏（脉冲云在线体验）
安装Docker,在本机上跑一个'2048'小游戏脉冲云–让软件开发效率提升十倍.在线免费体验下面的步骤是在本机上运行的,也可以免费在脉冲云官网上部署一个在线的'2048'小游戏体验一下. 1 ...
linux安装2048游戏,如何在CentOS上安装一个2048小游戏
如何在centos上安装一个2048小游戏最近在学习CentOS系统,就琢磨着玩点什么,然后我看到有人在玩2048小游戏,所有我就在想,为啥不装一个2048小游戏搞一下嘞,于是乎,我就开始工作啦由 ...
分享一个python采集中国福利彩票的小代码
分享一个python采集中国福利彩票的小代码分享一个python采集中国福利彩票的小代码能采集双色球,七乐彩,3D彩票任意一段时间的开奖号码,根据需求取消请求头注释,就能采集数据.(初学者请勿评价 ...