打字游戏

最新推荐文章于 2020-07-07 11:28:28 发布
最新推荐文章于 2020-07-07 11:28:28 发布
阅读量245 收藏 3
点赞数 2
分类专栏： 总结 文章标签： js打字游戏 计时器暂停和继续
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37850554/article/details/100074334
版权

打字游戏：
开始状态时，暂停按钮禁用，开始按钮可用，点击一次开始按钮后，开始按钮禁用，暂停按钮可用，
然后开始调用计时器不断生成字母，每清除一次后加一分，每通过10个，速度会逐渐递增，掉落5个后游戏结束。点击重新开始刷新页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#container{
				position:absolute;
				top:0;
				left: 0;
				width:100%;
				height: 100%;
				background: url(img/bg.jpg) no-repeat;
				background-size: 100% 100%;
			}		
			#counter{
				position: absolute;	
				width: 230px;
				height: 250px;
				right: 15px;
				bottom: 15px;
				background: url(img/score.png) no-repeat;
				background-size: 100% 100%;
			}			
			button{
				position: absolute;
				width: 100px;
				height: 100px;
				border:none;
				color: transparent;
			}		
			#start,#restart,#pause,#continue{
				position: absolute;
				display: block;
				width: 200px;
				height: 75px;
				bottom: 50px;
				left:30px;
				background: url(img/stop.png) no-repeat;
				background-size: 100% 100%;			
			}
			#restart{
				display: none;
			}			
			#continue{
				display: none;
			}	
			#pause,#continue{
				bottom: 50px;*/
				left:250px;
			}
			#count{
				display: block;
				width: 30px;
				height: 30px;
				position: absolute;
				top:32%;
				right:40%;
				font-size: 25px;
				background: url(img/score.png) no-repeat;
			}
			.start,.restart,.pause,.continue{
				background-color: transparent;
				position: relative;
				bottom: -20px;
				left: 50px;
				border: none;
				color: #8B0000;
				font-size: 20px;
			}
			#gameover span{
				position: absolute;
				width: 600px;
				height: 150px;
				margin: auto;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				font-size:150px;
				color: red;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="start">
				<input class="start" type="button" value="开始游戏"/>
			</div>
			<div id="restart">
				<input class="restart" type="button" value="重新游戏"/>
			</div>
			<div id="pause">
				<input class="pause" type="button" value="暂停游戏"/>
			</div>
			<div id="continue">
				<input class="continue" type="button" value="继续游戏"/>
			</div>
			<div id="counter">
				<span id="count">
					0
				</span>
			</div>
			<div id="gameover">
				<span class="gameover">你输啦！</span>
			</div>
		</div>
		<script>
			var letterArrs = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
			var btnArr = new Array();
			var startInterval;
			var moveInterval;
			var speed = 0.5;
			var con = document.getElementById("container");		
			var c = document.getElementById("count");
			var over = document.getElementsByClassName("gameover")[0];
			var startdiv = document.getElementById("start");
			var restartdiv = document.getElementById("restart");
			var pausediv = document.getElementById("pause");
			var continuediv = document.getElementById("continue");
			var startBtn = document.getElementsByClassName("start")[0];
			var restartBtn = document.getElementsByClassName("restart")[0];
			var pauseBtn = document.getElementsByClassName("pause")[0];
			var continueBtn = document.getElementsByClassName("continue")[0];
			
			startBtn.addEventListener("click",start,false);
			restartBtn.addEventListener("click",restart,false);
			pauseBtn.addEventListener("click",pause,false);	
			continueBtn.addEventListener("click",continue_,false);	
			console.log(startdiv);
			var over_count = 0;
			var count = 0;
			pauseBtn.disabled = true;
			
			
			function start(){
				startBtn.disabled = true;
				pauseBtn.disabled = false;
				startInterval = window.setInterval(create,1000);
				moveInterval = setInterval(move,10);
			}
			
			function restart(){
				window.location.reload();
			}
			
			function pause(){
				window.clearInterval(startInterval);
				clearInterval(moveInterval);
				pausediv.style.display = 'none';
				continuediv.style.display = 'block';
			}
			
			function continue_(){
				pausediv.style.display = 'block';
				continuediv.style.display = 'none';
				start();
			}
			
			function create(){		
				var btn = document.createElement("button");
				var index = parseInt(Math.random()*26);
				btn.innerHTML = letterArrs[index];
				btn.style.background = 'url(img/'+letterArrs[index]+'.png)';
				
				var distance = (Math.random()*1201+100)+'px';
				btn.style.left = distance;
				btn.style.top = 0;
				con.appendChild(btn);
				btnArr.push(btn);		
			}	
			
			function move(){
				for(var i=0;i<btnArr.length;i++){	
					var btn = btnArr[i];
					btn.style.top = btn.offsetTop+speed+'px';
					if(btn.offsetTop>=600){
						btnArr.shift();
						con.removeChild(btn);
						over_count++;
						if(over_count>=5){
							stopGame();
						}
					}
					if(count>=10){
						speed = parseInt(count/10);
					}
				}
			}	
					
			window.onkeyup = function(e){
				console.log(e.keyCode);
				for(var i=0;i<btnArr.length;i++){					
					var btn = btnArr[i];
					if(e.keyCode==btn.innerHTML.charCodeAt()){
						count++;
						con.removeChild(btn);
						btnArr.splice(i,1);
						c.innerText = count;
						break;
					}
				}
			}
			
			function stopGame(){
				clearInterval(startInterval);
				clearInterval(moveInterval);
				startdiv.style.display = 'none';
				restartdiv.style.display = 'block';
				over.style.display = 'block';		
				pauseBtn.disabled = true;
			}
		</script>
	</body>
