Как сделать игровой цикл в JavaScript? ⇐ CSS

[Anonymous]

Я новичок в программировании и хотел создать игру с набором текста, используя HTML, CSS и JavaScript.
Я хочу создавать тег каждые 5 секунд в начале и уменьшать время каждые 5 правильно набранных слов.
Тег  — это слово, которое пользователь должен написать правильно.
HTML

Код: Выделить всё

Type game :D








Start



RULES

- Words will randomly appear in the container on the left

- They will move from the left border to the right

- Write the words before they reach the right border

- After every 5 words the game will get harder

- Dont forget to have fun! :D

CSS

Код: Выделить всё

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
position: relative;
background-color: #add2c9;
height: 100vh;
font-family: "Poppins", sans-serif;
color: black;
}

::selection {
color: lightblue;
background-color: white;
}

.main {
position: relative;
height: 100%;
width: 100%;
}

.content.grid {
display: grid;
max-width: 1600px;
margin: 0 auto;
width: 100%;
grid-template-columns: repeat(25, 1fr);
}

.container.radius {
position: relative;
grid-column-start: 2;
grid-column-end: 14;
border: 5px solid;
height: 30rem;
margin-top: 12rem;
border-radius: 2.5rem;
background-color: #faf9f9;
overflow: hidden;
}

.container.rules {
position: relative;
grid-column-start: 17;
grid-column-end: 23;
height: 30rem;
margin-top: 13rem;

}

.text-par {
display: flex;
position: relative;
grid-column-start: 3;
grid-column-end: 13;
margin-top: 2.5rem;
justify-content: center;
}

.text-h1 {
font-family: "M PLUS Rounded 1c", sans-serif;
text-align: center;
}

.text-rules {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 1.5rem;
margin-top: 1rem;
line-height: 150%;
}

.text-game {
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 600;
font-size: 3rem;
border: none;
outline: none;
background: none;
text-align: center;
border-bottom: 4px solid black;
}

.container-start {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}

.hide {
display: none;
}

.start {
font-family: "Poppins", sans-serif;
font-size: 3rem;
font-weight: 400;
z-index: 1000;
}

h2:hover {
color: green;
cursor: pointer;
}

.words.grid {
display: grid;
position: relative;
height: 100%;
width: 100%;
top: 0;
grid-template-rows: repeat(10, 1fr);
}

.spwn-words {
position: relative;
font-size: 1.5rem;
align-self: center;
animation: word 4s linear;
}

@keyframes word {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(100%, 0);
}
}

Javascript

Код: Выделить всё

var words = ["gatto","cane","calcio","pallavolo","sport","cibo","pizza"];  //7
var startxt = document.getElementById("start-text");
var inputValue = document.getElementById("inputWord");
var p = document.createElement("p");
var spawner = document.getElementById("wordSpawner").append(p);
var typedWord;
var playing = false;
spawnedWord = words;

function start(){
startxt.classList.add("hide");
playing = true;
}

function generateWord(){
p.classList.add("spwn-words");
p.style.gridRowStart = randomRow();
p.textContent = randomWord();
console.log(p);
}

function keyPressed(){
inputValue.addEventListener('keydown',(event)=>{
if(event.key === 'Enter' &&  playing == true){
console.log('Enter key pressed!');
typedWord = inputValue.value;
}
});
}

function randomWord(){
var n = Math.floor(Math.random() * words.length);

return spawnedWord[n];
}

function randomRow(){
var nrow = Math.floor(Math.random() * 10);

return nrow;
}

function gameLoop(){
start();
generateWord();

}

Извините за код, который я написал, но, как я уже сказал, я новичок.
Я пытался добавить цикл while, но он не сработало... Я попробовал создать конструктор для тега , но не знал, как это сделать правильно. Я также попробовал что-то с помощью "new Date().getTime()/1000;" но я не знал, как идти дальше.

Подробнее здесь: https://stackoverflow.com/questions/785 ... javascript