js+html实现打字游戏v1

实现逻辑:设置定时器每秒刷新一次,定时器刷新多少次执行一次生成单词操作来决定单词的生成速度,例如初始单词生成速度为1,那么定时器刷新5次才生成一次单词,每个单词用span来装,每组10个单词放到div里。监听键盘按下事件,用一个变量str记录键盘连续按下的字母组成的字符串,当字符串str包含span中的字符串,则span变红,同时右下角得分数加1,当div中的一排span都变红时,从body里删掉该div。如果有高中必备3500单词作为单词库,每次生成的一组10个单词从中随机选取,效果更加,既能练习打字又能熟悉单词拼写。

上代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{
            font-size: larger;
            margin: 20px;
        }

        #score{
            background-color: red;
            color: white;
            position: absolute;
            left:90%;
            top: 90%;
        }
    </style>
</head>
<span id="score">
0
</span>

<body>
<script>

    var content = "";
    var score = 0;
    //这里可以使用固定单词
    var words= ["apple","horizontal","vertical","vector","ghost","evil","banana","polo","curve","deploy"];
    var str = '';
    var count = 0;
    //单词生成速度,可以根据当前得分来设置,得分越高速度越快,比如当得分大于200时速度设为2,大于300百是速度设为3
    var speed = 1;

    setInterval(()=>{
        if(count%(6-speed)===0){
            let divElement = document.createElement('div');
            for (var i = 0; i <words.length ; i++) {
                var rand = Math.floor(Math.random()*words.length);
                var span = document.createElement('span');
                span.innerText = words[rand];
                divElement.appendChild(span);
                document.body.appendChild(divElement);
            }
        }
        count++;
    },1000)

    document.addEventListener("keydown",function (event) {
        str+=event.key;
        console.log(str);
        var spans = document.getElementsByTagName('span');
        var matchCnt = 0;
        for (var i = 0; i <spans.length ; i++) {
            if(str.includes(spans[i].innerText)){
                spans[i].style.color = 'red'
                score++;
                matchCnt++;
            }
        }
        if(matchCnt>0){
            str = '';
        }
        document.getElementById('score').innerText = score;

        //清除全部打出的一行
        var divs = document.getElementsByTagName('div');
        for (var i = 0; i <divs.length ; i++) {
            var children = divs[i].children;
            var redCnt = 0;
            for (var j = 0; j <children.length ; j++) {
                if(children[j].style.color === 'red'){
                    redCnt++;
                }
            }
            if(redCnt===children.length){
                document.body.removeChild(divs[i]);
            }
        }
    });



</script>
</body>
</html>
相关推荐
zhong liu bin2 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
前端 贾公子21 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐21 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
知识分享小能手41 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手7 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one7 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830949 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr