cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
                <!-- hyperlinks: target="_blank" for codepen.io -->
  <audio id="green-audio" class="hidden-xs-up" controls="">
    <source src="https://github.com/gregorywong/sandbox/raw/gh-pages/freeCodeCamp/simon/audio/simonSound1.mp3" type="audio/mpeg"/>
    Your browser does not support the audio element.
  </audio>
  <audio id="red-audio" class="hidden-xs-up" controls="">
    <source src="https://github.com/gregorywong/sandbox/raw/gh-pages/freeCodeCamp/simon/audio/simonSound2.mp3" type="audio/mpeg"/>
    Your browser does not support the audio element.
  </audio>
  <audio id="blue-audio" class="hidden-xs-up" controls="">
    <source src="https://github.com/gregorywong/sandbox/raw/gh-pages/freeCodeCamp/simon/audio/simonSound3.mp3" type="audio/mpeg"/>
    Your browser does not support the audio element.
  </audio>
  <audio id="yellow-audio" class="hidden-xs-up" controls="">
    <source src="https://github.com/gregorywong/sandbox/raw/gh-pages/freeCodeCamp/simon/audio/simonSound4.mp3" type="audio/mpeg"/>
    Your browser does not support the audio element.
  </audio>
  <audio id="next-round" class="hidden-xs-up" controls="">
    <source src="https://github.com/gregorywong/sandbox/raw/gh-pages/freeCodeCamp/simon/audio/jackhammer.mp3" type="audio/mpeg"/>
    Your browser does not support the audio element.
  </audio>
  <audio id="victory" class="hidden-xs-up" controls="">
    <source src="https://github.com/gregorywong/sandbox/raw/gh-pages/freeCodeCamp/simon/audio/cheering.mp3" type="audio/mpeg"/>
    Your browser does not support the audio element.
  </audio>
  <audio id="buzzer" class="hidden-xs-up" controls="">
    <source src="https://github.com/gregorywong/sandbox/raw/gh-pages/freeCodeCamp/simon/audio/buzzer.mp3" type="audio/mpeg"/>
    Your browser does not support the audio element.
  </audio>

  <div class="container min-h-100 p-0 text-muted">
    <div class="row stretch-vert justify-content-center align-items-between">

      <div class="col-12 text-center">
        <h1 class="mt-2 pb-5 pl-3">Simon®</h1>
      </div>

      <!-- game elements -->
      <div id="grid" class="col-12 my-auto">
        <div class="row justify-content-center big-circle mx-auto">
          <div class="col-6 p-0 m-0">
            <div id="green" class="color-button small-slice-top-left unclickable">
            </div>
          </div>
          <div class="col-6 p-0 m-0">
            <div id="red" class="color-button small-slice-top-right unclickable">
            </div>
          </div>
          <div class="col-6 p-0 m-0">
            <div id="yellow" class="color-button small-slice-bottom-left unclickable">
            </div>
          </div>
          <div class="col-6 p-0 m-0">
            <div id="blue" class="color-button small-slice-bottom-right unclickable">
            </div>
          </div>
        </div>

        <div class="row justify-content-center mx-auto pt-5">

          <div class="col-3 col-md-2 col-xl-1 mt-auto">
            <div class="row justify-content-center">
              <input id="count" type="text" class="count-box text-center" value="--" disabled/>
            </div>
            <div class="row justify-content-center">
              Count
            </div>
          </div>

          <div class="col-3 col-md-2 col-xl-1 mt-auto text-center">
            <div class="row justify-content-center">
              <button id="start-button" class="start-button">00</button>
            </div>
            <div class="row justify-content-center">
              Start
            </div>
          </div>

          <div class="col-3 col-md-2 col-xl-1 mt-auto text-center">
            <div class="row justify-content-center">
              <input id="strict-mode" type="checkbox" data-toggle="toggle" data-size="small" data-onstyle="danger" data-offstyle="default">
            </div>
            <div class="row justify-content-center">
              Strict
            </div>
          </div>

        </div>
      </div>

      <div class="col-12 text-center muted mt-auto">
        <p class="pt-5">Coded by <a class="text-danger" href="http://www.gregwong.me" target="_blank">Greg Wong</a></p>
      </div>
    </div>
  </div>

            
          
!
            
              html, body {
  /* use min-height for when the content is longer the screen */
  min-height: 100vh!important;
  background-color: #E4F0FC;
  font-family: 'Righteous', cursive;
}

.min-h-100 {
  /* use min-height for when the content is longer the screen */
  min-height: 100vh!important;
}

.stretch-vert {
  min-height: 100vh!important;
}

.big-circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #73777B;
  background-color: #73777B;
}

.small-slice-top-left {
  background-color : #00a74a;
  border-top-left-radius: 100%;
  width: 150px;
  height: 150px;
  border-right: 5px solid #73777B;
  border-bottom: 5px solid #73777B;
}
.small-slice-top-left:active {
  background-color: #13ff7c;
}
.blink-green {
  background-color: #13ff7c;
}

