2048微信小程序效果

布局页面

 页面结构

 

<view class="action_cavas" bindtouchstart="tapStart" bindtouchmove="tapMove" bindtouchend="tapEnd">
<view class="score"><view class="title">2048</view><view class="scoredetail"><view class="scoredesc">得分</view><view class="scorenumber">{{score}}</view></view><view class="scoredetail"><view class="scoredesc">历史最高</view><view class="scorenumber">{{maxscore}}</view></view>
</view>
<view class="bc_cavas"><view class="bc" wx:for="{{numbers}}" wx:for-item="row" ><view wx:for="{{row}}" class="bc_ bc_{{item}}"> {{item}} </view></view>
</view>
</view>
<modal class="modal" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalCancle"><view> 游戏结束，重新开始吗？ </view>
</modal>

JS 

//index.js
//获取应用实例
var app = getApp()
Page({data: {score: 0,maxscore: 0,startx: 0,starty: 0,endx:0,endy:0,direction:'',numbers:[[0,0,2,2],[0,2,4,0],[0,4,0,0],[0,0,0,0]],modalHidden: true,},onLoad: function () {//调用API从本地缓存中获取数据var maxscore = wx.getStorageSync('maxscore')if(!maxscore) maxscore = 0this.setData({maxscore:maxscore})},storeScore:function(){console.log(this.data.maxscore, this.data.score)if(this.data.maxscore < this.data.score){this.setData({maxscore:this.data.score})wx.setStorageSync('maxscore', this.data.maxscore)}},tapStart: function(event){this.setData({startx: event.touches[0].pageX,starty: event.touches[0].pageY})},tapMove: function(event){this.setData({endx: event.touches[0].pageX,endy: event.touches[0].pageY})},tapEnd: function(event){var heng = (this.data.endx) ? (this.data.endx - this.data.startx) : 0;var shu = (this.data.endy) ? (this.data.endy - this.data.starty) : 0;console.log(heng, shu);if(Math.abs(heng) > 5 || Math.abs(shu) > 5){var direction = (Math.abs(heng) > Math.abs(shu)) ? this.computeDir(1, heng):this.computeDir(0, shu);this.setData({startx:0,starty:0,endx:0,endy:0})this.mergeAll(direction) && this.randInsert();}},computeDir: function(heng, num){if(heng) return (num > 0) ? 'right' : 'left';return (num > 0) ? 'bottom' : 'top';},mergeAll: function(dir){this.checkGame();switch(dir){case 'left':return this.mergeleft();break;case 'right':return this.mergeright();break;case 'top':return this.mergetop();break;case 'bottom':return this.mergebottom();break;default:}},//左划mergeleft: function(){var change = false;var arr = this.data.numbers;for(var i = 0; i < 4; i++){//merge firstfor(var j = 0; j < 3; j++){if(arr[i][j] == 0) continue;for(var k = 1; k < 4-j; k++){if(arr[i][j] != 0 && arr[i][j+k] != 0){if(arr[i][j] != arr[i][j+k]) break;   //不相同则直接跳过arr[i][j] = arr[i][j] *2;arr[i][j+k] = 0;change = true;this.setData({score: this.data.score + arr[i][j]/2})break;}}}//movemovefor(var j = 0; j < 3; j++){if(arr[i][j] == 0){for(var k = 1; k < 4-j; k++){if(arr[i][j+k] != 0){arr[i][j] = arr[i][j+k];arr[i][j+k] = 0;change = true;break;}}}}}this.setData({numbers:arr})this.storeScore()return change},//右滑mergeright: function(){var change = falsevar arr = this.data.numbers;for(var i = 0; i < 4; i++){//merge firstfor(var j = 3; j > 0; j--){if(arr[i][j] == 0) continue;for(var k = 1; k <= j; k++){if(arr[i][j] != 0 && arr[i][j-k] != 0){if(arr[i][j] != arr[i][j-k]) break;arr[i][j] = arr[i][j] *2;arr[i][j-k] = 0;change = true;this.setData({score: this.data.score + arr[i][j]/2})break;}}}//movemovefor(var j = 3; j > 0; j--){if(arr[i][j] == 0){for(var k = 1; k <= j; k++){if(arr[i][j-k] != 0){arr[i][j] = arr[i][j-k];arr[i][j-k] = 0;change = true;break;}}}}}this.setData({numbers:arr})this.storeScore()return change},//下划mergebottom: function(){var change = falsevar arr = this.data.numbers;for(var i = 0; i < 4; i++){//merge firstfor(var j = 3; j > 0; j--){if(arr[j][i] == 0) continue;for(var k = 1; k <= j; k++){if(arr[j][i] != 0 && arr[j-k][i] != 0){if(arr[j][i] != arr[j-k][i]) break;arr[j][i] = arr[j][i] *2;arr[j-k][i] = 0;change = truethis.setData({score: this.data.score + arr[j][i]/2})break;}}}//movemovefor(var j = 3; j > 0; j--){if(arr[j][i] == 0){for(var k = 1; k <= j; k++){if(arr[j-k][i] != 0){arr[j][i] = arr[j-k][i];arr[j-k][i] = 0;change = truebreak;}}}}}this.setData({numbers:arr})this.storeScore()return change},//上滑mergetop: function(){var change = falsevar arr = this.data.numbers;for(var i = 0; i < 4; i++){//merge firstfor(var j = 0; j < 3; j++){if(arr[j][i] == 0) continue;for(var k = 1; k < 4-j; k++){if(arr[j][i] != 0 && arr[j+k][i] != 0){if(arr[j][i] != arr[j+k][i]) break;arr[j][i] = arr[j][i] *2;arr[j+k][i] = 0;change = truethis.setData({score: this.data.score + arr[j][i]/2})break;}}}//movemovefor(var j = 0; j < 3; j++){if(arr[j][i] == 0){for(var k = 1; k < 4-j; k++){if(arr[j+k][i] != 0){arr[j][i] = arr[j+k][i];arr[j+k][i] = 0;change = truebreak;}}}}}this.setData({numbers:arr})this.storeScore()return change},//随机插入randInsert: function(){var arr = this.data.numbers//随机2或4var num = Math.random() < 0.8 ? 2 : 4//计算随机位置var zeros = [];for(var i = 0; i < 4; i++){for(var j = 0; j < 4; j++){if(arr[i][j] == 0){zeros.push([i, j]);}}}var position = zeros[Math.floor(Math.random() * zeros.length)];arr[position[0]][position[1]] = numthis.setData({numbers:arr})//this.checkGame()},checkGame: function(){var arr = this.data.numbersfor(var i = 0; i < 4; i++){for(var j = 0; j < 4; j++){if(arr[i][j] == 0) return;}}for(var i = 0; i < 3; i++){for(var j = 0; j < 3; j++){if(arr[i][j] == arr[i+1][j] || arr[i][j] == arr[i][j+1]) return;}}for(var j = 0; j < 3; j++){if(arr[3][j] == arr[3][j+1]) return;if(arr[j][3] == arr[j+1][3]) return;}this.setData({modalHidden: false,})},modalChange:function(){this.setData({score: 0,numbers:[[0,0,2,2],[0,2,4,0],[0,4,0,0],[0,0,0,0]],modalHidden: true,})},modalCancle:function(){this.setData({modalHidden: true,})},
})

每日分享一个小程序源码

源码地址：https://wheart.cn/so/home?m=dw&rid=7cdc5eff-d47b-11ed-96fa-52540016e6ac