写一个直接用电脑运行的消消乐的小游戏;无需安装运行环境;可以是网页版;打开就能玩的那种
时间: 2023-12-29 14:03:45 浏览: 24
好的,我可以为您提供一个简单的网页版消消乐游戏。以下是游戏的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>消消乐小游戏</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 50px;
height: 50px;
text-align: center;
font-size: 24px;
border: 1px solid black;
cursor: pointer;
}
td.selected {
background-color: yellow;
}
</style>
</head>
<body>
<h1>消消乐小游戏</h1>
<p>点击两个相邻的方块可以消除它们</p>
<table id="gameTable">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var colors = ["red", "green", "blue", "yellow", "purple", "orange"];
var table = document.getElementById("gameTable");
var rows = table.getElementsByTagName("tr");
var selected1 = null;
var selected2 = null;
var gameData = [];
for (var i = 0; i < rows.length; i++) {
var rowData = [];
var cells = rows[i].getElementsByTagName("td");
for (var j = 0; j < cells.length; j++) {
var cell = cells[j];
cell.onclick = function() {
cellClick(this);
}
var colorIndex = Math.floor(Math.random() * colors.length);
cell.style.backgroundColor = colors[colorIndex];
rowData.push(colorIndex);
}
gameData.push(rowData);
}
function cellClick(cell) {
if (selected1 == null) {
selected1 = cell;
selected1.className = "selected";
} else if (selected2 == null) {
selected2 = cell;
selected2.className = "selected";
checkSelectedCells();
} else {
selected1.className = "";
selected2.className = "";
selected1 = cell;
selected1.className = "selected";
selected2 = null;
}
}
function checkSelectedCells() {
var row1 = selected1.parentNode.rowIndex;
var col1 = selected1.cellIndex;
var row2 = selected2.parentNode.rowIndex;
var col2 = selected2.cellIndex;
if (gameData[row1][col1] == gameData[row2][col2]) {
gameData[row1][col1] = -1;
gameData[row2][col2] = -1;
selected1.onclick = null;
selected2.onclick = null;
selected1.style.backgroundColor = "";
selected2.style.backgroundColor = "";
selected1 = null;
selected2 = null;
} else {
selected1.className = "";
selected2.className = "";
selected1 = null;
selected2 = null;
}
}
</script>
</body>
</html>
```
您可以将上面的代码保存为一个名为 `match.html` 的文件,然后双击打开这个文件即可在浏览器中玩这个游戏。这个游戏不需要安装任何运行环境,也不需要连接到网络,非常方便。