JavaScript实现打字游戏

2024-09-28 05:16:33

本文实例为大家分享了JavaScript实现打字游戏的具体代码，供大家参考，具体内容如下

效果图：

需求分析：

1、在char这个div里面显示要输入的字母，大写
2、在result这个div里面时时显示正确率，比如98%
3、给文档绑定按键事件
4、如果输入的内容和char里面一致，显示正确动画：animated zoomIn,并更换输入的字母
5、如果输入的内容和char里面不一致，显示错误动画：animated shake error
6、不管是正确还是错误都时时更新result里面的正确率

源代码：

HTML部分

<mian>
 <div id="char">A</div>
 <div id="result">请在按键上按下屏幕上显示的字母</div>
</mian>

css部分

1.为了实现一些特效，先创建一个animate.css文件，在封装一些动画效果放里面

/*animate.css*/
.animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

.animated.infinite {
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}

.animated.hinge {
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
 -webkit-animation-duration: .75s;
 animation-duration: .75s;
}
@-webkit-keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 }

 50% {
 opacity: 1;
 }
}

@keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 }

 50% {
 opacity: 1;
 }
}

.zoomIn {
 -webkit-animation-name: zoomIn;
 animation-name: zoomIn;
}
  .animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
@-webkit-keyframes shake {
 from, to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }

 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
 }

 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
 }
}

@keyframes shake {
 from, to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }

 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
 }

 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
 }
}

.shake {
 -webkit-animation-name: shake;
 animation-name: shake;
}

2.css主体代码，无动画特效版

<style>
 body {
  margin: 0;
  /*开启弹性布局，并让弹性布局中的子元素
  水平居中对齐，垂直居中对齐*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*文字居中*/
  text-align: center;
  /*设置背景颜色的经像渐变*/
  background: radial-gradient(circle, #444, #111, #000);
 }

 #char {
  font-size: 400px;
  color: lightgreen;
  /*设置文字阴影*/
  /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
  /*位置可以为负值*/
  text-shadow: 0 0 50px #666;
 }

 #result {
  font-size: 20px;
  color: #888;
 }

 /*找到id为char及类名为error的div元素*/
 #char.error {
  color: red;
 }
</style>

JavaScript部分

1.为了简化代码，先封装一些常用的自定义构造函数

<script>
// 定义一个函数:rand
// 参数:最小整数，最大整数
// 返回:两个整数之间的一个随机整数
function rand(min, max) {
 return parseInt(Math.random() * (max - min + 1)) + min;
}
</script>

2.js主体部分，需要用到封装的函数，调用即可

<script>
 // 获取相关元素
 var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code用于记录页面上的字母的编码，使用全局变量，到处都可以使用
 var code, tirme;

 var rightNum = 0;//正确次数
 var wrongNum = 0;//错误次数
 // 1 在char这个div里面显示要输入的字母，大写
 showChar();
 // 3 给文档绑定按键事件
 document.onkeyup = function (e) {
 // 事件对象
 e = window.event || e;
 // 获取按键编码
 var keyCode = e.keyCode || e.which;
 // 4 如果输入的内容和char里面一致
 if (keyCode == code) {
  // 显示正确动画：animated zoomIn
  charDiv.className = "animated zoomIn";
  rightNum++;
  showChar()
 }
 // 5 如果输入的内容和char里面不一致
 else {
  // 显示错误动画：animated shake error
  charDiv.className = "animated shake error";
  wrongNum++
 }
 // 为了下一次有动画，在本次动画完后要移除类名
 setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 不管是正确还是错误都时时更新result里面的正确率
 // 正确率 = 正确次/总次数
 resultDiv.innerHTML = "正确率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // 函数功能:在char这个div里面随机显示要输入的字母:大写
 function showChar() {
  // 先随机出一个字母编码
  code = rand(65, 90);
  // 变成一个字母
  var char = String.fromCharCode(code);
  // 显示在char这个div里面
  charDiv.innerHTML = char;
 }
</script>

总代码

<html>

<head>
 <meta charset="utf-8">
 <title>打字游戏</title>
 <!--引入animate.css动画库-->
 <link rel="stylesheet" href="animate.css" >
 <style>
 body {
  margin: 0;
  /*开启弹性布局，并让弹性布局中的子元素
  水平居中对齐，垂直居中对齐*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*文字居中*/
  text-align: center;
  /*设置背景颜色的经像渐变*/
  background: radial-gradient(circle, #444, #111, #000);
 }

 #char {
  font-size: 400px;
  color: lightgreen;
  /*设置文字阴影*/
  /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
  /*位置可以为负值*/
  text-shadow: 0 0 50px #666;
 }

 #result {
  font-size: 20px;
  color: #888;
 }

 /*找到id为char及类名为error的div元素*/
 #char.error {
  color: red;
 }
 </style>
