微信小程序2048小游戏（上）

2048小游戏

启动页设计

整理初始代码，删除部分文件及代码
1.1 打开app.js文件，删除自带代码，只保留以下代码。
//app.js
App({
})
1.2 删除logs文件包。
1.3 打开app.json文件，删除"pages/logs/logs"，保留以下代码。
{
“pages”:[
“pages/index/index”
],
“window”:{
“backgroundTextStyle”:“light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “WeChat”,
“navigationBarTextStyle”:“black”
}
}
1.4 删除index.wxml和index.wxss中所有代码。
1.5 打开index.js文件，删除自带代码，只保留以下代码。
//index.js
//获取应用实例
const app = getApp()
Page({
})
1.6 打开app.wxss文件，修改代码。
/app.wxss/
.container {
height:100%;
display:flex;
flex-direction:column;
align-items:center;
}
1.7 将附件中的img文件夹拷贝进项目，放在与pages同级目录下。

2. 启动页的视图层渲染
   2.1 修改pages/index/index.wxml文件。

每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢外，系统也会在空白的地方乱数出现一个数字方块，相同数字的方块在靠拢、相撞时会相加。不断的叠加最终拼凑出2048这个数字就算成功。 开始游戏 2.2 修改pages/index/index.wxss文件。 /**index.wxss**/ .container { background-color: #faf8ee; height: 100vh; width: 100vw; } .logo { width: 100px; height: 100px; border-radius: 20px; } .load { text-align: center; margin-top: 10px; } .load text { display: inline-block; width: 6px; height: 6px; border: 1px solid #ccc; border-radius: 4px; margin: 0 5px; } .load text.sct { background-color: #ccc; } .textStytle{ padding: 10vh; word-break: break-all; font-size:28rpx; } 3. 启动页逻辑层开发 3.1 定义数据变量。 打开index.js文件，在page函数下定义data对象，添加如下代码： data: { current: 0, //控制小圆点运动 hasUserInfo: false //判断是否已经登陆 } 3.2 定义等待加载动画方法。 在页面最上方定义全局变量，添加如下代码： var timer; 在page下定义一个定时器，代码如下： load: function () { console.log("load") var n = 1; timer = setInterval(() => { this.setData({ current: this.data.current + 1 }); if (this.data.current > 3) this.setData({ current: 0 }); n++; }, 400); } 3.3 定义微信授权获取个人信息方法。 getInfo:function () { wx.getUserInfo({ success: ({ userInfo }) => { //获取当前用户的信息 console.log(userInfo); } }); } 3.4 页面加载监听。 在onLoad方法中添加获取微信个人信息，判断是否已用户授权。添加如下代码： onLoad:function(){ // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { /