<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小游戏</title>
<style>
*{
margin: 0;
padding: 0;
}
.dian{
width: 30px;
height: 30px;
background-color: red;
position: absolute;
}
.num{
font-size: 20px;
}
</style>
</head>
<body>
<div class="num">
<span>当前数量：</span>
<span id="num"></span>
</div>
<script>
// window.innerWidth 返回视口宽度
// console.log(window.innerWidth);
// window.innerHeight 返回视口高度
// console.log(window.innerHeight);
// 生成元素的最大left值
let maxLeft = window.innerWidth - 30
// 生成元素的最大top值
let maxTop = window.innerHeight - 30
//该定时器生成点
//定时器有一个返回值
let timer1 = setInterval(() => {
// 创建一个div元素
let dian = document.createElement('div')
// 个创建的div元素添加类选择器样式
dian.className = 'dian'
dian.style.left = Math.random()*maxLeft+'px'
dian.style.top = Math.random()*maxTop+'px'
// 每个元素注册点击事件
dian.onclick = function(){
this.remove()
}
// 将创建的div元素添加到body中
document.body.appendChild(dian)
}, 500);
console.log(timer1);
//该定时器统计点的数量，并判断游戏是否结束
let timer2 = setInterval(() => {
//获取数量
let num = document.querySelectorAll('.dian').length
//显示当前点的数量
document.querySelector('#num').innerHTML = num
//判断游戏是否结束
if(num>=10){
alert('Game Over~~')
// 清除定时器
clearInterval(timer1)
clearInterval(timer2)
}
}, 100);
</script>
</body>
</html>
