js写的打字游戏，功能非常简洁，菜鸟可以看看，高手就别来了

最新推荐文章于 2022-08-16 20:56:54 发布

weixin_30315905

最新推荐文章于 2022-08-16 20:56:54 发布

阅读量209

点赞数

原文链接：http://www.cnblogs.com/lckblog/p/3402114.html

版权

废话不多说，上代码

    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>打字游戏</title>
	<style>
	.bool{
	    position:absolute;
		height:40px;
		width:40px;
		line-height:40px;
		background-color:red;
	}
	</style>
    <script type="text/javascript" src="jquery.js"></script>  
    </head>  
    <body>  
        <div id="divBg" style="position:absolute;left:40px;top:40px;">
		</div>
    </body>  
	<script type="text/javascript">
	
	//　字母工厂，返回字母类对象，也就是div加了其他一些属性
	function Bool(left,text,color){
	
		// 创建字母类对象
        var bool=new Object();
		
		// 居左边距离：它的父对象
		bool.left = 0;
		
		// 距离顶部位置：它的父对象
		bool.top = (divHeight-boolHeight);
		
		// 要显示的字母
		bool.text = text;
		
		// 向容器中添加div
		bgObj.append("<div class='bool' style='left:"+left+"px;top:"+(divHeight-boolHeight)+"px;text-align:center;'>" + text + "</div>");
		
		// 添加的div对象
		bool.obj =  $(".bool").eq($(".bool").length-1);
		
		// 返回字母类对象
		return bool;
	}
	
	// 所有字母
	var bools=new Array();
	
	// 时间对象
	var winInterval;
	
	// 运行时间次数
	var count = 1;
	
	// 边界高度
	var divHeight=600;
	
	// 边界宽度
	var divWidth=400;
	
	// 字母宽度
	var boolWidth=40;
	
	// 字母高度
	var boolHeight=40;
	
	// 移动的速度（px/s）
	var speed=100;
	
	// 总共字母数
	var letterSum=0;
	
	// 对了字母数
	var rightLetterSum=0;
	
	// 添加字母对象的容器
	var bgObj = $(document.body);
	
	// 游戏状态,0未开始 1开始 2暂停 3结束
	var gameJyoutai = 0;
	
	// 打字开始
	function start(){
	
		// 定时运行，100毫秒一次
	    winInterval=setInterval(function(){
			// 定时运行的匿名函数
			
			// 10次创建一个字母类对象
			if(count%10==0){
			
				// 随机创建字母对象并添加到所有字母队列
			    bools.push(new Bool(random(0,(divWidth-boolWidth)),String.fromCharCode(random(65,91)),"red"));
				letterSum++;
			}
			
			// 迭代所有字母
			for(var i=0;i<bools.length;i++){
			
				// 向上位移
				bools[i].top-=(speed/10);
				bools[i].obj.css("top",bools[i].top+"px");
				
				// 如果移动出界
				if(bools[i].top<=0){
				
					// 删除对象
					bools[i].obj.remove();
					window.clearInterval(bools[i].interval);
					bools.splice(i,1);
					i=i-1;
				}
			}
			count++;
		},100);
		
		// 改变游戏状态
        gameJyoutai	= 1;	
	}
	
	// 暂停
	function stop(){
	    window.clearInterval(winInterval);
		
		// 改变游戏状态
        gameJyoutai	= 2;
	}
	
	$(function(){
	    start();
	});
	
	// 产生随机数
	function random(x,y) {
	
         //x上限，y下限
		 return parseInt(Math.random() * (x - y + 1) + y);
    }
	
	// 注册键盘按下事件
	$(document).keypress(function(e){
	
	    // 获取键盘的值
		var text =String.fromCharCode(e.which);
		
		// 暂停或者继续
		if(e.which==13){
		
			// 开始状态
		    if(gameJyoutai==1){
				
				// 暂停
				stop();
				
			// 暂停状态
			}else if(gameJyoutai==2){
			
				// 继续
			    start();
			}
		}
		
		// 暂停状态
		if(gameJyoutai==2){
		    return ;
		}
		
		// 所有对的都删除
		for(var i=0;i<bools.length;i++){
		
			// 按下的字母存在
			if(bools[i].text==text.toUpperCase()){
			
				// 删除字母
				bools[i].obj.remove();
				window.clearInterval(bools[i].interval);
				bools.splice(i,1);
				i=i-1;
				rightLetterSum++;
			}
		}
		
		/*
		// 只删除最上面的元素
		if(bools.length!=0){
			if(bools[0].text==text){
				
				// 删除字母
				bools[0].obj.remove();
				window.clearInterval(bools[0].interval);
				bools.splice(0,1);
			}
		}*/
	});
	
	</script>
    </html>

用到的jquery自己下载就行。

转载于:https://www.cnblogs.com/lckblog/p/3402114.html

weixin_30315905

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js写的打字游戏，功能非常简洁，菜鸟可以看看，高手就别来了

废话不多说，上代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>打字游戏</title> <style> .bool{ ...
复制链接

扫一扫