用数组保存值的抛硬币游戏答案

【问题标题】：Coin Tossing game with Array to hold values用数组保存值的抛硬币游戏
【发布时间】：2021-08-30 18:47:55
【问题描述】：

我只是在学习 Javascript 的基础知识，但对 Java 了解很多，我知道我做错了，只是在寻找正确的方法来做这件事。我正在尝试在文本字段中输入一个数字，并生成与文本字段编号指定的 1-2 之间的随机数。然后将这些数字（一串 1 和 2）存储在一个数组中，然后使用 for 循环在数组中循环计算有多少正面或反面，并打印出来。

预期输出：//输入的数字是10。
正面数 = 7，反面数 = 3

<!DOCTYPE html>
<html>

<head>
    <title>Coin Tosser</title>
</head>

<body>
    <h1>COINTOSSER</h1>

    <div id = "NumOfTosses">
        <input type = "text" id ="num">
    </div>
    <button id = "click" type="button">Start Tossing</button>

    <script>

    var numT = document.getElementById('num').value 
    document.getElementById('click').onclick = toss;
     
    
    
    function toss(){
    
        var tossArray = [];
    for(var i = 0;i<numT;i++){
    var rng = Math.floor(Math.random() * 2);
    tossArray.push(rng);
    }   
    
    var heads = 0;
    var tails = 0;
    for(var j = 0;j<tossArray.length;j++){
            if(tossArray[j] == 0){
            heads++;
        }else{
            tails++;
        }
    }    
    
    alert("Number of heads = " + heads + " and number of tails = " + tails);
    }

    </script>
</body>
</html>

【问题讨论】：

您只需将var numT = document.getElementById('num').value 移动到toss() 函数中。（每次调用 toss() 时都需要访问输入值）
@pilchard 太棒了，谢谢！

标签： javascript html arrays function button

【解决方案1】：

我已经评论了我在哪里进行了更改以及为什么。

关键点是，由于您要计算 2 个值，因此您可以将每个值的计数存储在数组的索引中，而不是每次出现 2 个选项之一时都用新值填充数组。

这可以让您切断计数循环，使您的程序更加高效，始终尝试在添加时计数，而不是在末尾添加然后计数。

另外，每次调用该方法都需要刷新rng的值，所以我把它移到了函数的顶部。

先给！

<!DOCTYPE html>
<html>

<head>
    <title>Coin Tosser</title>
    <style>
      
      /*Fun CSS added */
      @keyframes flip{
        50%{
          transform: rotate(181deg);
        }
        100%{
          transform: rotate(360deg);
        }
      }
      html{
        background-color:lightgrey;
      }
      h1{
        background-color:grey;
        border-radius:25px;
        border:1px solid black;
      }
      button{
        background-color:gold;
        border-radius:25px;
        padding:5%;
      }
      button:hover {
        animation-name:flip;
        animation-duration:1s;
      }
    </style>
</head>

<body>
    <h1>COINTOSSER</h1>

    <div id = "NumOfTosses">
        <input type = "text" id ="num">
    </div>
    <button id = "click" type="button">Start Tossing</button>

    <script>

    document.getElementById('click').onclick = toss;
     
    
    
    function toss(){
    
        var numT = document.getElementById('num').value // Move numT initalization to method so it is set each time the method is run 
        var tossArray = [0,0];// change array to just count each index.
//E.G, if 1 happens '4' times, tossArray[1] will be 10.
        for(var i = 0;i<numT;i++){
          var rng = Math.floor(Math.random() * 2);
          tossArray[rng]=tossArray[rng]+1;
        }
      alert("Number of heads = " + tossArray[0] + " and number of tails = " + tossArray[1]);
    }

    </script>
</body>
</html>

【讨论】：