Simon Game Zipline

In this example below you will see how to do a Simon Game Zipline with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Simon Game Zipline</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  ,<div class='container'>

    <br/>
    <h4>SIMON GAME</h4>
  <div id='main'>
      <label id='count'></label>
    <div id='btn-group'>
      <a id='g' href='#' class='btn-simon' onclick='input(this,0)'></a>
      <a id='r' href='#' class='btn-simon' onclick='input(this,1)'></a>
      <a id='y' href='#' class='btn-simon' onclick='input(this,2)'></a>
      <a id='b' href='#' class='btn-simon' onclick='input(this,3)'></a>
    </div>
    <div id='settings'>
      <a id='btn-power' href='#' class='btn-setting' onclick='togglePower()'><i class='fa fa-power-off'></i></a>
      <a id='btn-play' href='#' class='btn-setting' onclick='play()'><i class='fa fa-play'></i></a>
      <a id='btn-reset' href='#' class='btn-setting' onclick='reset()'><i class='fa fa-refresh'></i></a>
      <a id='btn-strict' href='#' class='btn-setting' onclick='toggleStrict()'>strict</a>
      
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.createjs.com/createjs-2015.11.26.min.js'></script>
<script src='https://code.createjs.com/soundjs-0.6.2.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/levmb/simon-game-zipline-XXMrQW */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;     
  user-select: none;
  background:#222;
}

h4 {
  text-align:center;
  font-family:'Arial';
  font-size:20pt;
  color:white;
  text-shadow:0px 0px 16px #FFF;
}

#main {  
  position:relative;
  width:334px;
  height:400px;
  background:#CCC;
  border-radius:30px;
  margin-left:auto;
  margin-right:auto;
  
  
}

.btn-simon {
  display:inline-block;
  width:160px;
  height:160px;
  margin:0px;
}

#g {
  background:#00A74A;
}
#r {
  background:#9F0F17;
}
#y {
  background:#CCA707;
}
#b {
  background:#094A8F;
}

.btn-simon:active {
  outline:0;
}

.btn-simon:focus {
  outline:0;
}

#btn-group {
  text-align:center;
  border-radius:30px;
  background: #777;
  border:5px solid #777;
  overflow:hidden;
  width:334px;
  height:330px;
}

#count {
  position:absolute;
  left:125px;
  top:130px;
  display:inline-block;
  width:80px;
  height:80px;
  font-size:28pt;
  background:white;
  color:#888;
  font-family:"Courier New";
  border-radius:40px;
  text-align:center;
  padding-top:8px;
  border:5px solid #888;
  box-sizing:border;
}

#settings {
  height:60px;
  overflow:hidden;
  padding:10px;
}

.btn-setting {
  display:inline-block;
  width:50px;
  height:50px;
  background:#FFF;
  border-radius:30px;
  font-size:24pt;
  text-align:center;
  padding-top:3px;
  color:#888;
  margin-left:20px;
  vertical-align:middle;
}

.btn-setting:active, .btn-setting:focus {
  outline:0;
}

.btn-setting:hover, .btn-setting:active, .btn-setting:focus {
  color:#888;
}

#btn-play {
  padding-left:6px;
}

#btn-strict {
  font-size:12pt;
  margin-top:0;
  padding-top:12px;
  font-weight:bold;
}

#btn-strict:hover {
  text-decoration:none;
}

#btn-strict:focus, #btn-strict:active {
  text-decoration:none;
}


/*Downloaded from https://www.codeseek.co/levmb/simon-game-zipline-XXMrQW */
var powerOn = false;
var filesLoaded = false;
var playing = false;
var level = 1;
var pattern;
var buttons = [{
  'id': '#g',
  'off': '#00A74A',
  'on': '#00ff71'
}, {
  'id': '#r',
  'off': '#9F0F17',
  'on': '#ff4953'
}, {
  'id': '#y',
  'off': '#CCA707',
  'on': '#f9df71'
}, {
  'id': '#b',
  'off': '#094A8F',
  'on': '#84bdfa'
}];

