jjzjj

教你用JavaScript实现调皮的字母

小院里的霍大侠 2023-03-28 原文


案例介绍

欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!
我们来用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实现调皮的字母的更多相关文章

  1. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间,其中100是最大分数。计算平均分并将字母等级作为字符串返回,即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join,

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. ruby - 匹配大写字母并用后续字母填充,直到一定的字符串长度 - 2

    我有一个驼峰式字符串,例如:JustAString。我想按照以下规则形成长度为4的字符串:抓取所有大写字母;如果超过4个大写字母,只保留前4个;如果少于4个大写字母,则将最后大写字母后的字母大写并添加字母,直到长度变为4。以下是可能发生的3种情况:ThisIsMyString将产生TIMS(大写字母);ThisIsOneVeryLongString将产生TIOV(前4个大写字母);MyString将生成MSTR(大写字母+tr大写)。我设法用这个片段解决了前两种情况:str.scan(/[A-Z]/).first(4).join但是,我不太确定如何最好地修改上面的代码片段以处理最后一种

  4. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  5. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  6. MIMO-OFDM无线通信技术及MATLAB实现(1)无线信道:传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO

  7. ruby - 正则表达式将非英文字母匹配为非单词字符 - 2

    @raw_array[i]=~/[\W]/非常简单的正则表达式。当我用一些非拉丁字母(具体来说是俄语)尝试时,条件是错误的。我能用它做什么? 最佳答案 @raw_array[i]=~/[\p{L}]/使用西里尔字符进行测试。引用:http://www.regular-expressions.info/unicode.html#prop 关于ruby-正则表达式将非英文字母匹配为非单词字符,我们在StackOverflow上找到一个类似的问题: https://

  8. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  9. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常,数组被实现为内存块,集合被实现为HashMap,有序集合被实现为跳跃列表。在Ruby中也是如此吗?我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为,并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而,大多数Rubyist对数组的性能特征有一些期望,这会迫使不符合它们的实现变得默默无闻,因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

  10. ruby - "public/protected/private"方法是如何实现的,我该如何模拟它? - 2

    在ruby中,你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的,f2和f4是私有(private)的。内部发生了什么,允许您调用一个类方法,然后更改方法定义?我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定

随机推荐