数学游戏问题与随机生成的方程式数字答案

【问题标题】：Math game issues with randomly generated numbers for equations数学游戏问题与随机生成的方程式数字
【发布时间】：2018-06-04 17:55:07
【问题描述】：

您好，我的程序员同事们，我不确定如何使用随机生成的数学方程式制作多项选择游戏。

即使在控制台内，我当前的编码也没有返回任何答案或数字。请帮助我而不告诉我确切的方法。我希望得到一些指示和解释。

所以我对如何做到这一点的原始观点是，将有两个随机生成的数字使用 Math.random 对象并将其乘以 10，这样我就可以得到等式中的 0-10 整数然后我想要将它们显示在带有 id 标记的问题框内。

现在我真的需要帮助才能弹出方程式，我想要最简单的代码来做到这一点我现在只做 javaScript 2 个月，还没有完全掌握它！另外，我该如何参考答案，以便稍后将其放入盒子中

这里是html：

<head>
    <title>Math Game</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <link rel="stylesheet" href="styling.css">
</head>

<body>      
    <div id="title">
            The Matheroo
        </div>
    <div id="sunYellow">
        <!--Because the score value is going to change as the user plays the game we need to place it in a span and refer to it later with some JAVA-->

        <div id="score">
            Score: <span id="scorevalue">0</span>
        </div>
        <div id="correct">
            Correct!
        </div>
        <div id="wrong">
            Try Again
        </div>
        <div id="question">
            <span id="firstInt"></span><span id="secondInt"></span>
        </div>
        <div id="instruction">
            Click on the Correct Answer
        </div>
        <div id="choices">
            <div id="box1" class="boxes"></div>
            <div id="box2" class="boxes"></div>
            <div id="box3" class="boxes"></div>
            <div id="box4" class="boxes"></div>
        </div>
        <div id="startreset">
            Start Game
        </div>
        <div id="time-remaining">
            Time Remaining: <span id="timer-down">60</span> sec
        </div>
        <div id="game-over">
            Game Over
        </div>
    </div>

    <!--It is good practice to write the java at the end of the body element so all the divs load. Also use an external file for the javascript for clarity-->
    <script src="Javascript.js"></script>
</body>

这里是javascript：

    var gameOn = false;
var score;
var interval;

function stopGame() {
  gameOn = false;
  if (interval) {
    clearInterval(interval);
    interval = null;
  }
  document.getElementById("startreset").innerHTML = "Start Game";
  document.getElementById("time-remaining").style.display = "";
}


//if we click on the start/reset
document.getElementById("startreset").onclick = function () {
  //if we are not playing
  if (gameOn) {
    stopGame();
  } else {
    //change mode to playing
    gameOn = true;

    //set score to 0
    score = 0;

    document.getElementById("scorevalue").innerHTML = score;

    //show countdown box
    document.getElementById("time-remaining").style.display = "block";
    document.getElementById("startreset").innerHTML = "Reset Game";

    var counter = 60;

    //reduce time by 1sec in loops
    interval = setInterval(timeIt, 1000);
    function timeIt(){
      document.getElementById("timer-down").innerHTML = counter;
      counter--;

        //timeleft?
        //no->gameover
        if ( counter === 0) {
        stopGame();
        document.getElementById("game-over").style.display = "block";
      }
    }
      //generate new Q&A
      function generateQ(){
    var a = Math.floor(Math.random()*10);
    var b = Math.floor(Math.random()*10);
    var result = +a + +b;
    document.getElementById("firstInt").innerHTML = a;
    document.getElementById("secondInt").innerHTML = b;
    console.log(result);
  }
      }

  }
}

这是 CSS 样式表：

html{
    height: 100%;
    background: radial-gradient(circle, #fff, #ccc);
}

#title{
    width: 400px;
    padding: 0px 20px;
    margin-left: 350px;
    margin-top: 50px;
    background-color: #84FFE3;
    color: white;
    border-radius: 10px;
    font-size: 3em;
    letter-spacing: 2.7px;
    font-family: cursive, sans-serif;
    text-align: center;
    box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}

/*The container for the game in the center of the page*/
#sunYellow{
    height: 400px;
    width: 550px;
    background-color: #FFDC00;
    /*Top and bottom margin is set to 100px and the left and right margin is set to auto so that the left and right margin gets bigger and bigger until the box is centered*/
    margin: 90px 280px 0px 280px;
    padding: 20px;
    border-radius: 10px;
/*    Reference for 'box-shadow' [horizontal offset(if the number is positive then the shadow will be on the right side of our box)] [vertical offset(if the number is positive then the shadow will be on the bottom of our box, if negative it will be the opposite)] [blur radius(This is how blurry or sharp the shadow will be)] [optional spread radius(how big the shadow is)] [color]*/
    box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
    -moz-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
    -webkit-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
    position: relative;
}


#score{
    background-color: #84FFE3;
    color: #2F4F4F;
    padding: 10px;
    position: absolute;
    left: 500px;
    /*Whenever using a 'box-shadow' add the cross browser compatibility syntaxs for mozilla and safari*/
    box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}

#correct{
    position: absolute;
    left: 260px;
    background-color: #00FF0D;
    color: white;
    padding: 11px;
    display: none;
}

#wrong{
    position: absolute;
    left: 260px;
    background-color: #EF0200;
    color: white;
    padding: 11px;
    display: none;
}

#question{
    width: 450px;
    height: 150px;
    margin: 50px auto 10px auto;
    background-color: #00F5FF;
    box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    font-size: 100px;
    text-align: center;
    font-family: cursive, sans-serif;
    color: black;
}

#instruction{
    width: 450px;
    height: 50px;
    background-color: #00FF0D;
    margin: 10px auto;
    text-align: center;
    line-height: 50px;
    box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -mox-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}

