用html做一个消消乐代码
时间: 2023-12-05 13:04:56 浏览: 59
好的,以下是一个简单的消消乐代码的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消消乐</title>
<style>
.tile {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
.hidden {
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body>
<table>
<tr>
<td class="tile" data-value="1">1</td>
<td class="tile" data-value="2">2</td>
<td class="tile" data-value="3">3</td>
</tr>
<tr>
<td class="tile" data-value="4">4</td>
<td class="tile" data-value="5">5</td>
<td class="tile" data-value="6">6</td>
</tr>
<tr>
<td class="tile" data-value="7">7</td>
<td class="tile" data-value="8">8</td>
<td class="tile" data-value="9">9</td>
</tr>
</table>
<script>
// 获取所有方块元素
var tiles = document.querySelectorAll('.tile');
// 给每个方块元素添加点击事件处理程序
tiles.forEach(function(tile) {
tile.addEventListener('click', function() {
// 获取当前方块的值
var currentValue = parseInt(tile.getAttribute('data-value'));
// 获取相邻的方块元素
var adjacentTiles = getAdjacentTiles(tile);
// 如果当前方块旁边有值相同的方块,就隐藏它们
adjacentTiles.forEach(function(adjacentTile) {
var adjacentValue = parseInt(adjacentTile.getAttribute('data-value'));
if (currentValue === adjacentValue) {
tile.classList.add('hidden');
adjacentTile.classList.add('hidden');
}
});
});
});
function getAdjacentTiles(tile) {
// 获取当前方块元素所在的列
var column = tile.cellIndex;
// 获取当前方块元素所在的行
var row = tile.parentNode.rowIndex;
// 获取相邻的方块元素
var adjacentTiles = [];
if (row - 1 >= 0) { // 上面的方块元素
adjacentTiles.push(tile.parentNode.previousElementSibling.children[column]);
}
if (row + 1 <= 2) { // 下面的方块元素
adjacentTiles.push(tile.parentNode.nextElementSibling.children[column]);
}
if (column - 1 >= 0) { // 左边的方块元素
adjacentTiles.push(tile.previousElementSibling);
}
if (column + 1 <= 2) { // 右边的方块元素
adjacentTiles.push(tile.nextElementSibling);
}
return adjacentTiles;
}
</script>
</body>
</html>
```
此代码使用 HTML 表格和 JavaScript 来实现一个简单的消消乐游戏。每个方块元素都有一个 `data-value` 属性,代表它的值。当玩家点击一个方块元素时,程序会检查该元素旁边是否有值相同的方块元素,如果有,就隐藏它们。玩家需要不断点击方块元素,直到游戏结束。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)