脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js打字小游戏

js实现打字小游戏

 更新时间：2019年12月17日 09:13:22   作者：weixin_45789779  
这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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 = '';
  }

 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码

    JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码

    这篇文章主要给大家介绍了关于利用Javascript如何禁止浏览器右键查看元素，或者通过按F12审查元素，触犯这两个条件会自动并关闭页面的相关资料，通过设置这个可以防止别人扒下自己的网页，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09
  • JS双击变input框批量修改内容

    JS双击变input框批量修改内容

    这篇文章主要介绍了JS双击变input框批量修改内容的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-12-12
  • 微信小程序关键字变色实现代码实例

    微信小程序关键字变色实现代码实例

    这篇文章主要介绍了微信小程序关键字变色实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • js实现简单的轮播图效果

    js实现简单的轮播图效果

    这篇文章主要为大家详细介绍了js实现简单的轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • fullCalendar日历插件玩法示例解析

    fullCalendar日历插件玩法示例解析

    这篇文章主要介绍了fullCalendar日历插件玩法示例解析,包括Fullcalendar安装,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • node.js Web应用框架Express入门指南

    node.js Web应用框架Express入门指南

    这篇文章主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下
    2014-05-05
  • JavaScript实现简单的拖动效果

    JavaScript实现简单的拖动效果

    这篇文章主要为大家详细介绍了JavaScript实现简单的拖动效果，具有一定的参考价值，感兴趣的朋友可以参考一下
    2016-07-07
  • 实例详解JavaScript静态作用域和动态作用域

    实例详解JavaScript静态作用域和动态作用域

    作用域是指程序源代码中定义变量的区域,作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限,这篇文章主要给大家介绍了关于JavaScript静态作用域和动态作用域的相关资料,需要的朋友可以参考下
    2021-10-10
  • 微信小程序开发之自定义tabBar的实现

    微信小程序开发之自定义tabBar的实现

    这篇文章主要介绍了微信小程序开发之自定义tabBar的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JavaScript数据可视化:ECharts制作地图

    JavaScript数据可视化:ECharts制作地图

    这篇文章主要介绍了Echarts实现可视化地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-08-08

最新评论