#choices{
    width: 450px;
    height: 100px;
    margin: 5px auto;
}

.boxes{
    width: 85px;
    height: 85px;
    background-color: white;
    float: left;
    margin-right: 36px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 80px;
    position: relative;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
}

.boxes:hover, #startreset:hover{
    background-color: #00F5FF;
    color: white;
    box-shadow: 4px 3px 0px 0px #266df2;
    -moz-box-shadow: 4px 3px 0px 0px #266df2;
    -webkit-box-shadow: 4px 3px 0px 0px #266df2;
}

.boxes:active, #startreset:active{
    box-shadow: 0px 0px #266df2;
    -moz-box-shadow: 0px 0px #266df2;
    -webkit-box-shadow: 0px 0px #266df2;
    top: 4px;

}

#box4{
    margin-right: 0px;
}

#startreset{
    width: 83px;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0px auto;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    /*This doesnt allow a user to select text for all browsers*/ 
    user-select: none;
    -webkit-user-select: none;     
    -moz-user-select: none;
    -ms-user-select: none; 


}

#time-remaining{
    width: 157px;
    padding: 7px;
    position: absolute;
    top: 395px;
    left: 400px;
    background-color: #84FFE3;
    border-radius: 3px;
    box-shadow: 4px 3px 0px 0px #00ad99;
    -moz-box-shadow: 4px 3px 0px 0px #00ad99;
    -webkit-box-shadow: 4px 3px 0px 0px #00ad99;
/*    visibility: hidden;*/
    display: none;
}

#game-over{
    height: 200px;
    width: 500px;
    background: linear-gradient(#F8974A, #3EB8C5);
    color: white;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 100px;
    left: 45px;
    /*Giving the 'game-over' div a higher z-index ensures it is on top of the other elements, which the default is 0*/
    z-index: 2;
    display: none;
}

编辑：我已经改变了一些成功和失败的事情。我有随机生成的方程式和错误的答案...但是我有点坚持如何将它们随机排列，这样答案并不总是在第二个框中，而错误的答案在另一个框中。我怎样才能随机化答案和错误答案的位置？另一件事我怎么能跟踪用户的选择以确定他们是否选择了正确的答案？谢谢你们，到目前为止，你们真的帮了我很多，每个人都很有礼貌，很详细！你是最好的

generateQA();
      function generateQA(){
        //this is the first number in the equation  
        var Na = 1+ Math.round(Math.random() * 9);
        //this is the second number in the equation   
        var Nb  = 1+ Math.round(Math.random() * 9);
        //the correct answer is when you multiply both together  
        correctAnswer = Na * Nb;
        //these are the randomly generated wrong answers  
        var w1 = 1+ Math.round(Math.random() * 16);
        var w3 = 1+ Math.round(Math.random() * 22);
        var w4 = 1+ Math.round(Math.random() * 92);  
        document.getElementById("question").innerHTML = Na + "x" + Nb;
        document.getElementById("box1").innerHTML = w1;
        document.getElementById("box2").innerHTML = correctAnswer;
        console.log(correctAnswer);
        document.getElementById("box3").innerHTML = w3;
        document.getElementById("box4").innerHTML = w4;  
        }

【问题讨论】：

如果您以字符串的形式提出数学问题，您可以尝试合并 JavaScript eval() function。这样可以很容易地获得数学问题的值，因为您只需调用类似 eval('2 + 2') 的东西，JavaScript 就会计算数学表达式。
但是现在如何在游戏开始时随机生成 2+2 @Marathon55
从我的上一条消息中错字//和**不是一个

标签： javascript math random equation-solving

【解决方案1】：

就像您问的那样，我不会向您提供有关解决整个问题的详细信息，但这里有一个提示可以帮助您：Mozilla 开发人员网络提供了 some good examples 如何使用 Math.random()，例如编写此函数以获取范围内的随机整数：

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
}

【讨论】：

感谢@Marathon55！你会说这也是一个可行的选择吗？
generateQA(); function generateQA(){ //这是等式中的第一个数字 var Na = 1+ Math.round(Math.random() * 9); //这是等式中的第二个数字 var Nb = 1+ Math.round(Math.random() * 9); //正确答案是当你将两者相乘时 correctAnswer = Na * Nb; //这些是随机生成的错误答案 var w1 = 1+ Math.round(Math.random() * 16); var w3 = 1+ Math.round(Math.random() * 22); var w4 = 1+ Math.round(Math.random() * 92);
document.getElementById("question").innerHTML = Na + "x" + Nb; document.getElementById("box1").innerHTML = w1; document.getElementById("box2").innerHTML = correctAnswer; console.log(正确答案); document.getElementById("box3").innerHTML = w3; document.getElementById("box4").innerHTML = w4; }
cmets 不是存放那么多代码的地方。也许您可以根据需要编辑您的问题，或者就某个概念提出更简洁的问题？
对此感到抱歉，我更新了上面的问题，现在格式正确。你能帮我看看吗:)

【解决方案2】：

你实际上并没有调用generateQ()函数，所以添加：

generate();

某处。

你有太多关闭}。您可以对每个} 进行注释，以使您的代码更易于理解，例如：

} // end if (counter...
} // end function generateQ

这使得跟踪{} 变得容易得多。

另外，你不需要写：

result= +a + +b;

只写：

result = a+b;

改为。

除此之外，您的代码应该可以工作。

【讨论】：

感谢@JonMark Perry 的提示！我在想这可能是一个有趣的错误，而且很棒！我刚刚添加了 generate();进入代码，现在它的工作大声笑:)
我也将结果变量更改为correctAnswer = Na * Nb;以便稍后在代码中参考答案
var Na = 1+ Math.round(Math.random() * 9);
var Nb = 1+ Math.round(Math.random() * 9);