发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

教你用JavaScript实现调皮的字母

莊將椿

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
显示全部楼层


案例介绍

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

案例演示

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



源码学习

进入核心代码学习，我们先来看HTML中的核心代码。
  1. <body>
  2.    
  3.     <input type="text" id="input" onkeydown="keydown()">
  4.    
  5.         <label for="interval">生成间隔:</label>
  6.         <input type="number" id="interval" value="100">
  7.         
  9.         <label for="speed">下落速度:</label>
  10.         <input type="number" id="speed" value="5">
  11.         <input type="button" value="重新开始" onclick="gameStart()">
  12.         <input type="button" value="重置时间" onclick="location.reload()">
  13.         <p id="hint">3</p>
  14.         <p id="score">分数: 0</p>
  15.    
  16.    
  17.    
  18.    
  19. </body>
复制代码
然后再让我们来看CSS核心代码，CSS主要是对要页面部件的样式进行设置。
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     overflow: hidden;
  5. }
  6. #input{
  7.     display:block;
  8.     width: 100%;
  9.     height: 100%;
  10.     position:absolute;
  11.     cursor: default;
  12.     background: rgb(156, 83, 83);
  13. }
  14. /* 底部的显示 */
  15. #ground{
  16.     width: 100%;
  17.     height:200px;
  18.     position:absolute;
  19.     padding-top: 80px;
  20.     bottom:0;
  21.     background-color: #4d292c;
  22. }
  23. /* 下落的字母 */
  24. .stone{
  25.     background-size: 100% 100%;
  26.     position:absolute;
  27.     bottom:1200px;
  28.     width: 80px;
  29.     height:80px;
  30.     text-align: center;
  31.     line-height:80px;
  32.     font-size: 40px;
  33.     color:white;
  34.     overflow:hidden;
  35.     transform-origin: center;
  36. }
  37. label{
  38.     color: white;
  39.     margin-left: 20px;
  40. }
  41. input[type="number"] {
  42.     width:100px;
  43.     height: 40px;
  44.     font-size: 30px;
  45.     margin-top: 30px;
  46. }
  47. input[type="button"] {
  48.     padding-left:10px;
  49.     width: 200px;
  50.     padding-right: 10px;
  51.     height: 50px;
  52.     font-size: 18px;
  53.     margin-left: 300px;
  54. }
  55. /* 提示 */
  56. #hint{
  57.     position: absolute;
  58.     top:10px;
  59.     right: 10px;
  60.     font-size: 35px;
  61.     color:red;
  62. }
  63. /* 分数的显示 */
  64. #score{
  65.     position: absolute;
  66.     top:60px;
  67.     left:50%;
  68.     text-align: center;
  69.     font-size: 30px;
  70.     color:white;
  71. }
复制代码
让我们来编写核心的JavaScript代码，首先声明相关的变量。通过countdown()方法设置时间倒计时，分数初始化为0。getElementById()方法获取id对应的组件。设置定时器，并在每次游戏重新开始前对定时器进行清除。random()方法获取随机字母以及随机位置，并将字母添加到容器里。for()循环遍历每一个字母修改属性，设置游戏结束的位置。removeChild()方法移除最前面的字母，更新分数。
  1. //有个小院-兴趣编程
  2. // 生成字母的间隔
  3. var interval = 50;
  4. // 计数，如果和间隔一样就下落
  5. var time = interval;
  6. // 下落的速度
  7. var speed = 5;
  8. // 判断游戏是否结束
  9. var gameOver = false;
  10. // 生成的字符从这里随机取
  11. var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  12. // 作为setInterval的返回值
  13. var down;
  14. // 分数
  15. var score = 0;
  16. // 开始倒计时
  17. function countdown() {
  18.     score = 0;
  19.     document.getElementById('scorenum').innerHTML = score;
  20.     // 倒计时3，2，1
  21.     let hint = document.getElementById('hint');
  22.     // 倒计时
  23.     var countTime = 3;
  24.     // 设置定时器
  25.     let count = setInterval(() => {
  26.         hint.innerHTML = countTime;
  27.         if (!countTime) {
  28.             clearInterval(count);
  29.             hint.innerHTML = '游戏开始！';
  30.             document.getElementById('input').focus();
  31.             down = setInterval(fall, 20);
  32.         }
  33.         countTime -= 1;
  34.     }, 500);
  35. }
  36. countdown();
  37. // 字母下降
  38. function fall() {
  39.     let stones = document.getElementsByClassName('stone');
  40.     // 如果次数达到设定的值，生成一个新的字母
  41.     if (time == interval) {
  42.         let newStone = document.createElement('div');
  43.         newStone.setAttribute('class', 'stone');
  44.         // 随机字符
  45.         newStone.innerHTML = str[Math.round(Math.random() * 25)];
  46.         // 随机位置
  47.         newStone.style.left = `${Math.round(Math.random() * 80) + 10}%`
  48.         // 获取容器
  49.         let container = document.getElementById('container');
  50.         // 把生成的字母添加到容器里
  51.         container.appendChild(newStone);
  52.         time = 0;
  53.     }
  54.     // 遍历每一个字母，修改属性，实现下落
  55.     for (let i = 0; i < stones.length; i++) {
  56.              // 计算下落的距离，赋值给style.bottom
  57.         let distance = parseInt(getComputedStyle(stones[i]).bottom) - speed;
  58.         stones[i].style.bottom = `${distance}px`;
  59.         // 距离小于 150px 表示接触到地板，游戏结束
  60.         if (distance < 260) {
  61.             document.getElementById('hint').innerHTML = '游戏结束！'
  62.             gameOver = true;
  63.             clearInterval(down);
  64.         }
  65.     }
  66.     time ++;
  67. }
  68. // 按下按键触发的事件
  69. function keydown() {
  70.     // 晚1ms清空input里的字符，不然有可能清空失败
  71.     setTimeout(() => {
  72.         document.getElementById('input').value = '';
  73.     }, 1);
  74.     // 如果游戏结束，停止触发
  75.     if (gameOver)
  76.         return;
  77.     // 遍历所有的字母，如果和键盘输入的值相同则移除最前面的字母
  78.     let stones = document.getElementsByClassName('stone');
  79.     for (let i = 0; i < stones.length; i++) {
  80.         // 判断字母的值是否和键盘输入的值相同
  81.         if (arguments.callee.caller.arguments[0].key.toUpperCase() == stones[i].textContent) {
  82.             let die = stones[i];
  83.             die.innerHTML = '';
  84.             setTimeout(() => {
  85.                 die.parentElement.removeChild(die);
  86.                 die = null;
  87.             }, 300);
  88.             // 更新分数
  89.             score ++;
  90.             document.getElementById('scorenum').innerHTML = score;
  91.             break;
  92.         }
  93.     }
  94. }
  95. // 按下 重新开始键 触发的事件
  96. function gameStart() {
  97.     // 如果游戏没结束则不能重新开始，防止下落抖动
  98.     if (!gameOver)
  99.         return;
  100.     // 从输入框获取各项参数
  101.     interval = document.getElementById('interval').value;
  102.     time = interval;
  103.     speed = document.getElementById('speed').value;
  104.     // 清空容器里的字母
  105.     let container = document.getElementById('container');
  106.     while (container.children.length) {
  107.         container.children[0].remove();
  108.     }
  109.     gameOver = false;
  110.     countdown();
  111. }
复制代码
记得关注我，每天学习一点点

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

全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信：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】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: JavaScript中的宏任务和微任务

下一篇: 教你用JavaScript实现搜索展开

发表于 2023-1-3 06:54:55

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4