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

发布于 2018-09-03 21:40:14
    本帖最后由 meetwit 于 2018-9-3 21:40 编辑


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

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

一个实际上机拍摄画面,还是优酷视频链接,因为大小超过了附件的大小:
[url=]开发板实际运行效果[/url]

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


截图00.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];
}


function check_2048(){
null_num=0;
clear2_2048();
for(i=0;i<9;i++){
if(num_2048
    ==0){
    null_num_arr[null_num]=i;
    null_num++;
    }
    }
    return null_num;
    }

    function check_left_2048(n){
    if(n==1){
    v0=0;v1=1;v2=2;
    }
    if(n==2){
    v0=2;v1=1;v2=0;
    }
    if(n==3){
    v0=0;v1=3;v2=6;
    }
    if(n==4){
    v0=6;v1=3;v2=0;
    }
    for(i=0;i<3;i++){
    if(n==1||n==2){
    j=i*3;
    }else{
    j=i;
    }
    if((num_2048[j+v2]!=0)&&(num_2048[j+v0]==0||num_2048[j+v1]==0)){
    return 1;
    }
    if((num_2048[j+v1]!=0)&&(num_2048[j+v0]==0)){
    return 1;
    }
    if((num_2048[j+v1]!=0)&&((num_2048[j+v1]==num_2048[j+v0])||(num_2048[j+v1]==num_2048[j+v2]))){
    return 1;
    }

    }
    return 0;

    }

    function move_left_2048(n){
    if(n==1){
    v0=0;v1=1;v2=2;
    }
    if(n==2){
    v0=2;v1=1;v2=0;
    }
    if(n==3){
    v0=0;v1=3;v2=6;
    }
    if(n==4){
    v0=6;v1=3;v2=0;
    }
    for(i=0;i<3;i++){
    if(n==1||n==2){
    j=i*3;
    }else{
    j=i;
    }
    if((num_2048[j+v1])==(num_2048[j+v0])){
    num_2048[j+v0]=num_2048[j+v1]+num_2048[j+v0];
    num_2048[j+v1]=num_2048[j+v2];
    num_2048[j+v2]=0;
    score=score+num_2048[j+v0];
    }

    if((num_2048[j+v1])==(num_2048[j+v2])){
    num_2048[j+v1]=num_2048[j+v1]+num_2048[j+v2];
    num_2048[j+v2]=0;
    score=score+num_2048[j+v1];
    }

    if((num_2048[j+v0]==num_2048[j+v2])&&(num_2048[j+v1]==0)){
    num_2048[j+v0]=num_2048[j+v0]+num_2048[j+v2];
    num_2048[j+v1]=0;
    num_2048[j+v2]=0;
    score=score+num_2048[j+v0];
    }

    if(num_2048[j+v1]==0){
    num_2048[j+v1]=num_2048[j+v2];
    num_2048[j+v2]=0;
    }

    if(num_2048[j+v0]==0){
    num_2048[j+v0]=num_2048[j+v1];
    num_2048[j+v1]=num_2048[j+v2];
    num_2048[j+v2]=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];
    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
带滑动的2048


附件:完整工程代码[url=]game2048.zip[/url]



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



2048.gif
下载附件[game2048.zip]

查看更多

关注者
0
被浏览
2k
4 个回答
DaZhou
DaZhou 2018-09-04
Git学着用起来,对你将来从业绝对有好处
cylnpy150411
cylnpy150411 2018-09-04
从那个能下载资料和PersimmonUI builder
meetwit
meetwit 2018-09-04
DaZhou 发表于 2018-9-4 07:10
Git学着用起来,对你将来从业绝对有好处


get,谢谢大佬的指点:loveliness:

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友