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

发布时间：2023-07-18 04:22:46 作者：tom5190j 阅读量：5515

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。

我要评论

网友评论

评论时间：2023-10-12 09:54:01

这两种应用都需要下载安装才能正常运行，所以大家下载时要注意查看是否有最新版本，如果没有就不要再下载新版本，以app制作器2.5 免造成不必网页制作成app 都需要下载安装才能正常运行，所以大家下载时要注意查看是否有最新版本，如果没有就不要再下载新版本，以免造成不必要的麻烦

回复

回复 

置顶通知！发帖请务必遵守法律法规

微信支付下载对账单开发CloudPay.downloadBill()

wx.navigateBack(OBJECT),小程序关闭当前页面返回上一页面（1）

如何制作微信小游戏

微信支付查询退款开发CloudPay.queryRefund()

微信小程序尺寸及外边距设置调整技巧

考古APP开发 感受历史的魅力考古APP开发

安全教育app开发解决方案

门店小程序类目资质表

广州APP开发企业APP制作公司

一招告诉你小程序码怎么生成？

一文告诉你为什么鲜花店老板主动要做小程序?

移动终端、手机和操作系统的演变历史移动终端

滥用手机APP权限的行为成为业内潜规则

全广州最专业的APP开发公司

APP开发定制企业的优势在哪里？

APP开发商：买下所有APP，这才是“土豪”

定制旅游APP开发方案描述

本地头条新闻APP开发:不用编程,让你一个人顶一个电视台

广州APP开发未来的发展趋势

剖析APP开发跨平台与非跨平台对比

税务app开发 办税无压力税务app开发

微信小程序的制作流程

「体育行业app开发」体育行业app开发谁好？案例跟商业模式