再写一个html有动物,有关卡的打字游戏
时间: 2024-03-25 18:35:57 浏览: 18
好的,以下是一个简单的HTML动物打字游戏:
```html
<!DOCTYPE html>
<html>
<head>
<title>动物打字游戏</title>
<style>
body {
text-align: center;
font-size: 30px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
#word {
font-size: 50px;
margin-bottom: 30px;
}
#input {
font-size: 30px;
padding: 10px;
margin-bottom: 20px;
}
#result {
font-size: 25px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>动物打字游戏</h1>
<div class="container">
<div id="word"></div>
<input type="text" id="input" onkeyup="checkInput()">
<div id="result"></div>
<button onclick="startGame()">开始</button>
</div>
<script>
const words = ["猫", "狗", "兔子", "老虎", "大象", "狮子", "熊猫", "猴子", "斑马", "长颈鹿"]; // 可选单词
let currentIndex = 0; // 当前单词索引
let currentWord = words[currentIndex]; // 当前单词
let input = document.getElementById("input");
let result = document.getElementById("result");
function startGame() {
currentIndex = 0;
currentWord = words[currentIndex];
document.getElementById("word").innerText = currentWord;
document.getElementById("result").innerText = "";
document.getElementById("input").value = "";
input.focus();
}
function checkInput() {
let inputValue = input.value.trim();
if (inputValue === currentWord) {
result.innerText = "正确!";
currentIndex++;
if (currentIndex === words.length) {
document.getElementById("word").innerText = "恭喜你完成了游戏!";
document.getElementById("input").value = "";
} else {
currentWord = words[currentIndex];
document.getElementById("word").innerText = currentWord;
document.getElementById("input").value = "";
}
} else {
result.innerText = "";
}
}
</script>
</body>
</html>
```
游戏规则:
1. 点击“开始”按钮开始游戏,随机出现一个动物单词。
2. 在输入框中输入对应的动物单词并按下回车键,如果输入正确,则显示“正确!”;如果输入错误,则不显示任何信息。
3. 当输入正确时,随机出现下一个动物单词,继续输入。
4. 当所有动物单词都输入正确后,显示“恭喜你完成了游戏!”。