0

I'm running into a problem with my current project. It's a Math Game with a start button which when pressed turns into a reset button and then displays the timer countdown.

The countdown needs to start at 60 and descend to 0 and once it hits 0, I want to display a game over message, which I have already made using CSS.

Currently my code is responding with the timer jumping all the way to 0 without showing anything in between. The timer worked before I made the while statement below it!

Here's the 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>
--------------------------------------

Here's the 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";
        }
    }
--------------------------------------

And I don't know if it's to relevant but here's the CSS Stylesheet:

    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;
}
--------------------------------------
Vickel
  • 7,879
  • 6
  • 35
  • 56
lukes jaafari
  • 17
  • 6
  • 1
    @RequireBool's answer seems accurate, but pro-tip: when making a game like this, try to have a main loop and then check stuff inside that loop with `if` statements. – rafasoares Dec 21 '17 at 00:49
  • You can not do a long `while` loop without causing the browser to lockup. Check my answer below for a rewrite of your code that works correctly. https://stackoverflow.com/questions/47916278/why-is-my-while-loop-overriding-the-if-statement/47916388#47916388 – Intervalia Dec 21 '17 at 01:02
  • Thank you so much @Intervalia! I will definitely take note of that in the future, and i really appreciate you showing me what you would do different – lukes jaafari Dec 21 '17 at 20:26
  • Thank you @Rafael Soares! So is a game mostly going to be composed of a lot of if statements to execute different tasks? – lukes jaafari Dec 21 '17 at 20:27
  • And if anyone could help me better understand something relating to styling, I'm wanting to center the game over text in the middle of the box pop-up but i think i have conflicting properties or something like that. How could i go about doing that – lukes jaafari Dec 21 '17 at 21:04
  • 1
    @lukesjaafari at a very basic level, yeah. But, since we're talking about JS in the browser (and keeping @Intervalia's comment in mind), a better approach would be having a `tick` event and attaching every aspect of your game logic as a listener to that event. That's actually how you'd develop a larger game on with a robust engine, but it's easy enough in JS (and how JS is designed to work) – rafasoares Dec 21 '17 at 21:34

4 Answers4

1

i think its abouth "=" :)

change this

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

to 

        while (document.getElementById("timer-down").innerHTML == 0 | document.getElementById("timer-down").innerHTML == '0')
RequireBool
  • 48
  • 1
  • 6
  • 1
    Also consider if the expected value is 0 or '0' – damanptyltd Dec 21 '17 at 00:47
  • 1
    @damanptyltd as this example uses `==` rather than `===` this is an unnecessary consideration. – Shadow Dec 21 '17 at 00:58
  • @Shadow your response leads me to ask this, if the code were to say while (document.getElementById("timer-down").innerHTML === '0') i am wondering two things 1.what does the 3 equals signs mean in this case and what do the apostrophes mean with or without? – lukes jaafari Dec 21 '17 at 20:32
  • @lukesjaafari This answer will explain better than I can in a comment; https://stackoverflow.com/a/359509/1594286 – Shadow Dec 21 '17 at 21:58
1

If you check your while statement while (document.getElementById("timer-down").innerHTML = 0) you can notice you have innerHTML = 0 and it is wrong because with = you assign the value 0 to innerHTML. Instead you should use innerHTML == 0 where == is a comparison operator.

Stefano Maglione
  • 3,946
  • 11
  • 49
  • 96
1

There were several things wrong with the code. Here is a cleaned up version.

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>

I added a function called stopGame that does everything to stop the game and call it from the correct locations.

I added code to change the text of the Start Game/Reset Game button which I assume you wanted.

This code still needs a lot to clean it up, but it is a good start.

Intervalia
  • 10,248
  • 2
  • 30
  • 60
  • I have a question though on what the if statement means inside stopGame function. What does that do exactly(sorry if I'm being extra I'm really just trying to get a better understanding from someone who knows more) – lukes jaafari Dec 21 '17 at 20:39
  • `if (interval)` is just a safety check to make sure there is an active interval. If there is then we need to stop it. If not then there is nothing to stop. – Intervalia Dec 21 '17 at 20:42
  • oh ok that makes sense @Intervalia – lukes jaafari Dec 21 '17 at 21:01
0

This is a very simplistic implementation of a game loop. Personally, I'd use some library to help me out with the event listeners and use other events to propagate changes around. Doing to many things on tick is not very efficient and a waste of JavaScript's power.

But, hopefully, this will illustrate how you'd tackle some points for your game. It can also help you transition to a proper game engine in the future.

// 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>
rafasoares
  • 425
  • 5
  • 18