完整项目下载：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. 爬虫系列：使用 MySQL 存储数据

    上一篇文章我们讲解了爬虫如何存储 CSV 文件,这篇文章,我们讲解如何将采集到的数据保存到 MySQL 数据库中. MySQL 是目前最受欢迎的开源关系型数据库管理系统.一个开源项目具有如此之竞争力实 ...

  2. GO 总章

    GO 学习资源 go 代理 GO 语言结构 GO 数字运算 GO 时间处理 GO 定时器 GO 异常处理 go recover让崩溃的程序继续执行 GO Exit Fatal panic GO 通过进 ...

  3. SpringMVC详细实例

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  4. zabbix之被动模式之编译安装proxy

    #:准备源码包,编译安装 root@ubuntu:/usr/local/src# ls zabbix-4.0.12.tar.gz root@ubuntu:/usr/local/src# tar xf ...

  5. Windows服务器java.exe占用CPU过高问题分析及解决

    最近在测试一个用java语言实现的数据采集接口时发现,接口一旦运行起来,CPU利用率瞬间飙升到85%-95%,一旦停止就恢复到40%以下,这让我不得不面对以前从未关注过的程序性能问题. 在硬着头皮查找 ...

  6. CSS font-size: 0去除内联元素空白间隙

    我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性.同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block.这样一来,有时在页面中会出现意外的空 ...

  7. Salesforce LWC学习(三十七) Promise解决progress-indicator的小问题

    本篇参考:https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-indicator/exa ...

  8. 使用Zabbix + Python对Mysql监控

    一.背景介绍 随着公司业务的变迁,公司的开发数据库以mysql为主了.mysql服务器层面的监控,例如CPU.内存.硬盘空间等就用zabbix自带的linux模板即可.数据库层面zabbix也自带了一 ...

  9. Spring Cloud Eureka源码分析之服务注册的流程与数据存储设计！

    Spring Cloud是一个生态,它提供了一套标准,这套标准可以通过不同的组件来实现,其中就包含服务注册/发现.熔断.负载均衡等,在spring-cloud-common这个包中,org.sprin ...

  10. mysqldump备份容灾脚本

    目录 一.备份脚本 环境需求 全量脚本 增量脚本 二.备份策略 三.容灾测试 准备 测试 误删除 一.备份脚本 环境需求 编辑/etc/my.cnf文件添加在[mysqld]版块下添加如下变量,添加后 ...