Vue實現(xiàn)開心消消樂游戲算法
之前做過一個算法題，算法要求就是寫一個開心消消樂的邏輯算法，當時也是考慮了一段時間才做出來。后來想了想，既然核心算法都有了，能不能實現(xiàn)一個開心消消樂的小游戲呢，于是花了兩天時間做了一個小游戲出來。
效果展示#
先在這里放一個最終實現(xiàn)的效果，還是一個比較初級的版本，大家有什么想法歡迎評論哦
游戲規(guī)則：
初始時會給玩家十分的初始分，每拖動一次就減一分，每消除一個方塊就加一分，直到最后分數(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，我們就可以將這個方塊的坐標加入到 del數(shù)組中。
遍歷完一整個二維數(shù)組之后，我們就可以將 del數(shù)組中對應(yīng)坐標位置的方塊內(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é)束#
分數(shù)為 0 的時候游戲結(jié)束，此時在執(zhí)行一遍初始化函數(shù)，重新生成一個開心消消樂格子，將分數(shù)初始化為10.
if (this.score <= 0) {
if (confirm('分數(shù)用光了哦~~')) {
this.init();
} else {
this.init();
}
}
項目源代碼#
目前項目是在github上托管，歡迎PR！點此跳轉(zhuǎn)
總結(jié)
以上所述是小編給大家介紹的Vue實現(xiàn)開心消消樂算法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
隨著互聯(lián)網(wǎng)的發(fā)展,PDF?文件在信息交流和文檔分享中起著重要的作用,通過在?Vue?組件中實現(xiàn)?PDF?預(yù)覽功能,我們可以為用戶提供便捷的內(nèi)容閱讀體驗,下面我們就來看看具體實現(xiàn)方法吧2023-08-08
vue實現(xiàn)todolist單頁面應(yīng)用
這篇文章主要為大家詳細介紹了vue實現(xiàn)todolist單頁面應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了VueJs與ReactJS和AngularJS的異同點,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
記錄一下踩坑,前幾天從同事手上接手了一個Vue的項目,下面這篇文章主要給大家介紹了關(guān)于VUE項目運行失敗原因及解決辦法的相關(guān)資料,本文以vscode為例,需要的朋友可以參考下2023-06-06
Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解
計算屬性就是 Vue 實例選項中的 computed，computed 的值是一個對象類型，對象中的屬性值為函數(shù)，而且這個函數(shù)沒辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue如何自定義地址設(shè)置@，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue組件傳值的11種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了Vue+ssh框架實現(xiàn)在線聊天，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue中使用微信公眾號js-sdk踩坑記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue中如何實現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05