用JavaScript在heml中编写一个消除游戏

以下是一个简单的JavaScript消除游戏的代码示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>消除游戏</title>
	<style>
		.container {
			display: flex;
			flex-wrap: wrap;
			width: 300px;
			margin: 0 auto;
		}
		.box {
			width: 30px;
			height: 30px;
			margin: 3px;
			background-color: blue;
			cursor: pointer;
		}
		.box.selected {
			background-color: red;
		}
	</style>
</head>
<body>
	<h1>消除游戏</h1>
	<div class="container"></div>
	<button id="checkBtn">检查</button>
	<button id="clearBtn">清除</button>

	<script src="game.js"></script>
</body>
</html>

JavaScript代码：

// 生成随机颜色
function getRandomColor() {
	var letters = '0123456789ABCDEF';
	var color = '#';
	for (var i = 0; i < 6; i++) {
		color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
}

// 生成一行方块
function createRow(num) {
	var row = [];
	for (var i = 0; i < num; i++) {
		var box = document.createElement('div');
		box.classList.add('box');
		box.style.backgroundColor = getRandomColor();
		row.push(box);
	}
	return row;
}

// 生成方块矩阵
function createMatrix(rows, cols) {
	var matrix = [];
	for (var i = 0; i < rows; i++) {
		var row = createRow(cols);
		matrix.push(row);
	}
	return matrix;
}

// 渲染方块矩阵
function renderMatrix(container, matrix) {
	container.innerHTML = '';
	for (var i = 0; i < matrix.length; i++) {
		var row = matrix[i];
		for (var j = 0; j < row.length; j++) {
			container.appendChild(row[j]);
			row[j].addEventListener('click', function() {
				this.classList.toggle('selected');
			});
		}
	}
}

// 检查是否有可消除的方块
function checkMatrix(matrix) {
	var selected = document.querySelectorAll('.selected');
	if (selected.length >= 2) {
		for (var i = 0; i < selected.length; i++) {
			var box = selected[i];
			var row = box.parentNode;
			var rowIndex = Array.prototype.indexOf.call(matrix, row);
			var colIndex = Array.prototype.indexOf.call(row.children, box);
			matrix[rowIndex][colIndex] = null;
		}
		renderMatrix(document.querySelector('.container'), matrix);
	}
}

// 清除所有选中的方块
function clearSelected() {
	var selected = document.querySelectorAll('.selected');
	for (var i = 0; i < selected.length; i++) {
		selected[i].classList.remove('selected');
	}
}

// 初始化游戏
function initGame() {
	var matrix = createMatrix(8, 8);
	renderMatrix(document.querySelector('.container'), matrix);

	document.querySelector('#checkBtn').addEventListener('click', function() {
		checkMatrix(matrix);
	});

	document.querySelector('#clearBtn').addEventListener('click', function() {
		clearSelected();
	});
}

initGame();

这个游戏的实现过程比较简单，主要包括以下几个步骤：

生成随机颜色的方块矩阵；
将方块矩阵渲染到页面上；
给每个方块添加点击事件，点击时可以将方块选中；
点击“检查”按钮时，检查是否有两个或以上的方块被选中，如果是，则将它们从方块矩阵中删除，并重新渲染方块矩阵；
点击“清除”按钮时，清除所有选中的方块。