基于JS實現(xiàn)的消消樂游戲的示例代碼
前言
一直對小游戲挺感興趣的，也嘗試著做過一些小游戲，實現(xiàn)游戲是一個不錯的提高代碼基礎水平的方式，因此這次挑戰(zhàn)了一個較為困難的小游戲：消消樂。
如果僅僅是從消除方面來制作一個靜態(tài)的消消樂（只有消除和補充方塊的過程，但是沒有任何交互和動畫）其實并不算太難，只要我們能夠想通方塊消除（主要是三消）的原理和方塊下落后的新位置，我們就可以解決這個問題。但如果我們要同時實現(xiàn)各個狀態(tài)的動畫呢？這就是一個比較復雜的問題了。
本文將從邏輯到實現(xiàn)步驟慢慢詳細的介紹該游戲的制作過程。對了，這個游戲是完全用原生js實現(xiàn)的，考慮到要將游戲成品發(fā)給一些不懂程序的朋友，因此沒做代碼拆分，所有的代碼均在一個單一的html文件上。
該游戲已放在codepen上面，點擊查看游戲在線演示。有興趣的小伙伴可以查看，如果能點一個小愛心更好呢。
游戲目前僅做了最簡單的三消功能，如果有時間可以把其他交互也寫出來。
游戲的準備工作
首先我們思考游戲的機制： 游戲有一個“棋盤”，是一個n*m的矩形。矩形中有若干個顏色（或者類型）的方塊，相同類型的方塊，在一個橫行或者豎行，有3個或者3個以上時，便會消除。
在部分方塊消除后，這些方塊上方的方塊便會下墜并補充這些消除方塊的缺口，同時，上方又會生成新的方塊來補充下墜方塊的位置，在執(zhí)行完上述步驟后，便完成了一個游戲過程的循環(huán)。
總結一下
一共有3個步驟，將生成一個游戲循環(huán)：消除，下墜，補充。在補充后，如果方塊們無法自然消除，循環(huán)便會結束。這時候就需要玩家來交還兩個相鄰方塊，來人為制造可以消除的情況，以重新進入循環(huán)。
如果玩家的交換并不能使得重新進入消除循環(huán)呢？那么這個交換將重新?lián)Q回原樣。
基本機制思考完畢，現(xiàn)在開始代碼構建：
首先考慮到方塊們會進行大量的動畫過程（主要是四種：移動，消除，下墜，冒出），于是我們使用絕對定位來安排這些方塊，并且在其行類樣式當中添加屬性：transition，用css來實現(xiàn)這些方塊的動畫。具體實現(xiàn)如下：
移動：通過left和top值的改變，控制方塊的移動。
消除：通過修改transform，修改為scale(0)，以實現(xiàn)消除的動畫。
下墜：通過top值的改變，同移動。
冒出：通過修改transform，將本來為scale(0)的transform值修改為scale(1)，以實現(xiàn)冒出的動畫。
考慮到這些動畫是一個接一個的執(zhí)行，我們應該是需要使用異步來執(zhí)行這些動畫的，當然使用回調(diào)函數(shù)也能實現(xiàn)，但回調(diào)函數(shù)可能會很麻煩，所以我們使用Promise對象來解決這些麻煩。
廢話太多了！現(xiàn)在開始寫代碼。
棋盤
首先是棋盤的實現(xiàn)，簡單操作就定義了一個棋盤的整體結構出來。當然，給#app添加position:relative或者position:absolute是必不可少的。
<body>
<div id="app">
</div>
</body>接下來我們用面向?qū)ο蟮乃枷耄瑯嬙炱灞P的具體內(nèi)容：
首先一個棋盤有它的寬度和高度（x和y），我們還同時還定義它的方塊大?。╯ize）。
matrix則為之后要用到的，存放不同type的矩陣，types則為所有的棋子種類。
除此之外，還有幾個屬性，這些之后再說。
class GameMap {
constructor(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
this.matrix = [];
this.useSwap = false;
this.handleable = true;
this.types = emojis.length;
}
}我們再來構造“棋子”，棋子的屬性很多，所以我們通過僅將options作為參數(shù)，并將options解構，來賦予棋子這些屬性，這些屬性分別是
class Cell {
constructor(options) {
const { position, status, type, left, top, right, bottom, instance } = options;
this.type = type;
this.position = position;
this.status = status;
this.top = top;
this.bottom = bottom;
this.left = left;
this.right = right;
this.instance = instance;
}
}type 類型（顏色），number類型表示，相同的number即被視為同樣的類型。
position 位置，用一個形如[m,n]的二維數(shù)組存儲
status 狀態(tài)，分為'common' 普通 'collapse' 崩塌 'emerge' 冒出，一共三種
top 棋子上方的棋子對象，值也是一個Cell實例，如果棋子上方?jīng)]有棋子，那它就是undefined
left 棋子的左側棋子對象
right 棋子的右側棋子對象
bottom 棋子的下方棋子對象
instance 根據(jù)上述屬性刻畫出的真實的棋子的DOM對象，最終這些對象會在GameMap中展現(xiàn)出來
在這里我們使用emoji表情來展現(xiàn)這些棋子，我們定義全局變量emojis：
const emojis = ['??', '??', '??', '??', '??'];
渲染畫面
有了棋盤和棋子，我們就能渲染棋盤了。
首先我們定義全局變量cells，用以存放棋盤中所有的棋子，所有的Cell類。
然后我們在GameMap中定義方法genMatrix()，初始化棋盤。根據(jù)棋盤寬度和高度（x和y）的配置，我們填好了一個x*y的點陣，不過現(xiàn)在這里面還沒有內(nèi)容。
genMatrix() {
const { x, y } = this;
const row = new Array(x).fill(undefined);
const matrix = new Array(y).fill(undefined).map(item => row);
this.matrix = matrix;
return this;
}接下來的工作是用隨機數(shù)填滿點陣，我們定義方法genRandom()。
genRandom() {
const { x, y } = this;
this.matrix = this.matrix.map(row => row.map(item => Math.floor(Math.random() * this.types)));
return this;
}
如圖所示的一個點陣就此生成。我們再用這些點陣渲染出真實的畫面。
定義方法init()
目前來看，init()的寫法有些晦澀難懂，這也很正常，之后我們還會提到它。
init() {
cells = [];
const { x, y } = this;
for (let i = 0; i < y; i++) {
for (let j = 0; j < x; j++) {
const type = this.matrix[i][j];
const random = Math.floor(Math.random() * this.types);
cells.push(new Cell({
type: (type == undefined) ? random : type,
position: [j, i],
status: (type == undefined) ? 'emerge' : 'common',
left: undefined,
top: undefined,
right: undefined,
bottom: undefined,
instance: undefined
}));
}
}
cells.forEach(cell => {
const [row, col] = cell.position;
cell.left = cells.find(_cell => {
const [_row, _col] = _cell.position;
return (_row == row - 1) && (_col == col);
});
cell.right = cells.find(_cell => {
const [_row, _col] = _cell.position;
return (_row == row + 1) && (_col == col);
});
cell.top = cells.find(_cell => {
const [_row, _col] = _cell.position;
return (_row == row) && (_col == col - 1);
});
cell.bottom = cells.find(_cell => {
const [_row, _col] = _cell.position;
return (_row == row) && (_col == col + 1);
});
cell.genCell();
});
return this;
}之前定義的全局變量cells，就用以存放所有的Cell類的實例。
對于一個新鮮生成的棋盤來說，所有的Cell的狀態(tài)（status）都是common，其他情況我們之后會講到。回到Cell類的構造過程，我們發(fā)現(xiàn)這一步完成了Cell實例的塑造，這些棋子將被進一步的加工為最后的游戲畫面，而最后一步cell.genCell()則最終把這些抽象的類實體化。
genCell()方法是在Cell類中我們定義的方法，我們根據(jù)
genCell() {
const cell = document.createElement('div');
const size = gameMap.size;
const [x, y] = this.position;
cell.type = this.type;
cell.style.cssText =
`
width:${size}px;
height:${size}px;
left:${size * x}px;
top:${size * y}px;
box-sizing:border-box;
border:5px solid transparent;
transition:0.5s;
position:absolute;
transform:scale(${this.status == 'emerge' ? '0' : '1'});
display:flex;
justify-content:center;
align-items:center
`;
cell.innerHTML = `<span style="font-size:40px;cursor:pointer">${emojis[this.type]}</span>`;
this.instance = cell;
}genCell根據(jù)init()之前對cell數(shù)據(jù)的定義和演算，生成了棋子，但目前，棋子尚未渲染到頁面中，只是作為DOM對象暫存。
最后我們定義方法genCellMap()生成真實的游戲畫面。
genCellMap() {
app.innerHTML = '';
cells.forEach(cell => {
app.append(cell.instance);
});
return this;
}遍歷之前全局變量cells中的內(nèi)容，找到每個Cell中的instance，再將這些instance掛載到#app上，一個游戲棋盤就躍然而出了。
這就是一個Cell實例的模樣，其中的instance是一個實實在在的div。
游戲畫面則是一個最簡單的棋盤，沒有做其他的美化修飾（其實是因為懶得寫了）。因為考慮到emoji不像圖片加載這么麻煩，同時，也不存在失真的情況，所以我們使用emoji來刻畫這些棋子。
一個真實的instance的樣子。
動畫效果
之前我們已經(jīng)明確了游戲的一個循環(huán)過程發(fā)送的三件事情消除，下墜，補充，所以說我們把這三件事情分別通過定義GameMap的三個方法來刻畫，這三個方法分別為 :
genCollapse() genDownfall() genEmerge()
代碼如下
genCollapse()
genCollapse() {
return new Promise((resolve, reject) => {
this.handleable = false;
this.markCollapseCells();
setTimeout(() => {
cells.forEach(cell => {
if (cell.status == 'collapse') {
cell.instance.style.transform = 'scale(0)';
}
});
}, 0);
setTimeout(() => {
resolve('ok');
}, 500);
});
}genCollapse的過程中還有一個步驟叫做markCollapseCells()，用以標記將會崩塌的棋子，該方法代碼如下：
markCollapseCells() {
cells.forEach((cell) => {
const { left, right, top, bottom, type } = cell;
if (left?.type == type && right?.type == type) {
left.status = "collapse";
cell.status = "collapse";
right.status = "collapse";
}
if (top?.type == type && bottom?.type == type) {
top.status = "collapse";
cell.status = "collapse";
bottom.status = "collapse";
}
});
return this;
}遍歷整個cells，如果一個棋子的左邊右邊和自己都為同一個類型，那他們仨的狀態(tài)都會被標記為'collapse'，同理，如果棋子的上面下面和自己為同一個類型，也會被標記。我們不害怕重復的情況，因為已經(jīng)被標記的棋子，再被標記一次也無所謂。
標記完成后，我們便將這些被標記的Cell對象，他們的instance的style加入一項transform:scale(0)，在transition的作用下，它們會逐步（實際上很快）萎縮為看不見的狀態(tài)，實際上它們并沒有因此消失。而在這一個逐步萎縮的過程，我們通過Promise的性質(zhì)，來阻塞該方法的執(zhí)行，以等待棋子萎縮完畢，再進入下一個過程：下墜。0.5s后拋出resolve，完成放行，順利進入到下一個步驟。
genDownfall()
genDownfall() {
return new Promise((resolve, reject) => {
setTimeout(() => {
cells.forEach(cell => {
if (cell.status != 'collapse') {
let downfallRange = 0;
let bottom = cell.bottom;
while (bottom) {
if (bottom.status == 'collapse') {
downfallRange += 1;
}
bottom = bottom.bottom;
}
cell.instance.style.top = (parseInt(cell.instance.style.top) + gameMap.size * downfallRange) + 'px';
}
});
}, 0);
setTimeout(() => {
resolve('ok');
}, 500);
});
}genDownfall()的關鍵是我們需要得知，哪些棋子會下墜，這些棋子應該下墜多少距離。我們得知下墜距離后，再設置這些Cell中新的top值，同樣是通過transition的效果，來制造下墜的動畫。
首先明確什么棋子可能會下墜：
其實很簡單，除開status為collapse的棋子都可能會下墜，但也不見得，比如最下方一排的棋子無論如何也不會下墜。
所以下一步就是計算它們下墜的距離：
這一步也不復雜，之前的Cell類中我們已經(jīng)事先定義了棋子的bottom屬性，我們只需要知道棋子下方有多少個狀態(tài)為collapse的棋子，我們就知道該棋子會下墜多少距離了，距離=棋子的size*下方狀態(tài)為collapse的棋子數(shù)量。
通過while大法，逐一查詢該棋子下方棋子的狀態(tài)，便能得到答案。
我們故伎重施，使用Promise的性質(zhì)阻塞整個過程0.5s，再放行到下一步。
genEmerge()
genEmerge()的過程相比之下要復雜很多，因為此時棋盤已經(jīng)被打亂，需要重塑整個棋盤，重塑完畢后，再將缺失的棋盤補充出來。補充出來的方法之前也提到了，就是scale(0)->scale(1)，以得到一種勃勃生機，萬物競發(fā)的效果。
代碼如下：
genEmerge() {
return new Promise((resolve, reject) => {
this.regenCellMap();
this.genCellMap();
setTimeout(() => {
cells.forEach(cell => {
if (cell.status == 'emerge') {
cell.instance.style.transform = 'scale(1)';
}
});
}, 0);
setTimeout(() => { resolve('ok'); }, 500);
});
}其中有一個步驟叫做regenCellMap()，該步驟代碼如下
regenCellMap() {
const size = gameMap.size;
const findInstance = (x, y) => {
return cells.find(item => {
const { offsetLeft, offsetTop } = item.instance;
return (item.status != 'collapse' && (x == offsetLeft / size) && (y == offsetTop / size));
})?.instance;
};
this.genMatrix();
this.matrix = this.matrix.map((row, rowIndex) => row.map((item, itemIndex) => findInstance(itemIndex, rowIndex)?.type));
this.init();
}這其中關鍵的一步就是findInstance，我們要重新找到執(zhí)行了downfall后的棋子它們的position是什么，并將它們的type和位移后的position一一對應，我們用這些重新一一對應的信息，重新構造matrix，以完成對整個棋盤的重新塑造。注意該方法的最后一步，init()，也就是說我們對棋盤重新進行了初始化，下面我們再來看init()的代碼，或許你就能理解init()為什么這么寫了。
重塑后的matrix長這樣。
下墜的棋子填了消除棋子的坑，那上面的空隙也就出現(xiàn)了，數(shù)組的find方法，找不到內(nèi)容，便會返回undefined，因此findInstance()在找不到棋子的時候，便會返回undefined，也因此將這一結果作用到了重塑的matrix上。
我們重新來看init()
init() {
cells = [];
const { x, y } = this;
for (let i = 0; i < y; i++) {
for (let j = 0; j < x; j++) {
const type = this.matrix[i][j];
const random = Math.floor(Math.random() * this.types);
cells.push(new Cell({
type: (type == undefined) ? random : type,
position: [j, i],
status: (type == undefined) ? 'emerge' : 'common',
left: undefined,
top: undefined,
right: undefined,
bottom: undefined,
instance: undefined
}));
}
}
cells.forEach(cell => {
const [row, col] = cell.position;
cell.left = cells.find(_cell => {
const [_row, _col] = _cell.position;
return (_row == row - 1) && (_col == col);
});
cell.right = cells.find(_cell => {
const [_row, _col] = _cell.position;
return (_row == row + 1) && (_col == col);
});
cell.top = cells.find(_cell => {
const [_row, _col] = _cell.position;
return (_row == row) && (_col == col - 1);
});
cell.bottom = cells.find(_cell => {
const [_row, _col] = _cell.position;
return (_row == row) && (_col == col + 1);
});
cell.genCell();
});
return this;
}注意這兩句代碼：
type: (type == undefined) ? random : type
status: (type == undefined) ? 'emerge' : 'common'
重塑后的棋盤，空隙的部位得以補充：首先它們的類型為隨機生成，它們的狀態(tài)也有別于common，而是emerge，在genEmerge()過程中它們將會出現(xiàn)。
整合效果
最復雜的工作目前已經(jīng)完成，我們已經(jīng)刻畫出了整個游戲的核心循環(huán)，現(xiàn)在我們再用genLoop方法來整合這一系列過程，代碼如下：
genLoop()
async genLoop() {
await gameMap.genCollapse();
let status = cells.some(cell => cell.status == 'collapse');
while (cells.some(cell => cell.status == 'collapse')) {
await gameMap.genDownfall();
await gameMap.genEmerge();
await gameMap.genCollapse();
}
gameMap.handleable = true;
return status;
}考慮到我們使用了Promise，所以我們將genLoop弄成異步函數(shù)。while循環(huán)將循環(huán)往復的執(zhí)行這些過程，直到我們無法將任何的棋子狀態(tài)標記為collapse。之前我們有個變量沒提到，就是handleable，它決定了我們是否可以對棋盤進行互動。
genSwap()
最后我們考慮的是我們操縱棋盤的過程。實際上消消樂游戲中，需要我們交互的場景是很少的，大多數(shù)時間都是在觀看動畫，genSwap是我們交換兩個棋子的過程。
genSwap(firstCell, secondCell) {
return new Promise((resolve, reject) => {
const { instance: c1, type: t1 } = firstCell;
const { instance: c2, type: t2 } = secondCell;
const { left: x1, top: y1 } = c1.style;
const { left: x2, top: y2 } = c2.style;
setTimeout(() => {
c1.style.left = x2;
c1.style.top = y2;
c2.style.left = x1;
c2.style.top = y1;
}, 0);
setTimeout(() => {
firstCell.instance = c2;
firstCell.type = t2;
secondCell.instance = c1;
secondCell.type = t1;
resolve('ok');
}, 500);
});
}套路還是很明確的，先改變兩枚棋子的left和top值，獲得動畫效果，0.5s后再重構Cell對象。
最后是游戲的執(zhí)行代碼：
const app = document.getElementById('app');
const btn = document.getElementById('btn');
const emojis = ['??', '??', '??', '??', '??'];
let cells = [];
let gameMap = new GameMap(6, 10, 50);
gameMap.genMatrix().genRandom();
gameMap.init().genCellMap();
gameMap.genLoop();
let cell1 = null;
let cell2 = null;
app.onclick = () => {
if (gameMap.handleable) {
const target = event.target.parentNode;
const { left: x, top: y } = target.style;
const _cell = cells.find(item => item.instance == target);
if (!gameMap.useSwap) {
target.className = 'active';
cell1 = _cell;
} else {
cell2 = _cell;
cell1.instance.className = '';
if (['left', 'top', 'bottom', 'right'].some(item => cell1[item] == cell2)) {
(async () => {
await gameMap.genSwap(cell1, cell2);
let res = await gameMap.genLoop();
if (!res) {
await gameMap.genSwap(cell1, cell2);
}
})();
}
}
gameMap.useSwap = !gameMap.useSwap;
}
};實際上主要的工作是花在構造GameMap和Cell兩個類上面，清楚的構造了兩個類之后，剩下的工作就不那么復雜了。
這里的點擊事件稍微復雜一點，因為實際上消消樂當中只有相鄰的兩個單元格才能交換，并且交換后還需與判斷是否有單元格會因此崩塌，如果沒有，這個交換將被重置。app.onclick當中便刻畫了這個效果。
以上就是基于JS實現(xiàn)的消消樂游戲的示例代碼的詳細內(nèi)容，更多關于JS消消樂游戲的資料請關注腳本之家其它相關文章！
相關文章
今天小編就為大家分享一篇Layui Form 自定義驗證的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
下面小編就為大家?guī)硪黄猨s 監(jiān)控iframe URL的變化實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了詳解Typescript 內(nèi)置的模塊導入兼容方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
使用JavaScriptCore實現(xiàn)OC和JS交互詳解
JavaScriptCore是webkit的一個重要組成部分，主要是對JS進行解析和提供執(zhí)行環(huán)境。下面這篇文章主要給大家介紹了使用JavaScriptCore實現(xiàn)OC和JS交互的相關資料，文中介紹的非常詳細，需要的朋友可以參考學習，下面來一起看看吧。2017-03-03
這篇文章主要介紹了微信小程序獲取地址的具體方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
很多的新手朋友們對js中的時間格式與時間戳的轉(zhuǎn)換比較陌生，下面就為大家詳細介紹下具體的轉(zhuǎn)換步驟，感興趣的朋友可以參考下2013-12-12
unicloud云開發(fā)進階獲取首頁列表數(shù)據(jù)示例詳解
這篇文章主要為大家介紹了unicloud云開發(fā)進階獲取首頁列表數(shù)據(jù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了antd Upload 文件上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了詳解小程序循環(huán)require之坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
下面小編就為大家分享一篇js 兩數(shù)組去除重復數(shù)值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12