html钢琴块游戏源码
时间: 2023-10-08 15:06:50 浏览: 63
以下是一个简单的 HTML 钢琴块游戏的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Piano Tiles Game</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
width: 600px;
margin: 0 auto;
border: 1px solid black;
}
.tile {
width: 150px;
height: 50px;
border: 1px solid black;
box-sizing: border-box;
cursor: pointer;
}
.black {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile black"></div>
</div>
<script>
var tiles = document.querySelectorAll('.tile');
var score = 0;
var playing = true;
function moveTiles() {
if (!playing) return;
for (var i = 0; i < 6; i++) {
var tile = tiles[i];
var top = parseInt(tile.style.top || 0);
if (top > 500) {
playing = false;
alert('Game Over! Your score is ' + score);
return;
}
tile.style.top = (top + 50) + 'px';
}
}
function addTile() {
if (!playing) return;
var index = Math.floor(Math.random() * 6);
var tile = tiles[index];
if (tile.classList.contains('black')) {
score++;
tile.classList.remove('black');
} else {
playing = false;
alert('Game Over! Your score is ' + score);
return;
}
setTimeout(function() {
tile.classList.add('black');
}, 500);
}
tiles.forEach(function(tile) {
tile.addEventListener('click', function() {
if (tile.classList.contains('black')) {
score++;
tile.classList.remove('black');
} else {
playing = false;
alert('Game Over! Your score is ' + score);
}
});
});
setInterval(moveTiles, 1000);
setInterval(addTile, 2000);
</script>
</body>
</html>
```
这个示例代码中,使用了基本的 HTML 和 CSS,以及一些 JavaScript 代码来实现钢琴块游戏的效果。在浏览器中打开这个 HTML 文件,就可以开始玩钢琴块游戏了。