ホームページ >WeChat アプレット >ミニプログラム開発 >WeChat ミニプログラム バージョン 2048 ミニゲーム
WeChat ミニプログラム バージョン 2048 ミニゲーム
- 小云云オリジナル
- 2018-01-25 13:34:204583ブラウズ
WeChat の「ジャンプ」ゲームが最近人気になっています。このサイトでも共有する記事があります: PHP で WeChat の「ジャンプ」ゲームを実装する この記事では主に 2048 を実装するためのアルゴリズムと注意点を共有します。一緒に！ (ソースコードのアドレスについては、記事の最後を参照してください)。
アルゴリズム
4*4 のチェッカーボード ビューを生成します
2 つのセルを埋めるために 2 または 4 をランダムに生成します
ユーザーがタッチしたときの開始位置と終了位置を記録し、スライド方向を決定します
スライド方向に従ってセルを移動しますを選択し、同じ値を結合します
ユーザーが 1 回のスワイプを完了したら、手順 2 を繰り返します
ゲームが終了したかどうかを判断し、ゲーム結果に基づいて異なるプロンプトを生成します
難易度
スライド方向を決定します
ユーザーがスワイプすると同じグリッドが結合され、スライド方向の側に移動します
実装
ビューの実装
1. wxml+wxssを使用してチェッカーボードビューを生成します
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 によると、ゲームの結果は対応するプロンプトを表示します
po。コードアドレス：windlany/wechat-weapp-2048 興味があれば試してみてください。皆さんのお役に立てれば幸いです。
関連する推奨事項:
WeChatジャンプPython補助スクリプトサンプル共有phpはWeChatジャンプゲームを実装しますインスタンス共有jQueryはパズルゲームを実装します以上がWeChat ミニプログラム バージョン 2048 ミニゲームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。