html + css + js 实现一个打字小游戏（建议收藏）
Posted 极客江南
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html + css + js 实现一个打字小游戏（建议收藏）相关的知识，希望对你有一定的参考价值。
今天江哥手把手带大家实现一个打字小游戏，带你装 X 带你飞
-
知识点： html + css + js
-
游戏玩法： 点击 Play 开始游戏，随机出现字母对象，按键盘字母，对应的悬浮物消失。
废话不多说，先上效果图
-
素材：音乐、背景图
-
代码实现
<!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: url("images/bg.jpg") center center no-repeat;
background-size: cover;
overflow: hidden;
}
img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.specter{
width: 300px;
height: 300px;
background: url("images/yy.png") no-repeat;
position: absolute;
top: 1000px;
}
.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="">
<!--
注意点:
在谷歌浏览器中默认情况下不允许自动播放音乐, 只有用户和网页交互之后才可以播放音乐
解决方案一:
修改谷歌浏览器的配置
1.在地址栏输入: chrome://flags/
2.在搜索框输入: autoplay
3.修改autoplay的选项为 no user xxx
解决方案二:
让用户和网页交互之后再播放
-->
<audio src="media/bg.ogg" loop></audio>
<!--<div class="specter"><span>m</span></div>-->
<!--<div class="specter"><span>m</span></div>-->
<script>
let oImg = document.querySelector("img");
let oAudio = document.querySelector("audio");
let list = []; // 定义数组保存所有创建出来的鬼魂对象
oImg.onclick = function () {
// 1.移出开始游戏按钮
oImg.parentNode.removeChild(oImg);
oAudio.play();
// 2.创建悬浮物
setInterval(function () {
let s = new Specter();
s.fly();
list.push(s);
}, 1000);
};
class Specter{
constructor(){
// 1.创建div并设置样式
let oDiv = document.createElement("div");
// oDiv.className = "specter";
oDiv.style.top = "1000px";
oDiv.style.left = Math.random() * 1500 + "px";
// 2.创建span并设置内容
let oSpan = document.createElement("span");
// oSpan.innerText = "m";
let key = this.generateKey();
oSpan.innerText = key;
oDiv.className = "specter " + key;
// 3.将span添加到div中
oDiv.appendChild(oSpan);
// 4.将div添加到body中
document.body.appendChild(oDiv);
this.oDiv = oDiv;
}
bomb(){
// 1.删除当前的悬浮物
document.body.removeChild(this.oDiv);
// 2.删除当前悬浮物对应的定时器
clearInterval(this.timer);
}
fly(){
// 1.获取悬浮物当前的top值
let offset = parseInt(this.oDiv.style.top);
this.timer = window.setInterval(()=>{
offset -= 20;
if(offset <= -300){
this.bomb();
}
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);
// 1.根据div找到这个div对应的悬浮物对象在数组中的位置
let currentIndex = list.findIndex(function (currentValue) {
return currentValue.oDiv === oDiv;
});
if(currentIndex === -1) return;
// 2.根据位置取出对应的悬浮物对象
let currentSpecter = list[currentIndex];
// 3.将悬浮物对应的div从body中删除
currentSpecter.bomb();
list.splice(currentIndex, 1);
}
</script>
</body>
</html>
最后，码字不易，点赞，关注，转发、收藏、一键四连支持。
以上是关于html + css + js 实现一个打字小游戏（建议收藏）的主要内容，如果未能解决你的问题，请参考以下文章
HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）