微信小程序?qū)崿F(xiàn)2048小游戲的詳細過程
效果圖
實例代碼
今天我們要用微信小程序?qū)崿F(xiàn)2048小游戲,效果圖如上面所示。游戲的規(guī)則很簡單,你需要控制所有方塊向同一個方向運動,兩個相同數(shù)字方塊撞在一起之后合并成為他們的和,每次操作之后會隨機生成一個2或者4,最終得到一個“2048”的方塊就算勝利了。
// 構(gòu)造一個空的矩陣[[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() { // 獲取可填充的格子坐標(biāo) availableCells: function() { // 是否存在空單元格 cellsAvailable: function() /* * 獲取單元格內(nèi)容 * @param {object} cell {x:0,y:0} 單元格坐標(biāo) */ cellContent: function(cell) {
上面的函數(shù)都是為了使接下來開發(fā)更加簡便,這樣子就可以直接操作了。
// 初始化數(shù)據(jù) 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); // 插入一個單元格 } },
一開始進行初始化數(shù)據(jù),以90%機率產(chǎn)生2,以10%機率產(chǎn)生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 }; }
進行游戲手勢開始移動和移動結(jié)束的操作,上面這一段主要是進行了手指移動方向的判斷,最后是判斷出了direction,傳入this.GameManager.move(direction)進行移動操作。
這里面的難點在于數(shù)據(jù)結(jié)構(gòu)的構(gòu)建,只要把格子弄明白就比較好辦。然后就是手指滑動的判斷了,上面代碼也比較清楚地展現(xiàn)了。
總結(jié)
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)2048小游戲的文章就介紹到這了,更多相關(guān)微信小程序2048小游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS使用oumousemove和oumouseout動態(tài)改變圖片顯示的方法
這篇文章主要介紹了JS使用oumousemove和oumouseout動態(tài)改變圖片顯示的方法,涉及javascript鼠標(biāo)事件及圖片操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03十個開發(fā)人員面臨的最常見的JavaScript問題總結(jié)
今天,JavaScript?是幾乎所有現(xiàn)代?Web?應(yīng)用的核心。這就是為什么JavaScript問題,以及找到導(dǎo)致這些問題的錯誤,是?Web?發(fā)者的首要任務(wù)。本文總結(jié)了十個常見的問題及解決方法,需要的可以參考一下2022-11-11js添加select下默認的option的value和text的方法
這篇文章主要介紹了js中創(chuàng)建html標(biāo)簽、添加select下默認的option的value和text,很實用,需要的朋友可以看看2014-10-10JavaScript實現(xiàn)表單注冊、表單驗證、運算符功能
在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊、表單驗證、運算符的代碼示例,有興趣的朋友們可以測試學(xué)習(xí)下。2018-10-10