为什么我的while循环覆盖if语句

时间：2017-12-21 00:36:17

标签： javascript html css

我遇到了当前项目的问题。这是一个带有开始按钮的数学游戏，当按下它时会变成重置按钮，然后显示定时器倒计时。

倒计时需要从60开始并下降到0，一旦它达到0，我想显示一个游戏结束消息，我已经用CSS做了。

目前我的代码正在响应，计时器一直跳到0而没有显示任何内容。计时器在我下面的while语句之前工作了！

这是HTML：

    <!DOCTYPE html>
<html lang="en">

    <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">

            </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">

            </div>
        </div>

        <script src="Javascript.js"></script>
    </body>
</html>
--------------------------------------

这是javascript：

`var gameOn = false;`
`var score;`
`var interval;`


    //if we click on the start/reset

    document.getElementById("startreset").onclick = function(){

    //if we are playing
    if(gameOn == true){

        //reload page
        location.reload(); //reload the page

    }else{//if we are not playing

        //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";

        //reduce time by 1sec in loops
        if(counter > 0){
            var counter = 60;
            interval = setInterval(timeIt, 100);
            function timeIt(){
                document.getElementById("timer-down").innerHTML = counter;
                counter--;
                }
            }
            while (document.getElementById("timer-down").innerHTML = 0){
                document.getElementById("game-over").style.display = "block";
            }
            document.getElementById("startreset").innerHTML = "Reset Game";
        }
    }
--------------------------------------

我不知道是否相关，但这里是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;
}
--------------------------------------

4 个答案:

答案 0 :(得分：1)

我认为它是关于＆＃34; =＆＃34; ：）

更改此

        while (document.getElementById("timer-down").innerHTML = 0)

到

        while (document.getElementById("timer-down").innerHTML == 0 | document.getElementById("timer-down").innerHTML == '0')

答案 1 :(得分：1)

如果你检查了while语句while (document.getElementById("timer-down").innerHTML = 0)，你会发现自己有innerHTML = 0，这是错误的，因为=将值0分配给innerHTML。相反，您应该使用innerHTML == 0，其中==是比较运算符。

答案 2 :(得分：1)

代码有几个问题。这是一个清理版本。

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;
    interval = setInterval(timeIt, 100);
    function timeIt(){
      document.getElementById("timer-down").innerHTML = counter;
      counter--;
      if ( counter === 0) {
        stopGame();
        document.getElementById("game-over").style.display = "block";
      }
    }
  }
}
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;
}
<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 ith 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">

    </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>

我添加了一个名为stopGame的函数，它可以阻止游戏并从正确的位置调用它。

我添加了代码以更改我认为您想要的Start Game / Reset Game按钮的文字。

此代码仍然需要大量清理，但这是一个良好的开端。

答案 3 :(得分：0)

这是一个非常简单的游戏循环实现。就个人而言，我会使用一些库帮助我了解事件监听器并使用其他事件来传播变化。在tick上做很多事情并不是非常有效，浪费了JavaScript的力量。

但是，希望这能说明你如何为游戏解决一些问题。它还可以帮助您在将来过渡到合适的游戏引擎。

// This allows us to keep track 
// of how much time has passed between each "tick"
var lastTimestamp = performance.now()

// This is the main loop.
// It leverages the `requestAnimationFrame` method
// to keep in sync with the browser's refresh rate
function loop(timestamp) {
  window.requestAnimationFrame(loop)
  var delta = timestamp - lastTimestamp
  lastTimestamp = timestamp

  var event = new CustomEvent('tick', {
    detail: delta
  })

  document.dispatchEvent(event)
}

// Starting the main loop for the first time
loop(lastTimestamp)

// This is used to store game state
// Ideally, it should be somewhere more reliable 
// than just a global variable
var gameData = {}

// When your game gets large enough, 
// it'd be wise to split different aspects of it 
// in different files. 

// In this case, each "tick" event listener 
// could be in a different file

document.addEventListener('tick', (event) =>{
  var timer = document.getElementById('time-remaining')
  var timeDown = document.getElementById('timer-down')
  
  if (gameData.state === 'started'){
    time = gameData.counter - event.detail
    
    if (time < 0){
      gameData.state = 'over'
    } else {
      timer.style.display = 'block'
      timeDown.textContent = Math.floor(time / 1000)
      gameData.counter = time
    }
  } else {
    timer.style.display = 'none'
  }
})

document.addEventListener('tick', (event) =>{
  var startButton = document.getElementById('startreset')
  
  if (gameData.state === 'started'){
    startButton.style.display = 'none'
  } else if (gameData.state === 'over') {
    startButton.style.display = 'block'
    startButton.innerHTML = 'Reset Game'
  }
})

document.getElementById('startreset').onclick = function () {
  gameData.state = 'started'
  gameData.counter = 60 * 1000
}

document.addEventListener('tick', (event) =>{
  var gameOver = document.getElementById('game-over')
  if (gameData.state === 'over') {
    gameOver.style.display = 'block'
  } else {
    gameOver.style.display = 'none'
  }
})
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;
}
<div id="title">The Matheroo</div>

<div id="sunYellow">
  <div id="score">
    Score: 
    <span id="scorevalue"></span>
  </div>
  
  <div id="correct">Correct!</div>
  <div id="wrong">Try Again</div>
  
  <div id="question"></div>
  
  <div id="instruction">
    Click on the correct answer
  </div>
  
  <div id="choices">
    <div class="boxes" id="box1">1</div>
    <div class="boxes" id="box2">2</div>
    <div class="boxes" id="box3">3</div>
    <div class="boxes" id="box4">4</div>
  </div>
  
  <div id="startreset">Start Game</div>
  <div id="time-remaining">
    Time remaining: 
    <span id="timer-down"></span> sec    
  </div>
  
  <div id="game-over">Game Over</div>
</div>

相关问题
最新问题