微信小程序實現2048小遊戲的詳細過程
效果圖
實例代碼
今天我們要用微信小程序實現2048小遊戲,效果圖如上面所示。遊戲的規則很簡單,你需要控制所有方塊向同一個方向運動,兩個相同數字方塊撞在一起之後合並成為他們的和,每次操作之後會隨機生成一個2或者4,最終得到一個“2048”的方塊就算勝利瞭。
// 構造一個空的矩陣[[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 }; }
進行遊戲手勢開始移動和移動結束的操作,上面這一段主要是進行瞭手指移動方向的判斷,最後是判斷出瞭direction,傳入this.GameManager.move(direction)進行移動操作。
這裡面的難點在於數據結構的構建,隻要把格子弄明白就比較好辦。然後就是手指滑動的判斷瞭,上面代碼也比較清楚地展現瞭。
總結
到此這篇關於微信小程序實現2048小遊戲的文章就介紹到這瞭,更多相關微信小程序2048小遊戲內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!