博客
关于我
JavaScript_打字游戏
阅读量:332 次
发布时间:2019-03-04

本文共 2304 字,大约阅读时间需要 7 分钟。

文章目录

效果图:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

需求分析:

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

源代码:

  • HTML部分
A
请在按键上按下屏幕上显示的字母
  • 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;}
  1. css主体代码,无动画特效版
  • JavaScript部分
  1. 为了简化代码,先封装一些常用的自定义构造函数
  1. js主体部分,需要用到封装的函数,调用即可
  • 总代码
    
打字游戏
A
请在按键上按下屏幕上显示的字母

转载地址:http://yyxh.baihongyu.com/

你可能感兴趣的文章
MySQL创建用户报错:ERROR 1396 (HY000): Operation CREATE USER failed for 'slave'@'%'
查看>>
mysql加强(3)~分组(统计)查询
查看>>
mysql加强(4)~多表查询:笛卡尔积、消除笛卡尔积操作(等值、非等值连接),内连接(隐式连接、显示连接)、外连接、自连接
查看>>
mysql加强(5)~DML 增删改操作和 DQL 查询操作
查看>>
mysql加强(6)~子查询简单介绍、子查询分类
查看>>
mysql加强(7)~事务、事务并发、解决事务并发的方法
查看>>
mysql千万级大数据SQL查询优化
查看>>
MySQL千万级大表优化策略
查看>>
MySQL单实例或多实例启动脚本
查看>>
MySQL压缩包方式安装,傻瓜式教学
查看>>
MySQL原理、设计与应用全面解析
查看>>
MySQL原理简介—1.SQL的执行流程
查看>>
mysql参考触发条件_MySQL 5.0-触发器(参考)_mysql
查看>>
MySQL及navicat for mysql中文乱码
查看>>
MySqL双机热备份(二)--MysqL主-主复制实现
查看>>
MySql各种查询
查看>>
mysql启动以后会自动关闭_驾照虽然是C1,一直是开自动挡的车,会不会以后就不会开手动了?...
查看>>
mysql启动和关闭外键约束的方法(FOREIGN_KEY_CHECKS)
查看>>
Mysql启动失败解决过程
查看>>
MySQL启动失败:Can't start server: Bind on TCP/IP port
查看>>