-
js+html实现打字游戏v2
实现逻辑，看js+html实现打字游戏v1，在此基础之上增加了从文件读取到的单词，随机选取10个单词。
效果演示
上代码：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
附录：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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
-
相关阅读:
Spring 数据脱敏实现方式
钡铼技术BL100协议转换网关
血常规、尿检等指标就能识别卵巢癌！中山大学刘继红团队牵头，四大医学院联合构建 AI 融合模型
【P58】JMeter 简单数据写入器（Simple Data Writer）
现代信号处理——AR模型谱估计
Efficientnet网络
【整理扑克牌】python实现-附ChatGPT解析
JavaWeb-HTML
HummerRisk V0.5.1 发布：新增对象存储、优化K8s 资源态势和资源拓扑等
灰鸽子木马特征值免杀
- 原文地址：https://blog.csdn.net/AnalogElectronic/article/details/132664972