• 当前标签:打字游戏

程序开发 H5学习之制作打字游戏

打字游戏制作,HTML5初学者可以做来玩玩,效果图如上面所示。 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打字游戏</title> <link rel="stylesheet" href="animate.css"> <style> main{ width: 500px; height: 500px; background-color:#808080; border: 5px solid black; margin: 30px auto; border-radius: 50%; } #char{ font-size: 350px; text-align: center; } .error{ color: yellow; } #result{ text-align: center; } </style> </head> <!--onkeyup监视键盘行为 松开键盘时会触发 =后面是触发的事件--> <body onkeyup="key(event)"> <main> <div id="char"></div> </main> <!--footer表示页脚--> <footer id="result"></footer> <script> // console.log(Math.random()*26) var char;//设置全局变量 哪里都可以用 var okCount = 0; var errorCount = 0; function showChar(){ // Math.random()可以生成0-1之间的随机数 var code = Math.random()*26 // Math.floor可以对括号内的数据向下取整 var code1 = Math.floor(code) // charAt()可以返回指定位置的字符 在这里值code1代表的位置 char = 'ABCDEFGHIJKLNMOPQRSTUVWXYZ'.charAt(code1) document.getElementById('char').innerHTML = char } showChar() // 点击键盘时触发的函数 function key(event){ // event.key获取点击键盘时的哪个字母 // toUpperCase()把小写字母转化为大写 var key = event.key.toUpperCase() var charBox = document.getElementById('char') function clearAnimated(){ charBox.className = '' } // console.log(key) // 如果两个字符key和char相等 那么重新刷新showChar函数 if(key == char){ okCount = okCount + 1 showChar() charBox.className = 'animated zoomIn' // setTimeout多少秒自后来调用这个函数 setTimeout(clearAnimated,500) } else{ errorCount =errorCount + 1 charBox.className = 'animated shake error' setTimeout(clearAnimated,500) } function showResult(){ if(okCount > 0 ){ var r

2017-03-09 20:14:26 39 0 0
阅读详情
  • 1
前往