JavaScript三色球是一款非常受歡迎的小游戲，玩家需要通過(guò)點(diǎn)擊屏幕改變方塊的顏色，使其與周?chē)姆綁K顏色相同，以達(dá)到消除方塊的目的。這款游戲不僅簡(jiǎn)單易懂，而且趣味性非常高，今天我就來(lái)介紹一下它的實(shí)現(xiàn)過(guò)程。

首先，我們需要定義一個(gè)三色球的類(lèi)，并在構(gòu)造函數(shù)中傳入游戲區(qū)域的大小及游戲中所用的三種顏色：

class ThreeColors {
constructor(width, height, colors) {
this.width = width;
this.height = height;
this.colors = colors;
this.arr = [];
this.init();
}
// 其他方法
}
const game = new ThreeColors(10, 10, ['red', 'blue', 'green']);

在初始化函數(shù)init()中，我們需要生成隨機(jī)的方塊顏色，并將它們插入到游戲區(qū)域中：

init() {
for (let i = 0; i < this.width; i++) {
let row = [];
for (let j = 0; j < this.height; j++) {
let color = this.colors[Math.floor(Math.random() * this.colors.length)];
let div = document.createElement('div');
div.className = 'cell';
div.style.backgroundColor = color;
div.onclick = () => {
this.changeColor(i, j);
}
document.body.appendChild(div);
row.push(color);
}
this.arr.push(row);
}
}

在點(diǎn)擊方塊時(shí)，我們需要判斷該方塊和周?chē)姆綁K是否是同一種顏色，如果是，則設(shè)置該方塊為消除狀態(tài)，并繼續(xù)對(duì)相鄰的方塊遞歸調(diào)用該函數(shù)。以下是changeColor()方法的實(shí)現(xiàn)：

changeColor(i, j) {
const currentColor = this.arr[i][j];
const div = document.getElementsByClassName('cell')[i * this.width + j];
div.classList.add('remove');
setTimeout(() => {
div.classList.remove('remove');
if (i > 0 && this.arr[i - 1][j] === currentColor) {
this.changeColor(i - 1, j);
}
if (i < this.width - 1 && this.arr[i + 1][j] === currentColor) {
this.changeColor(i + 1, j);
}
if (j > 0 && this.arr[i][j - 1] === currentColor) {
this.changeColor(i, j - 1);
}
if (j < this.height - 1 && this.arr[i][j + 1] === currentColor) {
this.changeColor(i, j + 1);
}
}, 100);
}

最后，我們需要在HTML和CSS中定義游戲區(qū)域及方塊的樣式：

html,body{
margin: 0;
padding: 0;
height:100%;
}
.cell{
width: 30px;
height: 30px;
border: 1px solid #ccc;
display: inline-block;
}
.remove{
background-color: #333;
animation: remove 0.2s forwards;
}
@keyframes remove {
from {
transform: scale(1);
}
to {
transform: scale(0);
}
}

在以上步驟都完成后，我們就可以測(cè)試游戲了，代碼演示如下：

以上就是這款JavaScript三色球游戲的實(shí)現(xiàn)過(guò)程，希望對(duì)你有所幫助！