How can I decrease the number by a random number continously in javascript?

Question

0.00/5 (No votes)

See more:

I'm writing a javascript program ( using HTML tag and CSS) to open in Google Chrome.
My Idea is create a game which I have 2 color box ( Him) and ( You).Each box will display health at 100. Then when I click the button <attack> the health from both side will be decreased by a random number from 1 to 20 and then in the box(square) will display the remain health. The one reach 0 in health first will lose.
(

health1 -=  Math.floor(num*20 +1);

)
But I'm stuck at the path how to decrease the health by a random number and display the remain health in the square. Here is my code.
If anyone suggest me an idea for this I will be very grateful!
Thank you!

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hit Game</title>
    <style>
    .h1{
        font-size: 50px;
        color: indigo;
       }
    #square1{
        display: flex;
        justify-content: center;
        align-items: center;
        height:100px;
        width: 100px;
       background-color: green;
    }
    #square2{
        display: flex;
        justify-content: center;
        align-items: center;
        height:100px;
        width: 100px;
       background-color:green;
    }
    </style>
    </head>
    <body>
    <h1 class="h1">Hit Game</h1>
    <p>You</p>
    <div id="square1">
    <h3>100</h3>
    </div><br>
    <p>Him</p>
    <div id="square2">
    <h3>100</h3>
    </div><br>
    <input id="button" type="button" value="Attack" onclick="random()">
    <span id="ransuu">Show Here</span>
    <script type="text/javascript">
    function random()
    {
      let num = Math.random();
        for(i =100;i>=0;i--)
       {
       let health1= 100;
       health1 -=  Math.floor(num*20 +1);
       document.querySelector('#square1').innerHTML = health1;
       let health2= 100;
       health2 -=  Math.floor(num*20 +1);
      document.querySelector('#square2').innerHTML = health2; 
       }
    }
    </script>

    </body>
    </html>

What I have tried:

In the tag I add the function(random)() and use "for" loop to decrease the health but when I compiled it in the web I push the button <attack> the website can't load at all.

function random()
   {
     let num = Math.random();
       for(i =100;i>=0;i--)
      {
      let health1= 100;
      health1 -=  Math.floor(num*20 +1);
      document.querySelector('#square1').innerHTML = health1;
      let health2= 100;
      health2 -=  Math.floor(num*20 +1);
     document.querySelector('#square2').innerHTML = health2;
      }
   }

Posted 30-May-21 21:45pm

Member 14629414

Updated 1-Jun-21 2:04am

v2

Add a Solution

Comments

[no name] 31-May-21 14:05pm

What's the "for loop" for? One "click" is one iteration: get a number for each "health" and apply it; wait for the next click.

If you want to "run" things down with one click, then you only "display" when it's all over; and not every time you loop.

Member 14629414 1-Jun-21 8:17am

Thank you for your comments. It's my loop that caused the problem

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Accepted Answer · 2021-06-01T02:04:00

Some Problems:

1) Per the first comment, why the loop? You need to execute the subtraction once per click. By the time it stops you'll almost certainly have a large negative number.

2) You generate the random value once (num= ) and then subtract the value from both. Since you don't run the random function again you are subtracting the same number from both.

Also, if you care about being more conventional, the normal way to update the control is via:

JavaScript

document.getElementById('square1').innerHTML= something

. What you're doing is, at the least, rather unconventional.

How can I decrease the number by a random number continously in javascript?

1 solution

Solution 1

Add your solution here

Preview 0

How can I decrease the number by a random number continously in javascript?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us