<!DOCTYPE html>
<html>
<head>
	<title>打字小游戏</title>
	<meta charset="utf-8">
	<style>
		body {
			background-color: #f0f0f0;
			font-size: 24px;
			text-align: center;
		}
		h1 {
			margin-top: 50px;
		}
		p {
			margin-top: 30px;
			font-size: 18px;
		}
		#input {
			margin-top: 30px;
			font-size: 24px;
			width: 500px;
			height: 50px;
			border: 2px solid #ccc;
			border-radius: 10px;
			text-align: center;
			outline: none;
		}
		#start, #stop, #restart {
			margin-top: 30px;
			font-size: 18px;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			background-color: #4caf50;
			color: #fff;
			cursor: pointer;
		}
		#start:hover, #stop:hover, #restart:hover {
			background-color: #3e8e41;
		}
		#level {
			margin-top: 30px;
			font-size: 18px;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			background-color: #fff;
			color: #4caf50;
			cursor: pointer;
		}
		#level:hover {
			background-color: #f0f0f0;
		}
	</style>
</head>
<body>
	<h1>打字小游戏</h1>
	<p>按下开始按钮或快捷键 Ctrl + Enter 开始游戏,按下结束按钮或快捷键 Ctrl + Space 结束游戏。</p>
	<p>选择游戏等级:</p>
	<button id="level">初级</button>
	<button id="level">中级</button>
	<button id="level">高级</button>
	<p>已用时间:<span id="time">0</span> 秒</p>
	<p>已打字数:<span id="count">0</span> 个</p>
	<p>正确率:<span id="accuracy">0</span>%</p>
	<input type="text" id="input" placeholder="请在这里输入文字">
	<button id="start">开始</button>
	<button id="stop">结束</button>
	<button id="restart">重新开始</button>
	<script>
		var timer = null;
		var startTime = 0;
		var count = 0;
		var accuracy = 0;
		var level = 1;
		var words = ["hello", "world", "javascript", "programming", "computer", "science", "engineering", "mathematics", "physics", "chemistry"];
		var currentWord = "";
		var currentIndex = 0;
<pre><code>	function startGame() {
		currentWord = words[Math.floor(Math.random() * words.length)];
		currentIndex = 0;
		document.getElementById(&quot;input&quot;).value = &quot;&quot;;
		document.getElementById(&quot;input&quot;).disabled = false;
		document.getElementById(&quot;input&quot;).focus();
		document.getElementById(&quot;start&quot;).disabled = true;
		document.getElementById(&quot;stop&quot;).disabled = false;
		document.getElementById(&quot;restart&quot;).disabled = true;
		document.getElementById(&quot;level&quot;).disabled = true;
		timer = setInterval(updateTime, 1000);
		startTime = new Date().getTime();
	}

	function stopGame() {
		document.getElementById(&quot;input&quot;).disabled = true;
		document.getElementById(&quot;start&quot;).disabled = false;
		document.getElementById(&quot;stop&quot;).disabled = true;
		document.getElementById(&quot;restart&quot;).disabled = false;
		document.getElementById(&quot;level&quot;).disabled = false;
		clearInterval(timer);
		var endTime = new Date().getTime();
		var time = (endTime - startTime) / 1000;
		document.getElementById(&quot;time&quot;).innerHTML = time.toFixed(1);
		document.getElementById(&quot;count&quot;).innerHTML = count;
		document.getElementById(&quot;accuracy&quot;).innerHTML = (accuracy / count * 100).toFixed(1);
	}

	function restartGame() {
		stopGame();
		startGame();
	}

	function updateTime() {
		var currentTime = new Date().getTime();
		var time = (currentTime - startTime) / 1000;
		document.getElementById(&quot;time&quot;).innerHTML = time.toFixed(1);
	}

	function checkWord() {
		var input = document.getElementById(&quot;input&quot;).value;
		if (input == currentWord) {
			count++;
			accuracy++;
			startGame();
		} else if (input.length == currentWord.length) {
			count++;
			startGame();
		} else if (input == currentWord.substring(0, input.length)) {
			currentIndex = input.length;
		} else {
			accuracy--;
		}
	}

	document.getElementById(&quot;start&quot;).addEventListener(&quot;click&quot;, startGame);
	document.getElementById(&quot;stop&quot;).addEventListener(&quot;click&quot;, stopGame);
	document.getElementById(&quot;restart&quot;).addEventListener(&quot;click&quot;, restartGame);
	document.getElementById(&quot;input&quot;).addEventListener(&quot;input&quot;, checkWord);
	document.addEventListener(&quot;keydown&quot;, function(event) {
		if (event.ctrlKey &amp;&amp; event.keyCode == 13) {
			startGame();
		}
		if (event.ctrlKey &amp;&amp; event.keyCode == 32) {
			stopGame();
		}
	});
&lt;/script&gt;
</code></pre>
</body>
</html
利用所学的JavaScript知识编写一款打字小游戏中文或者英文不限。 要求:1 有开始----按钮及快捷键2 有结束----按钮及快捷键3 有游戏等级选择4 游戏效果自行设计并实现5有快捷键设置

原文地址: https://www.cveoy.top/t/topic/hhxE 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录