.small-slice-top-right {
  background-color : #9f0f17;
  border-top-right-radius: 100%;
  width: 150px;
  height: 150px;
  border-left: 5px solid #73777B;
  border-bottom: 5px solid #73777B;
}
.small-slice-top-right:active {
  background-color: #ff4c4c;
}
.blink-red {
  background-color: #ff4c4c;
}

.small-slice-bottom-left {
  background-color: #cca707;
  border-bottom-left-radius: 100%;
  width: 150px;
  height: 150px;
  border-right: 5px solid #73777B;
  border-top: 5px solid #73777B;
}
.small-slice-bottom-left:active {
  background-color: #fdfd96;
}
.blink-yellow {
  background-color: #fdfd96;
}

.small-slice-bottom-right {
  background-color: #094a8f;
  border-bottom-right-radius: 100%;
  width: 150px;
  height: 150px;
  border-left: 5px solid #73777B;
  border-top: 5px solid #73777B;
}
.small-slice-bottom-right:active {
  background-color: #1c8cff;
}
.blink-blue {
  background-color: #1c8cff;
}

.count-box {
  width: 50px;
}

.start-button {
  background-color: red;
  border-radius: 50%;
  border: 3px solid gray;
  box-shadow: inset 0 -3px 0 0px black;
  color: red;
}

.start-button:active {
  box-shadow: inset 0 0 0 1px black;
  background-color: #ff6961;
  color: #ff6961;
}

.start-button:focus {
  outline: none!important;
}

.unclickable {
  pointer-events: none;
}

.text-red {
  color: red;
}

/* btn-default has been changed to btn-secondary in Bootstrap 4; adding it here for Bootstrap Toggle */
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

/* the four following flashes are meant to be used together as an animation upon winning */

