Click here to Skip to main content
14,978,135 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 1-Jun-21 2:04am
v2
Comments
Gerry Schmitz 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

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.

   
Comments
Member 14629414 1-Jun-21 8:17am
   
Thank you for your detail suggestion !. Now I understand the problem is in my loop.

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900