從全球最大同性交友網站抄了一份不一樣的2048小遊戲

執鳶者發表於2021-09-30
網站遊戲
今天突發感想想實現一個不一樣的2048小遊戲，此時我就會直接開幹嗎？這是不存在的，首先我想到了“全球最大同性交友網站”，上面那麼多現成的常規2048小遊戲，直接拷貝下來一份，讀懂精髓然後在此基礎上進行修改豈不更能達到”事半功倍“的效果，說幹就幹，下面開啟了我的獵豔修改之旅。

一、獵豔之旅

登入“交友網站”後，開啟了關鍵詞搜尋，通過搜尋“2048小程式”，發現了一批優秀的程式碼，一位倩倩美女映入了我的眼簾，這位美女的網址是：https://github.com/windlany/w...

image-20210925170337640.png

1.1 初始化

偶遇這位美女，第一步肯定是將美女拉過來，然後仔細欣賞一下是否符合自己的需求。
git clone https://github.com/windlany/wechat-weapp-2048.git
美女拉過來了，接下來要怎麼處理呢？肯定先要欣賞一波美女嘍，下面就有我們帥氣的“微信開發者工具”開啟一下，看看這個美女到底長啥樣，符不符合我們的需求。

image-20210925171047138.png

1.2 核心內容理解

run起之後，發現其形象氣質完全符合我們的需求，外表達標了，是時候瞭解一波內涵了，正所謂“外行看熱鬧，內行看門道”，下面就以內行的眼光看一看是否符合我們的需求。

image-20210925171522690.png

通過觀察其目錄結構，很快就能夠定位到需要關鍵的核心內容在/page/2038這個目錄下面，這個裡面的核心程式碼就不跟讀者一行一行讀了，就直接丟擲其核心思路吧，畢竟思路捋清楚了，後面就是編碼的問題，具體思路可以分為以下三步：
  1. 初始化
初始化階段即完成對應網格中內容的初始化填充

image-20210925172517687.png

(1) 從外觀上看，其初始化的內容就是一個4*4的網格，其通過<view>標籤即可實現；

(2)從資料層面看，其背後儲存的就是一個4行4列的二維陣列，沒值得位置就填空；

(3)初始時會隨意挑選兩個位置填充上其初始值2（此處是後期我們要動刀的一個位置，記住記住）

  1. 方向判斷
初始化之後就需要進行對應的操作了，不能初始化之後我們們啥也不做吧！通過監聽對應使用者的操作然後進行對應的處理，為了監聽使用者的操作，需要繫結使用者觸控的一系列事件（touchstart、touchmove、touchend），在這些事件觸發之後獲取對應的座標位置，進而判斷其移動方向，從而才有後續的內容更新環節。
<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></view>
// 觸控剛開始的時候將會去獲取手指觸控的位置座標
touchStart: function(ev) {
    var touch = ev.touches[0];
    this.touchStartX = touch.clientX;
    this.touchStartY = touch.clientY;

},
// 當在移動過程中不斷獲取其手指座標
touchMove: function(ev) {
    var touch = ev.touches[0];
    this.touchEndX = touch.clientX;
    this.touchEndY = touch.clientY;
},
// 通過對比前後的座標值，確定其移動的方向（0:上, 1:右, 2:下, 3:左）
touchEnd: function() {
    var disX = this.touchStartX - this.touchEndX;
    var absdisX = Math.abs(disX);
    var disY = this.touchStartY - this.touchEndY;
    var absdisY = Math.abs(disY);
    
    var direction = absdisX > absdisY ? (disX < 0 ? 1 : 3) : (disY < 0 ? 2 : 0);
}
  1. 內容更新合併
當判斷完方向之後就到了根據方向進行對應內容的更新合併，併產生一個新的隨機值進行填充，如下所示：

image-20210925180131289.png

如上圖所示，左圖是原始圖，右圖是向左滑動之後的結果，可以看到滑動之後其結果是將最後一行的內容進行了移動和內容求和，並在空閒區域產生了最小值，基於這個思路，是否可以將合併思路拆解為以下步驟：

(1) 根據方向將二維陣列劃分為對應方向的一維陣列，例如向左移動則每一行就是一個一維陣列，陣列頭是左側；向上滑動每一列就是一維陣列，陣列頭部就是上側；

(2)將每個一維陣列中內容進行移動——合併——移動，即先將所有有值得內容移動到頭部，相鄰相等的值相加至前一個，最後再將其合併後內容移動至頭部；（程式中的思路拆解的很清楚，感覺做的很棒，點個贊）

(3)所有內容全部更新完畢之後，將選擇一個空閒區域產生一個新值進行填充，最終渲染頁面進行內容更新。

二、修改之旅

上述已經將該基礎2048的所有核心內容介紹完了，那麼我們找到這位美女不魔改一下是不是說不過去呀，話不多說，先亮出要修改的位置吧！！
  1. 起始值一定是2嗎?為什麼不能是3、4、5、6等任意值呢？
  2. 一定要是求和的模式嗎？為什麼不能從2048依次遞減呢？

2.1 模式一

第一種模式就改一下能夠支援任意初始值
  1. 既然支援任意值，則必須有一個位置進行輸入，此時我們在頁面中新增一個input標籤用於輸入其值；

image-20210925184748679.png

  1. 有了輸入則就要找到對應修改的位置，經過一步步定位，最終找到了其最終修改的位置，然後將該值複製給對應的位置即可。

image-20210925184912636.png

  1. 讓我們看看最終的效果

image-20210925185025427.png

2.2 模式二

第二種模式就是除了增加我們們是不是可以選擇不斷減少的策略呢？下面來看看此種模式實現需要對程式碼進行如何修改，其實這個模式僅僅只需要在模式一的基礎上做很小的改動即可。
  1. 改動點

image-20210925185701391.png

  1. 最終效果

image-20210925185639997.png

除了上述我想到的兩種新玩法，你們還有什麼新的玩法呢？分享出來讓我們一起嗨皮一波。

三、總結

本次做的事情很簡單，就是在大佬原有基礎上讀懂其程式碼，然後對其進行相應修改，產生新的模式。通過本次的分享主要學習了以下幾點：
  1. 多利用“同性交友網站”，利用其內容可以事半功倍；
  2. 多學習別的的分析問題的思路，如何將複雜的問題拆解為簡單的問題並進行解決；
  3. 多看別人的程式碼，一方面學習其程式碼書寫模式；另一方面學習其如何進行內容的抽象（例如其在進行合併抽象部分）；

1.如果覺得這篇文章還不錯，來個分享、點贊吧，讓更多的人也看到

2.歡迎關注公眾號前端點線面,開啟前端救贖之路。

相關文章