timon.game

Tutorials of (Timon.game) by Ege tuncoz

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>timon.game</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<html lang="en">
<script type="text/plain" src="https://raw.githubusercontent.com/shinnn/AudioContext-Polyfill/master/audiocontext-polyfill.js"></script>
<body>
<div class="container">
  <div class="row" id="board">
    <div class="col-z-4"></div>
    <div class="col-z-4">
    <button id="0" class="push blue unclickable"></button>
    <button id="1" class="push red unclickable"></button>
    <button id="2" class="push yellow unclickable"></button>
    <button id="3" class="push green unclickable"></button>
        <div id="menu">
          <div id="amip">
              <input id="toggle" class="cmn-toggle cmn-toggle-round" type="checkbox">
              <label for="toggle"></label>
          </div>
          <button id="start">Start</button>
          <div>
            <p id="screen" class="count">0</p>
            <h1>Timon</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="col-z-4"></div>
  </div> 

</body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */

body{font-family: 'Josefin Sans', sans-serif;background-color:#000;}/*#FFE4B5*/

.full-red{background-color : #FC0102;}
.red{background-color : #9f0f17;}
.green{background-color : #00a74a;}
.yellow{background-color : #cca707;}
.blue{background-color : #094a8f;}

.yellow.light{background-color : #fed93f;}
.blue.light{background-color : #1c8cff;}
.red.light{background-color : #ff4c4c;}
.green.light{background-color : #13ff7c;}

h1{
  color:rgb(255,255,255);
  font-size:6em;
  margin:5px auto 5px auto;
  text-align:center;
}

#board{
  width:425px;
  margin:auto;
  height:425px;
}
#menu{
  margin:auto;
  width:425px;
  height:125px;
}
#amip{
  margin:5px auto 5px auto;
  text-align:center;
}
.col-z-4 > button{
  margin:5px 5px 5px 5px;
  display:inline-block;
  width:200px;
  height:200px;
  border:2px solid black;
}
#screen{
  background-color:rgb(0,0,0);
  color:rgb(255,255,255);
  width:200px;
  height:40px;

  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-size:2em;
}
#menu > button{
  display:block;
  width:100px;
  margin:5px auto 5px auto;
}
.label{
  color :rgb(255,255,255);
  font-size:0.7em;
  margin-top:5px;
  text-align:center;
  position:relative;
  display:inline-block;

}
.clickable{
  pointer-events : auto;
  cursor:pointer;
}
.unclickable{
  pointer-events:none;
}
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  margin:10px auto 10px auto;
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.cmn-toggle-round + label {
  padding: 2px;
  width: 60px;
  height: 30px;
  background-color: #000;
  border-radius: 60px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 30px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: blue;/*#8ce196*/;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 30px;
}
/* Downloaded from https://www.codeseek.co/ */
// Jquery from Emanuele https://codepen.io/Em-Ant/


$(document).ready(function(){

  // Checking for Web Audio API on your browser ...
  var AudioContext = window.AudioContext // Default
    || window.webkitAudioContext // Safari and old versions of Chrome
    || false;

  if(!AudioContext) {

    alert('Sorry, but the Web Audio API is not supported by your browser.'
    + ' Please, consider downloading the latest version of '
    + 'Google Chrome or Mozilla Firefox');

  } else {


    var audioCtx = new AudioContext();
    var frequencies = [329.63,261.63,220,164.81];
    var ramp = 0.05;
    var vol = 0.5;
    var gameStatus = {};

    gameStatus.reset = function(){
      this.init();
    }

    gameStatus.init = function(){
      this.lastPush = $('#0');
      this.sequence = [];
      this.tStepInd = 0;
      this.index = 0;
      this.count = 0;
      this.lock = false;
    };

    // create Oscillators
    var oscillators = frequencies.map(function(frq){
      var osc = audioCtx.createOscillator();
      osc.type = 'sine';
      osc.frequency.value = frq;
      osc.start(0.0); //delay optional parameter is mandatory on Safari
      return osc;
    });

    var gainNodes = oscillators.map(function(osc){
      var g = audioCtx.createGain();
      osc.connect(g);
      g.connect(audioCtx.destination);
      g.gain.value = 0;
      return g;
    });


    function playGoodTone(num){
      gainNodes[num].gain
        .linearRampToValueAtTime(vol, audioCtx.currentTime + ramp);
      gameStatus.currPush = $('#'+num);
      gameStatus.currPush.addClass('light');
    };

    function stopGoodTones(){
      if(gameStatus.currPush)
        gameStatus.currPush.removeClass('light');
      gainNodes.forEach(function(g){
        g.gain.linearRampToValueAtTime(0, audioCtx.currentTime + ramp);
      });
      gameStatus.currPush = undefined;
      gameStatus.currOsc = undefined;
    };

    function gameStart(){
      resetTimers();
      stopGoodTones();
      $('.count').text('/*/*/*/');
      gameStatus.init();
      addStep();
    }

    function setTimeStep(num){
      var tSteps = [1250 , 1000 , 750, 500 ];
      if (num < 4)
        return tSteps[0];
      if (num < 8)
        return tSteps[1];
      if (num < 12)
        return tSteps[2];
      return tSteps[3];
    }

    function notifyError(pushObj){
      gameStatus.lock = true;
      $('.push').removeClass('clickable').addClass('unclickable');
      
      if(pushObj)
        pushObj.addClass('light');
      gameStatus.toHndl = setTimeout(function(){
        if(pushObj){
          pushObj.removeClass('light');
          alert("whoops");
        }
        gameStatus.toHndlSt = setTimeout(playSequence,1000);
      },1000);
    };

    function notifyWin(){
      var cnt = 0;
      var last = gameStatus.lastPush.attr('id');
      gameStatus.seqHndl = setInterval(function(){
        playGoodTone(last);
        gameStatus.toHndl = setTimeout(stopGoodTones,80);
        cnt++;
        if(cnt === 8){
          clearInterval(gameStatus.seqHndl);
        }
      },160);
      alert("you win xd");
    }

    function displayCount(){
      var p = (gameStatus.count < 10) ? '0' : '';
      $('.count').text(p+(gameStatus.count+''));
    }

    function playSequence(){
      var i = 0;
      gameStatus.index = 0;
      gameStatus.seqHndl = setInterval(function(){
        displayCount();
        gameStatus.lock = true;
        playGoodTone(gameStatus.sequence[i]);
        gameStatus.toHndl = setTimeout(stopGoodTones,gameStatus.timeStep/2 - 10);
        i++;
        if(i === gameStatus.sequence.length){
          clearInterval(gameStatus.seqHndl);
          $('.push').removeClass('unclickable').addClass('clickable');
          gameStatus.lock = false;
          gameStatus.toHndl = setTimeout(notifyError,5*gameStatus.timeStep);
        }
      },gameStatus.timeStep);
    };

    function addStep(){
      gameStatus.timeStep = setTimeStep(gameStatus.count++);
      gameStatus.sequence.push(Math.floor(Math.random()*4));
      gameStatus.toHndl=setTimeout(playSequence,500);
    };

    function resetTimers(){
      clearInterval(gameStatus.seqHndl);
      clearInterval(gameStatus.flHndl);
      clearTimeout(gameStatus.toHndl);
      clearTimeout(gameStatus.toHndlFl);
      clearTimeout(gameStatus.toHndlSt);
    };

    function pushColor(pushObj){
      if(!gameStatus.lock) {
        clearTimeout(gameStatus.toHndl);
        var pushNr = pushObj.attr('id');
        if( pushNr == gameStatus.sequence[gameStatus.index]
            && gameStatus.index < gameStatus.sequence.length){

          playGoodTone(pushNr);
          gameStatus.lastPush = pushObj;
          gameStatus.index++;
          if(gameStatus.index < gameStatus.sequence.length){
            gameStatus.toHndl = setTimeout(notifyError,5*gameStatus.timeStep);
          }else if (gameStatus.index == 30){
            $('.push').removeClass('clickable').addClass('unclickable');
            gameStatus.toHndl = setTimeout(notifyWin,gameStatus.timeStep);
          }else{
            $('.push').removeClass('clickable').addClass('unclickable');
            addStep();
          }
        }else{
          $('.push').removeClass('clickable').addClass('unclickable');
          notifyError(pushObj);
        }
      }
    }

    $('.push').mousedown(function(){
      pushColor($(this));
    });

    $('*').mouseup(function(e){
      e.stopPropagation();
      if(!gameStatus.lock)
        stopGoodTones();
    });

    $('.cmn-toggle').click(function(){ 
     if ($('input.cmn-toggle').is(':checked')) { 
        $('.btn').removeClass('unclickable').addClass('clickable');
        $('#start').click(gameStart);
      }else{
        gameStatus.reset();
        $('.count').text('/*/*/*/');
        $('.push').removeClass('clickable').addClass('unclickable');
        $('#start').off('click');
        $('.btn').removeClass('unclickable').addClass('clickable');
        resetTimers();
        stopGoodTones();
      }
    });

    gameStatus.reset();

  }
});

This awesome code ( timon.game ) is write by Ege Tuncoz, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Ege Tuncoz