"柴米油盐酱醋茶",现在我们想要写一个小游戏是不是得先要了解一些基本知识,就比如说你想要煮饭,你得认识"米"、你得知道生火煮饭这个流程吧！
核心部分:第一步我们需要一个键盘按下事件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>打字游戏完成了,该是你练习的时候 了