利用所学的JavaScript知识编写一款打字小游戏中文或者英文不限。 要求:1 有开始----按钮及快捷键2 有结束----按钮及快捷键3 有游戏等级选择4 游戏效果自行设计并实现5有快捷键设置
<!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/hhxE 著作权归作者所有。请勿转载和采集!