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

 所属分类:web前端开发

 浏览:109次-  评论: 0次-  更新时间:2022-10-17
描述:更多教程资料进入php教程获得。 今日闲来无事,想试一试模拟打字游戏,下面是效果图,会记录判断打字,如果在外围添加setInterval函数,可...
更多教程资料进入php教程获得。 今日闲来无事,想试一试模拟打字游戏,下面是效果图,会记录判断打字,如果在外围添加setInterval函数,可以实现测试打字速度的功能。

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

html

<div class="wrapper">
  <div id="text">A</div>
  <input type="text" id="ipt">
</div>
登录后复制

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 = document.getElementById('text') 
var ipt = document.getElementById('ipt')
var res;
var newRes;
var random = Math.round(Math.random() * 25);
var count = 0
 window.onkeyup = function (e) {
  var random = Math.round(Math.random() * 25);
  newRes = str[random]
  res = text.innerHTML
  text.innerHTML = newRes
  if(e.keyCode == res.charCodeAt(0)){
   count++;
   ipt.value = '';
  }else{
   alert('game over' + '   ' +'您的得分是'+ ':' + count)
   count = 0;
   ipt.value = '';
  }

 }
登录后复制

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

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

 标签: js,打字,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!