var incorrectSound;
var winSound;

var strict = false;

var waitingForInput = false;
var inputIndex = 0;

var playbackTimer;
var waitTimer;
var nextRoundTimer;

var playSpeed = 1000;
var inputInterval = 3000;

var numSoundFilesLoaded = 0;

$(document).ready(
  preload()
);

function preload() {
  /*var sounds = [
    'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3',
    'https://s3.amazonaws.com/freecodecamp/simonSound2.mp3',
    'https://s3.amazonaws.com/freecodecamp/simonSound3.mp3',
    'https://s3.amazonaws.com/freecodecamp/simonSound4.mp3'
  ];
  createjs.Sound.addEventListener('fileload', function(e){
    numSoundFilesLoaded++;
    console.log(e);
    console.log(createjs.Sound);
    if ( numSoundFilesLoaded == 4 )
      filesLoaded = true;
  });
  for ( var i = 0; i < sounds.length; i++ ) {
    createjs.Sound.registerSound({id:buttons[i].id, src:sounds[i]});
  }*/
  $('.btn-simon').on('dragstart', function() {
    return false;
  });
  $('.btn-setting').on('dragstart', function() {
    return false;
  });

  var loadQueue = new createjs.LoadQueue(false);
  loadQueue.addEventListener('complete', function(e) {
    console.log(loadQueue);

    for (var i = 0; i < buttons.length; i++) {
      buttons[i]['audio'] = loadQueue.getResult(buttons[i].id);
    }
    incorrectSound = loadQueue.getResult('incorrect');
    winSound = loadQueue.getResult('win');
    filesLoaded = true;
  });

  var manifest = [];

  manifest.push(createjs.LoadItem.create('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'));
  manifest.push(createjs.LoadItem.create('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'));
  manifest.push(createjs.LoadItem.create('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3'));
  manifest.push(createjs.LoadItem.create('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3'));
  manifest.push(createjs.LoadItem.create('https://dl.dropbox.com/s/r0y5b4pftculrjg/simon_hurt.mp3'));
  manifest.push(createjs.LoadItem.create('https://dl.dropbox.com/s/373dgqejj6yv67o/chime.mp3'));
  
  

  for (var i = 0; i < buttons.length; i++) {
    manifest[i].id = buttons[i].id;
    manifest[i].crossOrigin = "Anonymous";
  }
  manifest[4].id = 'incorrect';
  manifest[4].crossOrigin = "Anonymous";
  manifest[5].id = 'win';
  manifest[5].crossOrigin = "Anonymous";
  loadQueue.loadManifest(manifest, true, true);
}

function togglePower() {
  if (!filesLoaded)
    return;

  powerOn = !powerOn;

  if (powerOn) {
    $('#btn-power:focus').css('color', '#6BF');
    $('#count').html('00');
  } else {
    $('#btn-power:focus').removeAttr('style');
    $('#btn-play:focus').removeAttr('style');
    $('#btn-play').removeAttr('style');
    $('#btn-reset').removeAttr('style');
    $('#btn-strict').removeAttr('style');
    $('#count').removeAttr('style');
    
    playing = false;
    strict = false;
    level = 1;
    $('#count').html('');
    
    clearTimeout(waitTimer);
    clearTimeout(playbackTimer);
    clearTimeout(nextRoundTimer);
  }
}

function toggleStrict() {
  if (!powerOn)
    return;

  strict = !strict;

  if (strict) {
    $('#btn-strict:focus').css('color', '#F44');
  } else {

    $('#btn-strict:focus').css('color', '#888');
  }
}

function reset() {
  if ( !powerOn )
    return;
  
  clearTimeout(playbackTimer);
  clearTimeout(waitTimer);

  $('#btn-play:focus').css('color', '#888');
  $('#btn-play').css('color', '#888');

  level = 1;
  playing = false;

  for (var i = 0; i < buttons.length; i++) {
    $(buttons[i].id).css('background', buttons[i].off);
  }
  $('#count').html('00');
  pattern = [];
}

