mathaholic

index.html

<main>

    <span id="timer"></span> 

  <span id="gameOver">
    <h1>Your score<br><span id="finalScore">0</span></h1>
  </span>
  
  <i class="fa fa-volume-down" id="volume"></i>
  <p id="score" onmousedown="return false">0</p>
  <section class="arithmetic">
    <p></p>
    <span id="playBox">
      <span id="play"></span>
    </span>
  </section>
  <nav>
    <ul>
      <li id="true">
        <span class="true"></span>
      </li>
      <li id="false">
        <span class="false"></span>
      </li>
    </ul>
  </nav>
</main>
<audio src="http://www.soundjay.com/button/button-16.mp3" id="beep"></audio>
<audio src="http://www.freesfx.co.uk/rx2/mp3s/10/12161_1422862639.mp3" id="win"></audio>
<audio src="http://www.freesfx.co.uk/rx2/mp3s/2/2753_1329133424.mp3" id="lose"  
></audio>
<audio src="http://www.freesfx.co.uk/rx2/mp3s/9/10065_1361272689.mp3" id="superPoint"></audio>

mathaholic.markdown

mathaholic ('-' * 10) A simple adictive game for mathaholics gamers

A Pen by Juan Obrach on CodePen.

License.

script.js

var pointCount = 0

var backgroundRandom = function(){
     var rand = Math.floor(Math.random()*4);
     var colors =  ["#DA941B","#C50423","purple","#5ED1BC"]
     var selectColor = colors[rand]
     $("html, body").css("backgroundColor",selectColor)

} 
var reset = function(){
      $("main").effect( "shake",{times:1} );
     $("#lose").get(0).play();
    $("#playBox").show();
    $(".arithmetic p").hide()
    $("#score").html("0")
    condition = []
    pointCount = 0
    backgroundRandom();
    $("#timer").css({width:"100%"})
    					 .finish();
}

// Random for numbers
var num = function(){
  return Math.floor(Math.random()*10) 
}
// Random for operators
var operator = function(){
	var symbol = ["+","-","*","/"]


	rand = Math.floor(Math.random()*2) // change for more operators
	return symbol[rand]
}
// Concat numbers and operator to make a random arithmetic exercise
var calc = function(){
	num1 = num();
  num2 = num();
  o = operator();
  badNumber = Math.floor(Math.random()*8)  // this number make a bad solution
  trueOrFalse = Math.floor(Math.random()*2)
  
  solution = {
     resul:eval(num1+o+num2) ,
     solution: true
  }
  badSolution = {
    resul:eval(num1+o+num2)+badNumber,
    solution:false
  }
  
  options = [solution,badSolution]
  optionSelected = options[trueOrFalse]
  
	return {
    solved :num1 +" "+ o +" "+ num2 + " = " + optionSelected.resul,
    condition:optionSelected.solution
  }
}

var condition = []
function Play(){

  var game = calc()
  $(".arithmetic p").html(game.solved)
  $(".arithmetic p").show()
	condition.push(game.condition)
  if(pointCount == pointCount % 5 ){
  $("#superPoint").get(0).play();
  }
  $("#timer").css({width:"100%"})
  $("#timer").animate({width:0},3000,function(){
    reset();
  })

}
  
$("#true").click(function(){
	if(condition[0] === true){
    pointCount += 1
    $("#score").html(pointCount);
    condition = []
    $("#win").get(0).play()
    $("#timer").clearQueue().stop();
    Play()
  }else{ 
    reset()
  }
})
$("#false, #true")
$("#false").click(function(){
  if(condition[0] === false){
    pointCount += 1
    $("#score").html(pointCount);
    condition = [];
    $("#win").get(0).play();
    $("#timer").clearQueue().stop();
    Play()
  }else{

		reset()
  }
})
$("#playBox").click(function(){
  $(this).hide(function(){
    Play()
  })
})

/**
* Sound Controllers
*/
$("#volume").click(function(){
  if( $("#volume").hasClass("fa fa-volume-down")){
        $(this).removeClass().addClass("fa fa-volume-off")
        $("#beep").get(0).volume = 0;
        $("#win").get(0).volume = 0;
        $("#lose").get(0).volume = 0;
      	$("#superPoint").get(0).volume = 0;
  }else{
      $(this).removeClass().addClass("fa fa-volume-down")
      $("#beep").get(0).volume = 0.4
      $("#win").get(0).volume = 0.4;
     	$("#lose").get(0).volume = 0.4;
      $("#superPoint").get(0).volume = 0.4;
  }
})

$("#play ").click(function(){
  	$("#beep").get(0).play();
})

style.css

*::selection{
  background:red
}
html{
  background:black;
}
html, body{
  width:100%;
  height:100%;
  padding:20px;
  margin:0;
  background:#5ED1BC;
  color:white;
  font-family:"Arial";
  font-weight: bold;
  box-sizing:border-box;
  text-shadow:1px 1px 2px #D9D9D9;
  transition:background .2s
}

main{
  display:flex;
  flex-wrap:no-wrap;
  flex-direction:column;
  align-items:center;
  height:100%;

}

#timer{
  width:100%;
  height:4px;
  background:#e3e3e3;
  align-self:flex-start

}
#volume{
  font-size:3em;
  align-self:flex-start;
  cursor:pointer;
  opacity:0.9
}
#volume:hover{
  color:white;
  opacity:1
}
#score{
  align-self:flex-end;
  font-size:3em;
  margin-top:-40px;
  cursor:default;
  user-select:none
}
#gameOver{
  background:#e3e3e3;
  z-index:300;
  height:400px;
  width:400px;
  border-radius:4%;
  padding:50px;
  box-sizing:border-box;
  text-align:center;
  position:absolute;
  left:38%;
  top:10%;
  color:red;
  display:none
}
#gameOver h1{
  margin-top:20%;
  font-size:2.3em
}


.arithmetic{
  align-self:center;
  flex:1;
 /* background:#5EB4D1; */
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:1;
  font-size:3.5em;
}
#playBox{
  width:230px;
  height:100px;
  border-radius:5%;
  margin-left:25px;
  background:#e3e3e3;
  border-bottom:4px solid #C7C7C7;
  display:flex;
  align-items:center;
  flex-direction:column;
  cursor:pointer;
}
#playBox:hover{
  background:white;
  border-bottom:5px solid #D6D4D6
}
#play{
	width: 0; 
	height: 0; 
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent; 
	border-left:40px solid #4298BD;
  margin-top:10px

  
}
nav{
  margin-top:1em;
  align-self:center
}
nav ul{
  display:flex;
  flex-direction:row;
  align-items:stretch;

}
li{
  width:120px;
  height:120px;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e3e3e3;
  border-bottom:6px solid #C7C7C7;
  border-radius:5%;
  margin-left:30px;
  cursor:pointer;
  z-index:2
}
li:hover{
  background:white;
  border-bottom:5px solid #D6D4D6
}

.true{
  background:#4298BD;
  width:70px;
  height:15px;
  transform:rotate(-40deg);
  transform-origin:43px;
  border-radius:5px
}
.true:before{
  content:" ";
  width:35px;
  height:15px;
  background:inherit;
  transform:translate(-.7em,-1em)rotate(90deg);
  transform-origin: 1em .6em;
  position:absolute;
  border-radius:5px
}
.false{
  width:60%;
  height:15px;
  background:red;
  transform:rotate(45deg);
  border-radius:5px
}
.false:before{
  content:" ";
  width:100%;
  height:15px;
  background:inherit;
  transform:rotate(90deg);
  position:absolute;
  border-radius:5px
}