微信小程序之游戏2048

主要用来锻炼逻辑思维能力

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 () {

  }
})