JavaScript 打字小游戏：提升你的打字速度

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>JavaScript 打字小游戏</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			font-size: 36px;
			margin: 50px 0;
		}
		#game-container {
			margin: 50px auto;
			width: 500px;
			height: 300px;
			border: 3px solid #ccc;
			padding: 20px;
		}
		#target {
			font-size: 36px;
			margin-bottom: 20px;
		}
		#input {
			font-size: 24px;
			width: 300px;
			margin-bottom: 20px;
			padding: 10px;
		}
		button {
			font-size: 20px;
			padding: 10px 20px;
			background-color: #ccc;
			border: none;
			cursor: pointer;
		}
		button:hover {
			background-color: #bbb;
		}
		#result {
			font-size: 24px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<h1>打字小游戏</h1>
	<div>
		<label for='level'>选择游戏等级：</label>
		<select id='level'>
			<option value='1'>简单</option>
			<option value='2'>普通</option>
			<option value='3'>困难</option>
		</select>
	</div>
	<div>
		<button id='start-btn'>开始（Ctrl+S）</button>
		<button id='end-btn' disabled>结束（Ctrl+E）</button>
	</div>
	<div id='game-container'>
		<div id='target'></div>
		<input type='text' id='input' disabled>
	</div>
	<div id='result'></div>
	<script>
		var words = [
			'hello',
			'world',
			'javascript',
			'programming',
			'computer',
			'science',
			'web',
			'development',
			'html',
			'css',
			'jquery',
			'node',
			'react',
			'angular',
			'vue',
			'webpack',
			'babel',
			'gulp',
			'grunt'
		];
		var level = document.getElementById('level');
		var startBtn = document.getElementById('start-btn');
		var endBtn = document.getElementById('end-btn');
		var target = document.getElementById('target');
		var input = document.getElementById('input');
		var result = document.getElementById('result');
		var currentWord, startTime, endTime, totalTime, correctCount, errorCount;
<pre><code>	function getRandomWord() {
		var index = Math.floor(Math.random() * words.length);
		return words[index];
	}

	function showWord() {
		currentWord = getRandomWord();
		target.textContent = currentWord;
		input.value = '';
		input.disabled = false;
		input.focus();
	}

	function startGame() {
		level.disabled = true;
		startBtn.disabled = true;
		endBtn.disabled = false;
		showWord();
		startTime = Date.now();
		correctCount = 0;
		errorCount = 0;
		totalTime = 0;
		result.textContent = '';
	}

	function endGame() {
		level.disabled = false;
		startBtn.disabled = false;
		endBtn.disabled = true;
		input.disabled = true;
		endTime = Date.now();
		totalTime = (endTime - startTime) / 1000;
		var accuracy = (correctCount / (correctCount + errorCount)) * 100;
		result.textContent = '用时：' + totalTime.toFixed(2) + '秒，准确率：' + accuracy.toFixed(2) + '%';
	}

	function checkInput() {
		if (input.value.trim() === currentWord) {
			correctCount++;
		} else {
			errorCount++;
		}
		showWord();
	}

	level.addEventListener('change', function() {
		switch (level.value) {
			case '1':
				words = words.slice(0, 10);
				break;
			case '2':
				words = words.slice(0, 15);
				break;
			case '3':
				words = words.slice(0, 20);
				break;
		}
	});

	startBtn.addEventListener('click', startGame);
	endBtn.addEventListener('click', endGame);
	input.addEventListener('input', checkInput);

	document.addEventListener('keydown', function(event) {
		if (event.ctrlKey &amp;&amp; event.keyCode === 83) { // Ctrl+S
			event.preventDefault();
			startGame();
		}
		if (event.ctrlKey &amp;&amp; event.keyCode === 69) { // Ctrl+E
			event.preventDefault();
			endGame();
		}
	});
&lt;/script&gt;
</code></pre>
</body>
</html>