你好我的同事编码器我不知道如何解决使用随机生成的数学方程式制作多选游戏的问题。
即使在控制台内，我当前的编码也没有返回任何答案或数字。请不要告诉我如何做到这一点，请帮助我。我会喜欢一些指示和解释。
所以我对如何做到这一点的原始角度是使用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;
}
就像你问的那样，我不会给你解决整个问题的详细信息，但这里有一个提示可以帮助你：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
}
你实际上没有调用generateQ()函数，所以添加：
generate();
某处。
你有太多关闭}。您可以对每个}进行评论，以使您的代码更容易理解，例如：
} // end if (counter...
} // end function generateQ
这使得追踪{}变得更加容易。
此外，您不需要写：
result= +a + +b;
写吧：
result = a+b;
代替。
除此之外，您的代码应该可以工作。