【PersimmonUI柿饼学习营】+ MeetWit + 2048游戏

发布于 2018-09-03 21:40:14 浏览：3074 订阅该版

* 本帖最后由 meetwit 于 2018-9-3 21:40 编辑 *

这次作业是做一个2048，2048？我只玩过，自己做，还是用单片机来做？没错，真的没有听错，就是做2048游戏。嗯，这就是RT-thread UI强大的地方嘛。虽说按捺不住内心的激动，然而周四周五那两天特别多事情公司有个电路要调试，周五下午写好2048逻辑部分，周末也有点私事。一直到今天周一才简单改一下UI，然后来发帖子。
整体图：
![IMG_20180903_193858.jpg](/uploads/201809/03/213006lu5kl74luuuu5u5w.jpg)![IMG_20180903_193907.jpg](/uploads/201809/03/213010us4usr24p13frsg4.jpg)

来发帖子之前，我看了一下，论坛里面已经有几位大佬发了帖子，效果杠杠的，一个界面做得好好看的，和手机版有的一比，一个还实现了软件开发人员说暂时不支持触屏滑动的功能。都是大佬啊，套路玩得都很6。对比之下，我这个效果确实...（接地气，够平民，哈哈哈，自己调侃一下。）
仿真界面的图片：
![2048.gif](/uploads/201809/03/204729qhh9zvdpa0pkki0r.gif)

一个实际上机拍摄画面，还是优酷视频链接，因为大小超过了附件的大小：
[开发板实际运行效果](https://v.youku.com/v_show/id_XMzgwOTY0ODY2NA==.html?spm=a2h3j.8428770.3416059.1)

实现步骤：
1.如下图，把基本框架建立起来，“game 2048”是一张图片，显示内容可变的都是用label，触发的，比如开始，上下左右都是按键。建立好下面这个界面后，后面都是在main.js里面对游戏的逻辑进行编辑。详细设置查看附件的工程。
我这里做的是一个比较简单的2048，是3*3的，并不是传统的4*4，这里主要是为了方便我们编写逻辑，集中精力做UI界面。

![截图00.bmp](/uploads/201809/03/205227ggw8wwtqxqfuxee1.bmp)

2.main.js的编辑我主要写了如下几个函数，我写的这个3*3逻辑比较简单，基本都能看懂，很适合想自己学习的。
refresh_2048()    负责刷新屏幕数据，
check_left_2048(n)   负责判断能否往某一方面移动，n=1左,n=2右,n=3上,n=4下
move_left_2048(n)   负责执行某一方向的的合拼移动操作，n=1左,n=2右,n=3上,n=4下
new_num(e)   负责在空闲的位置随机选取一个位置插入一个2或者4

main.js代码如下：
```
num_2048 = [0,0,0,0,0,0,0,0,0];
null_num_arr=[0,0,0,0,0,0,0,0,0];
score=0;

function random(n, m) {
    return Math.round(Math.random() * (m+1 - n) + n);
}

function clear_2048(){
        num_2048 = [0,0,0,0,0,0,0,0,0];
        refresh_2048();
}

function clear2_2048(){
        null_num_arr = [0,0,0,0,0,0,0,0,0];
}

}
        return 0;

}

function refresh_2048(){

if(num_2048[0]!=0) 
        page.setData ({num1:{value :num_2048[0],refresh:true}});
        else page.setData ({num1:{value :"",refresh:true}});
if(num_2048[1]!=0)
        page.setData ({num2:{value :num_2048[1],refresh:true}});
        else page.setData ({num2:{value :"",refresh:true}});
if(num_2048[2]!=0)
        page.setData ({num3:{value :num_2048[2],refresh:true}});
        else page.setData ({num3:{value :"",refresh:true}});

if(num_2048[3]!=0)
        page.setData ({num4:{value :num_2048[3],refresh:true}});
        else page.setData ({num4:{value :"",refresh:true}});
if(num_2048[4]!=0)
        page.setData ({num5:{value :num_2048[4],refresh:true}});
        else page.setData ({num5:{value :"",refresh:true}});
if(num_2048[5]!=0)
        page.setData ({num6:{value :num_2048[5],refresh:true}});
        else page.setData ({num6:{value :"",refresh:true}});
        
if(num_2048[6]!=0)
        page.setData ({num7:{value :num_2048[6],refresh:true}});
        else page.setData ({num7:{value :"",refresh:true}});
if(num_2048[7]!=0)
        page.setData ({num8:{value :num_2048[7],refresh:true}});
        else page.setData ({num8:{value :"",refresh:true}});
if(num_2048[8]!=0)
        page.setData ({num9:{value :num_2048[8],refresh:true}});
        else page.setData ({num9:{value :"",refresh:true}});
        
if((!check_2048())&&(!check_left_2048(1))&&(!check_left_2048(2))&&(!check_left_2048(3))&&(!check_left_2048(4))){
page.setData ({label2:{value :"end!",refresh:true}});
}else{
page.setData ({label2:{value :"score:",refresh:true}});
}
 page.setData ({num10:{value :score,refresh:true}});
 
}

function new_num(e){
        a=check_2048();
        if(a){
        b=random(20,100);
        b=b%a;
        c=null_num_arr**;
        b=random(20,30);
        num_2048[c]=(b%2+1)*2;
        //console.log(c,num_2048[c]);
        }
        refresh_2048();
}

var page = {

startf: function (e) {
        clear_2048();
        score=0;
        new_num();
        new_num();
}

,

leftf: function (e) {
        if(check_left_2048(1)){
        move_left_2048(1);
        
        if(check_2048()){
        new_num(e);
        }
        refresh_2048();
        
        }
}

,

rightf: function (e) {
        if(check_left_2048(2)){
        move_left_2048(2);
        
        if(check_2048()){
        new_num(e);
        }
        refresh_2048();
        }
}

,

upf: function (e) {
if(check_left_2048(3)){
        move_left_2048(3);
        
        if(check_2048()){
        new_num(e);
        }
        refresh_2048();
        }

}
,

downf: function (e) {
        if(check_left_2048(4)){
        move_left_2048(4);
        
        if(check_2048()){
        new_num(e);
        }
        refresh_2048();
        }
}

};

Page(page);
```

3.总结
接触PersimmonUI已经有一小段时间了，期间完成了一个20W年薪广告，一个2048小游戏，深深感到PersimmonUI的强大。特别是通过js去操作屏幕逻辑这个真的很好用，就像做网页一样简单。使得我们可以使用rt1052完成一些酷炫的效果，当然我这个效果很一般，只要是个人美工水平太low了，这个锅甩不掉。哈哈哈，下面附帖我前面提到两个优秀大佬做的：
[界面牛皮的2048](https://club.rt-thread.org/ask/question/7923.html)
[带滑动的2048](https://club.rt-thread.org/ask/question/7924.html)

附件：完整工程代码[game2048.zip]()

meetwit  2018年9月3日21:32:09

![2048.gif](https://oss-club.rt-thread.org/uploads/201809/03/204758yco6j5oilc8ixhi1.gif)

下载附件 [game2048.zip](https://oss-club.rt-thread.org/uploads/201809/03/212713oztqgnn42zz9g9an.zip)