完整项目下载：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. linux查询健康状态,如何直观的判断你的Linux系统是否健康

    一提到对于查看系统运行的健康状况,可能大多数朋友考虑到的就是查看进程或者打开任务管理器,但是对于应用在真实生产环境中服务器的linux系统来说,以上两种方式都不是***效的查看方式,那么今天就给大家推 ...

  2. Flink Exactly-once 实现原理解析

    关注公众号:大数据技术派,回复"资料",领取1024G资料. 这一课时我们将讲解 Flink "精确一次"的语义实现原理,同时这也是面试的必考点. Flink ...

  3. Windows11下载地址

    10月5日微软推出了Win11正式版本,但是仍然不支持apk格式,不免让人失望.下面是Win11商业版本下载地址: 下载地址1: ed2k://|file|zh-cn_windows_11_busin ...

  4. [BUUCTF]PWN——[ZJCTF 2019]Login

    [ZJCTF 2019]Login 附件 步骤: 例行检查,64位程序,开启了canary和nx保护 2. 试运行一下程序 3. 64位ida载入,检索字符串,在程序里找到了用户名admin和密码2j ...

  5. [BUUCTF]PWN——picoctf_2018_rop chain

    picoctf_2018_rop chain 附件 步骤: 例行检查,32位,开启了NX保护 试运行一下程序,看到输入太长数据会崩溃 32位ida载入,习惯性的检索程序里的字符串,看见了flag.tx ...

  6. Kubernetes-API Server

    前言 本篇是Kubernetes第十四篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战. Kubernetes系列文章: Kubernetes介绍 Kubernetes环境搭建 Kubern ...

  7. CF1199B Water Lily 题解

    Content 有一朵长在水中的莲花,其茎秆部分露出水面的高度为 \(h\).有人将它往右边拽了 \(l\) 米,使得整个茎秆部分都浸在水中.求池水的深度. 数据范围:\(1\leqslant h&l ...

  8. ViewModel的创建

    ViewModel的创建 ViewModel本身只是ViewModel这个类的子类: class MainViewModel: ViewModel() { } 在屏幕旋转UI重建的时候, 它是如何拥有 ...

  9. Sublime Text3 Package Control Emmet插件安装

    https://www.cnblogs.com/carrie-hong/p/4995735.html https://www.cnblogs.com/tamato-jacob-wealllostcon ...

  10. makefile 规则与原理

    target : prerequisites command Target 通常称作目标.它是一个目标文件,可以是Object File,也可以是执行文件.还可以是一个标签(Label).Prereq ...