JavaScript练字游戏_pandaHe_Status的博客-程序员秘密

技术标签: 前端  javascript  

最近手痒,把一个有三种难度的练习打字得分的小游戏做了出来…css可以自己添加。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .gameOvers {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            background-color: skyblue;
            color: red;
            display: none;
        }
        
        .testClassList {
            display: block;
            color: rgb(6, 6, 6);
        }
        
        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="testClassList">测试classList</div>
    <input type="text" placeholder="搜索城市" class="input">
    <button class="button" type="button" onclick="let tips = alert('你点击了搜索按钮!');">搜索</button>
    <div class="word"></div>
    <div class="scores">0</div>
    <div class="times"></div>
    <div class="gameOvers"></div>
    <div>
        <select class="select">
            <option value="jiandan">简单</option>
            <option value = "zhongdeng" selected>中等</option>
            <option value="jiaonan">较难</option>
        </select>
    </div>
    <script>
        let select = document.querySelector('.select');
        let word = document.querySelector('.word');
        let scores = document.querySelector('.scores');
        let inputs = document.querySelector('.input');
        let times = document.querySelector('.times');
        let games = document.querySelector('.gameOvers');
        let test = document.querySelector('.testClassList');
        let randows = ['张三', '李四', '王五', '小强', '小李'];
        // 难度选择
        let difficulty = localStorage.getItem('selects') !== null ? localStorage.getItem('selects') : 'zhongdeng'
            //    更新难度选择
        difficulty.value = localStorage.getItem('selects') !== null ? localStorage.getItem('selects') : 'zhongdeng'
            // 下拉框事件监听
        select.addEventListener('change', e => {
            difficulty = e.target.value;
            localStorage.setItem('selects', difficulty)
        })
        scores.addEventListener('click', () => {
                // 如果存在就删除,没有就添加
                test.classList.toggle('hide')
            })
            // 聚焦
        inputs.focus()
            // 取到randows数组里面的数据
        function randowData() {
            return randows[Math.floor(Math.random() * randows.length)]
        }
        // 开始倒数
        const timeInterval = setInterval(updateTime, 1000);
        let time = 10;

        function updateTime() {
            time--;
            times.innerHTML = time + 's';
            if (time <= 0) {
                clearInterval(timeInterval)
                gameOver()
            }
        };
        // 游戏结束
        function gameOver() {
            games.innerHTML = `
                        <h1>游戏结束</h1>
                        <p>最终得分${score}</p>
                        <button onclick="location.reload()">再玩一次</button>
                        `;
            games.style.display = 'block'
        }
        // 把生成的内容插入到dom中
        function addWord() {
            // 把randomWord公布出去
            randomWord = randowData()
            word.innerHTML = randomWord
        }
        // 更新得分
        let score = 0;

        function updateScore() {
            score++;
            scores.innerHTML = score
        }
        addWord()
        inputs.addEventListener('input', (e) => {
            if (e.target.value === randomWord) {
                // 更换随机生成的数据
                addWord()
                    // 更新得分
                updateScore()
                inputs.value = "";
                if (difficulty === 'jiaonan') {
                    time += 5;
                } else if (difficulty === 'zhongdeng') {
                    time += 10
                } else {
                    time += 15;
                }

                // 并且更新一下时间
                updateTime()
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43321726/article/details/109968619

智能推荐

windows下qt程序意外崩溃,生成dump文件的方法_修行进行时的博客-程序员资料

程序运行一段时间之后,意外退出,没有提示任何出错信息,这种情况可能是内存泄漏,但是没有提示错误信息,很难定位到具体代码。我们可以生成dump文件,定位出错位置。在工程中添加代码:mdump.h#ifndef MDUMP1_H#define MDUMP1_H#include &lt;Windows.h&gt;#include &lt;DbgHelp.h&gt;// base...

Java开源模板引擎_wx5701619的博客-程序员资料_java 模板引擎原理

Velocity Velocity是一个基于java的模板引擎(template engine)。它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码定义的对象。 当Velocity应用于web开发时,界面设计人员可以和java程序开发人员同步开发一个遵循MVC架构的web站点,也就是说,页面设计人员可以只关注页面的显示效果,而由java程序

Unix/Linux下几个最致命的命令_虎皮猫大人王的博客-程序员资料

本文主要参考了以下原文:http://www.linuxpromagazine.com/Online/News/Seven-Deadliest-Linux-Commandshttp://ubuntuforums.org/announcement.php?f=326大多数时候程序员性情温和,神情淡定。但是会有例外,当他们因为加班加点过度劳累,在意识脆弱、头脑短路、麻痹大意时执行了

R语言应用实战-聚类分析以及k-means的优缺点_普通网友的博客-程序员资料_r型聚类分析的优缺点

一.聚类概念聚类分析cluster Analysis)是研究物以类聚的现代统计方法。在过去是依靠经验和专业知识做定性分析处理,很少利用数学方法多元统计分析逐渐被引进数值分类,形成聚类分析的分支。以下是我为大家准备的几个精品专栏,喜欢的小伙伴可自行订阅,你的支持就是我不断更新的动力哟!MATLAB-30天带你从入门到精通MATLAB深入理解高级教程(附源码)tableau可视化数据分析高级教程思想:认为所研究的样本或指标(变量)之间存在着不同程度的相似性(亲疏关系)。于是根据一批样本的

Centos 8 | 网络_enobear的博客-程序员资料

网络配置说明新安装的 Centos 8 默认网卡是没有启动的。默认只能通过NetworkManager.service进行网络配置。没有传统的network.service,但依然支持。NMNM服务是管理和监控网络设置的守护进程,它是一个动态的,事件驱动的网络管理服务。命令# 重启NMsystemctl restart NetworkManager# 查看网络连接nmcli c# 查看网卡信息nmcli d# 查看ipnmcli# 重新加载网络nmcli c relo

create-react-app 创建页面打开没有显示_Ordinary_hermit的博客-程序员资料

react创建网页显示空白,可能会遇到的问题

随便推点

flutter 插件已经安装但是还报错_前端技术:一文带你掌握Flutter插件开发新姿势..._黄哒哒的博客-程序员资料

导语 |随着Flutter生态的快速发展,越来越多的Flutter插件涌现出来,那么如何开发一个Flutter插件呢?本文以具体的native_image_view插件为例,带你快速掌握Flutter插件的开发。文章作者:赵哲,腾讯游戏运营研发工程师一、概述随着开发技术的发展,几乎所有主流的开发语言都有自己的包管理工具。Node开发有npm、Android开发有Gradle,Flutter也有自己...

无法连接远程redis问题_LeBron永鑫的博客-程序员资料_redis最新版本无法远程连接

总结:1.允许redis外网访问开启这个配置时:redis 只接收来自于该 IP 地址列表的请求,如果不进行设置,那么将处理所有请求注释掉bind 127.0.0.1,允许redis外网访问2.关闭保护模式protected-mode改为no,默认为yes3.开放云服务器端口6379遇到的坑:千万不要使用宝塔面板开放端口!!!我使用宝塔面板开放了端口6379不起作用,打开阿里云控制台后才发现根本没有放行6379端口以后再开放端口一定要使用阿里云控制台!!!...

axios 重定向问题解决_Axios 源码解析(我总觉得我解析得最全了)_weixin_39731845的博客-程序员资料

准备工作主要根据他在 npm 上的核心功能点,进行提问吧。可以先抛出几个问题1、axios 的大致原理 or axios 的本质是什么2、axios 是怎么实现请求拦截的3、axios 是如何防止 xsrf 的4、实际使用中遇到过的点好,接下来围绕这些点对这个库简单分析一下,首先我们可以先写一个服务器,可以接收并打印前端请求的就可以const http = require('http');cons...

统一诊断服务(UDS)_晓翔仔的博客-程序员资料_uds 库

统一诊断服务(Unified Diagnostic Services),简称UDS。是ISO 15765和ISO 14229定义的一种汽车通用诊断协议

考研复试408问题(还在更新)_聚精会神搞学习的博客-程序员资料

面试问题之编程语言:c++的特点是什么?封装,继承,多态,支持面向对象和面向过程的开发c++的异常处理机制?抛出异常和捕捉异常进行处理。c++和c,java的区别?c是纯过程,c++是对象加过程,java是存面向对象纯虚函数?被virtual修饰的成员函数,再基类不能实现,而他的实现放到派生类中实现什么是内存泄漏?申请了一块内存空间,使用完毕后没有释放掉计算机网络:TCP/IP分层五层模型:物理层,数据链路层,网络层,运输层,应用层七层模型:物理层,数据链路层,网