Html Question posted in
Some basic documentation can be found here.

Html – How to make a game loop in javascript?

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

I want to create a <p> tag every 5 seconds at the beginning and like decreasing the time every 5 words typed correctly.

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

Tags:

2

Answers


  1. 0

    In JavaScript for the Web, the best thing you could do to make a smooth game loop would be using the requestAnimationFrame method.

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

    // request the next animation frame
    window.requestAnimationFrame(gameLoop);
}

    For more information, check out the MDN Docs.

    I hope this helps.

    Login or Signup to reply.
  2. 0

    In JavaScript, to dynamically create <p> tags every 5 seconds and adjust the interval based on user input, you can use setInterval to spawn words at regular intervals and update the interval dynamically.

    Use the code below as some sort of guideline:

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

    // Adjust interval based on user input
    if (/* condition for adjusting interval */) {
        clearInterval(intervalID); // Clear previous interval
        intervalID = setInterval(gameLoop, newInterval); // Set new interval
    }
}

// Start the game loop
var intervalID = setInterval(gameLoop, 5000); // Initial interval of 5 seconds

    And I believe, you’ll need to define conditions for adjusting the interval based on correct user input. Make sure to declare intervalID outside of the gameLoop function to have access to it globally. This approach allows you to dynamically control the spawning interval based on game progress.

    Hope that helps 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search