JavaScript实现简单的打字游戏

完整项目下载：https://download.csdn.net/download/weixin_44893902/13131694

演示地址：https://url_777.gitee.io/typing-games/

效果图：

实现代码：

目录结构：

HTML：

	
		
		
		
		
		
	
	
		
		
		
		 

			 

			 	
			 
			 
			
			
			
			
0
            

			
            

         	
         	  
            
			
		    
		    
		    
	

CSS

*{
	margin: 0;
	padding: 0;
}

.btn{
      width: 170px;
      height: 70px;
      border-radius: 20px;
      border: 1px solid greenyellow;
	  outline: medium;
      background: url(../img/background.jpg) no-repeat;
      background-size:170px 70px;
      float: left;
	  margin-left: 20px;
	  margin-top: 300px;
      text-align: center;
      /* cursor: pointer; */
      /* user-select: none; */
      font-weight: bold;
      font-size: 30px;
      color:white;
}
.btn:hover{
	border: 3px solid greenyellow;
}

#box{
     width: 100%;
     height: 100vh;
     background:url(../img/background.jpg) no-repeat;
     background-size:100% 100%;
     overflow: hidden;
}
.score{
     width: 250px;
     height: 355px;
     background: url(../img/score.png) no-repeat;
     background-size:100% 100%;
     position: absolute;
     right:10px;
     /* bottom: -80px; */
     font-size: 60px;
     text-align: center;
     line-height: 280px;
     color: white;
     cursor: pointer;
     user-select: none;
	 margin-top: 395px;
}
.startorstop{
     width: 100%;
     height: 50px;
     position: absolute;
     bottom: 20px;
}

.reload{
      	width: 500px;
      	height: 350px;
        background: url(../img/reload.gif) no-repeat;
      	background-size:350px 270px;
      	margin: 0 auto;
      	position: relative;
      	top: -650px;
}
.squick{
	width: 130px;
    height: 50px;
	margin-top: 280px;
	margin-left: 40px;
}
.tu{
	width: 130px;
    height: 50px;
	margin-top: -49px;
	margin-left: 210px;
}     	

#game img{
      	position: absolute;
}
#music_btn{
      	width: 70px;
      	height: 70px;
      	position: absolute;
      	left: 10px;
      	top: 20px;
      	cursor: pointer;
      	user-select: none;	
}
.play-tips{
	width: 500px;
	height: 400px;
	margin: 0 auto;
	margin-top: 150px;
	border:  1px solid red;
}

#buttons1{
	width: 700px;
	height: 200px;
	margin-bottom: 100px;
}

JavaScript

$(function(){
			var chars =['A','B','C','D','E','F','G','H','T','J','K','L','M','N','O','P','Q','R','S','G','U','V','W','X','Y','Z'];
		//积分
			var score = 0;
		 //默认游戏的状态
			var flag = true;
		 //声明刚开始游戏的状态
			var f = true;
		//开始游戏的标识
			var speed = 1;
			var start = $(".start");
			var createImgInterval;
			var downImgInterval;
		//默认游戏的状态
		
	   //点击开始游戏按钮所执行的函数
		start.click(function(){
			play(speed);
			var music=document.getElementById("mus");
			music.play();
			flag = true;
			if(f){
			f = false;
		}
	 });
	  //点击暂停按钮所执行的函数
		 $(".stop").click(function(){
			
		   if(flag){
			 flag = false;
			 $(this).val("继 续 游 戏")
			 var music=document.getElementById("mus");
			 music.pause();
		  }else{
			 flag = true;
			 $(this).val("暂 停 游 戏")
			 var music=document.getElementById("mus");
			 music.play();
		  }
	 });
	  //增加难度
	   $(".quick").click(function(){
		  if(!f){
			speed += 0.5;
			play(speed);
	   }
	 });
	 //重新开始游戏
	 $(".reload").click(function(){
	   $(this).animate({top:"-350px"});
	   $("#game").children().remove();
	   score = 0;
	   $(".score").html(score);
	   flag = true;
	   f = true;
	   speed = 1;
	   play(speed);
	   console.log(speed)
	 });
	 //创建图片
	function createImg(){
		if(flag){
		//随机创建
		var random = randomScope(0,25);
		var img = chars[random];
		var Dwidth = $(document).width();//获取浏览器的宽度
		var left = randomScope(Dwidth-100,100);
		$("#game").append("");
		}
	 }
	 //加载图片
	 function downImg(){
		 if(flag){
			 var imgs = $("#game").children();//获取生成的所有字母
			 for(var i=0;i