Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how WeChat Mini Programs achieves 2048 Mini Game". The content is simple and clear. I hope it can help you solve your doubts. Next, let the editor lead you to study and learn the article "how WeChat Mini Programs achieves 2048 Mini Game".

Effect picture

Instance code

Today we are going to implement 2048 Mini Game with WeChat Mini Programs, as shown above. The rules of the game are very simple. You need to control all squares to move in the same direction. Two identical digital squares collide together and merge into their sum. After each operation, a random 2 or 4 is generated. Finally, a "2048" square is considered a victory.

/ construct an empty matrix [[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; }, 首先我们需要做的是把游戏主体分成16个格子。用Grid代表这些格子，然后这些格子还有一下这些操作： // 在空格子中随机挑选出一个格子 randomAvailableCell: function() { // 获取可填充的格子坐标 availableCells: function() { // 是否存在空单元格 cellsAvailable: function() /* * 获取单元格内容 * @param {object} cell {x:0,y:0} 单元格坐标 */ cellContent: function(cell) { 上面的函数都是为了使接下来开发更加简便，这样子就可以直接操作了。 // 初始化数据 addStartTiles: function() { for (var x = 0; x < this.startTiles; x++) { this.addRandomTiles(); } }, // 在一个随机单元格中随机填充2或4 addRandomTiles: function() { if (this.grid.cellsAvailable()) { var value = Math.random() < 0.9 ? 2 : 4; var cell = this.grid.randomAvailableCell(); var tile = new Tile(cell, value); this.grid.insertTile(tile); // 插入一个单元格 } }, 一开始进行初始化数据，以90%机率产生2，以10%机率产生4。 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 }, touchEnd: function (events) {if (this.isMultiple) {return;} var dx = this.touchEndClientX-this.touchStartClientX; var absDx = Math.abs (dx); var dy = this.touchEndClientY-this.touchStartClientY; var absDy = Math.abs (dy); if (Math.max (absDx, absDy) > 10) {var direction = absDx > absDy? (dx > 0? 1: 3): (dy > 0? 2: 0); var data = this.GameManager.move (direction) | {grids: this.data.grids, over: this.data.over, won: this.data.won, score: this.data.score};}

Carry on the operation of the game gesture to start the movement and the end of the movement, the above paragraph is mainly to judge the direction of finger movement, and finally to judge the direction, input this.GameManager.move (direction) to move the operation.

The difficulty lies in the construction of the data structure, which is easier to do as long as the grid is understood. Then there is the judgment of finger sliding, and the above code is shown more clearly.

The above is all the contents of the article "how WeChat Mini Programs achieves 2048 Mini Game". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.