原生javascript开发打字游戏---代码重构版本

浏览器支持版本：IE9+ 火狐 谷歌等

上一次使用canvas制作，代码有些乱，这一次使用原生javascript制作，原理就是div动态生成，定时器刷新，div删除，div重新生成，字母消失特效

由于使用addEventListener添加事件，IE9以下不支持，支持另外一种事件机制，但原理不同，暂时不考虑，等研究jQuery源码之后，再回来修改兼容。

定时器

//定时器
window.requestAnimFrame=(function(){
	return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
			return window.setTimeout(callback, 1000 / 60);
		};
})();//自动执行函数

字母对象

//字母对象
var letters={
	x:0,
	y:0,//字母坐标
	ax:0,
	ay:0,//苹果图片坐标
	awidth:40,
	aheight:40,//苹果图片宽高
	islive:false,
	key:null,
	le:null,
	aPic:null,//苹果图片
	lColor:null,//字母颜色
	leArr:[],//保存生成的字母
	getLetter:function(){
		key=['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',
				'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'];
		this.le=key[Math.floor(Math.random()*51)];
		this.leArr.push(this.le);
		this.ax=Math.floor(Math.random()*400)+20;
		this.x=this.ax;
		this.y=this.ay;
	},
	init:function(){
		//初始化
		this.ay=0;
		for(var i=0;i<10;i++){
			this.getLetter();//10个字母
			this.draw(i);
		}
	},
	draw:function(i){
		//画图
		this.ay++;
		var div=document.createElement('div');
		div.style.width=this.awidth+'px';
		div.style.height=this.aheight+'px';
		div.style.position='absolute';
		div.style.top='-50px';
		div.style.left=this.ax+'px';
		$('.left')[0].appendChild(div);
		var adiv=document.createElement('img');
		adiv.id='img'+i;
		adiv.style.width=this.awidth+'px';
		adiv.style.height=this.aheight+'px';
		adiv.style.position='relative';
		adiv.style.top=0;
		adiv.style.left=0;
		adiv.src='images/苹果[图形].png';
		div.appendChild(adiv);
		var odiv=document.createElement('div');
		odiv.id=i;
		odiv.style.width=this.awidth/2+'px';
		odiv.style.height=this.aheight/2+'px';
		odiv.style.fontSize='28px';
		odiv.style.color=this.lColor;
		odiv.style.position='absolute';
		odiv.style.top=3+'px';
		odiv.style.left=15+'px';
		odiv.innerHTML =this.le;
		div.appendChild(odiv);
	},
	remove:function(i){//删除苹果
		if(!this.islive){
			$('#img'+i).src='images/boom.gif';
			$('#'+i).style.display='none';
			setTimeout(function(){
				$('.left')[0].removeChild($('#'+i).parentNode);//删除div节点
				this.islive=true;
			},1000);
		}
	},
	born:function(i){//重新生成苹果
		var se=this;
		setTimeout(function(){
				if(this.islive){
					se.le=key[Math.floor(Math.random()*51)];
					se.leArr.splice(i,1,se.le);//修改数组对应下标字母
					se.ax=Math.floor(Math.random()*400)+20;
					se.draw(i);
					this.islive=false;
				}
		},1000);
		
	},
	moveDown:function(){//向下运动
		for(var i in letters.leArr){
			if(parseFloat($('#'+i).parentNode.style.top)>=472){
				letters.remove(i);//删除
				letters.born(i);
			}//重新生成
			$('#'+i).parentNode.style.top=parseFloat($('#'+i).parentNode.style.top)+Math.random()+'px';
		}
		requestAnimFrame(letters.moveDown);
	}
}

键盘事件

//键盘事件封装
var keyDown={};//按键对象
var capsLock=false;//大写按键判断

window.addEventListener('keydown',function(e){
	e=event||window.event;
	//shift组合大写按键
	var capsLockKey = e.keyCode ? e.keyCode : e.which;
	var shifKey = e.shiftKey ? e.shiftKey:((capsLockKey == 16) ? true : false);
	if(((capsLockKey >= 65 && capsLockKey <= 90) && !shifKey)||((capsLockKey >= 97 && capsLockKey <= 122) && shifKey)){
	    var zh=true;
	}else{
	    zh=false;
	}
	keyDown[e.keyCode]=true;
	for(var i=0;i<letters.leArr.length;i++){
		if(capsLock==false&&zh==true){//大写锁未打开且没有按下shift键(组合键)
			if(String.fromCharCode(e.keyCode).toLocaleLowerCase()==letters.leArr[i]){//字母区分大小写
				letters.remove(i);//消除字母
				letters.born(i);//重新生成
			}
		}
		else{//按下shift键或者大写锁已经打开
			if(String.fromCharCode(e.keyCode)==letters.leArr[i]){
				letters.remove(i);//消除字母
				letters.born(i);//重新生成
			}
		}
		if(e.keyCode==20){//由于javascript是事件监听，所以无法知道按下大写锁前键盘大写锁是否已经打开
			//(当做未打开），搞着玩的,可以忽略。
			if(capsLock==false){
				//大写锁开启
				capsLock=true;
				return;
			}
			else{
				//大写锁关闭
				capsLock=false;
				return;
			}
		}
		
	}
});
window.addEventListener('keyup',function(e){
	delete keyDown[e.keyCode];//释放按键对象
});	

代码到此基本结束，生下来的就是页面结构，css样式，附上完整代码

原生javascript开发打字游戏---代码重构版本