"柴米油盐酱醋茶",现在我们想要写一个小游戏是不是得先要了解一些基本知识,就比如说你想要煮饭,你得认识"米"、你得知道生火煮饭这个流程吧！
核心部分:第一步我们需要一个键盘按下事件onkeydown,第二步我们需要知道我们按下的是哪个按钮:e.keyCode ||e.which(返回的是ASCII码),第三步判断屏幕上字母的ASCII码是不是和你键盘按下的ASCII码是不是一致.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0}
#content{width:900px;margin:0 auto;position: relative;}
div{font-size:60px;position: absolute}
</style>
</head>
<body>
<div id="content">
</div>
</body>
</html>
<script>
//得到一个随机数
function numRandom(){
return parseInt(arguments[0]+Math.random()*(arguments[1]-arguments[0]+1));
}
//第一步获取大盒子
var oCon = document.getElementById("content");
//第二步开启一个定时器不间断的创建div并且插入到大盒子里面去(这就是头部不断产生字母的效果)
setInterval(function(){
var div = document.createElement("div");
div.innerHTML = String.fromCharCode(numRandom(65,90))//将ASCII码转换为字符
div.className = "char";
div.style.left = numRandom(0,900)+"px";
oCon.appendChild(div);
move(div)
},500)
//第三部创建一个运动的函数 每一个小的div都会运动起来如果某一个小的div的top值超过了500那么就会被销毁掉同时关闭 自身的定时器
function move(obj){
var t = 0;
obj.timer = setInterval(function(){
t+=10;
if(t>=500){
obj.remove();
clearInterval(obj.timer)
}else{
obj.style.top = t+‘px‘;
}
},200)
}
//当用户按下的时候 首先获取下用户按下的code值 然后在将code值与所有的div里面的innerHTML转换成的code值做比较 如果比较成功则删除自身
document.onkeydown = function(e){
var e = e||event;
var code = e.keyCode ||e.which;
var aDiv = document.querySelectorAll(".char");
for(var i=0;i<aDiv.length;i++ ){
if(aDiv[i].innerHTML.charCodeAt(0) == code){
aDiv[i].remove();
}
}
}
</script>
打字游戏完成了,该是你练习的时候 了
原文地址：https://www.cnblogs.com/tc-jieke/p/9060575.html