用javascript计算保龄球分数

Question

我正在构建这个保龄球随机分数生成器，我正在尝试计算表格最后一行的分数。

每个帧分数应该随着其对应分数的生成而更新。 分数将与之前的分数累积。此外，每当我们有一个打击（标记为'X'），接下来的两个游戏应该得到那个分数，如果我们得到一个备用（标记为'/'），下一个游戏将被添加。一旦前一帧完全计算，下一帧应仅显示其得分。在示例中：首先播放我们得到一个罢工，10点添加到第1帧，第二个播放我们得到4，现在第1帧应该显示14，第三个播放我们得到3，第1帧用17关闭我们现在可以显示帧2分，这将是第一帧加上我们得分的7分之和，34。

我怎样才能实现这一目标？我已经成功制作了前两帧的代码，但是我重复了很多，第一次点击时，第二帧得分也会显示出来。

另外如何避免NaN？我知道现在正在发生这种情况，因为我只有一个游戏时没有条件。

非常感谢提前

var controlVariable = 1;

function r(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var min = 0;
var max = 10;
var play1;
var play2;
var play3;
var frame = 1;
var newId1 = "s1f1";
var newId2 = "s2f1";
var scoreCount = "fs1";
var s1f1 = document.getElementById("s1f1");
var s2f1 = document.getElementById("s2f1");
var s1f2 = document.getElementById("s1f2");
var s2f2 = document.getElementById("s2f2");
var s1f3 = document.getElementById("s1f3");
var s2f3 = document.getElementById("s2f3");
var s1f4 = document.getElementById("s1f4");
var s2f4 = document.getElementById("s2f4");
var s1f5 = document.getElementById("s1f5");
var s2f5 = document.getElementById("s2f5");
var s1f6 = document.getElementById("s1f6");
var s2f6 = document.getElementById("s2f6");
var s1f7 = document.getElementById("s1f7");
var s2f7 = document.getElementById("s2f7");
var s1f8 = document.getElementById("s1f8");
var s2f8 = document.getElementById("s2f8");
var s1f9 = document.getElementById("s1f9");
var s2f9 = document.getElementById("s2f9");
var s1f10 = document.getElementById("s1f10");
var s2f10 = document.getElementById("s2f10");
var s3f10 = document.getElementById("s3f10");
var fs1 = document.getElementById("frame-score1");
var fs2 = document.getElementById("frame-score2");
var fs3 = document.getElementById("frame-score3");
var fs4 = document.getElementById("frame-score4");
var fs5 = document.getElementById("frame-score5");
var fs6 = document.getElementById("frame-score6");
var fs7 = document.getElementById("frame-score7");
var fs8 = document.getElementById("frame-score8");
var fs9 = document.getElementById("frame-score9");
var fs10 = document.getElementById("frame-score10");

function myFunction() {
  if (frame < 10) {
    if (controlVariable == 1) {
      play1 = r(min, max);
      if (play1 === 10) {
        // add value to first spot
        newId1 = "s1f" + frame;
        document.getElementById(newId1).innerHTML = "X";
        frame++;
      } else {
        //add value to first spot
        newId1 = "s1f" + frame;
        document.getElementById(newId1).innerHTML = play1;
        controlVariable++;
      }
    } else if (controlVariable == 2) {
      play2 = r(min, max - (play1 - min));
      controlVariable = 1;
      // add value to second spot
      newId2 = "s2f" + frame;
      if (play1 + play2 === 10) {
        document.getElementById(newId2).innerHTML = "/";
      } else {
        document.getElementById(newId2).innerHTML = play2;
      }
      frame++;
    }
  } else {
    if (controlVariable == 1) {
      play1 = r(min, max);
      if (play1 === 10) {
        // add value to first spot
        s1f10.innerHTML = "X";
        controlVariable++;
      } else {
        //add value to first spot
        s1f10.innerHTML = play1;
        controlVariable++;
      }
    } else if (controlVariable == 2) {
      if (play1 === 10) {
        play2 = r(min, max);
        if (play2 === 10) {
          s2f10.innerHTML = "X";
        } else if (play2 + play1 === 10) {
          s2f10.innerHTML = "/";
        } else {
          s2f10.innerHTML = play2;
        }
        controlVariable++;
      } else {
        play2 = r(min, max - (play1 - min));

        if (play2 + play1 === 10) {
          s2f10.innerHTML = "/";
          controlVariable++;
        } else if (play2 + play1 < 10) {
          s2f10.innerHTML = play2;
          document.getElementById("btn-score").style.visibility = "hidden";
          document.getElementById("gameOver").innerHTML = "GAME OVER";
        }
      }
    } else if (controlVariable == 3) {
      if ((play1 === 10 && play2 === 10) || play1 + play2 === 10) {
        play3 = r(min, max);
        if (play3 === 10) {
          s3f10.innerHTML = "X";
        } else {
          s3f10.innerHTML = play3;
        }

        document.getElementById("gameOver").innerHTML = "GAME OVER";
        document.getElementById("btn-score").style.visibility = "hidden";
      } else if (play1 === 10 && play2 < 10) {
        play3 = r(min, max - (play2 - min));
        if (play3 + play2 === 10) {
          s3f10.innerHTML = "/";
          document.getElementById("gameOver").innerHTML = "GAME OVER";
          document.getElementById("btn-score").style.visibility = "hidden";
        } else {
          s3f10.innerHTML = play3;
          document.getElementById("gameOver").innerHTML = "GAME OVER";
          document.getElementById("btn-score").style.visibility = "hidden";
        }
      }
    }
  }

  document.getElementById("demo").innerHTML = [play1, play2];
  ///////
  //// calculos
  ///
  if (s1f1.innerHTML === "X") {
    if (s1f2.innerHTML === "X") {
      if (s1f3.innerHTML === "X") {
        fs1 = 30;
      } else {
        fs1 = 20 + parseInt(s1f3.innerHTML);
      }
    } else if (parseInt(s1f2.innerHTML) < 10 && s2f2.innerHTML == "/") {
      fs1 = 20;
    } else {
      fs1 = 10 + parseInt(s1f2.innerHTML) + parseInt(s2f2.innerHTML);
    }
  } else if (parseInt(s1f1.innerHTML) < 10 && s2f1.innerHTML == "/") {
    if (s1f2.innerHTML === "X") {
      fs1 = 20;
    } else {
      fs1 = 10 + parseInt(s1f2.innerHTML);
    }
  } else {
    fs1 = parseInt(s1f1.innerHTML) + parseInt(s2f1.innerHTML);
  }

  var out1 = document.getElementById("frame-score1");
  out1.innerHTML = fs1;

  if (s1f2.innerHTML === "X") {
    if (s1f3.innerHTML === "X") {
      if (s1f4.innerHTML === "X") {
        fs2 = 30;
      } else {
        fs2 = fs1 + 20 + parseInt(s1f4.innerHTML);
      }
    } else if (parseInt(s1f3.innerHTML) < 10 && s2f3.innerHTML == "/") {
      fs2 = fs1 + 20;
    } else {
      fs2 = fs1 + 10 + parseInt(s1f3.innerHTML) + parseInt(s2f3.innerHTML);
    }
  } else if (parseInt(s1f2.innerHTML) < 10 && s2f2.innerHTML == "/") {
    if (s1f2.innerHTML === "X") {
      fs1 = fs1 + 20;
    } else {
      fs2 = fs1 + 10 + parseInt(s1f2.innerHTML);
    }
  } else {
    fs2 = fs1 + parseInt(s1f2.innerHTML) + parseInt(s2f2.innerHTML);
  }

  var out2 = document.getElementById("frame-score2");
  out2.innerHTML = fs2;
}

function restart() {
  document.getElementById("btn-score").style.visibility = "visible";
  frame = 1;
  controlVariable = 1;
  s1f1.innerHTML = "";
  s2f1.innerHTML = "";
  s1f2.innerHTML = "";
  s2f2.innerHTML = "";
  s1f3.innerHTML = "";
  s2f3.innerHTML = "";
  s1f4.innerHTML = "";
  s2f4.innerHTML = "";
  s1f5.innerHTML = "";
  s2f5.innerHTML = "";
  s1f6.innerHTML = "";
  s2f6.innerHTML = "";
  s1f7.innerHTML = "";
  s2f7.innerHTML = "";
  s1f8.innerHTML = "";
  s2f8.innerHTML = "";
  s1f9.innerHTML = "";
  s2f9.innerHTML = "";
  s1f10.innerHTML = "";
  s2f10.innerHTML = "";
  s3f10.innerHTML = "";
  document.getElementById("gameOver").innerHTML = "";
}

table, th, td {
    border: 1px solid black;
    height: 30px;
    width:30px;
}

<table>
  <tr>
    <td colspan="6">Frame 1</td>
    <td colspan="6">Frame 2</td>
    <td colspan="6">Frame 3</td>
    <td colspan="6">Frame 4</td>
    <td colspan="6">Frame 5</td>
    <td colspan="6">Frame 6</td>
    <td colspan="6">Frame 7</td>
    <td colspan="6">Frame 8</td>
    <td colspan="6">Frame 9</td>
    <td colspan="6">Frame 10</td>
  </tr>
  <tr>
    <td colspan="3" id="s1f1"></td>
    <td colspan="3" id="s2f1"></td>
    <td colspan="3" id="s1f2"></td>
    <td colspan="3" id="s2f2"></td>
    <td colspan="3" id="s1f3"></td>
    <td colspan="3" id="s2f3"></td>
    <td colspan="3" id="s1f4"></td>
    <td colspan="3" id="s2f4"></td>
    <td colspan="3" id="s1f5"></td>
    <td colspan="3" id="s2f5"></td>
    <td colspan="3" id="s1f6"></td>
    <td colspan="3" id="s2f6"></td>
    <td colspan="3" id="s1f7"></td>
    <td colspan="3" id="s2f7"></td>
    <td colspan="3" id="s1f8"></td>
    <td colspan="3" id="s2f8"></td>
    <td colspan="3" id="s1f9"></td>
    <td colspan="3" id="s2f9"></td>
    <td colspan="2" id="s1f10"></td>
    <td colspan="2" id="s2f10"></td>
    <td colspan="2" id="s3f10"></td>
  </tr>
  <tr>
    <td colspan="6" id="frame-score1"></td>
    <td colspan="6" id="frame-score2"></td>
    <td colspan="6" id="frame-score3"></td>
    <td colspan="6" id="frame-score4"></td>
    <td colspan="6" id="frame-score5"></td>
    <td colspan="6" id="frame-score6"></td>
    <td colspan="6" id="frame-score7"></td>
    <td colspan="6" id="frame-score8"></td>
    <td colspan="6" id="frame-score9"></td>
    <td colspan="6" id="frame-score10"></td>
  </tr>
</table>

<button onclick="myFunction()" id="btn-score">Click me</button>
<button onclick="restart()" id="btn-restart">Restart</button>
<p id="demo"></p>
<p id="gameOver"></p>