打字游戏....我正在为我的游戏制作这个菜单..我遇到了这个问题：
我的屏幕上有 2 个单词和一个打字区域，它会在其中检查按键并将其显示在屏幕上...
我想要打字区域中的每个正确字母，如果它与其中一个单词的字母匹配......该字母将变成“绿色”，否则“红色”......对不起我的英语不好
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Madimi+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typo game</title>
</head>
<body>
<label id="playerInput">start</label>
<label id="options">options</label>
<label id="TypeZone">sssssss</label>
<script src="script.js"></script>
</body>
</html>
*{
font-family: "Madimi One", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background-color: black;
}
#playerInput{
position: absolute;
top: 40%;
left: 45%;
transform: translate(-50% -50%);
font-size: 3em;
color: aliceblue;
}
#options{
position: absolute;
top: 55%;
left: 43%;
transform: translate(-50% -50%);
font-size: 3em;
color: aliceblue;
}
#TypeZone{
position: absolute;
top: 70%;
left: 67%;
transform: translate(-50% -50%);
font-size: 3em;
color: aliceblue;
}
const start= document.querySelector("#playerInput");
const get_start = [...start.textContent]
const options = document.querySelector("#options");
const get_options = [...options.textContent]
let inputX = "";
let getInputX = true;
const type = document.querySelector("#TypeZone")
// get input from keyboard and display on screen
document.addEventListener("keydown", function(event) {
if (getInputX) {
inputX += event.key;
type.textContent = inputX;
if (inputX.length >= get_options.length) {
getInputX = false;
}
}
if (get_start.includes(event.key)){
start.style.color ="green"; /// what i want to do is to turn letter green for each correct letter and so on
}
else{
start.style.color = "red";
}
if (get_options.includes(event.key)){
options.style.color ="green"; ///
}
else{
options.style.color = "red";
}
// if typed start or options >> start the game
if (inputX === "start" || inputX === "options"){
window.location.href = "game.html";
}
});
这是我迄今为止尝试过的
你真正需要什么？ 如果您需要检查该单词是否写对或写错，请查看以下内容：
const word = "hello world" // Define the word, anything should work
const tdElement = document.getElementById("TypeZone") // A shortcut for text display element
var typed = "" // The place where the input goes from user, and keypress event
onkeypress = function(key){
switch(key.key) { // Get the key pressed
case "Enter" :
// The code to deal with the enter press
break
case "Backspace" :
// Here, we will delete a character from the typed variable :
if(typed.length > 0) typed = typed.slice(0,typed.length-1)
break
// Any key else, just add it, I am too lazy to check for letters, do this for you if you want
default :
typed += key.key
break
}
// Finally check for correct letters
let userWords = new Array(...typed)
let words = new Array(...word)
tdElement.innerHTML = ""
words.forEach(function(w, index){
if(w == userWords[index]) tdElement.innerHTML += `<span style="color:lime;">${w}</span>`
else tdElement.innerHTML += `<span style="color:red;">${w}</span>`
})
}
告诉我这是否有效