教你用JavaScript实现调皮的字母
案例介绍
欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，制作提高打字速度的小游戏-调皮的字母。点击与屏幕上字母相对应的按键，若按键与出现的字母一致，则可以获得相应的分数。
案例演示
根据屏幕上随机出现的字母来点击键盘上对应的按键，可自行调节字母下落的速度以及时间间隔，还会有分数统计。
源码学习
进入核心代码学习，我们先来看HTML中的核心代码。
<!-- 有个小院-兴趣编程 -->
<body>
<!-- onkeydown 事件会在用户按下一个键盘按键时发生keydown()事件 -->
<input type="text" id="input" onkeydown="keydown()">
<div id="ground">
<label for="interval">生成间隔:</label>
<input type="number" id="interval" value="100">
<br>
<label for="speed">下落速度:</label>
<input type="number" id="speed" value="5">
<input type="button" value="重新开始" onclick="gameStart()">
<input type="button" value="重置时间" onclick="location.reload()">
<p id="hint">3</p>
<p id="score">分数: <span id="scorenum">0</span></p>
</div>
<!-- 主体部分 -->
<div id="container"></div>
<script src="../js/调皮的字母.js"></script>
</body>
然后再让我们来看CSS核心代码，CSS主要是对要页面部件的样式进行设置。
*{
margin: 0;
padding: 0;
overflow: hidden;
}
#input{
display:block;
width: 100%;
height: 100%;
position:absolute;
cursor: default;
background: rgb(156, 83, 83);
}
/* 底部的显示 */
#ground{
width: 100%;
height:200px;
position:absolute;
padding-top: 80px;
bottom:0;
background-color: #4d292c;
}
/* 下落的字母 */
.stone{
background-size: 100% 100%;
position:absolute;
bottom:1200px;
width: 80px;
height:80px;
text-align: center;
line-height:80px;
font-size: 40px;
color:white;
overflow:hidden;
transform-origin: center;
}
label{
color: white;
margin-left: 20px;
}
input[type="number"] {
width:100px;
height: 40px;
font-size: 30px;
margin-top: 30px;
}
input[type="button"] {
padding-left:10px;
width: 200px;
padding-right: 10px;
height: 50px;
font-size: 18px;
margin-left: 300px;
}
/* 提示 */
#hint{
position: absolute;
top:10px;
right: 10px;
font-size: 35px;
color:red;
}
/* 分数的显示 */
#score{
position: absolute;
top:60px;
left:50%;
text-align: center;
font-size: 30px;
color:white;
}
让我们来编写核心的JavaScript代码，首先声明相关的变量。通过countdown()方法设置时间倒计时，分数初始化为0。getElementById()方法获取id对应的组件。设置定时器，并在每次游戏重新开始前对定时器进行清除。random()方法获取随机字母以及随机位置，并将字母添加到容器里。for()循环遍历每一个字母修改属性，设置游戏结束的位置。removeChild()方法移除最前面的字母，更新分数。
//有个小院-兴趣编程
// 生成字母的间隔
var interval = 50;
// 计数，如果和间隔一样就下落
var time = interval;
// 下落的速度
var speed = 5;
// 判断游戏是否结束
var gameOver = false;
// 生成的字符从这里随机取
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// 作为setInterval的返回值
var down;
// 分数
var score = 0;
// 开始倒计时
function countdown() {
score = 0;
document.getElementById('scorenum').innerHTML = score;
// 倒计时3，2，1
let hint = document.getElementById('hint');
// 倒计时
var countTime = 3;
// 设置定时器
let count = setInterval(() => {
hint.innerHTML = countTime;
if (!countTime) {
clearInterval(count);
hint.innerHTML = '游戏开始！';
document.getElementById('input').focus();
down = setInterval(fall, 20);
}
countTime -= 1;
}, 500);
}
countdown();
// 字母下降
function fall() {
let stones = document.getElementsByClassName('stone');
// 如果次数达到设定的值，生成一个新的字母
if (time == interval) {
let newStone = document.createElement('div');
newStone.setAttribute('class', 'stone');
// 随机字符
newStone.innerHTML = str[Math.round(Math.random() * 25)];
// 随机位置
newStone.style.left = `${Math.round(Math.random() * 80) + 10}%`
// 获取容器
let container = document.getElementById('container');
// 把生成的字母添加到容器里
container.appendChild(newStone);
time = 0;
}
// 遍历每一个字母，修改属性，实现下落
for (let i = 0; i < stones.length; i++) {
// 计算下落的距离，赋值给style.bottom
let distance = parseInt(getComputedStyle(stones[i]).bottom) - speed;
stones[i].style.bottom = `${distance}px`;
// 距离小于 150px 表示接触到地板，游戏结束
if (distance < 260) {
document.getElementById('hint').innerHTML = '游戏结束！'
gameOver = true;
clearInterval(down);
}
}
time ++;
}
// 按下按键触发的事件
function keydown() {
// 晚1ms清空input里的字符，不然有可能清空失败
setTimeout(() => {
document.getElementById('input').value = '';
}, 1);
// 如果游戏结束，停止触发
if (gameOver)
return;
// 遍历所有的字母，如果和键盘输入的值相同则移除最前面的字母
let stones = document.getElementsByClassName('stone');
for (let i = 0; i < stones.length; i++) {
// 判断字母的值是否和键盘输入的值相同
if (arguments.callee.caller.arguments[0].key.toUpperCase() == stones[i].textContent) {
let die = stones[i];
die.innerHTML = '';
setTimeout(() => {
die.parentElement.removeChild(die);
die = null;
}, 300);
// 更新分数
score ++;
document.getElementById('scorenum').innerHTML = score;
break;
}
}
}
// 按下 重新开始键 触发的事件
function gameStart() {
// 如果游戏没结束则不能重新开始，防止下落抖动
if (!gameOver)
return;
// 从输入框获取各项参数
interval = document.getElementById('interval').value;
time = interval;
speed = document.getElementById('speed').value;
// 清空容器里的字母
let container = document.getElementById('container');
while (container.children.length) {
container.children[0].remove();
}
gameOver = false;
countdown();
}
记得关注我，每天学习一点点
你觉得这个游戏，最吸引你的地方在哪里？
全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信：huodaxia_xfeater
二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）
教你用JavaScript实现调皮的字母的更多相关文章
- JavaScript中调皮的undefined
JavaScript中调皮的undefined 在JavaScript中undefined只是一个标识符,不是关键字,这个很不靠谱的标识符还不能像其他符号一样随意使用,一方面是需要它的原始值保持不变, ...
- 5分钟教你学会JavaScript正则表达式
正则表达式在实际开发过程中和技术面试过程中的重要性不言而喻,本文仅仅只是教你如何在几分钟之类学会正则表达式,对于它的原理及运行机制不做介绍. 第一:什么是正则 正则表达式是一种用来描述一定数量文本的模 ...
- javascript原生 实现数字字母混合验证码
实现4位数 数字字母混合验证码(数字+大写字母+小写字母) ASCII 字符集中得到3个范围: 1. 48-57 表示数字0-9 2. 65-90 表示大写字母 3. 97-122 表示小写字母 范围 ...
- 从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建
项目演示 项目演示地址: 体验一下 项目源码: 项目源码 代码结构 本节做完效果 游戏主页面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 教你用JavaScript实现随机点名
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript相关知识,做一个随机点名的案例.你可以通过点击开始按钮控制上方名字的闪动,点击停止按钮可以随机选定一个名 ...
- 教你用JavaScript完成轮播图
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个轮播图.图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时, ...
- 教你用JavaScript实现计数器
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个计数器.点击按钮数字改变,点击重置数字归0.通过实战我们将学会forEach循环.c ...
- 教你用JavaScript实现乘法游戏
案例介绍 欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个乘法积分游戏.乘法游戏主要通过用户输入的数值和程序计算的数值进行对比,正确积一分,错 ...
- javascript按中文首字母排序
resultValue=[ '武汉' , '北京' , '上海' , '天津' ] ; resultValue= resultValue.sort( function compareFunction( ...
- javascript 将单词首字母大写，其余小写
// 1 别人写的,我拿来参考了一下 function titleCase(str) { var array = str.toLowerCase().split(" "); for ...
随机推荐
- Codeforces Round #697 (Div. 3) A - G个人题解记录
Codeforces Round #697 (Div. 3) 1475A. Odd Divisor 问一个数是否有奇除数. 对 2 不断除,如果最后 n == 1即不可能存在,否在存在. int ma ...
- 图解 Promise 实现原理（一）—— 基础实现
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ作者:孔垂亮 很多同学在学习 Promise 时,知 ...
- Springcloud和Dubbo的区别。Eureka和Ribbon和Hystrix和zuul
netty 是什么? "netty 是一个基于nio的客户.服务器端编程框架,netty提供异步的,事件驱动的网络应用程序框架和工具,可以快速开发高可用的客户端和服务器.netty是基于ni ...
- 2019 篇 - 分享数百个 HT的工业互联网 2D 3D 可视化应用案例
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...
- AHB-SRAMC Design-01
AHB-SRAMC Design 1.AHB-SoC芯片架构图 CPU赋予了SoC的可编程性 SRAM可以存储数据和代码 2.AHB-SRAMC Features 总线版本号 在进行设计的时候可以将地 ...
- [转帖]Linux_Redhat8——常用命令：ls、ll、vim、ps、top、grep、tail
Linux_Redhat8-常用命令: ls.ll.vim.ps.top.grep 一.ls(list):查看目录下的文件 ls:仅罗列出当前文件名或目录名. ll:罗列出当前文件或目录的详细信息,包 ...
- [转帖]strace分析sqlplus登录慢问题
一. 问题分析 有时会遇到sqlplus / as sysdba登录非常慢的问题,由于还没登录,通过数据库等待事件一般看不出来啥,需要用到strace这个分析利器.strace有很多参数,后面会列出, ...
- [转帖]Shell字符串拼接（连接、合并）
http://c.biancheng.net/view/1114.html 在脚本语言中,字符串的拼接(也称字符串连接或者字符串合并)往往都非常简单,例如: 在 PHP 中,使用.即可连接两个字符串: ...
- [转帖]如何通过JMeter测试金仓数据库KingbaseES并搭建环境
1.安装JMeter Apache JMeter是Apache组织开发的基于Java的压力测试工具,主要用于对软件的压力测试,它最初被设计用于Web应用测试,但后来扩展到其它测试领域.它可测试静态.动 ...
- [转帖]使用SkyWalking监控nginx （以openresty为例）
https://www.cnblogs.com/hahaha111122222/p/15829737.html 安装使用SkyWalking先看这篇文章,地址:https://www.cnblogs. ...