网站首页 > 网页设计教程 > Javascript教程 > 用JavaScript模拟实现打字小游戏!

用JavaScript模拟实现打字小游戏!

  • 作者:互联网
  • 时间:2022-08-10 11:30:26
今日闲来无事,想试一试模拟打字游戏,下面是效果图,会记录判断打字,如果在外围添加setInterval函数,可以实现测试打字速度的功能。

html

A

css

body,
html {
  width: 100%;
  height: 100%;
 }

 .wrapper {
  width: 400px;
  margin: 20px auto;
 }

 div {
  font-size: 100px;
  font-weight: 900;
  text-align: center;

 }
 input{
  width: 400px;
  margin: 20px auto;
 }

js

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
var text = do***ent.getElementById('text') 
var ipt = do***ent.getElementById('ipt')
var res;
var newRes;
var random = Ma***round(Ma***random() * 25);
var count = 0
 wi***w.onkeyup = function (e) {
  var random = Ma***round(Ma***random() * 25);
  newRes = str[random]
  res = te***innerHTML
  te***innerHTML = newRes
  if(e.***Code == re***harCodeAt(0)){
   count++;
   ip***alue = '';
  }else{
   alert('game over' + '   ' +'您的得分是'+ ':' + count)
   count = 0;
   ip***alue = '';
  }

 }

相关推荐:【JavaScript视频教程】

以上就是用JavaScript模拟实现打字小游戏!的详细内容,更多请关注php中文网其它相关文章!