摘要：這篇Vue欄目下的“Vue實(shí)現(xiàn)開心消消樂(lè)游戲算法”，介紹的技術(shù)點(diǎn)是“開心消消樂(lè)、Vue、開心、游戲、算法、實(shí)現(xiàn)”，希望對(duì)大家開發(fā)技術(shù)學(xué)習(xí)和問(wèn)題解決有幫助。

之前做過(guò)一個(gè)算法題，算法要求就是寫一個(gè)開心消消樂(lè)的邏輯算法，當(dāng)時(shí)也是考慮了一段時(shí)間才做出來(lái)。后來(lái)想了想，既然核心算法都有了，能不能實(shí)現(xiàn)一個(gè)開心消消樂(lè)的小游戲呢，于是花了兩天時(shí)間做了一個(gè)小游戲出來(lái)。

效果展示#

先在這里放一個(gè)最終實(shí)現(xiàn)的效果，還是一個(gè)比較初級(jí)的版本，大家有什么想法歡迎評(píng)論哦

游戲規(guī)則：

初始時(shí)會(huì)給玩家十分的初始分，每拖動(dòng)一次就減一分，每消除一個(gè)方塊就加一分，直到最后分?jǐn)?shù)為0游戲結(jié)束

任意兩個(gè)方塊都可以拖動(dòng)

界面設(shè)計(jì)#

頁(yè)面的布局比較簡(jiǎn)單，格子的數(shù)據(jù)是一個(gè)二維數(shù)組的形式，說(shuō)到這里大家應(yīng)該已經(jīng)明白界面是怎么做的了。

v-for="(item, index) in squareData"

:key="index"

class="row">

v-for="(_item, _index) in item"

:key="_index"

class="square"

:class="_item"

@mousedown="dragStart(index, _index)"

@mouseup="dragEnd">

{{_item}}

大家應(yīng)該注意到了 :class="_item" 的寫法，動(dòng)態(tài)命名class，使得其每個(gè)種類的方塊的顏色都不同，最后可以按照同色消除的玩法就行操作。

.square.A{

background-color: #8D98CA;

}

.square.S{

background-color: #A9A2F6;

}

/*其余操作相同*/

同時(shí)在玩家點(diǎn)擊方塊的時(shí)候方塊會(huì)左右擺動(dòng)以表示選中了此方塊，還可以提升游戲的靈動(dòng)性。關(guān)于HTML動(dòng)畫的實(shí)現(xiàn)方式有很多，在這里我們使用CSS animation進(jìn)行操作，代碼如下：

@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);

}

}

/* 只要是用戶點(diǎn)擊不動(dòng)，動(dòng)畫就不會(huì)停止 */

.square:active{

animation-name: jitter;

animation-duration: 0.5s;

animation-iteration-count: infinite;

}

核心算法#

消除算法

上面提到我之前是做過(guò)一道題是判斷一個(gè)二維數(shù)組中有沒有可消的元素，有的話是多少個(gè)。

在這里我們可以這樣想，最開始遍歷一整個(gè)二維數(shù)組，每次定義一個(gè) X0 , X1 , Y0, Y1, 然后每次計(jì)算其上下左右連續(xù)相同方塊的位置，在這個(gè)過(guò)程中要注意邊界問(wèn)題，然后我們記錄下這四個(gè)變量，只要 |X0-X1+1|>=3 或者 |Y0-Y1+1|>=3，我們就可以將這個(gè)方塊的坐標(biāo)加入到 del數(shù)組中。

遍歷完一整個(gè)二維數(shù)組之后，我們就可以將 del數(shù)組中對(duì)應(yīng)坐標(biāo)位置的方塊內(nèi)容變?yōu)?'0', 由于我們沒有對(duì) 0 定義樣式，所以在沒有執(zhí)行下落算法之前變?yōu)?0 的方塊為白色。

下落算法

在我們將相應(yīng)的方塊白色之后，其上面的方塊應(yīng)該下落，在這里我的思想是這個(gè)樣子的。

按照列遍歷二維數(shù)組，定義一個(gè)指針 t，指向上次不為 0 的方塊位置，一旦遇到方塊不為 0 的格子就將其與t所指的方塊就行交換，一次類推，示意圖如下：

這樣的話我們就可以把為空的上移到最頂層，并且不打亂順序，然后我們?cè)陔S機(jī)填充頂部的空方塊就可以了。做完填充之后我們要再做一次消除算法，直到del數(shù)組的長(zhǎng)度為空為止，這個(gè)道理大家應(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 的時(shí)候游戲結(jié)束，此時(shí)在執(zhí)行一遍初始化函數(shù)，重新生成一個(gè)開心消消樂(lè)格子，將分?jǐn)?shù)初始化為10.

if (this.score <= 0) {

if (confirm('分?jǐn)?shù)用光了哦~~')) {

this.init();

} else {

this.init();

}

}

項(xiàng)目源代碼#

目前項(xiàng)目是在github上托管，歡迎PR！點(diǎn)此跳轉(zhuǎn)

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)開心消消樂(lè)算法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)Java大數(shù)據(jù)社區(qū)網(wǎng)站的支持！

如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的java开心消消乐代码_Vue实现开心消消乐游戏算法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。