JavaScript实现简单的打字游戏

╰半夏微凉° 2022-12-23 00:38 217阅读 0赞

完整项目下载：[https://download.csdn.net/download/weixin\_44893902/13131694][https_download.csdn.net_download_weixin_44893902_13131694]

演示地址：https://url\_777.gitee.io/typing-games/

## 效果图： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][]

## 实现代码： ##

目录结构：

![20201120224913592.png][]

### HTML： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>打字游戏</title>
    		<link rel="stylesheet" href="css/new_file.css" />
    		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		
    		<audio id="mus">
    			<source src="music/music_bg.mp3"></source>
    		</audio>
    		
    		 <div id="box">
    			 <div id="">
    			 	
    			 </div>
    			 
    			<img src="./img/生命.png" style="float: left; margin: 45px;" width="45" height="38" id="life" />
    			<img src="./img/volume.png" style="float: right; margin: 45px;" width="45" height="38" id="volume" />
    			
    			<div class="score"><font>0</font></div>
                <div id="game"></div>
    			
                <div class="reload">
             	<input type="button" class="btn squick" value="重新开始" />
             	<a href="http://www.baidu.com"> <input type="button" class=" btn tu" value="退出游戏" /></a> 
                </div>
    			
    		    <input type="button" class=" btn start" value="开 始 游 戏" />
    		    <input type="button" class=" btn stop" value="暂 停 游 戏" />
    		    <input type="button" class=" btn quick" value="增 加 难 度" />
    	</div>
    </html>

### 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("<img src='img/"+img+".png' width='80' height='100' style='left:"+left+"px; top:-100px;' />");
    		}
    	 }
    	 //加载图片
    	 function downImg(){
    		 if(flag){
    			 var imgs = $("#game").children();//获取生成的所有字母
    			 for(var i=0;i<imgs.length;i++){
    			   var img = imgs[i];
    			   //当前字母
    			   var Top = parseInt(img.style.top);
    			   //当前字母距离顶部的值
    			   var Height = $("#box").height()-200;
    			   if(Top<=Height){
    				 img.style.top=(Top+2)+"px";
    			   }else{
    				 img.remove();
    //                   error.play();
    				 if(score==0){
    					 score=0
    				 }else{
    					 score -= 10;
    				 }
    				 $(".score").html(score);
    				 if(score <= 0){
    				   flag = false;
    				   $(".reload").animate({"top":"30px"});
    //                     gameOver.play();
    				   window.clearInterval(createImgInterval);
    				   window.clearInterval(downImgInterval);
    				   return  ;
    				 }
    			   }
    
    			 }
    		 }
    	 }
    	  $(window).keyup(function(e){
    		var eve = window.event || e;//获取事件对象
    		var imgs = $("#game").children();//获取所生成的字母
    		var code = eve.keyCode;//获取用户按下的键
    	   if(flag){
    		 for(var i =0;i<imgs.length;i++){
    		   var img = imgs[i];
    		   var imgSrc = img.src.split("/");
    		   var name = imgSrc[imgSrc.length-1].split(".")[0];
    		   if(name == chars[code-65]){
    			 img.remove();
    			 score+=10;
    			 $(".score").html(score); 
    			 if(score <= 0){
    			   // $(".tupian").animate({"bottom":"0px"});
    			   window.clearInterval(createImgInterval);
    			   window.clearInterval(downImgInterval);
    			 }
    			 return;
    		   }
    		 }
    	   }
    	 });
    	 //定时器
    	 function play(speed){
    		console.log(speed)
    		createImgInterval = window.setInterval(createImg,1000-speed*50);
    		downImgInterval = window.setInterval(downImg,20-speed/2); 
    	 }
    	 //随机范围方法
    	 function randomScope(minScope,maxScope){
    		 return Math.floor(Math.random()*(maxScope-minScope+1)+minScope);
    	 }
    	 
    	 var music=document.getElementById("volume");
    	 music.onclick = function(){
    		 var i = true;
    		 var mus=document.getElementById("mus");
    		 if (mus.paused) {
    			 mus.play();
    		     // 暂停中
    		 } else {
    		     // 播放中
    			 mus.pause();
    		 }
    	 }
    		});

[https_download.csdn.net_download_weixin_44893902_13131694]: https://download.csdn.net/download/weixin_44893902/13131694
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221120/e5f496cafc1b4c81ad7678e495adde4c.png
[20201120224913592.png]: /images/20221120/06b125401fb64e7abe2e81cceebf863b.png