timon.game

In this example below you will see how to do a timon.game with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by etuncoz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright etuncoz ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/etuncoz/timongame-aBBpQO */

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/etuncoz/timongame-aBBpQO */
// 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();

  }
});

Comments