用HTML编写连连看代码

发表于前端技术学习版块 html

连连看是一种非常流行的休闲小游戏，现在我们将通过HTML编写一份连连看代码。<!doctype html> <html> <hea

连连看是一种非常流行的休闲小游戏，现在我们将通过HTML编写一份连连看代码。

<!doctype html>
<html>
<head>
<title> 连连看游戏 </title>
</head>
<body>
<h1> 连连看游戏 </h1>
<!-- 创建连连看游戏区域 -->
<div id="game-board"></div>
<script>
// 定义连连看游戏数据
var data = [
['A', 'B', 'C', 'D'],
['D', 'C', 'B', 'A'],
['E', 'F', 'G', 'H'],
['H', 'G', 'F', 'E']
];
// 创建连连看游戏
var board = document.querySelector('#game-board');
for (var i = 0; i< data.length; i++) {
var row = document.createElement('div');
row.className = 'row';
for (var j = 0; j< data[i].length; j++) {
var cell = document.createElement('div');
cell.className = 'cell';
cell.innerHTML = data[i][j];
row.appendChild(cell);
}
board.appendChild(row);
}
// 添加点击事件
board.addEventListener('click', function(event) {
var target = event.target;
if (target.classList.contains('cell')) {
// 处理点击事件
console.log(target.innerHTML);
}
});
</script>
</body>
</html>

在上面的代码中，我们首先通过HTML代码创建了一个“连连看游戏区域”的div元素，然后使用JavaScript代码动态生成了游戏区域中的每一个单元格，并将游戏数据赋值给每一个单元格。接着，我们添加了一个点击事件监听器，当玩家点击某一个单元格时，该事件监听器就会处理对应的操作。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。