个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 03:51:50 25 4
gpt4 key购买 nike

你好，我的程序员同事们，我不知道如何使用随机生成的数学方程来制作多项选择游戏。

我当前的编码即使在控制台内也不会返回任何答案或数字。请帮助我，但不要告诉我具体该怎么做。我希望得到一些指导和解释。

所以我最初的想法是，使用 Math.random 对象随机生成两个数字，并将其乘以 10，这样我就可以得到方程中 0-10 的整数，然后我想要将它们显示在带有 id 标签的问题标记框内。

现在我真的需要帮助来弹出方程式，我想要最简单的代码来完成它，我现在只使用 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;  
        }

最佳答案

就像您所问的，我不会向您提供有关解决整个问题的详细信息，但这里有一个提示可以帮助您: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 
}

关于javascript - 数学游戏中随机生成方程数的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47935392/

25 4 0
文章推荐： c++ - 实现字符串映射
文章推荐： html - 如何使用css编辑弹出框的大小？
文章推荐： html - CSS:类似于将元素的框阴影放置在与元素不同的 z-index 处的效果
文章推荐： c++ - 使用 BoostRegex C++ 的正则表达式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com