js+html实现打字游戏v2

实现逻辑,看js+html实现打字游戏v1,在此基础之上增加了从文件读取到的单词,随机选取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>
<input type="file" name="file" multiple="multiple" id="files" onchange="choosefile()" />
<body>
<script>

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


    function randWords(){
        if(fileWords.length>0){
            for (var i = 0; i <words.length ; i++) {
                var rand = Math.floor(Math.random()*fileWords.length);
                words[i] = fileWords[rand];
            }
        }
    }

    setInterval(()=>{
        if(count%(6-speed)===0){
            //从文件读取到的单词,随机选取10个单词
            this.randWords();
            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]);
            }
        }
    });

    function choosefile () {
        var fileList = document.getElementById('files').files;
        var nameStr = '';
        for (var i = 0; i < fileList.length; i++) {
            nameStr += `${i === 0 ? '' : ', '}${fileList[i].name}`;
            var reader = new FileReader();
            reader.readAsText(fileList[i], "UTF-8");
            reader.onload = function (e) {
                content = e.target.result;
                fileWords = content.split('\r\n');
            }
        }
    }

</script>
</body>
</html>

附录:englishg words.txt

understand
community
continent
recognize
something
although
movement
negative
acquire
content
respond
appeal
aspect
damage
monkey
select
though
wealth
within
asset
goods
stick
fair
fine
good
into
plan
week
ban
dam
fly
she
web
agreement
condition
purchase
ability
attract
combine
explain
natural
setting
several
almost
around
assure
danger
decade
ensure
parent
reduce
reject
alter
equal
exist
solar
speed
waste
cell
deny
fill
thus
consequence
demonstrate
influential
department
management
production
regulation
available
direction
formation
potential
campaign
contrast
preserve
attempt
element
factory
imagine
prepare
promote
weather
depend
desire
device
employ
expose
launch
manner
supply
arise
basic
down
duty
gift
down
duty
war
competition
specialist
conscious
emphasize
essential
privilege
represent
structure
conflict
explore
nuclear
obvious
present
enable
lesson
manage
member
phrase
safety
signal
suffer
slave
stage
earn
join
shop
infrastructure
productivity
investment
excessive
anything
medicine
positive
because
comment
confuse
freedom
genetic
journey
justify
arrive
couple
impose
refuse
reveal
screen
settle
agent
agree
crime
final
house
match
money
never
radio
royal
whole
area
cent
ever
food
kill
leak
mark
meet
pace
real
art
fit
net
conservation
performance
atmosphere
commercial
illustrate
population
associate
criticism
disappear
historian
congress
instance
internet
physical
railroad
separate
achieve
advance
already
capital
citizen
respect
agency
beyond
define
emerge
engage
expand
formal
gamble
period
record
return
second
senior
spread
admit
clean
ocean
piece
press
truth
baby
code
diet
fear
hand
sign
lot
it
administration
increasingly
publication
attractive
inevitable
journalist
optimistic
phenomenon
existence
guarantee
interpret
necessary
necessity
audience
database
exchange
familiar
humanity
perceive
religion
address
amateur
conduct
emotion
measure
mistake
outside
pursuit
receive
recover
advice
beauty
casual
dollar
either
except
former
middle
oppose
poetry
reader
severe
strong
switch
volume
apply
basis
board
robot
shock
third
total
boom
else
goal
make
poor
lay
consideration
conservation
constitution
institution
responsible
collection
commission
industrial
profitable
sufficient
classical
physician
recommend
religious
sensitive
tolerance
conclude
constant
dominant
dominate
enormous
epidemic
friendly
hospital
priority
restrict
strategy
airline
connect
deliver
deserve
discuss
educate
leisure
network
opinion
perhaps
station
sustain
commit
credit
divide
friend
invite
notion
prefer
region
remove
series
simply
adapt
break
enjoy
extra
bill
date
film
jump
link
next
odds
vay
odd
explanation
conclusion
eventually
everything
reputation
strengthen
widespread
celebrity
immediate
analysis
chemical
discover
domestic
province
security
chanel
correct
crucial
current
expense
observe
promise
recruit
regular
routine
typical
usually
variety
afford
assess
charge
church
differ
escape
factor
father
forest
hardly
height
indeed
orient
please
source
stable
along
award
aware
below
cross
crude
grade
happy
light
month
occur
quick
rapid
tough
wrong
cook
pick
rich
soon
upon
wage
low
consumption
description
convention
historical
successful
breakdown
conductor
exception
highlight
interview
judgement
ownership
procedure
voluntary
accident
announce
contract
contrary
creative
decrease
distance
internal
minister
opposite
ordinary
relation
somewhat
strength
compete
divorce
examine
largely
license
obscure
outcome
possess
propose
scholar
suicide
various
willing
annual
answer
before
belong
budget
gather
handle
ignore
inform
invest
margin
motion
option
origin
pursue
puzzle
random
really
secret
threat
urgent
verbal
alone
count
delay
draft
error
humor
laugh
novel
panel
plant
rural
trust
body
cite
city
cure
four
hurt
near
rear
suit
tool
type
fix
mix
owe
sex
conversation
corporation
independent
interesting
temperature
compromise
concession
disappoint
enterprise
cripple
相关推荐
ZJ_.17 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特1 小时前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
Watermelo6172 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248942 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235612 小时前
从零开始学前端之HTML(三)
前端·html
旭久3 小时前
SpringBoot的Thymeleaf做一个可自定义合并td的pdf表格
pdf·html·springboot
一个处女座的程序猿O(∩_∩)O4 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
燃先生._.10 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js