WeChat ミニプログラムバージョン 2048 ミニゲーム-ミニプログラム開発-php.cn

WeChat ミニプログラムバージョン 2048 ミニゲーム

小云云

リリース： 2018-01-25 13:34:20

オリジナル

4574 人が閲覧しました

WeChat の「ジャンプ」ゲームが最近人気になっています。このサイトでも共有する記事があります: PHP で WeChat の「ジャンプ」ゲームを実装するこの記事では主に 2048 を実装するためのアルゴリズムと注意点を共有します。一緒に！ (ソースコードのアドレスについては、記事の最後を参照してください)。

アルゴリズム

4*4 のチェッカーボードビューを生成します

2 つのセルを埋めるために 2 または 4 をランダムに生成します

ユーザーがタッチしたときの開始位置と終了位置を記録し、スライド方向を決定します

スライド方向に従ってセルを移動しますを選択し、同じ値を結合します

ユーザーが 1 回のスワイプを完了したら、手順 2 を繰り返します

ゲームが終了したかどうかを判断し、ゲーム結果に基づいて異なるプロンプトを生成します

難易度

スライド方向を決定します

ユーザーがスワイプすると同じグリッドが結合され、スライド方向の側に移動します
実装

ビューの実装

1. wxml+wxssを使用してチェッカーボードビューを生成します

WeChat ミニプログラムバージョン 2048 ミニゲーム

2。データを各セルにレンダリングします

ロジック実装

1. ページがロードされたら、2 つのセルにランダムに 2 または 4 の数字を入力します

2。ユーザーのスライド方向を決定します

touchStart イベント関数を使用して開始位置 touchStartX を取得します, touchStartY

touchMoveイベント関数を使って終了位置touchEndX,touchEndY

var disX = this.touchStartX - this.touchEndX;
    var absdisX = Math.abs(disX);
    var disY = this.touchStartY - this.touchEndY;
    var absdisY = Math.abs(disY);  
    // 确定移动方向 // 0:上, 1:右, 2:下, 3:左 var direction = absdisX > absdisY ? (disX < 0 ? 1 : 3) : (disY < 0 ? 2 : 0);

ログイン後にコピー

3.スライド方向に合わせてテーブルを移動し（右にスライドすると仮定して）、同じアイテムをマージします

4*4の2つを生成します2048チェス盤の次元配列リスト、空きスペースは0で表す

// 比如棋盘数据如下 var grid = [
    [2, 2, 0, 0],
    [0, 0, 0, 0],
    [0, 8, 4, 0],
    [0, 0, 0, 0]
];

ログイン後にコピー

スライド方向に応じて4を生成 *4 2次元配列

var list = [
    [0, 0, 2, 2],  // 注意是0022不是2200，因为像右滑动所以从右边push入数组
    [0, 0, 0, 0],
    [0, 4, 8, 0],
    [0, 0, 0, 0]
];

ログイン後にコピー

対応コード(コード中のthis.board.gridは初期グリッド)上記):

formList(dir) {  // 根据传入的滑动方向生成list的四个数组 var list = [[], [], [], []];
    for(var i = 0; i < this.size; i++)
      for(var j = 0; j < this.size; j++) {
        switch(dir) {
          case 0:
            list[i].push(this.board.grid[j][i]);
            break;
          case 1:
            list[i].push(this.board.grid[i][this.size-1-j]);
            break;
          case 2:
            list[i].push(this.board.grid[this.size-1-j][i]);
            break;
          case 3:
            list[i].push(this.board.grid[i][j]);
            break;
        }
      }
    return list;
  }

ログイン後にコピー

リストの各小さな配列の数値を先頭に置き、最後に0を置きます

list2 = [
    [2, 2, 0, 0], 
    [0, 0, 0, 0],
    [4, 8, 0, 0],
    [0, 0, 0, 0]
];

ログイン後にコピー

それに対応するコード:

changeItem(item) {  // 将 [0, 2, 0, 2] 改为 [2, 2, 0, 0] var cnt = 0;
    for(var i = 0; i < item.length; i++)
      if(item[i] != 0)
        item[cnt++] = item[i];
    for(var j = cnt; j < item.length; j++) 
      item[j] = 0;
    return item;
  }

ログイン後にコピー

同じ値のセルを追加し、次のセルの値を次のセルに変更します0

list2 = [
    [4, 0, 0, 0], 
    [0, 0, 0, 0],
    [4, 8, 0, 0],
    [0, 0, 0, 0]
];

ログイン後にコピー

対応するコード:

combine(list) { // 滑动时相同的合并 for(var i = 0; i < list.length; i++)  // 数字靠边
      list[i] = this.changeItem(list[i]);
    for(var i = 0; i < this.size; i++) { 
      for(var j = 1; j < this.size; j++) {
        if(list[i][j-1] == list[i][j] && list[i][j]!=0) {
          list[i][j-1] += list[i][j];
          list[i][j] = 0; 
        }
      }
    }
    for (var i = 0; i < list.length; i++)  // 再次数字靠边，避免0220变成0400的情况发生
      list[i] = this.changeItem(list[i]);
    return list;
  }

ログイン後にコピー

list2 を list に返し、データをチェッカーボードビューにレンダリングします

list = [
[0, 0, 0, 4],
[0, 0, 0, 0],
[0, 0, 8, 4],
[0, 0, 0, 0]
];

対応するコード:

move(dir) {
    // 0:上, 1:右, 2:下, 3:左 var curList = this.formList(dir);
    var list = this.combine(curList); 
    var result = [[],[],[],[]];
    for(var i = 0; i < this.size; i++)
      for(var j = 0; j < this.size; j++) {
        switch (dir) {
          case 0:
            result[i][j] = list[j][i];
            break;
          case 1:
            result[i][j] = list[i][this.size-1-j];
            break;
          case 2:
            result[i][j] = list[j][this.size-1-i];
            break;
          case 3:
            result[i][j] = list[i][j];
            break;
        }
      } 
    this.board.grid = result;
    this.setDataRandom();  // 移动一次之后随机用2或4填充两个单元格 return result;
  }

ログイン後にコピー

4. 手順 1 を繰り返します

5. ゲームオーバーかどうかを判断します。基準: 4*4 のセルが埋められており、どのセルの上下左右にも同じ値を持つセルがない

isOver() {  // 游戏是否结束，结束条件：可用格子为空且所有格子上下左右值不等 for (var i = 0; i < this.size; i++) // 左右不等 for (var j = 1; j < this.size; j++) {
      if (this.board.grid[i][j] == this.board.grid[i][j - 1])
        return false;
    }
  for (var j = 0; j < this.size; j++)  // 上下不等 for (var i = 1; i < this.size; i++) {
      if (this.board.grid[i][j] == this.board.grid[i - 1][j])
        return false;
    }
  return true;
}

ログイン後にコピー

6 によると、ゲームの結果は対応するプロンプトを表示します

WeChat ミニプログラムバージョン 2048 ミニゲーム po。コードアドレス：windlany/wechat-weapp-2048 興味があれば試してみてください。皆さんのお役に立てれば幸いです。