数学游戏问题随机生成的方程数-Java 学习之路

您好我的同事编码器我不知道如何解决使用随机生成的数学方程式制作多选游戏的问题 .

即使在控制台内，我当前的编码也没有返回任何答案或数字 . 请不要告诉我具体怎么做，请帮帮我 . 我会喜欢一些指示和解释 .

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

现在我真的需要帮助才能让方程式弹出，我希望最简单的代码可以做到这一点我现在只做了2个月的javaScript并且还没有完全掌握它！另外我怎么可以参考答案，以便我以后可以把它放在一个盒子里

这是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;  
        }

2 回答

0
你实际上没有调用 generateQ() 函数，所以添加：
```
generate();
```
某处 .

你有太多关闭 } . 您可以对每个 } 进行评论，以使您的代码更容易理解，例如：
```
} // end if (counter...
} // end function generateQ
```
这使得跟踪 {} 变得更加容易 .

此外，您不需要写：
```
result= +a + +b;
```
写吧：
```
result = a+b;
```
代替 .

除此之外，您的代码应该有效 .
回复于 2024-04-29T03:10:54+08:00
0
就像你问的那样，我不会给你解决整个问题的详细信息，但这里有一个提示可以帮助你：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 
}
```
回复于 2024-04-29T03:10:54+08:00

数学游戏问题随机生成的方程数

2 回答

相关问题