Taobao applet 2048 games

.score {
    display: flex;
}

.title{
    flex:1;
    height: 150rpx;
    line-height: 150rpx;
    background:#eec22e;
    margin: 80rpx 20rpx 40rpx 40rpx;
    text-align: center;
    font-size: 0.5rem;
    color: white;
    border-radius: 10rpx;
}


.scoredetail{
    flex: 1;
    height: 150rpx;
    background:#eee4da;
    margin: 80rpx 20rpx 40rpx 20rpx;
    text-align: center;
    border-radius: 10rpx;
}

.scoredetail:last-child{
    margin-right: 40rpx;
}

.scoredesc{
    font-size: 0.4rem;
    line-height: 60rpx;
}
.scorenumber{
    line-height: 70rpx;
}

.bc_{
  height: 152rpx;
  width: 152rpx;
  margin: 6rpx 6rpx;
  line-height: 152rpx;
  text-align: center;
  font-size: 60rpx;
  color: #fff7eb;
}
.bc_0{
    color:#ccc0b2;
    background: #ccc0b2;
}
.bc_2
{
    color: #7c736a;
    background: #eee4da;
}
.bc_4
{
    color: #7c736a;
    background: #ece0c8;
}
.bc_8
{
    color: #fff7eb;
    background: #f2b179;
}
.bc_16
{
    color:#fff7eb;
    background:#f59563;
}
.bc_32
{
    color:#fff7eb;
    background:#f57c5f;
}
.bc_64
{
    color:#fff7eb;
    background:#f65d3b;
}
.bc_128
{
    color:#fff7eb;
    background:#edce71;
}
.bc_256
{
    color:#fff7eb;
    background:#edcc61;
}
.bc_512
{
    color:#fff7eb;
    background:#ecc850;
}
.bc_1024
{
    color:#fff7eb;
    background:#edc53f;
}
.bc_2048
{
    color:#fff7eb;
    background:#eec22e;
}
.bc{
	display: flex;
}

.bc_cavas{
    display: flex;
    height: 670rpx;
    /* background-color: #b8af9e; */
    justify-content: center;
    align-content: center;
    flex-wrap:wrap;
    margin: 10rpx 40rpx;
    border-radius: 10rpx;
}

.action_cavas {
    width:100%;
    height: 100%;
}

.intro{
    display: flex;
    margin: 0 60rpx;
    font-size: small;
    color: #fff7eb;
    justify-content:flex-end;
}

<view class="action_cavas" onTouchStart="tapStart" onTouchMove="tapMove" onTouchEnd="tapEnd">
  <view class="bc_cavas">
    <view class="bc" a:for="{
   {numbers}}" a:for-item="row">
      <view a:for="{
   {row}}" class="bc_ bc_{
   {item}}"> {
   {item}}</view>
    </view>
  </view>
</view>


<view hidden="{
   {modalHidden}}" onTouchStart="modalChange" onTouchCancel="modalCancle">
   Game over , Start over ？
</view>

import { enhanceComponent } from 'tb-shop-enhance';

Component(enhanceComponent({
  data: {
    score: 0,
    maxscore: 0,
    startx: 0,
    starty: 0,
    endx: 0,
    endy: 0,
    direction: '',
    numbers: [[0, 0, 2, 0], [0, 0, 0, 0], [0, 2, 0, 0], [0, 0, 0, 0]],
    modalHidden: true,
  },

  onInit() {
    // mock The data needs to be modified client In folder page file 
    //  During normal operation, the module is always passed in by default data Parameters 


  },

  didMount() {
    //  After loading successfully, you can asynchronously obtain data and update data display , For example, request interface and other operations 
    const { gdc = {}, mds = {}, modUtils } = this.props.data;
    const moduleData = mds.moduleData;
    this.setData({
      bannerArray: moduleData.banner_array
    });
    console.log(this.data.bannerArray)
    var maxscore = my.getStorageSync('maxscore')
    console.log(!maxscore)
    if (!maxscore) maxscore = 0
    this.setData({
      maxscore: 1
    })
  },

  methods: {
    onPullDownRefresh() {
      this.mergebottom();
      my.stopPullDownRefresh();
    },
    storeScore() {
      if (this.data.maxscore < this.data.score) {
        this.setData({
          maxscore: this.data.score
        })
        // console.log(this.data.maxscore)
      }
    },
    tapStart(event) {
      this.setData({
        startx: event.touches[0].pageX,
        starty: event.touches[0].pageY
      })
    },
    tapMove(event) {
      this.setData({
        endx: event.touches[0].pageX,
        endy: event.touches[0].pageY
      })
    },
    tapEnd(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;
      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(heng, num) {
      if (heng) return (num > 0) ? 'right' : 'left';
      return (num > 0) ? 'bottom' : 'top';
    },

    mergeAll(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:
      }
    },

    // Left stroke 
    mergeleft() {
      var change = false;
      var arr = this.data.numbers;
      // console.log(arr.length)
      for (var i = 0; i < 4; i++) {
        //merge first
        for (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;   // If not, skip directly 
              arr[i][j] = arr[i][j] * 2;
              arr[i][j + k] = 0;
              change = true;
              if (this.data.score < arr[i][j]) {
                this.setData({ score: arr[i][j] })
              }
              console.log(' Synthesized once ')
              break;
            }
          }
        }
        //movemove
        for (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;
                // console.log('hechengleyici')
                break;
              }
            }
          }
        }
      }
      this.setData({
        numbers: arr
      })
      this.storeScore()
      return change
    },
    // Right slip 
    mergeright() {
      var change = false
      var arr = this.data.numbers;
      for (var i = 0; i < 4; i++) {
        //merge first
        for (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;
              if (this.data.score < arr[i][j]) {
                this.setData({ score: arr[i][j] })
              }
              console.log(' Synthesized once ')
              break;
            }
          }
        }
        //movemove
        for (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
    },
    // Draw down 
    mergebottom() {
      var change = false
      var arr = this.data.numbers;
      for (var i = 0; i < 4; i++) {
        //merge first
        for (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 = true
              if (this.data.score < arr[j][i]) {
                this.setData({ score: arr[j][i] })
              }
              console.log(' Synthesized once ')
              break;
            }
          }
        }
        //movemove
        for (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 = true
                break;
              }
            }
          }
        }
      }
      this.setData({
        numbers: arr
      })
      this.storeScore()
      return change
    },
    // Up slide 
    mergetop() {
      var change = false
      var arr = this.data.numbers;

      for (var i = 0; i < 4; i++) {
        //merge first
        for (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 = true
              if (this.data.score < arr[j][i]) {
                this.setData({ score: arr[j][i] })
              }
              console.log(' Synthesized once ')
              break;
            }
          }
        }
        //movemove
        for (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 = true
                break;
              }
            }
          }
        }
      }
      this.setData({
        numbers: arr
      })
      this.storeScore()
      return change
    },
    // Insert randomly 
    randInsert() {
      var arr = this.data.numbers
      // Random 2 or 4
      var num = Math.random() < 0.8 ? 2 : 4
      // Calculate the random position 
      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]] = num
      this.setData({
        numbers: arr
      })
      //this.checkGame()
    },
    //  Determine if the game is over 
    checkGame() {
      var arr = this.data.numbers
      for (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,
      })
    },
    //  restart 
    modalChange() {
      this.setData({
        score: 0,
        numbers: [[0, 0, 2, 0], [0, 0, 0, 0], [0, 2, 0, 0], [0, 0, 0, 0]],
        modalHidden: true,
      })
    },
    modalCancle() {
      this.setData({
        modalHidden: true,
      })
    },

  }
}));