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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 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
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
Element Input组件分析小结
2018/10/11 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Python中属性和描述符的正确使用
2016/08/23 Python
利用python获取Ping结果示例代码
2017/07/06 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python实现图像全景拼接
2020/03/27 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
详解Scrapy Redis入门实战
2020/11/18 Python
高中竞选班长演讲稿
2014/04/24 职场文书
消防志愿者活动方案
2014/08/23 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
Python 正则模块详情
2021/11/02 Python
Python正则表达式中flags参数的实例详解
2022/04/01 Python