JavaScript 打字游戏：提升打字速度和准确率
<!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('input').value = '';
document.getElementById('input').disabled = false;
document.getElementById('input').focus();
document.getElementById('start').disabled = true;
document.getElementById('stop').disabled = false;
document.getElementById('restart').disabled = true;
document.getElementById('level').disabled = true;
timer = setInterval(updateTime, 1000);
startTime = new Date().getTime();
}
function stopGame() {
document.getElementById('input').disabled = true;
document.getElementById('start').disabled = false;
document.getElementById('stop').disabled = true;
document.getElementById('restart').disabled = false;
document.getElementById('level').disabled = false;
clearInterval(timer);
var endTime = new Date().getTime();
var time = (endTime - startTime) / 1000;
document.getElementById('time').innerHTML = time.toFixed(1);
document.getElementById('count').innerHTML = count;
document.getElementById('accuracy').innerHTML = (accuracy / count * 100).toFixed(1);
}
function restartGame() {
stopGame();
startGame();
}
function updateTime() {
var currentTime = new Date().getTime();
var time = (currentTime - startTime) / 1000;
document.getElementById('time').innerHTML = time.toFixed(1);
}
function checkWord() {
var input = document.getElementById('input').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('start').addEventListener('click', startGame);
document.getElementById('stop').addEventListener('click', stopGame);
document.getElementById('restart').addEventListener('click', restartGame);
document.getElementById('input').addEventListener('input', checkWord);
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.keyCode == 13) {
startGame();
}
if (event.ctrlKey && event.keyCode == 32) {
stopGame();
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/oKpO 著作权归作者所有。请勿转载和采集!