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

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


5 k, V" H4 S/ N: `$ |来发帖子之前，我看了一下，论坛里面已经有几位大佬发了帖子，效果杠杠的，一个界面做得好好看的，和手机版有的一比，一个还实现了软件开发人员说暂时不支持触屏滑动的功能。都是大佬啊，套路玩得都很6。对比之下，我这个效果确实...（接地气，够平民，哈哈哈，自己调侃一下。）
仿真界面的图片：
1 G$ `& W. c: J0 J2 B

0 p4 `- W  z9 B. v! R( t* m一个实际上机拍摄画面，还是优酷视频链接，因为大小超过了附件的大小：
开发板实际运行效果

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

9 \2 V5 o8 L  V
1 p& F: H, q- |# G/ V: A. |/ @- l
/ A9 P; v& ]! s) c7 a! a7 a


2.main.js的编辑我主要写了如下几个函数，我写的这个3*3逻辑比较简单，基本都能看懂，很适合想自己学习的。
refresh_2048()    负责刷新屏幕数据，
. F, g* \+ h: {# J( E2 h9 \check_left_2048(n)   负责判断能否往某一方面移动，n=1左,n=2右,n=3上,n=4下
move_left_2048(n)   负责执行某一方向的的合拼移动操作，n=1左,n=2右,n=3上,n=4下
. M3 Z8 ~  ^9 [5 W# wnew_num(e)   负责在空闲的位置随机选取一个位置插入一个2或者4
; F" Z2 H6 ]  v; _+ c  X0 k0 ]
main.js代码如下：
& [5 [0 U' t% I3 @( ?

1. 
   2 F/ S4 w- l- E3 s' t0 ~! D1 z
2. num_2048 = [0,0,0,0,0,0,0,0,0];
   
3. null_num_arr=[0,0,0,0,0,0,0,0,0];
   4 }7 {( f% x. {- R- e
4. score=0;
   ( i" [- a0 R$ Y% M/ a6 u
5. 
   
6. function random(n, m) {
   * v! n8 ?  G* N# {& F
7.     return Math.round(Math.random() * (m+1 - n) + n);
   
8. }
   
9. 
   4 k& D& F2 x/ l, M2 b5 q
10. 
    
11. function clear_2048(){
    * z2 P3 S4 J; R* l  ]' R' ]
12.         num_2048 = [0,0,0,0,0,0,0,0,0];
    
13.         refresh_2048();
    
14. }
    
15. 
    $ l7 Z0 h: `' B  H
16. function clear2_2048(){
    & h5 X' d! Z! D7 }
17.         null_num_arr = [0,0,0,0,0,0,0,0,0];
    8 L8 w7 m6 Q$ M0 O7 |' I
18. }
    
19. 
    
20. 
    
21. function check_2048(){
      V, J, c9 B7 K! z8 B- {3 Z' w! c- b
22.         null_num=0;
    0 D$ T7 i* R4 h7 F) k; Z
23.         clear2_2048();
    + c4 R! A0 ?) a4 L: `8 ~% e
24.         for(i=0;i<9;i++){
    5 [* |( d$ E+ S4 z: G1 j# F6 y' r
25.         if(num_2048[i]==0){
      t4 M  `" `3 ]
26.         null_num_arr[null_num]=i;
    
27.         null_num++;
    8 ~; B; ~4 ?: O1 [& m( I
28.         }
    ) \( p% R) D7 O
29.         }
    
30.         return null_num;
    
31. }
    ! C- i2 A# J* c5 R* d( C3 q- T
32. 
    & k" s6 _- O( R+ ~
33. function check_left_2048(n){
    
34. if(n==1){
    ; p/ q$ M' F' J( r& t+ k
35.         v0=0;v1=1;v2=2;
    
36. }
    
37. if(n==2){
    2 Q6 R9 x( T  r' \8 K, @. q
38.         v0=2;v1=1;v2=0;
    
39. }
    # s- u5 A/ A8 u: ?6 j$ o, D9 H
40. if(n==3){
    
41.         v0=0;v1=3;v2=6;
    
42. }
    # h$ R4 p& N6 M' D! }/ c
43. if(n==4){
    * _+ U8 W9 u/ `; w) M5 o9 U1 D6 @
44.         v0=6;v1=3;v2=0;
    0 g7 r" c* d7 j& A
45. }
    3 l- X# q# b/ _" Y* z8 }$ Y2 P9 t
46.         for(i=0;i<3;i++){
    + Y  v2 u7 N0 ^$ p6 f0 b
47.         if(n==1||n==2){
    . C4 x% J9 [  w
48.                 j=i*3;
    9 R4 P  ]  V2 D) W
49.                 }else{
    $ X0 f: o% h6 |3 |
50.                 j=i;
    3 a/ G! t. x* e5 G  ]5 e
51.                 }
    + B; E1 i: E" a: _' @; t2 M" P; h
52.         if((num_2048[j+v2]!=0)&&(num_2048[j+v0]==0||num_2048[j+v1]==0)){
    3 h" P! q7 S6 n6 Y0 K' _  w
53.         return 1;
    
54.         }
    
55.         if((num_2048[j+v1]!=0)&&(num_2048[j+v0]==0)){
    6 t& v- h# O- A2 x
56.         return 1;
    
57.         }
    + ^9 K0 `4 A: B- [* d& _: m
58.         if((num_2048[j+v1]!=0)&&((num_2048[j+v1]==num_2048[j+v0])||(num_2048[j+v1]==num_2048[j+v2]))){
    / M/ b) s+ r$ y1 Q2 P9 o1 s
59.         return 1;
    
60.         }
    : K% s2 d& D4 O. _, s. w; N& O* Q
61. 
    
62.         }
    & C2 v; Y7 J0 F
63.         return 0;
    3 `6 n5 {% ~" l9 t6 O: |0 X% ?
64. 
    9 f( @7 u: J% d
65. }
    
66. 
    
67. function move_left_2048(n){
    : g; G" C, n& [# f( s
68. if(n==1){
    
69.         v0=0;v1=1;v2=2;
    : L5 P6 N9 R2 ^* C
70. }
    ( O% |2 ?: c8 N! Z& U* B
71. if(n==2){
    
72.         v0=2;v1=1;v2=0;
    
73. }
    5 H1 L, g7 b8 ?* ~. k1 L
74. if(n==3){
    
75.         v0=0;v1=3;v2=6;
    
76. }
    3 C& f5 `( G- Y5 V3 H8 e# c$ \
77. if(n==4){
    
78.         v0=6;v1=3;v2=0;
    
79. }
    
80.         for(i=0;i<3;i++){
    2 f$ f+ U1 D4 q9 C: H* g
81.         if(n==1||n==2){
    5 Y6 h; W% r; H" X+ q; b0 J$ F
82.                 j=i*3;
    
83.                 }else{
    & U% }" _7 T( t
84.                 j=i;
    
85.                 }
    
86.         if((num_2048[j+v1])==(num_2048[j+v0])){
    
87.         num_2048[j+v0]=num_2048[j+v1]+num_2048[j+v0];
    
88.         num_2048[j+v1]=num_2048[j+v2];
    
89.         num_2048[j+v2]=0;
    ' V) \4 A7 U$ A1 C: |
90.         score=score+num_2048[j+v0];
    # l( b5 }0 ^6 v
91.         }
    7 `+ @( _3 M* R4 V8 g2 K0 s
92.         
    9 v6 e1 C; G9 ?1 [% ~
93.         if((num_2048[j+v1])==(num_2048[j+v2])){
    - i: j+ ?  `2 T) n
94.         num_2048[j+v1]=num_2048[j+v1]+num_2048[j+v2];
    7 c% {  G0 q) |7 M
95.         num_2048[j+v2]=0;
    
96.         score=score+num_2048[j+v1];
    ) s) y2 l% w4 S0 m+ K4 a
97.         }
    % [' A$ W% w& x6 P
98.         
    # E, N) G7 g3 ]+ x* g
99.         if((num_2048[j+v0]==num_2048[j+v2])&&(num_2048[j+v1]==0)){
    ! e5 @; \# j# j5 H3 y8 U! h
100.         num_2048[j+v0]=num_2048[j+v0]+num_2048[j+v2];
     
101.         num_2048[j+v1]=0;
     , |0 R( T$ L% q. D$ S% F
102.         num_2048[j+v2]=0;
     ( p+ V1 K3 D% V9 {% l
103.         score=score+num_2048[j+v0];
       O: p) c7 P/ S, B  v( k1 {( i
104.         }
     6 A$ V+ V& c" w9 F
105.         
     ! R0 E# L8 [, e& K* Y1 d7 N
106.         if(num_2048[j+v1]==0){
     9 w5 h( q& X: I! X; V; J4 ?
107.         num_2048[j+v1]=num_2048[j+v2];
     ' a* d2 [1 F. H9 p' ?4 ~7 S' V# J+ g
108.         num_2048[j+v2]=0;
     7 Z. e. t1 N3 ~$ t9 F6 o3 i
109.         }
       `4 v* K, E( V
110.         
     
111.         if(num_2048[j+v0]==0){
     
112.         num_2048[j+v0]=num_2048[j+v1];
     
113.         num_2048[j+v1]=num_2048[j+v2];
     # ]( m3 \! Z4 P5 g0 x1 t2 y* t$ q* t
114.         num_2048[j+v2]=0;
     ; l; P( m6 s' Z: K3 M7 Z
115.         }
     
116.         }
     3 T/ M, W4 _7 W" ^) `
117.         
     
118. }
     & q# g) Y8 N; Y7 f7 k
119. 
     
120. function refresh_2048(){
     
121. 
     % D- Z& g& u4 x  o& D
122. if(num_2048[0]!=0)
     
123.         page.setData ({num1:{value :num_2048[0],refresh:true}});
     , U% O7 T$ C6 S% _
124.         else page.setData ({num1:{value :"",refresh:true}});
       ^5 g' L8 n$ @1 p$ Z) s" S
125. if(num_2048[1]!=0)
     % L3 z! V1 G% r! y, O
126.         page.setData ({num2:{value :num_2048[1],refresh:true}});
     
127.         else page.setData ({num2:{value :"",refresh:true}});
     
128. if(num_2048[2]!=0)
     
129.         page.setData ({num3:{value :num_2048[2],refresh:true}});
     * w9 e' y0 M9 J
130.         else page.setData ({num3:{value :"",refresh:true}});
     + a! B7 H- T4 K
131. 
     * @( o* J( N) g1 B0 R
132. if(num_2048[3]!=0)
     
133.         page.setData ({num4:{value :num_2048[3],refresh:true}});
     + q1 i9 d0 Y$ B, D
134.         else page.setData ({num4:{value :"",refresh:true}});
     
135. if(num_2048[4]!=0)
     
136.         page.setData ({num5:{value :num_2048[4],refresh:true}});
     
137.         else page.setData ({num5:{value :"",refresh:true}});
     
138. if(num_2048[5]!=0)
     
139.         page.setData ({num6:{value :num_2048[5],refresh:true}});
     
140.         else page.setData ({num6:{value :"",refresh:true}});
     
141.         
     
142. if(num_2048[6]!=0)
     
143.         page.setData ({num7:{value :num_2048[6],refresh:true}});
     # l/ S8 {9 B6 T7 d7 B- m! G
144.         else page.setData ({num7:{value :"",refresh:true}});
     ; }8 C" ]& T, }3 a0 a6 q# h( ~* y8 z
145. if(num_2048[7]!=0)
     6 l( }$ V2 K! ~) v
146.         page.setData ({num8:{value :num_2048[7],refresh:true}});
     
147.         else page.setData ({num8:{value :"",refresh:true}});
     
148. if(num_2048[8]!=0)
     + o. w$ L5 ]2 G. W- C+ b# P, A
149.         page.setData ({num9:{value :num_2048[8],refresh:true}});
     % T- k7 T, t2 }1 D
150.         else page.setData ({num9:{value :"",refresh:true}});
     
151.         
       w) e/ y+ J# a2 Q+ w" ^7 U- X9 B9 I, _1 d
152. if((!check_2048())&&(!check_left_2048(1))&&(!check_left_2048(2))&&(!check_left_2048(3))&&(!check_left_2048(4))){
     
153. page.setData ({label2:{value :"end!",refresh:true}});
       y- O' I% m2 E2 \! l3 J3 {2 p
154. }else{
     
155. page.setData ({label2:{value :"score:",refresh:true}});
     & F6 C) V7 O$ \* L# X: ~0 g
156. }
     
157. page.setData ({num10:{value :score,refresh:true}});
     & e" o3 B4 U7 G7 b& }# B3 F% O1 s' K
158. 
     ! U1 a' H3 x. F
159. }
     
160. 
     
161. function new_num(e){
     ( t, n: L; }: y* r- W0 \) h
162.         a=check_2048();
     
163.         if(a){
     
164.         b=random(20,100);
     
165.         b=b%a;
     " M# G5 R* V9 i0 b
166.         c=null_num_arr[b];
     ) U1 ?& ?- C2 X0 o$ J
167.         b=random(20,30);
     " j& R" z9 J# E  W
168.         num_2048[c]=(b%2+1)*2;
     
169.         //console.log(c,num_2048[c]);
     
170.         }
     7 y: _' @$ z9 P% o
171.         refresh_2048();
     / p8 z$ c, p# _+ D
172. }
       o+ h- c( ?  p8 V4 {
173. 
     
174. var page = {
     
175. 
     & ^  Q; {6 j2 f9 d
176. startf: function (e) {
     3 G" t. D5 I* H& I
177.         clear_2048();
     ; ~0 X2 ^/ ]6 u) j5 E+ S# O
178.         score=0;
     4 b: Q/ {$ ?- g$ q  x* `: R1 B/ q! _
179.         new_num();
     
180.         new_num();
     
181. }
     
182. 
     ( E9 r; J0 O' r4 D
183. ,
     # x' ?+ m4 ]0 }9 R  X4 q# }
184. 
     6 c' w; Z$ \. k9 h: F
185. 
     1 {: b& |+ x- G, Y* y
186. leftf: function (e) {
     
187.         if(check_left_2048(1)){
     
188.         move_left_2048(1);
     1 P8 s5 `5 V% X+ g
189.         
     $ V( z: t2 s: b) U
190.         if(check_2048()){
     
191.         new_num(e);
     " d8 I  I! s& n: `, f
192.         }
     + B1 M. d- r$ E% D3 g# Z5 [
193.         refresh_2048();
     9 K: ^2 P1 k1 N
194.         
     
195.         }
     
196. }
     9 v5 ^) d! C& O+ R  o
197. 
     3 f$ C' X$ |5 h' p, g9 E+ l/ Z' E
198. ,
     7 D# D3 r" n1 _+ ?9 Y  F6 n$ m
199. 
     
200. 
     
201. rightf: function (e) {
     4 d) ^0 z* ~' b7 |. j  D7 s9 c
202.         if(check_left_2048(2)){
     ' \$ M! n: \7 u, K: p; @
203.         move_left_2048(2);
     
204.         
     
205.         if(check_2048()){
     * A* L$ q- l: n. q7 ^2 J3 k/ ^6 ~
206.         new_num(e);
     : X* q- V" A4 Q& Y; N" s$ D
207.         }
     , l; T8 w9 v1 \
208.         refresh_2048();
     " P& W4 P  ?9 K% Z! g4 K
209.         }
     - r* W9 j, L/ ^" ^
210. }
     
211. 
     
212. ,
     
213. 
     
214. 
     
215. upf: function (e) {
     8 T' N9 y, j6 y9 y& n$ O6 G+ }
216. if(check_left_2048(3)){
     
217.         move_left_2048(3);
     
218.         
     
219.         if(check_2048()){
     
220.         new_num(e);
     
221.         }
     # O+ Z4 b1 U- Z  |8 [. `3 n1 H
222.         refresh_2048();
     7 M$ ?9 l5 w; k' V
223.         }
     
224. 
     4 y# O2 J& N$ C9 ?' Y
225. }
     1 i+ v6 P9 ]# l6 e+ {, }
226. ,
     ; E0 v) J( P0 C% U# V
227. 
     ( b# U/ ~0 R9 W, h% {
228. 
     
229. downf: function (e) {
     
230.         if(check_left_2048(4)){
     : u+ X3 p9 v* y
231.         move_left_2048(4);
     0 X2 e7 O  @' F- H: P
232.         
     
233.         if(check_2048()){
     
234.         new_num(e);
     , E4 [& x- T3 C. `
235.         }
     
236.         refresh_2048();
     
237.         }
     % c- h7 \+ N: N! p) F, \  J) t) q7 y
238. }
     5 t: s  X' q- R
239. 
     4 r0 `2 D5 q8 ?8 D( S% @, `
240. 
     # W% v0 k7 Y) z. M" ^" {! j
241. 
     
242. };
     . T* P: F+ Y( z, p  T7 z
243. 
     : Z* D# e7 ?2 j5 Y" n+ J2 u  p) J0 {
244. Page(page);
     8 h6 V2 y4 A& K

复制代码

  t: G3 p: T* ^5 U3 m  o6 m3.总结
$ ^$ o7 @3 M6 ?* w& i0 K/ H/ _( ^接触PersimmonUI已经有一小段时间了，期间完成了一个20W年薪广告，一个2048小游戏，深深感到PersimmonUI的强大。特别是通过js去操作屏幕逻辑这个真的很好用，就像做网页一样简单。使得我们可以使用rt1052完成一些酷炫的效果，当然我这个效果很一般，只要是个人美工水平太low了，这个锅甩不掉。哈哈哈，下面附帖我前面提到两个优秀大佬做的：
界面牛皮的2048
1 F; G5 ^3 o9 X- `- F, y0 a& e/ c; `带滑动的2048
4 |: ~  @2 @" b: e# t4 ~

附件：完整工程代码[url=]game2048.zip[/url]
. x1 T: A0 z  R' P* ?% k8 r8 _9 S

) {! U) j3 ?0 Z7 y" S
meetwit  2018年9月3日21:32:09

; v. V' c: i4 w

Git学着用起来，对你将来从业绝对有好处

从那个能下载资料和PersimmonUI builder

DaZhou 发表于 2018-9-4 07:10
1 h9 g, j- Y5 a' d/ E! x7 U* ~5 {Git学着用起来，对你将来从业绝对有好处

get，谢谢大佬的指点

太厉害了，很酷啊