177-371-24501(同微信)

微信小程序教程入门篇【2】,小程序小游戏2048实战讲解

2022-04-21 管理员

1. 开篇导言    
  • 本节目标：对于上篇需求分析做减法。
  • 目标用户：学习过【入门篇】的同学或有一定编程经验的同学。
  • 学习目标：如果2048”就是一个页面，那么开始动手吧！
  • 案例分析：小游戏2048。
  • 传送门：

上一篇：微信小程序教程-入门篇【1】 
下一篇：微信小程序教程-入门篇【3】

2. 对需求设计做减法

上一节的流程图相信大家都看了。对于怎么研发自己的2048相信大家也有自己的思路和办法。
笔者也把自己的思路在这里和大家分享一下。做减法，先做Y轴纵向，在X轴横向。
Y轴：业务逻辑的粒度级别的放大/缩小。
X轴：业务逻辑在同一个粒度级别中的逻辑加/减。
那么对【2048】的Y轴简化后，就是一个静态页面。X轴简化后，去除格子。复杂度大大降低了，Let's GO！

3. 2048主页面



实现流程：1. 绿色的导航栏部分。
                   2. 蓝色的游戏frame部分。

4. 导航栏



  • 目录



app.js如下：
  1. //nothing to do
  2. App({})
复制代码

app.json如下：
  1. {
  2.   "pages":[
  3.     "pages/2048/2048"   
  4.   ],
  5.   "window":{   
  6.     "navigationBarBackgroundColor":"#ffffff",
  7.     "navigationBarTextStyle":"#000000",
  8.     "navigationBarTitleText": "Demo:2048",
  9.     "backgroundTextStyle":"light"
  10.   },
  11.   "debug": false
  12. }
复制代码
【window】导航栏相关设置。

app.wxss为空。

2048.js如下：
  1. //空page
  2. Page({})
复制代码

2048.wxml，2048wxss都为空。

5. 游戏frame部分

我们只需修改2048.wxml，2048.wxss

2048.wxml如下：
  1. <view class="container">
  2.  
  3.   <view class="game-body">
  4.     <view class="heading">
  5.               <text class="title">2048</text>
  6.               <view class="scores-container">
  7.                 <view class="score-container"></view>
  8.                       <view class="best-container"></view>
  9.               </view>
  10.     </view>
  11.  
  12.     <view class="above-game">
  13.               <text class="game-intro">你能拿到2048吗？</text>
  14.               <text class="restart-button">新游戏</text>
  15.     </view>
  16.  
  17.     <view class="game-container">      
  18.           </view>
  19.  
  20. </view>
复制代码
我们需要有与之配套的2048.wxss，代码过多不在这里复制出来。请下载源代码查看。

5. 小结

方法论：Y轴，X轴。有时间的同学，请去了解一下涉及到的css样式。虽不纠结于细节，但请在头脑中保留一个认识。

6. 预告

下一节将继续进行2048的拆解和coding。




上一篇：微信小程序教程入门篇【1】,用开发者工具构建运行简单应用实例
下一篇：微信小程序教程入门篇【3】,MINA框架的目录结构和配置
相关资讯 Releva ntnews
解决方案 Solutions
相关热点 Hot spot
快速提升网站排名的方法
  1. 我们的优势
  2. 我们的实力
  3. 选择我们的理由
咨询电话（微信同号）

177-371-24501(同微信)

豫ICP备17049932号

Copyright © 2017-2022 版权所有 追风建站 Rights Reserved 技术支持：酷微科技

电话咨询 在线咨询 服务项目 SEO优化