微信小程式實現2048小遊戲的詳細過程
阿新 • • 發佈:2021-09-30
效果圖
例項程式碼
今天我們要用微信小程式實現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.IQpwpydgl9 ? 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,IQpwpydgl score: this.data.score
};
}
進行遊戲手勢開始移動和移動結束的操作,上面這一段主要是進行了手指移動方向的判斷,最後是判斷出了direction,傳入this.GameManager.move(direction)進行移動操作。
這裡面的難點在於資料結構的構建,只要把格子弄明白就比較好辦。然後就是手指滑動的判斷了,上面程式碼也比較清楚地展現了。
總結
到此這篇關於微信小程式實現2048小遊戲的文章就介紹到這了,更多相關微信小程式2048小遊戲內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!