主要用来锻炼逻辑思维能力
image.png
可以选模式
image.png
这里面主要解决的问题是：
1.判断滑动方向
//在滑动块级绑定滑动开始和滑动结束的方法
<view class='cell' bindtouchstart='startFn' bindtouchend='endFn'>
</view>
很原始的方法，startFn时保存开始的（x,y）,endFn时保存结束的（x1,y2）,根据这四个参数 判断方向，算法在方法directionFn里
2.根据滑动方向进行叠加
叠加方法在afterslider里
全部代码如下
html代码：
<!--index.wxml-->
<view class="container address">
<view class='score'>{{score}}分</view>
<icon class='iconmenu' type="info" size="24" color="#177cb0" bindtap='openmenu'></icon>
<view wx:if="{{toolindex==1}}">{{step}}步</view>
<view wx:if="{{toolindex==0}}">{{time}}s</view>
<view class='gamecon'>
<view class='row' wx:for="{{cellArr}}" wx:for-item="item" wx:key="">
<view class='cell' wx:for="{{item}}" wx:for-item="v" wx:key="" bindtouchstart='startFn' bindtouchend='endFn'>
<view class="num bg{{v.number}}">
<!-- {{v.coordinate}} -->
<view wx:if="{{v.number!=0}}">{{v.number}}</view>
</view>
</view>
</view>
</view>
<view class='toolCon'>
<view class='toolcon-item item{{item.status==toolindex}} {{item.class}}' wx:for="{{tool}}" wx:key="">{{item.name}}</view>
</view>
<view class='modal none {{zhezhangc}}'>
<form bindsubmit="formSubmit" bindreset="formReset">
<view class='header' style='height:30px;'>
<icon class='iconmenu' type="clear" size="24" color="#ddd" bindtap='openmenu'></icon>
</view>
<view class="section section_gap">
<view class="section__title">规模</view>
<radio-group name="radiogroup">
<label>
<radio value="4" />
4*4
</label>
<label>
<radio value="3" />
3*3
</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">规模</view>
<view class='group'>
<view wx:for="{{tool}}" wx:key="" class='item' bindtap='choosemodal' data-data="{{item}}">{{item.name}}
<icon wx:if="{{item.status==toolindex}}" class='icon' type="success" size="16"></icon> </view>
</view>
</view>
<view class="btn-area">
<button form-type="submit">Submit</button>
</view>
</form>
</view>
</view>
js代码:
Page({
/**
* 页面的初始数据
*/
data: {
cellArr:[],
zhezhangc:true,
modal:3,
score:0,
toushstart:[],
toolindex:2,
step:30,
time:60,
tool: [{ 'name': '无限模式', 'status': 2, 'class': 'speed' },{ 'name': '计时模式', 'status': 0, 'class': 'time' }, { 'name': '计步模式', 'status': 1, 'class': 'speed' }]
},
formSubmit(e) {
console.log(e.detail.value.radiogroup);
this.setData({ modal: e.detail.value.radiogroup, zhezhangc:false});
this.initFn();
},
choosemodal: function (event){
this.setData({ toolindex: event.currentTarget.dataset.data.status});
},
openmenu:function(){
var this_ = this;
this.setData({ zhezhangc: !this_.data.zhezhangc });
},
// 初始化
initFn:function(){
var modal = this.data.modal;
var cellArr = [];
for (var i = 0; i < modal; i++) {
var iarr = [];
for (var j = 0; j < modal; j++) {
iarr.push({ coordinate: [i, j], number: 0 });
}
cellArr.push(iarr);
}
// 二维数组转一维数组
var initget = 1;//第一次先放一个
var this_ = this;
var random_row = Math.round(Math.random() * (modal - 1));
var random_cell = Math.round(Math.random() * (modal - 1));
var getnumber = [2,4,8];
if (cellArr[random_row][random_cell].number==0){
// 如果在空白处就放一个方块
cellArr[random_row][random_cell].number = getnumber[Math.round(Math.random() * 2)];
}
this.setData({ cellArr: cellArr });
},
scoreFn:function(num_){
var score_ = this.data.score;
this.setData({
score:score_+num_*2
})
},
refreshcoordinate:function(){
var cellArr = this.data.cellArr;
var modal = this.data.modal;
var random_row;
var random_cell;
var this_ = this;
for(var i = 0;i<1000;i++){
random_row = Math.round(Math.random() * (modal - 1));
random_cell = Math.round(Math.random() * (modal - 1));
if (cellArr[random_row][random_cell].number == 0) {
cellArr[random_row][random_cell].number = 2;
break;
}
}
var isgame = this.gameover();
var tooltype = this.data.toolindex;
var step_ = this.data.step;
if (isgame && step_ > 0){
this_.setData({
cellArr: cellArr,
cellArrBefore: cellArr
});
if (tooltype == 1){
this_.setData({
step: this.data.step - 1
});
}
}else{
wx.showModal({
title: '提示',
content: '游戏结束',
});
this_.setData({
cellArr: [],
step:30,
score: 0
});
this_.initFn();
}
},
gameover:function(){
var cellArr = this.data.cellArr;
var modal = this.data.modal;
var gamecontine_ = false;
for(var i = 0;i<modal;i++){
for (var j = 0; j < modal; j++) {
if (cellArr[i][j].number==0){
gamecontine_ = true;
}
}
}
return gamecontine_;
},
redo:function(){
var this_ = this;
this.setData({
cellArr:this_.data.cellArrBefore
});
},
// 滑动开始
startFn: function (event){
var X_ = event.touches[0].clientX;
var Y_ = event.touches[0].clientY;
this.setData({ toushstart: [X_,Y_]});
},
// 滑动结束
endFn: function (event) {
var eX = event.changedTouches[0].clientX;
var eY = event.changedTouches[0].clientY;
var dir = this.directionFn(eX, eY);
this.afterslider(dir);
},
// 判断方向
directionFn:function(endX,endY){
var sX = this.data.toushstart[0];
var sY = this.data.toushstart[1];
var eX = endX;
var eY = endY;
// console.log('start' + this.data.toushstart+','+sY+'end:'+eX+','+eY);
// 求角度
var a = eX-sX+1;
var b = sY-eY+1;
var angle = Math.abs(b / a);
var direction_;
// console.log('a:' + a + ',b:' + b + ',angle:' + angle);
if (a > 0 && angle<1){
direction_ = 1;
// console.log('右边');
}
if (a < 0 && angle < 1) {
direction_ = 3;
// console.log('左边');
}
if (b > 0 && angle > 1) {
// console.log('上边');
direction_ = 0;
}
if (b < 0 && angle > 1) {
// console.log('下边');
direction_ = 2;
}
return direction_;//上右下左对应0，1，2，3
},
// 根据方向做后续操作
afterslider:function(dir){
var this_ = this;
var modal = this.data.modal;
var cellArr = this.data.cellArr;
var test_ = this.data.test;
switch(dir){
case 0:
// 从上往下循环
for(var i = 1;i<modal;i++){
for (var j = 0; j < modal; j++) {
var thisCell = cellArr[i][j];
for(var k=i;k>0;k--){
if (cellArr[k - 1][j].number == 0) {
cellArr[k - 1][j].number = cellArr[k][j].number;
cellArr[k][j].number = 0
}else{
if (cellArr[k - 1][j].number == cellArr[k][j].number) {
var num_ = cellArr[k][j].number;
cellArr[k][j].number = 0;
cellArr[k - 1][j].number = num_ * 2;
this_.scoreFn(num_);
}
}
}
}
}
break;
case 2:
// 从下往上循环
// modal - 2是因为，最底下的方块不用管了
for (var i = modal - 2; i >= 0; i--) {
for (var j = 0; j < modal; j++) {
var thisCell = cellArr[i][j];
for(var k = i;k<modal-1;k++){
if (cellArr[k + 1][j].number == 0) {
cellArr[k + 1][j].number = cellArr[k][j].number;
cellArr[k][j].number = 0
} else {
if (cellArr[k + 1][j].number == cellArr[k][j].number) {
var num_ = cellArr[k][j].number;
cellArr[k][j].number = 0;
cellArr[k + 1][j].number = num_ * 2;
this_.scoreFn(num_);
}
}
}
}
}
break;
case 1:
for (var j = modal - 2; j >= 0;j--){
for(var i=0;i<modal;i++){
var thisCell = cellArr[i][j];
for (var k = j; k < modal - 1; k++) {
if (cellArr[i][k + 1].number == 0) {
cellArr[i][k + 1].number = cellArr[i][k].number;
cellArr[i][k].number = 0
} else {
if (cellArr[i][k + 1].number == cellArr[i][k].number) {
var num_ = cellArr[i][k].number;
cellArr[i][k].number = 0;
cellArr[i][k + 1].number = num_ * 2;
this_.scoreFn(num_);
}
}
}
}
}
break;
case 3:
// 从左往右
for(var j = 1;j<modal;j++){
for (var i = 0; i < modal; i++) {
var thisCell = cellArr[i][j];
for (var k = j; k >0; k--) {
if (cellArr[i][k - 1].number == 0) {
cellArr[i][k - 1].number = cellArr[i][k].number;
cellArr[i][k].number = 0
} else {
if (cellArr[i][k - 1].number == cellArr[i][k].number) {
var num_ = cellArr[i][k].number;
cellArr[i][k].number = 0;
cellArr[i][k - 1].number = num_ * 2;
this_.scoreFn(num_);
}
}
}
}
}
break;
}
this.refreshcoordinate();
},
watchAgain: function (cellArr, k, j, num_){
if(cellArr[k - 1][j].number == cellArr[k][j].number) {
cellArr[k][j].number = 0;
cellArr[k - 1][j].number = num_ * 2;
var k_ = k - 1;
this.watchAgain(cellArr, k_, j);
}
}
,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.initFn();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
