最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

全球视点！教你用JavaScript实现调皮的字母

来源：博客园


(资料图)

案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！我们来用JavaScript编程实战案例，制作提高打字速度的小游戏-调皮的字母。点击与屏幕上字母相对应的按键，若按键与出现的字母一致，则可以获得相应的分数。

案例演示

根据屏幕上随机出现的字母来点击键盘上对应的按键，可自行调节字母下落的速度以及时间间隔，还会有分数统计。

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

            
                        
                                        
3
        
分数: 0
    
        
    <script src="../js/调皮的字母.js"></script>

然后再让我们来看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 (视频源码免费获取)（部分素材来源于互联网，如有保护请联系作者）

关键词： 游戏结束 重新开始 随机位置