Игра Simple Typing (JavaScript) - PullRequest
Новая
       73

Игра Simple Typing (JavaScript)

1 голос
/ 17 июня 2020

Я пытаюсь создать игру для набора текста, которая позволяет пользователям вводить правильные алфавиты для слова, отображаемого на экране. Если в качестве входных данных используется какой-либо неправильный алфавит, игра не покажет новое слово, пока все алфавиты не будут правильно введены в качестве входных данных. Я не могу понять, как сопоставить несколько символов с элементами массива. Вот мой пример кода. 

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>

Ответы [ 2 ]

4 голосов
/ 17 июня 2020 

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){
  // If you use append here. Every character gets printed out
  // p.append(e.key);
 	if(e.key==wordsList[wordIndex].charAt(charIndex) && gameRunning)
    {
        // If you use append here only correct characters get printed out
        p.append(e.key)
        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>
0 голосов
/ 17 июня 2020

Вы можете создать список элементов для сопоставления, а затем сделать что-то вроде этого: 

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
...