请用html实现一个合成大西瓜小游戏
时间: 2024-05-11 16:16:44 浏览: 27
好的,以下是使用HTML实现合成大西瓜小游戏的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>合成大西瓜</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ccc;
}
.box {
width: 200px;
height: 200px;
margin: 10px;
background-color: #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
border-radius: 5px;
text-align: center;
font-size: 50px;
font-weight: bold;
color: #333;
line-height: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box1" onclick="merge(1)"></div>
<div class="box" id="box2" onclick="merge(2)"></div>
<div class="box" id="box3" onclick="merge(3)"></div>
<div class="box" id="box4" onclick="merge(4)"></div>
<div class="box" id="box5" onclick="merge(5)"></div>
<div class="box" id="box6" onclick="merge(6)"></div>
<div class="box" id="box7" onclick="merge(7)"></div>
<div class="box" id="box8" onclick="merge(8)"></div>
<div class="box" id="box9" onclick="merge(9)"></div>
<div class="box" id="box10" onclick="merge(10)"></div>
<div class="box" id="box11" onclick="merge(11)"></div>
<div class="box" id="box12" onclick="merge(12)"></div>
</div>
<script>
var count = 0;
function merge(boxIndex) {
var targetBox = document.getElementById('box' + boxIndex);
if (targetBox.className.indexOf('active') !== -1) {
return;
}
targetBox.className += ' active';
count++;
if (count === 12) {
var bigBox = document.createElement('div');
bigBox.className = 'box active big-box';
bigBox.innerHTML = '大西瓜';
document.querySelector('.container').appendChild(bigBox);
}
}
</script>
</body>
</html>
```
使用这个代码,你可以在浏览器中运行在线合成大西瓜小游戏。玩法是通过点击每个方块,将它们合并成一个大西瓜。当所有方块都被点击后,一个大西瓜方块将出现在页面中心。