jQuery之文字游戏

jQuery学习已经要接近尾声了，也没写什么像样的东西，在学习jQuery事件对象的时候，学到了" event.keyCode " 这个键盘按键代码,给了我一个灵感，写了一个文字消除的游戏，
算是对前一段时间学习的总结，欢迎大家试玩，游戏很简单，就是点击开始键，会有字母不断从页面上方落下，按下对应键盘上的字母，就可以把字母消除，如果字母落到页面最下方，会自动从页面上方的某个随机位置落下，消除所有对应字母，游戏结束。
附上图片，供大家参考；

一、游戏html页面：

游戏的html界面非常简单，分为一个开始按钮和一个得分与计时的标题栏

<button class="start">开始</button>
<span class="score">得分：0  计时：0</span>
<!--<div class="letter"></div>-->

二、css布局：

写完了html之后就是css，这里主要用到absolute布局，然后动态创建一个类名为letter的新的div,用于装动态生成的字母，注意margin与padding边框，并给字体一个font-weight字体加粗，并给html中的div一个样式

  body,html{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color:#66CCCC;
            text-align: center;
        }
        .score{
            color:white;
            font-size: 20px;
            font-weight: bolder;
        }
        .start{
            font-size: 20px;
            color:grey;
            background-color: #E8FFE8;
        }
        .letter{
            font-size: 70px;
            font-weight: bolder;
            color:white;
            position: absolute;
        }

三、jQuery实现

首先获取各个元素，并定义一个lettArr数组，一个timer=null，以便开启循环定时器，一个scoreNum=0，用来计分，一个timerNum=0用来计时：

	var start=getClass("start")[0];
    var score=getClass("score")[0];
    var str="QWERTYUIOPASDFGHJKLZXCVBNM";
    var lettArr=null;
    var scoreNum=0;
    var timeNum=0;
    var timer=null;
    var gameOver=true;

先封装一个Letters方法,用一个随机数1200+100做字母在水平方向随机生成的位置，给竖直起始位置一个50，在给一个随机速度，加1是为了起始速度不为0，动态创建一个新的div，给一个类名为letter，把刚才的this.x,this.y给创建的div，用随机数26强制取整创建出26个字母的随机数，并添加到letterDiv,在将letterDiv添加到body中，定义一个that记录一下外面的this然后在循环定时器中使用that，否则，this用的是循环的定时器里面的，会出现错误，然后让字母每次都出现在y=50处，然后判断游戏是否结束，如果结束则清除动画，不在执行

 function Letters() {
        this.x=Math.random()*1200+100;
        this.y=50;
        this.speed=Math.random()*5+1;
        var letterDiv=document.createElement("div");
        letterDiv.className="letter";
        letterDiv.style.left=this.x+"px";
        letterDiv.style.top=this.y+"px";
        letterDiv.innerHTML=str[parseInt(Math.random()*26)];
        document.body.appendChild(letterDiv);

        var that=this;
        letterDiv.timer=setInterval(function () {
            that.y=that.y+that.speed;
           if(letterDiv.offsetTop>=client().height-letterDiv.offsetHeight)
           {
               that.y=50;
               that.x=Math.random()*1200+100
           }
           if(gameOver !==true){
               letterDiv.style.left=that.x+"px";
               letterDiv.style.top=that.y+"px";
           }else{
               clearInterval(letterDiv,timer);
           }
           letterDiv.style.left=that.x+"px";
           letterDiv.style.top=that.y+"px";

        },80)
    }

给start按钮一个点击事件 ，上一步定义了gameOver=true，进去之后令gameOver=false，则点击之后不会重复执行，用new Letters新创建26个随机字母，然后绑定keydown键盘按下事件，让键盘按下字母时字母消除，并计分，全部完成，则清除动画，同时弹出Game over：

	start.onclick=function () {
        if(gameOver===true){
            gameOver = false;
            for(var i=0;i<26;i++){
                new Letters();
            }
            lettArr=document.body.children;
            document.onkeydown=function (event) {
                event=event || window.event;
                var code=String.fromCharCode(event.keyCode);
                // console.log(lettArr);
                for(var i=0;i<lettArr.length;i++)
                {
                    if(lettArr[i].innerHTML===code){
                        document.body.removeChild(lettArr[i]);
                        scoreNum++;
                        update();
                    }
                }
            };
            clearInterval(timer);
            timer=setInterval(function () {
                timeNum++;
                if(document.body.children.length<=3){
                    alert("Game Over");
                    clearInterval(timer);
                    gameOver=true;
                }
                update();
            },1000)
        }

    };

定义一个update方法,用来记录得分和时间；

function update() {
        score.innerHTML="得分:  "+scoreNum+"计时"+timeNum;
    }

到这里，基本整个游戏就算实现了，游戏并不复杂，但是要完全运行其起来，没有bug也不是很简单，有兴趣的话可以写一写，并对此稍加改进，使游戏更加完善，美观。