Vue實現(xiàn)開心消消樂游戲算法
之前做過一個算法題，算法要求就是寫一個開心消消樂的邏輯算法，當(dāng)時也是考慮了一段時間才做出來。后來想了想，既然核心算法都有了，能不能實現(xiàn)一個開心消消樂的小游戲呢，于是花了兩天時間做了一個小游戲出來。
效果展示#
先在這里放一個最終實現(xiàn)的效果，還是一個比較初級的版本，大家有什么想法歡迎評論哦
游戲規(guī)則：
初始時會給玩家十分的初始分，每拖動一次就減一分，每消除一個方塊就加一分，直到最后分?jǐn)?shù)為0游戲結(jié)束
任意兩個方塊都可以拖動
界面設(shè)計#
頁面的布局比較簡單，格子的數(shù)據(jù)是一個二維數(shù)組的形式，說到這里大家應(yīng)該已經(jīng)明白界面是怎么做的了。
<div
v-for="(item, index) in squareData"
:key="index"
class="row">
<div
v-for="(_item, _index) in item"
:key="_index"
class="square"
:class="_item"
@mousedown="dragStart(index, _index)"
@mouseup="dragEnd">
{{_item}}
</div>
</div>
大家應(yīng)該注意到了 :class="_item" 的寫法，動態(tài)命名class，使得其每個種類的方塊的顏色都不同，最后可以按照同色消除的玩法就行操作。
.square.A{
background-color: #8D98CA;
}
.square.S{
background-color: #A9A2F6;
}
/*其余操作相同*/
同時在玩家點擊方塊的時候方塊會左右擺動以表示選中了此方塊，還可以提升游戲的靈動性。關(guān)于HTML動畫的實現(xiàn)方式有很多，在這里我們使用CSS animation進行操作，代碼如下：
@keyframes jitter {
from, 50%, to {
transform: rotate(0deg);
}
10%, 30% {
transform: rotate(10deg);
}
20% {
transform: rotate(20deg);
}
60%, 80% {
transform: rotate(-10deg);
}
70% {
transform: rotate(-20deg);
}
}
/* 只要是用戶點擊不動，動畫就不會停止 */
.square:active{
animation-name: jitter;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
核心算法#
消除算法
上面提到我之前是做過一道題是判斷一個二維數(shù)組中有沒有可消的元素，有的話是多少個。
在這里我們可以這樣想，最開始遍歷一整個二維數(shù)組，每次定義一個 X0 , X1 , Y0, Y1, 然后每次計算其上下左右連續(xù)相同方塊的位置，在這個過程中要注意邊界問題，然后我們記錄下這四個變量，只要 |X0-X1+1|>=3 或者 |Y0-Y1+1|>=3，我們就可以將這個方塊的坐標(biāo)加入到 del數(shù)組中。
遍歷完一整個二維數(shù)組之后，我們就可以將 del數(shù)組中對應(yīng)坐標(biāo)位置的方塊內(nèi)容變?yōu)?'0', 由于我們沒有對 0 定義樣式，所以在沒有執(zhí)行下落算法之前變?yōu)?0 的方塊為白色。
下落算法
在我們將相應(yīng)的方塊白色之后，其上面的方塊應(yīng)該下落，在這里我的思想是這個樣子的。
按照列遍歷二維數(shù)組，定義一個指針 t，指向上次不為 0 的方塊位置，一旦遇到方塊不為 0 的格子就將其與t所指的方塊就行交換，一次類推，示意圖如下：
這樣的話我們就可以把為空的上移到最頂層，并且不打亂順序，然后我們在隨機填充頂部的空方塊就可以了。做完填充之后我們要再做一次消除算法，直到del數(shù)組的長度為空為止，這個道理大家應(yīng)該都能想得到。
代碼如下
clear(): void {
const m: number = 10;
const n: number = 10;
while (true) {
const del: any[] = [];
for (let i: number = 0; i < m; i++) {
for (let j: number = 0; j < n; j++) {
if (this.squareData[i][j] === '0') {
continue;
}
let x0: number = i;
let x1: number = i;
let y0: number = j;
let y1: number = j;
while (x0 >= 0 && x0 > i - 3 && this.squareData[x0][j] === this.squareData[i][j]) {
--x0;
}
while (x1 < m && x1 < i + 3 && this.squareData[x1][j] === this.squareData[i][j]) {
++x1;
}
while (y0 >= 0 && y0 > j - 3 && this.squareData[i][y0] === this.squareData[i][j]) {
--y0;
}
while (y1 < n && y1 < j + 3 && this.squareData[i][y1] === this.squareData[i][j]) {
++y1;
}
if (x1 - x0 > 3 || y1 - y0 > 3) {
del.push([i, j]);
}
}
}
if (del.length === 0) {
break;
}
this.score += del.length;
for (const square of del) {
this.$set(this.squareData[square[0]], square[1], '0');
}
for (let j: number = 0; j < n; ++j) {
let t: number = m - 1;
for (let i: number = m - 1; i >= 0; --i) {
if (this.squareData[i][j] !== '0') {
[this.squareData[t][j], this.squareData[i][j]] = [this.squareData[i][j], this.squareData[t][j]];
t -= 1;
}
}
}
}
},
游戲結(jié)束#
分?jǐn)?shù)為 0 的時候游戲結(jié)束，此時在執(zhí)行一遍初始化函數(shù)，重新生成一個開心消消樂格子，將分?jǐn)?shù)初始化為10.
if (this.score <= 0) {
if (confirm('分?jǐn)?shù)用光了哦~~')) {
this.init();
} else {
this.init();
}
}
項目源代碼#
目前項目是在github上托管，歡迎PR！點此跳轉(zhuǎn)
總結(jié)
以上所述是小編給大家介紹的Vue實現(xiàn)開心消消樂算法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
深入淺析Vue中mixin和extend的區(qū)別和使用場景
Vue中有兩個較為高級的靜態(tài)方法mixin和extend，接下來給大家介紹Vue中mixin和extend的區(qū)別和使用場景，感興趣的朋友一起看看吧2019-08-08
在Web應(yīng)用中,用戶需要通過認(rèn)證和授權(quán)才能訪問受保護的資源,為了實現(xiàn)認(rèn)證和授權(quán)功能,通常需要使用Token來標(biāo)識用戶身份并驗證其權(quán)限,本文給大家介紹了vue2實現(xiàn)無感刷新token的方式,需要的朋友可以參考下2024-02-02
父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問子組件內(nèi)部屬性或事件,本文給大家介紹了解決vue3使用ref 獲取不到子組件屬性問題,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-06-06
element修改form的el-input寬度,el-select寬度的方法實現(xiàn)
有時候像form表單這樣，頁面的input、select等寬度不一定會是一樣的，可能有些長，有些短，本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實現(xiàn)，感興趣的可以了解一下2022-02-02
Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題
這篇文章主要介紹了Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue 自定義標(biāo)簽的src屬性不能使用相對路徑的解決
這篇文章主要介紹了Vue 自定義標(biāo)簽的src屬性不能使用相對路徑的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了Vue如何實現(xiàn)實時監(jiān)聽頁面寬度高度變化,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08
Vue3新特性之在Composition API中使用CSS Modules
這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07