<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小鱼打字</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
/*background-color: red;*/
background-image: url("images/bg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.specter {
width: 300px;
height: 300px;
background: url("images/yy.png") no-repeat;
position: absolute;
}
.specter>span{
position: absolute;
left: 70px;
top: 200px;
font-size: 60px;
font-weight: bold;
text-shadow: 5px 5px 5px #3e437a;
}
</style>
</head>
<body>
<img src="images/play.png" alt="">
<audio src="media/bg.ogg" autoplay loop></audio>
<!--<div class="specter"><span>m</span></div>-->
<script>
let oImg = document.querySelector("img");
let oAudio = document.querySelector("audio");
oImg.onclick = function () {
// 移除按钮
oImg.parentNode.removeChild(oImg);
// 播放bgm
oAudio.play();
// 只有当用户点击按钮时, 才会开始创建幽灵
setInterval(function () {
let s = new Specter();
s.fly();
}, 1000);
};
// 将幽灵封装成一个类
class Specter {
constructor() {
// 1.创建div 并添加类名
let oDiv = document.createElement("div");
oDiv.style.top = "1000px";
oDiv.style.left = Math.random()*1500 + "px";
// 2.创建span 并设置内容
let oSpan = document.createElement("span");
// oSpan.innerHTML = "M"
// 随机生成字母
let key = this.generateKey();
oDiv.className = "specter " + key;
oSpan.innerHTML = key;
// 3.将span添加到div中
oDiv.appendChild(oSpan);
// 4.将div添加到body中
document.body.appendChild(oDiv);
//将oDiv设置为类的属性
this.oDiv = oDiv;
}
boom() {
// 删除幽灵
document.body.removeChild(this.oDiv);
// 删除定时器
clearInterval(this.timer);
}
fly() {
let offset = parseInt(this.oDiv.style.top);
this.timer = setInterval(() => {
offset = offset - 40;
// 判断幽灵是否移出屏幕
if (offset <= -300) {
this.boom();
}
this.oDiv.style.top = offset + "px";
}, 200);
}
generateKey() {
let num = Math.floor(Math.random() * (90 - 65 + 1)) + 65;
return String.fromCharCode(num);
}
}
document.body.onkeydown = function (event) {
let key = event.key.toUpperCase();
let oDiv = document.querySelector("." + key);
document.body.removeChild(oDiv);
};
/*
// 产生指定范围的随机值
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}*/
</script>
</body>
</html>