</html>
wc_it
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
打字小游戏
08-31
打字小游戏：天降字母，有画键盘，按下键可以在键盘上显示
打字游戏（一）
HAI6545的博客
12-29 2322
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button class="startBtn">开始</button> <div class="score">得分：<b>0</b&gt..
JS实现打字游戏
10-15
【JS实现打字游戏】是将编程技术应用于创建一种互动娱乐体验，旨在帮助用户提高打字速度和准确性。本文将详细介绍如何使用JavaScript实现一个简单的打字游戏，包括页面布局、事件处理以及游戏逻辑。 首先，游戏的...
java实现快速打字游戏
08-18
Java 实现快速打字游戏 Java 实现快速打字游戏是使用 Java 语言编写的打字游戏程序，该程序使用了面向对象编程的思想，实现了游戏的主要逻辑，包括游戏的界面、游戏的逻辑、游戏的评估等方面。 游戏的主要逻辑 ...
打字游戏之暂停与结束
喜欢企鹅的博客
07-07 861
实现方法： 暂停功能 本人的目标是实现输入空格时数字暂停下落并且屏幕显示出暂停的字样。 实现方法: 引入一个Boolean类型变量terminateflag来判断当前游戏是否处于暂停状态 新建一个Boolean类型变量terminateflag来判断当前游戏是否处于暂停状态。我们需要在输入框的键盘监听器中的方法实现该功能，在KeyPressed中加入如下代码来实现修改terminateflag。 if (e.getKeyChar() == KeyEvent.VK_SPACE) {//判断输入是否为空格
打字游戏.zip
06-27
最近用VB写了一个趣味打字游戏，简单模式分为快中慢三种速度类型，困难模式访问数据库，简单模式为单个字符输入，困难模式为单词输入
自己做的一个打字小游戏（汇编）
诸神的小屋
06-22 4508
 源代码如下：  DATA SEGMENT;******** 控制类 ******** HANGID DB 5  ; 行号 POSITION DB 0  ; 字母出现的起始列数  WHICH DB 0  ; SI指针的定位 TOTAL DB 0  ; MODE1下落字母的总数或者是MODE2按键的次数 DELAYTIME DB 03H ; 下落延时（难度控制） BLANK DB
自编游戏，dalao勿喷（c++文字游戏）
qq_42820631的博客
07-28 7070
#include<bits/stdc++.h> #include<windows.h> using namespace std; int choice; int a=0,b=0,c=0,d=0; int user_input; void S(int Color) { HANDLE hCon=GetStdHandle(STD_OUTPUT_HANDLE); SetConsoleTextAttribute(hCon,Color); } void wait() { Sl
用java做一个简单的打字游戏
热门推荐
幻凡ss
05-15 2万+
Java也是可以做桌面程序的。只不过需要运行在装有JDK的电脑环境上，所以应用不是很广泛，但是用来提高自身的代码逻辑还是可以的！偶有一天看到金山的打字通，就想起何不做个简单的打字游戏用来练练手。于是就有了下文首先建一个类MyTyping，只有main方法 运行main方法就可以看到出现屏幕中心出现一个窗体（大小是300*400）代码逻辑也就思路里那么多。觉得丑的可以自己优化下，个人觉得没必要OK，...
关于在Java游戏中实现暂停的讨论
iceliushuai的专栏
05-15 2818
最近写了一个Swing版本的Snake程序，可是不太清楚怎么样来实现游戏中常见的暂停操作，所以我列出自己的一些方案，大家来讨论下什么样的方式会好些，还有就是如何更好的实现暂停这种方法。 方案1，直接利用状态变量，如果处于暂停状态，则什么也不做(空循环） [code="java"]public void keyPressed(KeyEvent e) { int keyCode = e....
C语言实现简单打字游戏，网友：被一个打字游戏给虐了
09-14 1493
纯C写的打字游戏代码，通过本代码你可了解下C语言从键盘缓冲区内直接读出ASC码、创建移动字符对象时钟、创建产生字符对象时钟、初始化随机数种子、用填充矩形来消隐字符、删除字符对象后马上再创建一个等编程小技巧。本游戏玩法也比较简单：你需要按键盘上的对应键击中字母，让字母消失，同时显示你的正确率和击中数目，游戏分为简单、中等、难度三个等级 项目展示： 代码展示： 是一...
python打字游戏
最新发布
12-14
Python打字游戏是一种通过练习键入速度和准确度来提高打字技能的游戏。在这个游戏中，玩家需要在屏幕上显示的随机单词中快速准确地输入正确的单词。游戏会根据玩家的击键速度和正确率来评估他们的表现。 Python打字...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值