js实现打字小游戏


Posted in Javascript onDecember 17, 2019

今日闲来无事,想试一试模拟打字游戏,下面是效果图,会记录判断打字,如果在外围添加setInterval函数,可以实现测试打字速度的功能。

js实现打字小游戏

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 纠正 cleanWhitespace函数
Mar 11 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 #Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 #Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 #Javascript
js DOM的事件常见操作实例详解
Dec 16 #Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 #Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 #Javascript
javascript自定义右键菜单插件
Dec 16 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
JS函数重载的解决方案
2014/05/13 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python写日志封装类实例
2015/06/28 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python单例模式实例解析
2018/08/28 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python反编译学习之字节码详解
2019/05/19 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
python的列表List求均值和中位数实例
2020/03/03 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
利用python汇总统计多张Excel
2020/09/22 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
css height属性中的calc方法详解
2021/06/03 HTML / CSS