溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

Vue實(shí)現(xiàn)開(kāi)心消消樂(lè)游戲算法

發(fā)布時(shí)間：2020-08-20 05:45:38 來(lái)源：腳本之家 閱讀：679 作者：返回主頁(yè) Jacob''s 欄目：web開(kāi)發(fā)

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

效果展示#

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

Vue實(shí)現(xiàn)開(kāi)心消消樂(lè)游戲算法

游戲規(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)明白界面是怎么做的了。

<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" 的寫(xiě)法，動(dòng)態(tài)命名class，使得其每個(gè)種類(lèi)的方塊的顏色都不同，最后可以按照同色消除的玩法就行操作。

.square.A{
 background-color: #8D98CA;
}
.square.S{
 background-color: #A9A2F6;
}
/*其余操作相同*/

同時(shí)在玩家點(diǎn)擊方塊的時(shí)候方塊會(huì)左右擺動(dòng)以表示選中了此方塊，還可以提升游戲的靈動(dòng)性。關(guān)于HTML動(dòng)畫(huà)的實(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);
 }
}
/* 只要是用戶(hù)點(diǎn)擊不動(dòng)，動(dòng)畫(huà)就不會(huì)停止 */
.square:active{
 animation-name: jitter;
 animation-duration: 0.5s;
 animation-iteration-count: infinite;
}

核心算法#

消除算法

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

在這里我們可以這樣想，最開(kāi)始遍歷一整個(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', 由于我們沒(méi)有對(duì) 0 定義樣式，所以在沒(méi)有執(zhí)行下落算法之前變?yōu)?0 的方塊為白色。

下落算法

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

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

Vue實(shí)現(xiàn)開(kāi)心消消樂(lè)游戲算法

這樣的話(huà)我們就可以把為空的上移到最頂層，并且不打亂順序，然后我們?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è)開(kāi)心消消樂(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)開(kāi)心消消樂(lè)算法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手