文章目录

• • 一、微信文章前言
  • 二、小程序使创建小程序
  • 三、用小游戏功能开发

一、程序文章前言

此文主要通过小程序实现2048游戏，制作游戏操作简单，微信容易上手。小程序使
规则：正常打开游戏的用小游戏界面，会只有两个2，程序每次移动后都会出现一个2，制作数字大了之后会出现4和8。微信
只有数字相同，小程序使才能够相加，用小游戏每次相加之后都会变成原本的程序二倍，比如两个2相加变成4，制作两个4相加变成8。
使大数在一边，小数在一边，这样相同的数才能更好的结合在一起。

二、创建小程序

1. 访问微信公众平台，点击账号注册。

2. 选择小程序，并在表单填写所需的各项信息进行注册。

3. 在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。

4. 下载安装微信web开发者工具并创建一个新的项目，填入上图所复制的AppId。

三、功能开发

1. 在创建的index这个page中，实现一个4*4的矩阵。

2. 初始化矩阵数据，让其在页面加载时随机在两个方格上显示两个2。

{cell.value}}		      		

• 外部JS

function Grid(size) {    this.size = size;    this.cells = this.empty();}Grid.prototype = {    // 构造一个空的矩阵[[null,..,size.length],[]]    empty: function() {        var cells = [];        for (var x = 0; x < this.size; x++) {            var row = cells[x] = [];            for (var y = 0; y < this.size; y++) {                row.push(null);            }        }        // [[{x:0,y:0},{x:0,y:1}],[]]        return cells;    },    // 在空格子中随机挑选出一个格子    randomAvailableCell: function() {        var cells = this.availableCells();        // 存在可填充的格子        if (cells.length) {            return cells[Math.floor(Math.random() * cells.length)];        }    },    // 获取可填充的格子坐标    availableCells: function() {        var cells = [];        for (var i = 0; i < this.size; i++) {            for (var j = 0; j < this.size; j++) {                // 当前格子无内容                if (!this.cells[i][j]) {                    cells.push({                        x: i,                        y: j                    });                }            }        }        return cells;    },    // 是否存在空单元格    cellsAvailable: function() {        return !!this.availableCells().length;    },    cellAvailable: function(cell) {        return !this.cellContent(cell);    },    insertTile: function(tile) {        this.cells[tile.x][tile.y] = tile;    },    removeTile: function(tile) {        this.cells[tile.x][tile.y] = null;    },    /*      * 获取单元格内容     * @param {object} cell {x:0,y:0} 单元格坐标     */    cellContent: function(cell) {        if (this.withinBounds(cell)) {            return this.cells[cell.x][cell.y] || null;        } else {            return null;        }    },    /*     * 空单元格，格子还未填充数字     */    emptyCell: function(cell) {        return !this.cellContent(cell);    },    withinBounds: function(cell) {        return cell.x >= 0 && cell.x < this.size && cell.y >= 0 && cell.y < this.size;    },    eachCell: function(callback) {        for (var x = 0; x < this.size; x++) {            for (var y = 0; y < this.size; y++) {                callback(x, y, this.cells[x][y]);            }        }    }}module.exports = Grid;

3. 给遍历出来的矩阵方块增加bindtouchstart，bindtouchmove，bindtouchend等手指触摸响应事件。

touchStart: function (events) {    // 多指操作    this.isMultiple = events.touches.length >1;    if (this.isMultiple) {      return;    }    var touch = events.touches[0];    this.touchStartClientX = touch.clientX;    this.touchStartClientY = touch.clientY;  },  touchMove: function (events) {    var touch = events.touches[0];    this.touchEndClientX = touch.clientX;    this.touchEndClientY = touch.clientY;  },

4. 在事件响应的同时记录分数。

var highscore44 = wx.getStorageSync('highscore44') || 0;      if (data.score >highscore44) {        wx.setStorageSync('highscore44', data.score);      }

{score}}{highscore44}}

5. 在游戏结束的时候将分数存入小程序缓存，并获取之前的分数进行比对，判断是否最高分。

//-----------储存最高分-------------------------------------      wx.getStorage({        key: 'highscore44',        success: function (res) {          let highscore44 = res.data          wx.setStorage({            key: 'highscore44',            data: highscore44,          })        },        fail: () =>{          let highscore44 = []          wx.setStorage({            key: 'highscore44',            data: highscore44,          })        }      })

5. 在页面增加重新开始按钮，并绑定对应的事件。

重新开始

// 重新开始  restart: function () {    this.updateView({      grids: this.GameManager.restart(),      over: false,      won: false,      score: 0    });  },

6. 可以将分数通过云开发或者数据库的方式进行存储，将分数进行排行展示。

rankInfo4x4: [          {  name: '摔跤猫子', score: 180000, img: 'rank1.png' },           { name: 'siri', score: 163148, img: 'rank2.png' },           { name: 'kitten', score: 146088, img: 'rank3.png' },          { name: 'admin', score: 136024, img: 'rank4.png' },          { name: '无语小咪', score: 122908, img: 'rank5.png' },          {  name: '汤姆', score: 115283, img: 'rank6.png' }          ],

7. 实现分享功能，邀请好友一起玩。

//---------------  /** * 用户点击右上角分享 */    onShareAppMessage: function () {      return {        title: '诚邀你一起来挑战2048排行！',        path: '/pages/index/index',      }    }}