@-webkit-keyframes flash-green {
  26%, 100%   { background-color: #00a74a; }
  0%, 25% { background-color: #13ff7c; }
}
@-moz-keyframes flash-green {
  26%, 100%   { background-color: #00a74a; }
  0%, 25% { background-color: #13ff7c; }
}
@-o-keyframes flash-green {
  26%, 100%   { background-color: #00a74a; }
  0%, 25% { background-color: #13ff7c; }
}
@keyframes flash-green {
  26%, 100%   { background-color: #00a74a; }
  0%, 25% { background-color: #13ff7c; }
}

.flash-green {
  -webkit-animation: flash-green 0.5s infinite; /* Safari 4+ */
  -moz-animation:    flash-green 0.5s infinite; /* Fx 5+ */
  -o-animation:      flash-green 0.5s infinite; /* Opera 12+ */
  animation:         flash-green 0.5s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes flash-red {
  0%, 25%, 51% { background-color: #9f0f17; }
  26%, 50% { background-color: #ff4c4c; }
}
@-moz-keyframes flash-red {
  0%, 25%, 51% { background-color: #9f0f17; }
  26%, 50% { background-color: #ff4c4c; }
}
@-o-keyframes flash-red {
  0%, 25%, 51% { background-color: #9f0f17; }
  26%, 50% { background-color: #ff4c4c; }
}
@keyframes flash-red {
  0%, 25%, 51% { background-color: #9f0f17; }
  26%, 50% { background-color: #ff4c4c; }
}

.flash-red {
  -webkit-animation: flash-red 0.5s infinite; /* Safari 4+ */
  -moz-animation:    flash-red 0.5s infinite; /* Fx 5+ */
  -o-animation:      flash-red 0.5s infinite; /* Opera 12+ */
  animation:         flash-red 0.5s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes flash-yellow {
  0%, 75%   { background-color: #cca707; }
  76%, 100% { background-color: #fdfd96; }
}
@-moz-keyframes flash-yellow {
  0%, 75%   { background-color: #cca707; }
  76%, 100% { background-color: #fdfd96; }
}
@-o-keyframes flash-yellow {
  0%, 75%   { background-color: #cca707; }
  76%, 100% { background-color: #fdfd96; }
}
@keyframes flash-yellow {
  0%, 75%   { background-color: #cca707; }
  76%, 100% { background-color: #fdfd96; }
}

.flash-yellow {
  -webkit-animation: flash-yellow 0.5s infinite; /* Safari 4+ */
  -moz-animation:    flash-yellow 0.5s infinite; /* Fx 5+ */
  -o-animation:      flash-yellow 0.5s infinite; /* Opera 12+ */
  animation:         flash-yellow 0.5s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes flash-blue {
  0%, 50%, 76% { background-color: #094a8f; }
  51%, 75% { background-color: #1c8cff; }
}
@-moz-keyframes flash-blue {
  0%, 50%, 76% { background-color: #094a8f; }
  51%, 75% { background-color: #1c8cff; }
}
@-o-keyframes flash-blue {
  0%, 50%, 76% { background-color: #094a8f; }
  51%, 75% { background-color: #1c8cff; }
}
@keyframes flash-blue {
  0%, 50%, 76% { background-color: #094a8f; }
  51%, 75% { background-color: #1c8cff; }
}

.flash-blue {
  -webkit-animation: flash-blue 0.5s infinite; /* Safari 4+ */
  -moz-animation:    flash-blue 0.5s infinite; /* Fx 5+ */
  -o-animation:      flash-blue 0.5s infinite; /* Opera 12+ */
  animation:         flash-blue 0.5s infinite; /* IE 10+, Fx 29+ */
}

            
          
!
            
              const FLASH_DURATION = 1000; // milliseconds
const INT_TO_COLOR = {
  1: 'green',
  2: 'red',
  3: 'blue',
  4: 'yellow',
};

const MAX_COUNT = 20;

var green, red, blue, yellow;
var nextRound, victory, buzzer;

var strictMode = false;
var count = 0;
var sequenceOfCurrRound = [];
var userRequiredSequence = [];

$(document).ready(function() {

  green = document.getElementById("green-audio");
  red = document.getElementById("red-audio");
  blue = document.getElementById("blue-audio");
  yellow = document.getElementById("yellow-audio");
  nextRound = document.getElementById('next-round');
  victory = document.getElementById('victory');
  buzzer = document.getElementById('buzzer');

  // strict mode listener
  $("#strict-mode").change(function() {
    strictMode = $(this).prop("checked");
  });

  // start button listener
  $("#start-button").click(function(event) {
    sequenceOfCurrRound = [];
    count = 1;
    setCount(count);
    toggleCountBoxColor();
    setTimeout(function() {
      toggleCountBoxColor();
    }, 500);

    nextRound.play();
    flashToggle(); // show an animation
    setTimeout(function() {
      flashToggle(); // turn off flashing

      addToRandomSequence();
      roundStart();
    }, 1500); // stop the animation
  });

  // color button listeners
  $(".color-button").click(function(event) {
    var color = $(this).attr("id");

    disableClickableButtons();
    flash(color, function() {
      var correctColor = INT_TO_COLOR[userRequiredSequence.shift()];
      if (color == correctColor) {
        if (userRequiredSequence.length <= 0) {
          setTimeout(roundPassed, 1000);
        }
        else {
          enableClickableButtons();
        }
      }
      else {
        incorrectReaction();
      }
    });

  });
});

function setCount(num) {
  if (isNaN(num)) {
    console.error('count should be a number')
  }
  else {
    if (num < 9) { // only 1 digit
      num = '0' + num;
    }
    $("#count").val(num);
  }
}

function flashToggle() {
  $("#green").toggleClass('flash-green');
  $("#red").toggleClass('flash-red');
  $("#blue").toggleClass('flash-blue');
  $("#yellow").toggleClass('flash-yellow');
}

function enableClickableButtons() {
  $(".color-button").removeClass('unclickable');
}

function disableClickableButtons() {
  $(".color-button").addClass('unclickable');
}

function flash(color, callback) {
  $('#'+color).addClass('blink-'+color);
  eval(color).play();

  setTimeout(function() {
    $('#'+color).removeClass('blink-'+color);
    if (callback) {
      callback();
    }
  }, FLASH_DURATION);
}

function toggleCountBoxColor() {
  $(".count-box").toggleClass('text-red');
}

function roundStart() {
  setTimeout(function() {
    // last func to be called as a callback
    // all color buttons are set to unclickable at first, so activate them
    var funcChain = enableClickableButtons;
    var wait = 0;

    for (var i = sequenceOfCurrRound.length - 1; i >= 0; i--) {
      let color = INT_TO_COLOR[sequenceOfCurrRound[i]];
      let prevFunc = funcChain;
      let prevWait = wait;
      let func = function() {
        flash(color, function() {
          setTimeout(prevFunc, prevWait);
        });
      };
      funcChain = func;
      wait = 500;
    }

    funcChain();

  }, 500);
}

function roundPassed() {
  disableClickableButtons();

  count++;
  if (count > MAX_COUNT) {
    victory.play();

    flashToggle();
    setTimeout(function() {
      flashToggle(); // turn off flashing

      // game effectively resets at this point
      count = 0;
      $("#count").val("--");
      victory.pause();
      victory.currentTime = 0;
    }, 10000);
  }
  else {
    nextRound.play();

    setCount(count);
    toggleCountBoxColor();
    setTimeout(function() {
      toggleCountBoxColor();
    }, 500);

    flashToggle(); // show an animation
    setTimeout(function() {
      flashToggle(); // turn off flashing

      addToRandomSequence(); // add one more
      roundStart();
    }, 1500); // stop the animation
  }
}

function addToRandomSequence() {
  sequenceOfCurrRound.push(Math.floor(Math.random()*4 + 1));
  userRequiredSequence = sequenceOfCurrRound.slice();
}

function incorrectReaction() {
  disableClickableButtons();

  $("#green").addClass('blink-green');
  $("#red").addClass('blink-red');
  $("#blue").addClass('blink-blue');
  $("#yellow").addClass('blink-yellow');

  buzzer.play();

  setTimeout(function() {
    $("#green").removeClass('blink-green');
    $("#red").removeClass('blink-red');
    $("#blue").removeClass('blink-blue');
    $("#yellow").removeClass('blink-yellow');

    if (strictMode) {
      count = 0;
      $("#count").val("--");
    }
    else {
      userRequiredSequence = sequenceOfCurrRound.slice();
      roundStart();
    }
  }, 1500);
}

            
          
!
999px
Loading ..................

Console