Instantly share code, notes, and snippets.

# juanobrach/index.html

Created April 18, 2015 16:47
Show Gist options
• Save juanobrach/268842117bf77b4ca45b to your computer and use it in GitHub Desktop.
mathaholic
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters


0

0

## mathaholic

A simple adictive game for mathaholics gamers

A Pen by Juan Obrach on CodePen.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 var pointCount = 0 // Random for numbers var num = function(){ return Math.floor(Math.random()*50) } // 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").animate({width:0},5000) } \$("#true").click(function(){ if(condition[0] === true){ pointCount += 1 \$("#score").html(pointCount); condition = [] \$("#win").get(0).play() Play() }else{ \$("#lose").get(0).play(); \$("#playBox").show(); \$(".arithmetic p").hide() \$("#score").html("0") condition = [] pointCount = 0 } }) \$("#false").click(function(){ if(condition[0] === false){ pointCount += 1 \$("#score").html(pointCount); condition = []; \$("#win").get(0).play(); Play() }else{ \$("#lose").get(0).play(); \$("#playBox").show(); \$(".arithmetic p").hide() \$("#score").html("0") condition = [] pointCount = 0 } }) \$("#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(); \$("#timer").animate({width:0},2000,function(){}) })
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 *::selection{ background:red } 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 } 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 }