别踩白块纯Javascript代码
时间: 2023-07-09 12:37:08 浏览: 41
以下是一个纯JavaScript实现“别踩白块”的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>别踩白块</title>
<style>
.container {
width: 500px;
margin: 0 auto;
}
.row {
height: 100px;
display: flex;
}
.white {
background-color: white;
border: 1px solid black;
flex-grow: 1;
}
.black {
background-color: black;
border: 1px solid black;
flex-grow: 1;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="white"></div>
<div class="black"></div>
<div class="black"></div>
<div class="black"></div>
</div>
<div class="row">
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="black"></div>
</div>
<div class="row">
<div class="black"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
</div>
<div class="row">
<div class="black"></div>
<div class="black"></div>
<div class="black"></div>
<div class="white"></div>
</div>
</div>
<script>
var blacks = document.querySelectorAll('.black');
var score = 0;
var time = 60;
var timer;
blacks.forEach(function(black) {
black.addEventListener('click', function() {
if (this.classList.contains('clicked')) {
return;
} else if (this.classList.contains('white')) {
clearInterval(timer);
alert('Game Over! Your score is ' + score);
} else {
this.classList.add('clicked');
score++;
document.getElementById('score').textContent = score;
}
});
});
timer = setInterval(function() {
time--;
document.getElementById('time').textContent = time;
if (time === 0) {
clearInterval(timer);
alert('Game Over! Your score is ' + score);
}
}, 1000);
</script>
</body>
</html>
```
这个纯JavaScript代码示例与之前的代码示例非常相似,除了将JavaScript代码嵌入到HTML文件中。注意,在这个示例中,我们添加了一个CSS规则来让黑块变成指针形状,以增加游戏体验。