function play() {
  if (!powerOn)
    return;

  if (playing)
    return;

  playing = true;
  $('#btn-play:focus').css('color', '#4F8');

  $('#count').html('01');
  pattern = [];
  pattern.push(Math.floor(Math.random() * 4));
  playPattern(0);
}

function playPattern(index) {
  
  if (index < pattern.length) {
    waitingForInput = false;
    $(buttons[pattern[index]].id).css('background', buttons[pattern[index]].on);
    $(buttons[pattern[index]].audio.play());

    clearTimeout(playbackTimer);
    console.log("on" + index + " " + playbackTimer);
    playbackTimer = setTimeout(function() {
      $(buttons[pattern[index]].id).css('background', buttons[pattern[index]].off);
      console.log("off" + index + " " + playbackTimer);
      setTimeout(function() {
        playPattern(index + 1);
      }, playSpeed / 5);
    }, playSpeed);
  } else {
    console.log("wait");
    waitingForInput = true;
    inputIndex = 0;
    waitTimer = setTimeout(function() {
      if ( strict ) {
        incorrectSound.play();
        reset();
      } else 
        playPattern(0);
    }, 5000);
  }

}

function input(target, index) {
  if (!powerOn || !waitingForInput)
    return;

  console.log('input1');

  console.log(pattern);
  var buttonId = $(target).attr('id');
  var correct = false;
  if (buttons[pattern[inputIndex]].id == '#' + buttonId)
    correct = true;

  clearTimeout(waitTimer);
  clearTimeout(playbackTimer);
  console.log(correct);

  $('#' + buttonId).css('background', buttons[index].on);
  buttons[index].audio.pause();
  buttons[index].audio.currentTime = 0;
  buttons[index].audio.play();
  var offIndex = inputIndex;
  var clickTimeout = setTimeout(function() {

    $('#' + buttonId).css('background', buttons[index].off);

  }, 250);
  waitTimer = setTimeout(function() {
    if (strict) {
      incorrectSound.play();
      reset();
    } else
      playPattern(0);
  }, inputInterval);

  if (correct) {
    handleCorrect();
    
  } else {
    handleIncorrect();
  }
}

function handleIncorrect() {
  $('#count').css('background', '#F44');
  $('#count').css('color', '#EEE');
  if ( strict )
    $('#count').html(':-(');
  incorrectSound.play();
  waitingForInput = false;
  clearTimeout(waitTimer);
  clearTimeout(playbackTimer);

  setTimeout(function() {
    $('#count').css('background', '#FFF');
    $('#count').css('color', '#888');
      $('#count').html((pattern.length < 10 ? '0' : '') + pattern.length);
    if (strict) {
      reset();
    } else
      playPattern(0);

  }, 1000);
}

function handleCorrect() {
  inputIndex++;

  if (inputIndex >= pattern.length) {

    if (pattern.length == 20 ) {
      win();
    } else {
      waitingForInput = false;
      clearTimeout(waitTimer);
      clearTimeout(playbackTimer);
      $('#count').css('background', '#4F4');

      nextRoundTimer = setTimeout(function() {

        pattern.push(Math.floor(Math.random() * 4));
        $('#count').html((pattern.length < 10 ? '0' : '') + pattern.length);
        $('#count').css('background', '#FFF');

        if (pattern.length % 4 == 1) {
          playSpeed *= 0.75;
          inputInterval *= 0.75;
        }
        playPattern(0);
      }, 1500);
    }
  }
}

function win() {
  clearTimeout(waitTimer);
  $('#count').html(':-)');
  $('#count').css('background', '#4F4');
  winSound.play();
  setTimeout(function() {
    $('#count').css('background', '#FFF');
    reset();
  }, 3000);
}

Comments