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