案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用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 ...

随机推荐

HashMap非线程安全到底有什么问题
HashMap是Java中常用的数据结构,用于存储键值对,并且提供了快速的查找和插入操作.下面挖掘一下HashMap内部的架构设计思维: 哈希函数的设计: HashMap使用哈希函数将键映射到数组索引 ...
windows 系统关闭占用端口的应用
开发中有时候开发工具把程序关闭了,但是后台并没有真正关闭程序,导致再次启动相同端口的程序时报端口已经被使用的错误,这时如何强制关闭已占用的端口 1.打开dos对话框 2.查找被占用的端口的进程号 ne ...
lucene.net全文检索（二）lucene.net 的封装
查询 public class LuceneQuery : ILuceneQuery { #region Identity private Logger logger = new Logger(typ ...
05_删除链表的倒数第N个节点
删除链表的倒数第N个节点给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. 示例 1: 输入:head = [1,2,3,4,5], n = 2 输出:[1,2,3,5] 示例 2: ...
如何开发一套苹果cms前端模板
本文运用了苹果cms官网的模板开发教程,开发了一套苹果cms的前端模板,感兴趣的同学可以去github下载使用. 什么是模板模板是网站的主题外观,也被称为主题或皮肤.通过使用不同的模板,网站的前台可 ...
android应用申请加入电池优化白名单
首先,在 AndroidManifest.xml 文件中配置一下权限: 1 <uses-permission android:name="android.permission.REQU ...
[转帖]sqluldr2 oracle直接导出数据为文本的小工具使用
https://www.cnblogs.com/ocp-100/p/11098373.html 近期客户有需求,导出某些审计数据,供审计人进行核查,只能导出成文本或excel格式的进行查看,这里我们使 ...
[转帖]Jmeter插件之ServerAgent服务器性能监控工具的安装和使用
https://www.cnblogs.com/pachongshangdexuebi/p/13354201.html 一.前言性能测试时我们关注的重要指标是:并发用户数,TPS,请求成功率, ...
[转帖]备份VCSA内置Postgresql数据库
首先命令行远程登录到VCSA服务器,然后执行如下命令停掉VCSA的核心服务vmware-vpxd: vCenterServerAppliance:~ # service vmware-vpxd sto ...
[转帖]VCSA6.7证书过期后的处置方法
0x00 环境说明一台测试的ESXI主机,元旦之后已然发现证书已过期,具体现象:VCenter无法登录,一直提示输入用户名和密码,ESXI主机web页面无法登录.重启VC以后,报故障503错误. / ...