本帖利用VScode编写代码简单实现键盘小游戏，三分钟教你快速实现。
首先要编写键盘小游戏，需要先捋清游戏实现思路：
- 首先框选好程序所要实现效果的区域，编写好简单的HTML界面以及CSS样式保证界面的美化程度。
- 利用js来实现键盘字母的创建,字母要随机出现，并且所创建的字母位置x轴坐标随机，y轴坐标不变，再考虑如何实现字母的y轴坐标随机变化。
- 移动期间实现用户按下按键能够消除所出现的键盘字母。
- 当按键字母移除游戏界面，实现剩余次数的减少。
一 . 游戏界面实现
首先实现效果界面，也就是游戏界面的编写：
（1）HTML代码
<body>
<div class="view">
<!-- 剩余次数显示 -->
<span>剩余次数:100</span>
<!-- 所要实现显示的键盘字母，到后面需要自动创建，不需要 -->
<!-- <div class="zimu">a</div> -->
</div>
</body>
（2）接下来是CSS样式代码：
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201911%2F07%2F20191107095839_ptnpo.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691148882&t=a9fd92aaf540cd5d83500b12c7855094) no-repeat center center;
}
.view {
position: relative;
margin: 50px auto;
height: 400px;
width: 1000px;
border: 2px solid rgb(38, 0, 128);
border-radius: 5px;
/* overflow: hidden; */
}
.zimu {
position: absolute; /* 定位 */
top: 0;
left: 0;
box-sizing: border-box;
width: 50px;
height: 50px;
border-radius: 50%;
font-weight: 700;
/* background-color: #fff; */
border: 4px solid red;
line-height: 42px;
text-align: center;
font-size: 30px;
transform: translateY(-50px);
transition: all 4s linear;
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
color: transparent !important;
-webkit-background-clip: text;
}
/* 剩余次数样式 */
span {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 50px;
background-color: rgba(255, 192, 246, 0.2);
border-radius: 30px;
line-height: 50px;
text-align: center;
}
</style>
二. 实现生成动态字母且随机出现在不同的y轴坐标位置
界面的实现简单，接下来是如何实现生成动态键盘字母
既然是动态出现随机字母以及坐标，那就需要用到随机函数，下面是随机函数代码（属于js部分，复制粘贴到<script></script>标签中）：
function getRandom(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m)
}
如何实现字母的随机创建呢？本文采用定义一个数组的方式，数组总包含26个大写英文字母，利用随机函数在每次创建的时候获取其中一个元素放在里面，代码如下：
const suiji = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] //定义一个26个字母的数组
const view = document.querySelector('.view') //定义获取类名为.view标签
//创建新字母函数
function create() {
let div = document.createElement('div') //定义创建一个<div></div>标签
view.append(div) //将标签加入到view的末尾
div.classList.add('zimu') //给新标签加上class类名使其有zimu样式
div.style.left = `${getRandom(0, 950)}px` //给新标签修改样式，让其left属性变为随机px，因为我所设定的游戏界面宽度为1000px，所以要使left移动量在这个范围内，而又因为新创建的元素有宽度50px，所以减去50px才能始终使其在游戏界面中
let count = getRandom(0, 25) //定义一个随机数
div.innerText = suiji[count] //利用这个随机数选取数组中的随机字母
div.dataset.zimu = count + 65 //给这个元素加上自定义类名，方便后来按下键盘元素消失的处理
div.style.transform = `translateY(-50px)` //给元素添加一个transform在y轴向上偏移，正好移出游戏界面 以此来实现字母从游戏界面外落下的效果
}
接下来设置一个定时器，以此实现源源不断创建键盘字母，并且对每一个字母绑定点击事件：
setInterval(function () {
create() //调用上面的函数，每一秒创建一个字母
let zimus = document.querySelectorAll('.zimu') //每秒获取游戏界面字母数组
zimus[zimus.length - 1].addEventListener('click', function () {
this.style.transform = `translate(0, 400px)`
}) //每秒对数组的最后一个元素进行点击事件绑定 点击后使y轴坐标变成400px 因为我们所定义的游戏窗口高度为400px 这样正好移出游戏窗口
}, 1000)
绑定事件之后对其进行点击触发：
setTimeout(() => { //设置一个延迟器 延迟0.1s 是点击之后事件延迟实现，不设置延时器将无法实现落下效果
setInterval(function () { //定时器
let zimus = document.querySelectorAll('.zimu') //字母获取
zimus[zimus.length - 1].click() //每一秒点击一下最后一个字母
}, 1000)
}, 100);
三 .实现按下按键字母消失
到现在我们的基本业务已经实现，接下来对游戏中的字母实现按下键盘对应按键字母消失：
document.addEventListener('keyup', function (e) { //检测用户按下键盘按键
// console.log(e.keyCode); //检测了一下是否可以有效果，显示按键对应的code值
let zimus = document.querySelectorAll('.zimu') //字母数组获取
zimus.forEach(function (item, index) { //对数组进行遍历
if (e.keyCode == item.dataset.zimu) { //在遍历过程中，如果用户按下的按键code值与我们数组中的一致，就对此元素进行删除，其中item.dataset.zimu是我们的自定义属性，每一个按键都有对应的code值，具体可以自行查询
item.remove() 元素删除
}
})
})
四.实现当字母移出屏幕，就对剩余次数进行减1
代码实现过程：
let span = document.querySelector('span') //获取游戏界面中的span标签
// 检测动画是否结束
let cc = 100 //设置一个变量 100
setInterval(function () { //开启一个定时器
zimus = document.querySelectorAll('.zimu') //字母获取
zimus[zimus.length - 1].addEventListener("transitionend", function (e) { //每一秒对数组中的最后一个元素进行绑定动画结束事件
cc-- //动画结束将变量cc进行减1操作
// console.log(cc); //输出检测
span.innerHTML = `剩余次数：${cc}` //将变量值在页面span标签中显示
if (cc <= 0) { //判断当c为零时，宣布游戏失败
alert('游戏失败')
}
})
}, 1000)
到现在为止，我们的按键小游戏就实现啦
完整代码
具体源码已经打包在此。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>keydown-display</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201911%2F07%2F20191107095839_ptnpo.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691148882&t=a9fd92aaf540cd5d83500b12c7855094) no-repeat center center;
}
.view {
position: relative;
margin: 50px auto;
height: 400px;
width: 1000px;
border: 2px solid rgb(38, 0, 128);
border-radius: 5px;
overflow: hidden;
}
.zimu {
position: absolute;
/* 定位 */
top: 0;
left: 0;
box-sizing: border-box;
width: 50px;
height: 50px;
border-radius: 50%;
font-weight: 700;
/* background-color: #fff; */
border: 4px solid red;
line-height: 42px;
text-align: center;
font-size: 30px;
transform: translateY(-50px);
transition: all 4s linear;
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
color: transparent !important;
-webkit-background-clip: text;
}
/* 剩余次数样式 */
span {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 50px;
background-color: rgba(255, 192, 246, 0.2);
border-radius: 30px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<!-- 游戏视口 -->
<div class="view">
<!-- 剩余次数显示 -->
<span>剩余次数：100</span>
<!-- 所要实现显示的键盘字母，到后面需要自动创建，不需要 -->
<!-- <div class="zimu">a</div> -->
</div>
<script>
function getRandom(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m)
}
const suiji = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
const view = document.querySelector('.view')
if (confirm('是否开始游戏？')) {
function keydown() {
// const zimu = document.querySelector('.zimu')
//创建新字母函数 //添加字母
function create() {
let div = document.createElement('div')
view.append(div)
div.classList.add('zimu')
div.style.left = `${getRandom(0, 950)}px`
let count = getRandom(0, 25)
div.innerText = suiji[count]
div.dataset.zimu = count + 65
// let count = getRandom(0, 950)
div.style.transform = `translateY(-50px)`
}
setInterval(function () {
create() //每一秒创建一个字母
let zimus = document.querySelectorAll('.zimu') //字母获取
// console.log(zimus);
zimus[zimus.length - 1].addEventListener('click', function () {
this.style.transform = `translate(0, 400px)`
})
// setInterval(function () {
// zimus[zimus.length - 1].click() //每一秒点击一下最后一个字母
// }, 1000)
}, 1000)
setTimeout(() => {
setInterval(function () {
let zimus = document.querySelectorAll('.zimu') //字母获取
zimus[zimus.length - 1].click() //每一秒点击一下最后一个字母
}, 1000)
}, 100);
let span = document.querySelector('span')
// 检测动画是否结束
let cc = 100
setInterval(function () {
zimus = document.querySelectorAll('.zimu') //字母获取
zimus[zimus.length - 1].addEventListener("transitionend", function (e) {
cc--
// console.log(cc);
span.innerHTML = `剩余次数：${cc}`
if (cc <= 0) {
alert('恭喜你，嗝屁了')
// if (confirm('重新游戏？')) {
// let zimus = document.querySelectorAll('.zimu')
// zimus = []
// cc = 100
// keydown()
// }
}
})
}, 1000)
// 点击清除元素
document.addEventListener('keyup', function (e) {
// console.log(e.keyCode);
let zimus = document.querySelectorAll('.zimu') //字母获取
zimus.forEach(function (item, index) {
if (e.keyCode == item.dataset.zimu) {
item.remove()
}
// else if (e.keyCode != item.dataset.zimu) {
// cc--
// // console.log(cc);
// span.innerHTML = `剩余次数：${cc}`
// }
})
})
}
keydown()
}
</script>
<!-- <script src="https://wiki.asuu.cn/tools.js"></script> -->
</body>
</html>
