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