Thiết kế website giá rẻ

Question

I’m new to programming and i wanted to make a typing game using html,css and javascript.
I want to create a

tag every 5 seconds at the beginning and like decreasing the time every 5 words typed correctly.
The

tag is the word that the user has to write correctly.

HTML

<head>
    <title>Type game :D</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="main">
        <div class="content grid">
            <div class="container radius">
                <div class="container-start" id="start-text">
                    <h2 class="start" onclick="gameLoop()">Start</h2>
                </div>
                <div class="words grid" id="wordSpawner">
                    
                </div>
            </div>
            <div class="container rules">
                <h1 class="text-h1">RULES</h1>
                <p class="text-rules">
                    - Words will randomly appear in the container on the left <br>
                    - They will move from the left border to the right <br>
                    - Write the words before they reach the right border <br>
                    - After every 5 words the game will get harder <br>
                    - Dont forget to have fun! :D
                </p>
            </div>
            <div class="text-par">
                <input type="text" name="" id="inputWord" class="text-game" onclick="keyPressed()">
            </div>
        </div>
    </div>
    <script src="./scripts/scripts.js"></script>
</body>

</html>

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();



}

I’m sorry for the code i wrote but as i said i’m a beginner.

I tried like adding a while loop but it didnt work… I tried making a constructor for the

tag but i didnt know how to make it right, I also tried something with “new Date().getTime() / 1000;” but i didnt know how to go further.

Thiết kế website giá rẻ

Danh mục

How to make a game loop in javascript?