简单打字游戏(JavaScript)

问题描述 投票:0回答:2

我正在尝试创建一个打字游戏,允许用户为屏幕上显示的单词输入正确的字母。如果使用任何错误的字母作为输入,则在正确提供所有字母作为输入之前,游戏不会显示新单词。我无法弄清楚如何将多个字符与Array元素匹配。这是我的代码示例。

var p = document.getElementById('word');
document.addEventListener('keyup', keyboardEventsHandle , false);
var wordsList = ['america','japan','italy','jordan','turkey'];
  
function keyboardEventsHandle(e){
    p.append(e.key);

    if(e.key=='a')
    {
        alert('You typed A');
    }
}
<html>
    <head>
        <title>Simple Typing Tutor</title>
    </head>
    <body>
        <p id="word"></p>
        <h3> america </h3>
        <script src="javas.js"></script>
    </body>
</html>
javascript html css dom dom-events
2个回答
0
投票

您可以创建要匹配的元素列表,然后执行以下操作:

const wordsList = ['america','japan','italy','jordan','turkey'];
const listToMatch = ['america','japan'];

let trueOrFalse = listToMatch.every(i=> wordsList.includes(i));
 console.log(trueOrFalse) //true

var anotherList = ['america', 'India'];
trueOrFalse = anotherList.every(i=> wordsList.includes(i));
console.log(trueOrFalse) //false

0
投票

var p = document.getElementById('word');
var word = document.getElementById("toType")
document.addEventListener('keyup', keyboardEventsHandle , false);
var wordsList = ['america','japan','italy','jordan','turkey'];
var gameRunning = true

var charIndex = 0;
var wordIndex = 0;

function keyboardEventsHandle(e){
  p.append(e.key);
 	if(e.key==wordsList[wordIndex].charAt(charIndex) && gameRunning)
    {
        alert('Correct!');
        if (wordsList[wordIndex].length == charIndex + 1) {
          // Defines which word should get controlled
          if (wordsList.length == wordIndex + 1) {
            gameRunning = false;
            alert('Done');
          } else {
            wordIndex++;
            charIndex = 0;
            word.innerHTML = wordsList[wordIndex];
            p.innerHTML = "";
          }
          
        } else {
          // Defines which character of the word should get controlled
          charIndex++;
        }
    }
 
}
<html>
<head>
	<title>Simple Typing Tutor</title>
</head>
<body>
		<p id="word"></p>
    <h3 id="toType"> america </h3>
		<script src="javas.js"></script>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.