莊將椿 发表于 2023-1-3 06:54:55

教你用JavaScript实现调皮的字母



案例介绍

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

案例演示

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



源码学习

进入核心代码学习,我们先来看HTML中的核心代码。
<body>
   
    <input type="text" id="input" onkeydown="keydown()">
   
      <label for="interval">生成间隔:</label>
      <input type="number" id="interval" value="100">
      

      <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">分数: 0</p>
   
   
   
   
</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 {
    width:100px;
    height: 40px;
    font-size: 30px;
    margin-top: 30px;
}
input {
    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;
      // 随机位置
      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).bottom) - speed;
      stones.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.key.toUpperCase() == stones.textContent) {
            let die = stones;
            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.remove();
    }
    gameOver = false;
    countdown();
}记得关注我,每天学习一点点

你觉得这个游戏,最吸引你的地方在哪里?

全网可搜:小院里的霍大侠, 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信:huodaxia_xfeater
二维码: http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号:有个小院(微信公众号:yougexiaoyuan)
github:yougexiaoyuan (视频源码免费获取)
(部分素材来源于互联网,如有保护请联系作者)

来源:https://www.cnblogs.com/xFeater/p/17003923.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 教你用JavaScript实现调皮的字母