</head>

<body>
 <mian>
 <div id="char">A</div>
 <div id="result">请在按键上按下屏幕上显示的字母</div>
 </mian>
</body>

</html>
<script>
 // 定义一个函数:rand
 // 参数:最小整数，最大整数
 // 返回:两个整数之间的一个随机整数
 function rand(min, max) {
 return parseInt(Math.random() * (max - min + 1)) + min;
 }
</script>
<script>
 // 获取相关元素
 var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code用于记录页面上的字母的编码，使用全局变量，到处都可以使用
 var code, tirme;

 var rightNum = 0;//正确次数
 var wrongNum = 0;//错误次数
 // 1 在char这个div里面显示要输入的字母，大写
 showChar();
 // 3 给文档绑定按键事件
 document.onkeyup = function (e) {
 // 事件对象
 e = window.event || e;
 // 获取按键编码
 var keyCode = e.keyCode || e.which;
 // 4 如果输入的内容和char里面一致
 if (keyCode == code) {
  // 显示正确动画：animated zoomIn
  charDiv.className = "animated zoomIn";
  rightNum++;
  showChar()
 }
 // 5 如果输入的内容和char里面不一致
 else {
  // 显示错误动画：animated shake error
  charDiv.className = "animated shake error";
  wrongNum++
 }
 // 为了下一次有动画，在本次动画完后要移除类名
 setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 不管是正确还是错误都时时更新result里面的正确率
 // 正确率 = 正确次/总次数
 resultDiv.innerHTML = "正确率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // 函数功能:在char这个div里面随机显示要输入的字母:大写
 function showChar() {
  // 先随机出一个字母编码
  code = rand(65, 90);
  // 变成一个字母
  var char = String.fromCharCode(code);
  // 显示在char这个div里面
  charDiv.innerHTML = char;
 }
</script>

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

原生js实现打字动画游戏

这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti
javascript 打字游戏实现代码

效果如图所示:下面是核心代码复制代码代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu
js实现金山打字通小游戏

本文实例为大家分享了js实现金山打字通小游戏的具体代码,供大家参考,具体内容如下字母匀速随机下落,键盘按下对应字母按键,字母消失重新生成新字母,新字母可帮助回调一部分初始高度效果 1.页面内容列表内放字母 <ul id="box"> <li></li> <li>A</li> </ul> ** 2.页面样式 ** 1)清除li园标 2)确定列表位置,为字母随机位置下降准备 *{ padding: 0; marg
原生js实现的金山打字小游戏（实例代码详解）

首先先来看一下效果图如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.innerHTML = "<p>得分:" + this.score + "</p&g
JavaScript打字小游戏代码

功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码代码如下: //-------全局变量------- var data={ "10":["<img src='images
js实现打字小游戏

今日闲来无事,想试一试模拟打字游戏,下面是效果图,会记录判断打字,如果在外围添加setInterval函数,可以实现测试打字速度的功能. html <div class="wrapper"> <div id="text">A</div> <input type="text" id="ipt"> </div> css body, html { width: 100%;
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.具体的链接我写在下方. 一.前言相信大家都还记得吧,在某些新闻里会有一些惨不忍睹的结果是用像打字机一样的方式把文字弄出来.那么今天的主要目的就是要办到这个. 就在9月5日的时候,我在办公室里起了个做这种程序的念头,并且有了点思路.我首先想用调margin的方法,按理说是作出来了,但很不让人满意,毕竟很麻烦,并且技术也差.所以我打算用上数组和循环.9月13日我抽空写出来了,但由于这几天很忙,基本上在工
JS实现打字游戏

本文实例为大家分享了JS实现打字游戏的具体代码,供大家参考,具体内容如下第一步:页面的排版和布局 1.1实现开始游戏的界面 1.1.1开始游戏 1.1.2游戏说明  <div id="gameStart"> <div id="start">开始</div> <div id="describe">说明</div> <div id="
javascript实现简单打字游戏

本文实例为大家分享了javascript打字游戏的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>传智打字游戏</title> <style type="text/css"> .label{ position:a
JavaScript实现打字游戏

本文实例为大家分享了JavaScript实现打字游戏的具体代码,供大家参考,具体内容如下效果图: 需求分析: 1.在char这个div里面显示要输入的字母,大写 2.在result这个div里面时时显示正确率,比如98% 3.给文档绑定按键事件 4.如果输入的内容和char里面一致,显示正确动画:animated zoomIn,并更换输入的字母 5.如果输入的内容和char里面不一致,显示错误动画:animated shake error 6.不管是正确还是错误都时时更新result里面的正确
jQuery 写的简单打字游戏可以提示正确和错误的次数

var off_x; //横坐标 var count=0; //总分 var speed=5000; //速度,默认是5秒. var keyErro=0; //输入错误次数 var keyRight=0; //输入正确的次数 //组织字母 var charArray=new Array("A", "B", "C", "D", "E", "F", "G", "
java实现快速打字游戏

本文实例为大家分享了java实现打字游戏的具体代码,供大家参考,具体内容如下 import java.util.Random; import java.util.Scanner; public class Game { public Game(Player player) { } public Game() { } public String printStr(Player player) { StringBuffer a=new StringBuffer(); for(int i=0;i<Le
java类与对象案例之打字游戏

类与对象案例-童年回忆之打字游戏一.玩家类二.等级类三.游戏类四.等级地图五.测试类这次要做的案例是一个打字游戏的案例,相信大家小时候都玩过金山打字通的警察抓小偷和飞机大战,这次的案例是类似的简易版. 首先对于这个案例,我们要解决的是如何生成随机的字符串,如何判断生成的字符串和输入的字符串是否相等. 一.玩家类 package com.yc.oop6.hc0705; public class Player { private int score; //积分 private long
java实现打字游戏小程序

本文实例为大家分享了java实现打字游戏小程序的具体代码,供大家参考,具体内容如下一.设计思路 1.创建一个窗体 2.在窗体上放置一个面板,用paint方法画出英文字母,随机放置字母位置,并随时间自动下落 3.设置得分扣分机制 4.在面板上添加键盘监听器,输入正确得分,输入错误则扣分 ps:面板和监听器用一个类实现(这样简单方便) 二.具体实现 MyPanel.java import java.awt.Color; import java.awt.Font; import java.awt.G
JavaScript实现打字效果的方法

本文实例讲述了JavaScript实现打字效果的方法.分享给大家供大家参考.具体实现方法如下: <input type="button" onclick='start("高考了")' value="start"/> <input type="text" id="here" /> <script type="text/javascript"> funct
JavaScript实现斗地主游戏的思路

本文知识给大家分享一下使用js写斗地主的思路,代码写的不好,还请见谅. 这里说说斗地主主要包含的功能:洗牌,发牌,玩家出牌.电脑出牌,出牌规则的验证,输赢啥的没有判断,只是实现了这几个主要功能,下面依次说说几个功能的实现: 1.洗牌: var pukes=this.manage.pukes;//存放扑克牌的数组 //洗牌 for(var i=;i<pukes.length;i++){ var tmp=pukes[i]; var index=util.random(i,pukes.length);
JavaScript实现HTML5游戏断线自动重连的方法

断线重连的需求一断线重连原理二游戏内自动重连不刷新三刷新游戏自动重连重连数据Locationreplace重置url重连四实际项目中处理重连机制最后的总结断线重连的需求尤其是手机上,会因为网络的不稳定或者其他原因,导致用户的socket链接断开.这个时候如果直接让玩家退出游戏,重新登录,无疑是非常影响用户体验的事情.所以根据这个需求,就有需要程序来实现断线后自动重连回去的技术,是用户能够再次快速开始游戏进行战斗. 一.断线重连原理原来其实很简单,就是在断线的时候,根据用户的点击(有些时间短的

JavaScript实现打字游戏

相关推荐

随机推荐