JS简单打字小游戏demo

代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta http-equiv="refresh" content="2" />-->
<title>打字游戏</title>
<style>
html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;}
#main{
    width:100%;
    height:100%;}
font{
    position:absolute;
    font-family:"微软雅黑";
    font-size:36px;}
#f{
    position:absolute;
    font-family:"微软雅黑";
    font-size:36px;}
</style>
</head>

<body>
    <div id="main">
        
    </div>
</body>
<script>
    var words=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
    var winWidth=window.innerWidth-47;//获取浏览器宽度
    var winHeight=window.innerHeight-47;//获取浏览器高度(由于win10下面有任务栏遮挡浏览器所以-47)
    var i=1;
    var num=0;
    var flag=0;
    //生成随机字母
    function create(){
        var r=(Math.floor(Math.random()*26));
        var word=document.createElement('font');
        word.innerHTML=words[r];
        word.id=i;
        document.getElementById('main').appendChild(word);//appendChild() 方法向父节点main添加一个子节点到最后
        //随机生成下落位置
        var wr=(Math.floor(Math.random()*winWidth));
        var f=document.getElementById(i);
        f.style.left=wr+"px";
        i++;
    }
    //所有现存字母下掉
    function drop(){
        var x=document.getElementsByTagName('font');
        for(var l=0;l<x.length;l++){
            document.onkeydown=function(event){
                var e = event || window.event;
                if(e && e.keyCode==x[0].innerHTML.charCodeAt()){ 
                    document.getElementById('main').removeChild(x[0]);
                }
            }; 
            //判断是否到达底部，到底部删除当前子节点
            if(x[l].style.top==winHeight+"px"){
                document.getElementById('main').removeChild(x[l]);
                flag++;
                //超过10个没有打中游戏结束
                if(flag>=10){
                    clearInterval(c);
                    clearInterval(d);
                    alert("game over");
                    break;
                }
            }else{
                x[l].style.top=x[l].offsetTop+1+"px";
            }
            
        }
    }
    var c=setInterval(create,1000);//生成速度
    var d=setInterval(drop,10);//下掉速度
    
</script>
</html>
以上代码为js简单打字小游戏demo，原文：https://www.cnblogs.com/mc-web/p/14221035.html