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

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

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

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 = 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视频教程】

立即学习“Java免费学习笔记(深入)”;

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2699221.html

(0)
上一篇 2025年3月7日 18:56:43
下一篇 2025年3月7日 11:07:51

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 手把手教你JS逆向搞定字体反爬并获取某招聘网站信息

    网站的反爬措施有很多,例如:js反爬、ip反爬、css反爬、字体反爬、验证码反爬、滑动点击类验证反爬等等,今天我们通过爬取某招聘来实战学习字体反爬。 今日网站 小编已加密:aHR0cHM6Ly93d3cuc2hpeGlzZW5nLmNvbS…

    2025年3月7日 编程技术
    200
  • 使用canvas需要引入哪些js

    使用canvas需要引入“canvas.js”js文件,还需要引入HTML文件和JavaScript文件中的Canvas API,HTML文件用于创建Canvas元素,JavaScript文件用于引入Canvas API并进行图形绘制等操作…

    2025年3月7日
    200
  • js层次选择器有哪些

    js层次选择器有getElementById、getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll、parentNode、children、pr…

    2025年3月7日
    200
  • js原生选择器有哪些

    js原生选择器有getElementById()、getElementsByClassName()、getElementsByTagName()、querySelector()和querySelectorAll()等。详细介绍:1、getE…

    2025年3月7日
    200
  • js冒泡事件有哪些

    js冒泡事件有click、dblclick、mouseover、mouseout、mousemove、mousedown、mouseup、keydown、keyup、input、change、submit、focus、blur和scroll…

    2025年3月7日
    200
  • js有哪些基本数据类型

    js基本数据类型有Number、String、Boolean、Null、Undefined、Object和Symbol。详细介绍:1、Number,数值数据类型,包括整数和浮点数,在JavaScript中,所有的数字都是浮点类型,也可以表示…

    2025年3月7日
    200
  • js有哪些内置对象

    js内置对象有Math、Date、String、Array、Object、Number、Boolean、RegExp、Function、Error、Error.prototype、Promise、Promise.prototype、Map、…

    2025年3月7日
    200
  • js中new操作符做了哪些事情

    js中new操作符做了:1、创建一个空对象,这个新对象将成为函数的实例;2、将新对象的原型链接到构造函数的原型对象,这样新对象就可以访问构造函数原型对象中定义的属性和方法;3、将构造函数的作用域赋给新对象,这样新对象就可以通过this关键字…

    2025年3月7日
    200
  • js缓存机制有哪些

    js缓存机制有本地存储、缓存API、内存存储、IndexedDB、Service Workers等。详细介绍:1、本地存储,是一种持久化存储机制,可以将数据存储在用户的浏览器中,它是一种键值对存储系统,可以通过“setItem()”和“ge…

    2025年3月7日
    200
  • 什么是js冒泡事件

    js冒泡事件是一种事件模型,用于描述事件如何在DOM结构中传播,这种模型基于事件冒泡和事件捕获的概念。事件冒泡是事件模型的一部分,它描述了当某个元素发生特定事件时,这个事件如何向DOM结构上层传播。如果一个元素发生了某个事件,那么这个事件不…

    2025年3月7日
    200

发表回复

登录后才能评论