• 【小程序】实现经典2048小游戏

    概述

    经典小游戏2048，2048小游戏对于逻辑要求还是很有技术含量的，有兴趣的可以看看

    详细

    以前学习时写的小游戏2048，技术含量还是不错的，有兴趣的可以看看

    2048已经封装好了，在主页面直接引入文件可以直接调用

    演示图：

    1625056573387.gif

    调用wxml文件

    1. <view class="container">
    2. <view class="game-body">
    3. <loading hidden="{{hidden}}">
    4. 加载中...
    5. </loading>
    6. <view class="heading">
    7. <text class="title">2048</text>
    8. <view class="scores-container">
    9. <view class="score-container">{{score}}</view>
    10. <view class="best-container">{{highscore}}</view>
    11. </view>
    12. </view>
    13. <view class="game-container">
    14. <view class="game-message game-{{over ? (win ? 'won' : 'over') : ''}}">
    15. <text class="over-msg">{{overMsg}}</text>
    16. <view class="lower">
    17. <text class="retry-button" bindtap="restart">再试一次</text>
    18. </view>
    19. </view>
    20. <view class="grid-container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
    21. <view wx:for="{{grids}}" wx:for-index="rowIdx" wx:for-item="row" class="grid-row">
    22. <view wx:for="{{row}}" wx:for-index="colIdx" wx:for-item="cell" class="grid-cell">
    23. <view class="tile tile-{{cell.value}}">
    24. <view wx:if="{{cell}}" class="tile-inner">
    25. {{cell.value}}
    26. </view>
    27. </view>
    28. </view>
    29. </view>
    30. </view>
    31. </view>
    32. <view class="above-game" style="margin-top:40rpx;display:flex;flex-flow: column;align-items: center;">
    33. <text class="restart-button" bindtap="restart" style="margin-top:40rpx">重新开始</text>
    34. </view>
    35. </view>
    36. </view>

    调用css

    1. .container {
    2. margin: 0;
    3. padding: 20px 0;
    4. background: #000;
    5. color: #FFF;
    6. font-family: "Helvetica Neue", Arial, sans-serif;
    7. font-size: 18px;
    8. height: 100vh;
    9. }
    10.  
    11. .heading:after {
    12. content: "";
    13. display: block;
    14. clear: both;
    15. }
    16. .title {
    17. font-size: 80px;
    18. font-weight: bold;
    19. margin: 0;
    20. display: block;
    21. float: left;
    22. }
    23.  
    24. .scores-container {
    25. float: right;
    26. text-align: right;
    27. }
    28. .score-container, .best-container {
    29. position: relative;
    30. display: inline-block;
    31. background: #bbada0;
    32. padding: 15px 25px;
    33. font-size: 25px;
    34. height: 25px;
    35. line-height: 47px;
    36. font-weight: bold;
    37. border-radius: 3px;
    38. color: white;
    39. text-align: center;
    40. margin: 8px 0 0 8px;
    41. }
    42. .score-container:after, .best-container:after {
    43. position: absolute;
    44. width: 100%;
    45. top: 10px;
    46. left: 0;
    47. text-transform: uppercase;
    48. font-size: 13px;
    49. line-height: 13px;
    50. text-align: center;
    51. color: #eee4da;
    52. }
    53. .score-container .score-addition, .best-container .score-addition {
    54. position: absolute;
    55. right: 30px;
    56. color: red;
    57. font-size: 25px;
    58. line-height: 25px;
    59. font-weight: bold;
    60. color: rgba(119, 110, 101, 0.9);
    61. z-index: 100;
    62. }
    63. .score-container:after {
    64. content: "Score";
    65. }
    66. .best-container:after {
    67. content: "Best";
    68. }
    69. p {
    70. margin-top: 0;
    71. margin-bottom: 10px;
    72. line-height: 1.65;
    73. }
    74. a {
    75. color: #776e65;
    76. font-weight: bold;
    77. text-decoration: underline;
    78. cursor: pointer;
    79. }
    80. strong.important {
    81. text-transform: uppercase;
    82. }
    83. hr {
    84. border: none;
    85. border-bottom: 1px solid #d8d4d0;
    86. margin-top: 20px;
    87. margin-bottom: 30px;
    88. }
    89.  
    90. .game-container {
    91. margin-top: 40px;
    92. position: relative;
    93. padding: 15px;
    94. cursor: default;
    95. -webkit-touch-callout: none;
    96. -ms-touch-callout: none;
    97. -webkit-user-select: none;
    98. -moz-user-select: none;
    99. -ms-user-select: none;
    100. -ms-touch-action: none;
    101. touch-action: none;
    102. background: #bbada0;
    103. border-radius: 6px;
    104. width: 500px;
    105. height: 500px;
    106. -webkit-box-sizing: border-box;
    107. -moz-box-sizing: border-box;
    108. box-sizing: border-box;
    109. }
    110. .game-container .game-message {
    111. /*display: none;*/
    112. position: absolute;
    113. top: 0;
    114. right: 0;
    115. bottom: 0;
    116. left: 0;
    117. background: rgba(238, 228, 218, 0.5);
    118. z-index: 100;
    119. text-align: center;
    120. }
    121. .game-container .game-message p {
    122. font-size: 60px;
    123. font-weight: bold;
    124. height: 60px;
    125. line-height: 60px;
    126. margin-top: 222px;
    127. }
    128. .game-container .game-message .lower {
    129. display: block;
    130. margin-top: 59px;
    131. }
    132. .game-container .game-message a {
    133. display: inline-block;
    134. background: #8f7a66;
    135. border-radius: 3px;
    136. padding: 0 20px;
    137. text-decoration: none;
    138. color: #f9f6f2;
    139. height: 40px;
    140. line-height: 42px;
    141. margin-left: 9px;
    142. }
    143. .game-container .game-message .keep-playing-button {
    144. display: none;
    145. }
    146. .game-container .game-message.game-won {
    147. background: rgba(237, 194, 46, 0.5);
    148. color: #f9f6f2;
    149. }
    150. .game-container .game-message.game-won .keep-playing-button {
    151. display: inline-block;
    152. }
    153. .game-container .game-message.game-won, .game-container .game-message.game-over {
    154. display: block;
    155. }
    156. .grid-container {
    157. position: absolute;
    158. z-index: 1;
    159. }
    160. .grid-row {
    161. margin-bottom: 15px;
    162. }
    163. .grid-row:last-child {
    164. margin-bottom: 0;
    165. }
    166. .grid-row:after {
    167. content: "";
    168. display: block;
    169. clear: both;
    170. }
    171. .grid-cell {
    172. width: 106.25px;
    173. height: 106.25px;
    174. margin-right: 15px;
    175. float: left;
    176. border-radius: 3px;
    177. background: rgba(238, 228, 218, 0.35);
    178. }
    179. .grid-cell:last-child {
    180. margin-right: 0;
    181. }
    182. .tile-container {
    183. position: absolute;
    184. z-index: 2;
    185. }
    186. .tile, .tile .tile-inner {
    187. width: 107px;
    188. height: 107px;
    189. line-height: 107px;
    190. }
    191. .tile.tile-position-1-1 {
    192. -webkit-transform: translate(0px, 0px);
    193. -moz-transform: translate(0px, 0px);
    194. -ms-transform: translate(0px, 0px);
    195. transform: translate(0px, 0px);
    196. }
    197. .tile.tile-position-1-2 {
    198. -webkit-transform: translate(0px, 121px);
    199. -moz-transform: translate(0px, 121px);
    200. -ms-transform: translate(0px, 121px);
    201. transform: translate(0px, 121px);
    202. }
    203. .tile.tile-position-1-3 {
    204. -webkit-transform: translate(0px, 242px);
    205. -moz-transform: translate(0px, 242px);
    206. -ms-transform: translate(0px, 242px);
    207. transform: translate(0px, 242px);
    208. }
    209. .tile.tile-position-1-4 {
    210. -webkit-transform: translate(0px, 363px);
    211. -moz-transform: translate(0px, 363px);
    212. -ms-transform: translate(0px, 363px);
    213. transform: translate(0px, 363px);
    214. }
    215. .tile.tile-position-2-1 {
    216. -webkit-transform: translate(121px, 0px);
    217. -moz-transform: translate(121px, 0px);
    218. -ms-transform: translate(121px, 0px);
    219. transform: translate(121px, 0px);
    220. }
    221. .tile.tile-position-2-2 {
    222. -webkit-transform: translate(121px, 121px);
    223. -moz-transform: translate(121px, 121px);
    224. -ms-transform: translate(121px, 121px);
    225. transform: translate(121px, 121px);
    226. }
    227. .tile.tile-position-2-3 {
    228. -webkit-transform: translate(121px, 242px);
    229. -moz-transform: translate(121px, 242px);
    230. -ms-transform: translate(121px, 242px);
    231. transform: translate(121px, 242px);
    232. }
    233. .tile.tile-position-2-4 {
    234. -webkit-transform: translate(121px, 363px);
    235. -moz-transform: translate(121px, 363px);
    236. -ms-transform: translate(121px, 363px);
    237. transform: translate(121px, 363px);
    238. }
    239. .tile.tile-position-3-1 {
    240. -webkit-transform: translate(242px, 0px);
    241. -moz-transform: translate(242px, 0px);
    242. -ms-transform: translate(242px, 0px);
    243. transform: translate(242px, 0px);
    244. }
    245. .tile.tile-position-3-2 {
    246. -webkit-transform: translate(242px, 121px);
    247. -moz-transform: translate(242px, 121px);
    248. -ms-transform: translate(242px, 121px);
    249. transform: translate(242px, 121px);
    250. }
    251. .tile.tile-position-3-3 {
    252. -webkit-transform: translate(242px, 242px);
    253. -moz-transform: translate(242px, 242px);
    254. -ms-transform: translate(242px, 242px);
    255. transform: translate(242px, 242px);
    256. }
    257. .tile.tile-position-3-4 {
    258. -webkit-transform: translate(242px, 363px);
    259. -moz-transform: translate(242px, 363px);
    260. -ms-transform: translate(242px, 363px);
    261. transform: translate(242px, 363px);
    262. }
    263. .tile.tile-position-4-1 {
    264. -webkit-transform: translate(363px, 0px);
    265. -moz-transform: translate(363px, 0px);
    266. -ms-transform: translate(363px, 0px);
    267. transform: translate(363px, 0px);
    268. }
    269. .tile.tile-position-4-2 {
    270. -webkit-transform: translate(363px, 121px);
    271. -moz-transform: translate(363px, 121px);
    272. -ms-transform: translate(363px, 121px);
    273. transform: translate(363px, 121px);
    274. }
    275. .tile.tile-position-4-3 {
    276. -webkit-transform: translate(363px, 242px);
    277. -moz-transform: translate(363px, 242px);
    278. -ms-transform: translate(363px, 242px);
    279. transform: translate(363px, 242px);
    280. }
    281. .tile.tile-position-4-4 {
    282. -webkit-transform: translate(363px, 363px);
    283. -moz-transform: translate(363px, 363px);
    284. -ms-transform: translate(363px, 363px);
    285. transform: translate(363px, 363px);
    286. }
    287. .tile {
    288. position: absolute;
    289. -webkit-transition: 100ms ease-in-out;
    290. -moz-transition: 100ms ease-in-out;
    291. transition: 100ms ease-in-out;
    292. -webkit-transition-property: -webkit-transform;
    293. -moz-transition-property: -moz-transform;
    294. transition-property: transform;
    295. }
    296. .tile .tile-inner {
    297. border-radius: 3px;
    298. background: #eee4da;
    299. text-align: center;
    300. font-weight: bold;
    301. z-index: 10;
    302. font-size: 55px;
    303. }
    304. .tile.tile-2 .tile-inner {
    305. background: #eee4da;
    306. box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
    307. }
    308. .tile.tile-4 .tile-inner {
    309. background: #ede0c8;
    310. box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
    311. }
    312. .tile.tile-8 .tile-inner {
    313. color: #f9f6f2;
    314. background: #f2b179;
    315. }
    316. .tile.tile-16 .tile-inner {
    317. color: #f9f6f2;
    318. background: #f59563;
    319. }
    320. .tile.tile-32 .tile-inner {
    321. color: #f9f6f2;
    322. background: #f67c5f;
    323. }
    324. .tile.tile-64 .tile-inner {
    325. color: #f9f6f2;
    326. background: #f65e3b;
    327. }
    328. .tile.tile-128 .tile-inner {
    329. color: #f9f6f2;
    330. background: #edcf72;
    331. box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
    332. font-size: 45px;
    333. }
    334. @media screen and (max-width:520px) {
    335. .tile.tile-128 .tile-inner {
    336. font-size: 25px;
    337. }
    338. }
    339. .tile.tile-256 .tile-inner {
    340. color: #f9f6f2;
    341. background: #edcc61;
    342. box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
    343. font-size: 45px;
    344. }
    345. @media screen and (max-width:520px) {
    346. .tile.tile-256 .tile-inner {
    347. font-size: 25px;
    348. }
    349. }
    350. .tile.tile-512 .tile-inner {
    351. color: #f9f6f2;
    352. background: #edc850;
    353. box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
    354. font-size: 45px;
    355. }
    356. @media screen and (max-width:520px) {
    357. .tile.tile-512 .tile-inner {
    358. font-size: 25px;
    359. }
    360. }
    361. .tile.tile-1024 .tile-inner {
    362. color: #f9f6f2;
    363. background: #edc53f;
    364. box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
    365. font-size: 35px;
    366. }
    367. @media screen and (max-width:520px) {
    368. .tile.tile-1024 .tile-inner {
    369. font-size: 15px;
    370. }
    371. }
    372. .tile.tile-2048 .tile-inner {
    373. color: #f9f6f2;
    374. background: #edc22e;
    375. box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
    376. font-size: 35px;
    377. }
    378. @media screen and (max-width:520px) {
    379. .tile.tile-2048 .tile-inner {
    380. font-size: 15px;
    381. }
    382. }
    383. .tile.tile-super .tile-inner {
    384. color: #f9f6f2;
    385. background: #3c3a32;
    386. font-size: 30px;
    387. }
    388. @media screen and (max-width:520px) {
    389. .tile.tile-super .tile-inner {
    390. font-size: 10px;
    391. }
    392. }
    393.  
    394. .tile-merged .tile-inner {
    395. z-index: 20;
    396. }
    397. .above-game:after {
    398. content: "";
    399. display: block;
    400. clear: both;
    401. }
    402. .game-intro {
    403. float: left;
    404. line-height: 42px;
    405. margin-bottom: 0;
    406. }
    407. .restart-button {
    408. display: inline-block;
    409. background: #8f7a66;
    410. border-radius: 3px;
    411. padding: 0 20px;
    412. text-decoration: none;
    413. color: #f9f6f2;
    414. height: 40px;
    415. line-height: 42px;
    416. display: block;
    417. text-align: center;
    418. float: right;
    419. }
    420. .game-explanation {
    421. margin-top: 50px;
    422. }
    423. @media screen and (max-width:520px) {
    424. html, body {
    425. font-size: 15px;
    426. }
    427. body {
    428. margin: 20px 0;
    429. padding: 0 20px;
    430. }
    431. .title {
    432. font-size: 27px;
    433. margin-top: 15px;
    434. }
    435. /*.container {
    436.     width: 280px;
    437.     margin: 0 auto;
    438.   }*/
    439. .score-container, .best-container {
    440. margin-top: 0;
    441. padding: 15px 10px;
    442. min-width: 40px;
    443. }
    444. .heading {
    445. margin-bottom: 10px;
    446. }
    447. .game-intro {
    448. width: 55%;
    449. display: block;
    450. box-sizing: border-box;
    451. line-height: 1.65;
    452. }
    453. .restart-button {
    454. width: 42%;
    455. padding: 0;
    456. display: block;
    457. box-sizing: border-box;
    458. margin-top: 2px;
    459. }
    460. .game-container {
    461. margin-top: 17px;
    462. position: relative;
    463. padding: 10px;
    464. cursor: default;
    465. -webkit-touch-callout: none;
    466. -ms-touch-callout: none;
    467. -webkit-user-select: none;
    468. -moz-user-select: none;
    469. -ms-user-select: none;
    470. -ms-touch-action: none;
    471. touch-action: none;
    472. background: #bbada0;
    473. border-radius: 6px;
    474. width: 280px;
    475. height: 280px;
    476. -webkit-box-sizing: border-box;
    477. -moz-box-sizing: border-box;
    478. box-sizing: border-box;
    479. }
    480. .game-container .game-message {
    481. display: none;
    482. position: absolute;
    483. top: 0;
    484. right: 0;
    485. bottom: 0;
    486. left: 0;
    487. background: rgba(238, 228, 218, 0.5);
    488. z-index: 100;
    489. text-align: center;
    490. }
    491. .game-container .game-message .over-msg {
    492. display: block;
    493. font-size: 30px;
    494. font-weight: bold;
    495. height: 30px;
    496. line-height: 30px;
    497. /*margin-top: 222px;*/
    498. margin-top: 59px;
    499. }
    500. .game-container .game-message .lower {
    501. display: block;
    502. margin-top: 59px;
    503. }
    504. .game-container .game-message .retry-button {
    505. display: inline-block;
    506. background: #8f7a66;
    507. border-radius: 3px;
    508. padding: 0 20px;
    509. text-decoration: none;
    510. color: #f9f6f2;
    511. height: 40px;
    512. line-height: 42px;
    513. margin-left: 9px;
    514. }
    515. .game-container .game-message .keep-playing-button {
    516. display: none;
    517. }
    518. .game-container .game-message.game-won {
    519. background: rgba(237, 194, 46, 0.5);
    520. color: #f9f6f2;
    521. }
    522. .game-container .game-message.game-won .keep-playing-button {
    523. display: inline-block;
    524. }
    525. .game-container .game-message.game-won, .game-container .game-message.game-over {
    526. display: block;
    527. }
    528. .grid-container {
    529. position: absolute;
    530. z-index: 1;
    531. }
    532. .grid-row {
    533. margin-bottom: 10px;
    534. }
    535. .grid-row:last-child {
    536. margin-bottom: 0;
    537. }
    538. .grid-row:after {
    539. content: "";
    540. display: block;
    541. clear: both;
    542. }
    543. .grid-cell {
    544. width: 57.5px;
    545. height: 57.5px;
    546. margin-right: 10px;
    547. float: left;
    548. border-radius: 3px;
    549. background: rgba(238, 228, 218, 0.35);
    550. }
    551. .grid-cell:last-child {
    552. margin-right: 0;
    553. }
    554. .tile, .tile .tile-inner {
    555. width: 58px;
    556. height: 58px;
    557. line-height: 58px;
    558. }
    559. .tile.tile-position-1-1 {
    560. -webkit-transform: translate(0px, 0px);
    561. -moz-transform: translate(0px, 0px);
    562. -ms-transform: translate(0px, 0px);
    563. transform: translate(0px, 0px);
    564. }
    565. .tile.tile-position-1-2 {
    566. -webkit-transform: translate(0px, 67px);
    567. -moz-transform: translate(0px, 67px);
    568. -ms-transform: translate(0px, 67px);
    569. transform: translate(0px, 67px);
    570. }
    571. .tile.tile-position-1-3 {
    572. -webkit-transform: translate(0px, 135px);
    573. -moz-transform: translate(0px, 135px);
    574. -ms-transform: translate(0px, 135px);
    575. transform: translate(0px, 135px);
    576. }
    577. .tile.tile-position-1-4 {
    578. -webkit-transform: translate(0px, 202px);
    579. -moz-transform: translate(0px, 202px);
    580. -ms-transform: translate(0px, 202px);
    581. transform: translate(0px, 202px);
    582. }
    583. .tile.tile-position-2-1 {
    584. -webkit-transform: translate(67px, 0px);
    585. -moz-transform: translate(67px, 0px);
    586. -ms-transform: translate(67px, 0px);
    587. transform: translate(67px, 0px);
    588. }
    589. .tile.tile-position-2-2 {
    590. -webkit-transform: translate(67px, 67px);
    591. -moz-transform: translate(67px, 67px);
    592. -ms-transform: translate(67px, 67px);
    593. transform: translate(67px, 67px);
    594. }
    595. .tile.tile-position-2-3 {
    596. -webkit-transform: translate(67px, 135px);
    597. -moz-transform: translate(67px, 135px);
    598. -ms-transform: translate(67px, 135px);
    599. transform: translate(67px, 135px);
    600. }
    601. .tile.tile-position-2-4 {
    602. -webkit-transform: translate(67px, 202px);
    603. -moz-transform: translate(67px, 202px);
    604. -ms-transform: translate(67px, 202px);
    605. transform: translate(67px, 202px);
    606. }
    607. .tile.tile-position-3-1 {
    608. -webkit-transform: translate(135px, 0px);
    609. -moz-transform: translate(135px, 0px);
    610. -ms-transform: translate(135px, 0px);
    611. transform: translate(135px, 0px);
    612. }
    613. .tile.tile-position-3-2 {
    614. -webkit-transform: translate(135px, 67px);
    615. -moz-transform: translate(135px, 67px);
    616. -ms-transform: translate(135px, 67px);
    617. transform: translate(135px, 67px);
    618. }
    619. .tile.tile-position-3-3 {
    620. -webkit-transform: translate(135px, 135px);
    621. -moz-transform: translate(135px, 135px);
    622. -ms-transform: translate(135px, 135px);
    623. transform: translate(135px, 135px);
    624. }
    625. .tile.tile-position-3-4 {
    626. -webkit-transform: translate(135px, 202px);
    627. -moz-transform: translate(135px, 202px);
    628. -ms-transform: translate(135px, 202px);
    629. transform: translate(135px, 202px);
    630. }
    631. .tile.tile-position-4-1 {
    632. -webkit-transform: translate(202px, 0px);
    633. -moz-transform: translate(202px, 0px);
    634. -ms-transform: translate(202px, 0px);
    635. transform: translate(202px, 0px);
    636. }
    637. .tile.tile-position-4-2 {
    638. -webkit-transform: translate(202px, 67px);
    639. -moz-transform: translate(202px, 67px);
    640. -ms-transform: translate(202px, 67px);
    641. transform: translate(202px, 67px);
    642. }
    643. .tile.tile-position-4-3 {
    644. -webkit-transform: translate(202px, 135px);
    645. -moz-transform: translate(202px, 135px);
    646. -ms-transform: translate(202px, 135px);
    647. transform: translate(202px, 135px);
    648. }
    649. .tile.tile-position-4-4 {
    650. -webkit-transform: translate(202px, 202px);
    651. -moz-transform: translate(202px, 202px);
    652. -ms-transform: translate(202px, 202px);
    653. transform: translate(202px, 202px);
    654. }
    655. .tile .tile-inner {
    656. font-size: 35px;
    657. }
    658. .game-message p {
    659. font-size: 30px !important;
    660. height: 30px !important;
    661. line-height: 30px !important;
    662. margin-top: 90px !important;
    663. }
    664. .game-message .lower {
    665. margin-top: 30px !important;
    666. }
    667. }

    调用js文件

    1. var app = getApp();
    2.  
    3. var Grid = require('./grid.js');
    4. var Tile = require('./tile.js');
    5. var GameManager = require('./game_manager.js');
    6.  
    7. var config = {  
    8. data: {
    9. hidden: false,
    10.  
    11.         // 游戏数据可以通过参数控制
    12. grids: [],
    13. over: false,
    14. win: false,
    15. score: 0,
    16. highscore: 0,
    17. overMsg: '游戏结束'
    18. },
    19. onLoad: function() {
    20. this.GameManager = new GameManager(4);
    21.  
    22. this.setData({
    23. grids: this.GameManager.setup(),
    24. highscore: wx.getStorageSync('highscore') || 0
    25. });
    26.  
    27. },
    28. onReady: function() {
    29. var that = this;
    30.  
    31.         // 页面渲染完毕隐藏loading
    32. that.setData({
    33. hidden: true
    34. });
    35. },
    36. onShow: function() {
    37.         // 页面展示
    38. },
    39. onHide: function() {
    40.         // 页面隐藏
    41. },
    42. onUnload: function() {
    43.         // 页面关闭
    44. },
    45.  
    46.     // 更新视图数据
    47. updateView: function(data) {
    48.         // 游戏结束
    49. if(data.over){
    50. data.overMsg = '游戏结束';
    51. }
    52.  
    53.         // 获胜
    54. if(data.win){
    55. data.overMsg = '恭喜';
    56. }
    57.  
    58. this.setData(data);
    59. },
    60.  
    61.     // 重新开始
    62. restart: function() {
    63. this.updateView({
    64. grids: this.GameManager.restart(),
    65. over: false,
    66. won: false,
    67. score: 0
    68. });
    69. },
    70.  
    71. touchStartClienX: 0,
    72. touchStartClientY: 0,
    73. touchEndClientX: 0,
    74. touchEndClientY: 0,
    75. isMultiple: false, // 多手指操作
    76.  
    77. touchStart: function(events) {
    78.  
    79.         // 多指操作
    80. this.isMultiple = events.touches.length > 1;
    81. if (this.isMultiple) {
    82. return;
    83. }
    84.  
    85. var touch = events.touches[0];
    86.  
    87. this.touchStartClientX = touch.clientX;
    88. this.touchStartClientY = touch.clientY;
    89.  
    90. },
    91.  
    92. touchMove: function(events) {
    93. var touch = events.touches[0];
    94. this.touchEndClientX = touch.clientX;
    95. this.touchEndClientY = touch.clientY;
    96. },
    97.  
    98. touchEnd: function(events) {
    99. if (this.isMultiple) {
    100. return;
    101. }
    102.  
    103. var dx = this.touchEndClientX - this.touchStartClientX;
    104. var absDx = Math.abs(dx);
    105. var dy = this.touchEndClientY - this.touchStartClientY;
    106. var absDy = Math.abs(dy);
    107.  
    108. if (Math.max(absDx, absDy) > 10) {
    109. var direction = absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0);
    110.  
    111. var data = this.GameManager.move(direction) || {
    112. grids: this.data.grids,
    113. over: this.data.over,
    114. won: this.data.won,
    115. score: this.data.score
    116. };
    117.  
    118. var highscore = wx.getStorageSync('highscore') || 0;
    119. if(data.score > highscore){
    120. wx.setStorageSync('highscore', data.score);
    121. }
    122.  
    123. this.updateView({
    124. grids: data.grids,
    125. over: data.over,
    126. won: data.won,
    127. score: data.score,
    128. highscore: Math.max(highscore, data.score)
    129. });
    130.  
    131. }
    132.  
    133. }
    134. };
    135.  
    136. Page(config);

    代码量不大，学习还是很有价值的

    补充，项目结构图：

    image.png

  • 相关阅读:
    HTML的学习-通过创建相册WEB学习HTML-第二部分
    记录--源码视角，Vue3为什么推荐使用ref而不是reactive
    百度搜索业务交付无人值守实践与探索
    为什么说元宇宙正在创造社交连接的未来？
    数据结构—查找方法改进流程
    关于序列化与反序列化解题
    Apache HTTP Server、IIS反向代理设置
    Http请求-hutool工具类的使用
    重磅 | 思特威获得ISO 26262:2018汽车功能安全ASIL D流程认证证书
    练习-Java输入输出之File类之获取文件信息（2）
  • 原文地址：https://blog.csdn.net/hanjiepo/article/details/133026402