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

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

效果图：

实现代码：

目录结构：

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();

		 }

	 }

		});

JavaScript实现简单的打字游戏的更多相关文章

  1. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  2. jQuery 写的简单打字游戏

    var off_x; //横坐标 var count=0; //总分 var speed=5000; //速度,默认是5秒. var keyErro=0; //输入错误次数 var keyRight= ...

  3. 用JS写了一个打字游戏，反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

  4. java打字游戏

    小记:老早之前写的程序,今天发现之前在 csdn上写的东西的图片不显示了,搞得人好郁闷,所以把之前零星的几篇文章搬个家 游戏运行截图: 字母实体类 package com.git.game; impo ...

  5. 用javascript实现2048的小游戏

    前段时间,看了一个视频,用javascript实现的2048小游戏,发现不难,都是一些基出的语法和简单逻辑. 整个2048游戏没有很多的数据,所有,实现起来还是很有成就感的. 先上图,简直就和原版游戏 ...

  6. JavaScript+HTML5 实现打地鼠小游戏

    一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编写,使用谷歌浏览器展示效果,游戏将会采用JavaS ...

  7. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...

  8. Java之线程———GUI线程（包含打字游戏和计时器俩个GUI实列）

    当java程序包含图形用户界面(GUI)时,Java虚拟机在运行应用程序时会自动启动更多的线程,其中有两个重要的线程:AWT-EventQuecue 和 AWT-Windows. AWT-EventQ ...

  9. 最少javascript代码完成一个2048游戏

    原生javascript代码写的2048游戏.建议在谷歌浏览器下跑.'WASD'控制方向.演示地址请移步:http://runjs.cn/detail/bp8baf8b 直接贴代码~ html: &l ...

随机推荐

  1. Ganglia 简单介绍与安装

    文章来至于   http://sachinsharm.wordpress.com/2013/08/17/setup-and-configure-ganglia-3-6-on-centosrhel-6- ...

  2. RB-Tree深度探索

    关联式容器就是通过key值来寻找value,这个和数据库很相像,为了提升查找效率,因此关联式容器底层大多数用红黑树或哈希表来实现. 红黑树是高度平衡的二叉树,它也被称为平衡二元搜索树. 如上所示,正常 ...

  3. Maven pom.xml报错解决

    用Maven建了一个web工程,总是在pom.xml头的地方报错: 大概是: Original error: Could not transfer artifact org.hamcrest:hamc ...

  4. d3动态坐标轴

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. NSURLSessionDownloadTask实现大文件下载

    - 4.1 涉及知识点(1)使用NSURLSession和NSURLSessionDownload可以很方便的实现文件下载操作 第一个参数:要下载文件的url路径 第二个参数:当接收完服务器返回的数据 ...

  6. 【编程思想】【设计模式】【结构模式Structural】MVC

    Python版 https://github.com/faif/python-patterns/blob/master/structural/mvc.py #!/usr/bin/env python ...

  7. 【Python】数据处理分析，一些问题记录

    不用造轮子是真的好用啊 python中单引号双引号的区别 和cpp不一样,cpp单引号表示字符,双引号表示字符串,'c'就直接是ascii值了 Python中单引号和双引号都可以用来表示一个字符串 单 ...

  8. 赋能开发：捷码携手达内教育打造IT职业教育新生态

    近日,达内教育与远眺科技签约联合培养的第一批低代码开发方向的高职学生,在杭州未来科技城捷码总部顺利毕业,首期合格学员总数超过30名.随着这些接受了"捷码"低代码平台全程" ...

  9. Windwos堆管理体系以及溢出利用

    <0day安全>学习笔记,主要讨论WIndows2000~WIndowsSP1平台的堆管理策略. 0X01 堆与栈的区别 栈空间是在程序设计时已经规定好怎么使用,使用多少内存空间.典型的栈 ...

  10. 第四届“传智杯”全国大学生IT技能大赛题解

    目录 A B C D E F G 今年题目难度普遍偏低.只有 D,F 还好. A 按题目给的公式计算即可.注意应在最后的答案中去掉小数部分. B 按照题意模拟即可.注意答案要与 \(0\) 取 \(\ ...