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.

            
              section
  .win.hidden YOU WIN!
    .modal-buttons
      span.play-again PLAY AGAIN
      span.quit QUIT
  .lose.hidden OH NO!
    .modal-buttons
      span.play-again PLAY AGAIN
      span.quit QUIT
  // the game 
  .app-container
    .tiles.green(data-tile='4') 
    .tiles.red(data-tile='1') 
    .tiles.yellow(data-tile='3') 
    .tiles.blue(data-tile='2') 
    .board
      .circle
        .brand
          span Simon
          span.reg ®
        .middle-row
          .display
            .round-number
            span.label ROUND
          .start
            .start-button
            span.label#start START
          .strict
            .strict-button
            span.label STRICT
        .bottom-row
          span.off OFF
          .power-bg
            .power-button.float-left
          span.on ON
          // TO-DO: COME UP WITH A PROPER FOOTER FOR THE TEAM
 footer
 p Copyright © Rafael J. Rodriguez & #[a(href='mailto: guy@guylemon.com') Guy Lemon] 2015. All Rights Reserved
 p 
   a(href='mailto:rafase282@gmail.com')
     i.fa.fa-envelope.fa-fw
   a(href='https://github.com/Rafase282',target='_blank')
     i.fa.fa-github.fa-fw
   a(href='https://www.linkedin.com/in/rafase282',target='_blank') 
     i.fa.fa-linkedin
   a(href='https://codepen.io/Rafase282',target='_blank') 
     i.fa.fa-codepen
   a(href='https://rafase282.wordpress.com',target='_blank') 
     i.fa.fa-wordpress
   a(href='https://rafase282.wordpress.com',target='_blank')  (
     i.fa.fa-fire.fa-fw )
            
          
!
            
              //FONTS
@import url(https://fonts.googleapis.com/css?family=Alfa+Slab+One)
$font-stack: 'Alfa Slab One', cursive 


//VARIABLES
$simon-height: 70vmin

/* colors & borders */
$red: rgba(255, 54, 48, 1)
$burgundy: rgba(35, 11, 10, 0.85)
$blue: rgba(54, 97, 196, 1)
$light-blue: rgba(89, 196, 206, 1)
$green: rgba(41, 217, 53, 1)
$yellow: rgba(255, 241, 48, 1)
$gray: rgba(50, 50, 50, 1)
$shadow: rgba(10, 10, 10, 1)
$bg-shadow: linear-gradient(to top, rgba($gray, 0.2), rgba($shadow, 0.3))
$tile-border: 1.5vmin solid $gray
$outer-border: 3.2vmin solid $gray

//HELPER CLASSES
.button-bright
  background-image: none !important
.float-right
  float: right
.float-left
  float: left
  //toggle this 
.flex-centered
  display: flex
  align-items: center
  justify-content: center
.boxes
  height: 50%
  width: 50%
  border: $outer-border
  box-shadow: 1vmin 1vmin 3vmin $shadow
  background-image: $bg-shadow
  background-blend-mode: darken
 
.brighten
  background-image: linear-gradient(to top, rgba(white, 0.6), rgba(lightgray, 0.4)) !important
  background-blend-mode: screen !important
  
//APP STYLING
section
  @extend .flex-centered
  position: relative
  height: 90vh
  width: 100%
  background:
    image: url(https://cloud.githubusercontent.com/assets/13574207/11134180/7f5e3224-8960-11e5-924d-463c78063cb9.jpg)
    size: cover
    position: center
    /*blend-mode: overlay
    //color: rgba($shadow 0.5)*/
  .win, .lose
    position: absolute
    height: 100%
    width: 100%
    top: 0
    left: 0
    display: flex
    align-items: center
    justify-content: center
    background-color: rgba($blue, 0.8) + rgba(0,0,0,0.8)
    font-size: 11vmin
    font-weight: bold
    color: white
    letter-spacing: -0.5vmin
    text-shadow: 1vmin 1vmin 6vmin $shadow
    z-index: 1
    .modal-buttons
      display: flex
      align-items: center
      justify-content: space-around
      position: absolute
      top: 60%
      left: 25%
      width: 50%
      height: 10%
      //background-color: pink
      
      .play-again, .quit
        @extend .flex-centered
        background-image: $bg-shadow
        background-color: $green
        height: 61.8%
        width: 40%
        max-width: 175px
        border-radius: 1vmin
        box-shadow: 0.4vmin 0.4vmin 1vmin $shadow
        color: black
        text-shadow: none
        font-size: 3vmin
        font-weight: 500
        letter-spacing: 0
        
        &:active
          box-shadow: none
        
        
  
  .app-container
    @extend .flex-centered
    flex-wrap: wrap
    position: relative
    height: $simon-height
    width: $simon-height
    //border: solid 20px black
    //border-radius: 50%
    
    //TILES
    .green
      @extend .boxes
      background-color: $green
      border-top-left-radius: 100%
      border-right: $tile-border
      border-bottom: $tile-border
      
      
    .red
      @extend .boxes
      background-color: $red
      border-top-right-radius: 100%
      border-left: $tile-border
      border-bottom: $tile-border
      
    .yellow
      @extend .boxes
      background-color: $yellow
      border-bottom-left-radius: 100%
      border-right: $tile-border
      border-top: $tile-border
      
    .blue
      @extend .boxes
      background-color: $blue
      border-bottom-right-radius: 100%
      border-top: $tile-border
      border-left: $tile-border
      
    //CENTER SECTION
    .board
      @extend .flex-centered
      position: absolute
      top: 25%
      left: 25%
      height: 50%
      width: 50%
      //border: solid 1px red
      border-radius: 50%
      //MIDDLE PORTION
      .circle
        @extend  .flex-centered
        flex-wrap: wrap
        height: 100%
        width: 100%
        background-image: none
        background-color: white
        border: $tile-border /*!important*/
        border-radius: 50%
        box-shadow: 0.2vmin 0.2vmin 0.5vmin $shadow
        
        
          
        /* BRAND NAME */
        .brand
          @extend .flex-centered
          //background-color: pink
          width: 100%
          height: 40%
          
          
          span
            //border: solid 1px black
            font-size: 6vmin
            font-family: $font-stack
            color: black
            padding: 0
            margin-top: 3vmin
            //background-color: pink
          .reg
            font-family: Helvetica, sans-serif
            font-size: 2vmin
            margin-bottom: 2vmin
          
        /* MAIN GAME CONTROLS */
        .middle-row
          display: flex
          justify-content: space-around
          //background-color: pink
          width: 90%
          height: 33%
          margin: 0
          .display, .start, .strict
            position: relative
            //border: 1px solid black
            height: 61.8%
            width: 30%
            box-sizing: border-box
          span.label
            //border: 1px solid red
            position: absolute
            width: 100%
            bottom: -2.2vmin
            left: 0
            padding: 0
            margin: 0
            font-size: 1.5vmin
            color: black
            text-align: center
          
          /*ROUND DISPLAY  */
          .display
            display: inline-flex
            justify-content: center
            align-items: center
            background-color: $burgundy
            border: 3px solid $shadow
            border-radius: 10%
            .round-number
              color: $burgundy + rgba(175, 44, 44, 0.85)
              font-size: 4.5vmin
            
          /* START BUTTON */
          .start
            display: inline-flex
            justify-content: center
            align-items: center
            .label
              bottom: -1.88vmin
            .start-button
              background-color: $red
              height: 5vmin
              width: 5vmin
              border: 0.6vmin solid $gray
              border-radius: 50% 
              box-shadow: 0.2vmin 0.2vmin 0.4vmin $shadow
          
          /* STRICT BUTTON */
          .strict
            display: inline-flex
            justify-content: center
            align-items: center
            .label
              bottom: -1.88vmin
            .strict-button
              background-color: $yellow - rgb(44,44,44)
              height: 5vmin
              width: 5vmin
              border: 0.6vmin solid $gray
              border-radius: 50%
              box-shadow: 0.2vmin 0.2vmin 0.4vmin $shadow
            
        /* POWER BUTTON */
        .bottom-row
          @extend .flex-centered
          height: 23%
          width: 100%
            
          .power-bg
            display: block
            height: 3vmin
            width: 20%
            padding: 1px
            background-color: $shadow
            border-radius: 0.5vmin
          .power-button
            height: 100%
            width: 50%
            background-color: $light-blue
            border-radius: 0.5vmin
            border: 0.3vmin solid $gray
          /* POWER BUTTON LABELS */
          .on
            margin-left: .3vmin
            font-size: 1.5vmin
            font-weight: 600
            
          .off
            margin-right: .5vmin
            font-size: 1.5vmin
            font-weight: 600
            
// FOOTER
footer
  background-color: black
  color: gray
  line-height: 20px
  padding-top: 10px
  padding-bottom: 6px
  position: fixed
  text-align: center
  font-family: cursive, sans-serif
  width: 100%
  bottom: 0
            
            
            
          
!
            
              // Set variables and sounds
var sequence = [];
var player = [];
var seqCopy;
var strict = false;
var power = false;
var round;
var win;
var lock = false;
var speed = 1000;
var audio1 = new Audio(
  'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
var audio2 = new Audio(
  'https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
var audio3 = new Audio(
  'https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
var audio4 = new Audio(
  'https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
var audioBuzzer = new Audio('https://s3-us-west-2.amazonaws.com/guylemon/Buzzer.mp3');

// Handles ON and OFF
$('.power-button').on('click', onOf);

// Set Strict mode ON and OFF
$('.strict-button').on('click', strictOpt);

// Set start/restart button ON and OFF
$('.start-button').on('click', startOpt);

//Click listener for .win and .lose
$('.win').click(function() {
  $('.win').addClass('hidden');
});

$('.lose').click(function() {
  $('.lose').addClass('hidden');
});

$('.play-again').click(function() {
  $('lose').addClass('hidden');
  $('.win').addClass('hidden');
  resetGame();
});

$('.quit').click(function() {
  $('lose').addClass('hidden');
  $('.win').addClass('hidden');
  onOf();
});

// Handles user input
$('.tiles').on('click', playerMove).on('mousedown', function() {
  if (power == true && lock == true) {
    $(this).toggleClass('brighten');
  }
}).on('mouseup', function() {
  if (power == true && lock == true) {
    $(this).toggleClass('brighten');
  }
});

function NewRound() {
  // Adds new random color and sends the sequence to be animated
  var color = getColor(4);
  sequence.push(color);
  seqCopy = copyArr(sequence);
  player = [];

  //Must increase speed on 5th, 9th and 13th round
  if (round >= 4) speed = 800;
  if (round >= 8) speed = 600;
  if (round >= 12) speed = 300;
  animate();
  round += 1;
  updateRound();
}

function copyArr(argument) {
  // makes a duplicate of sequence
  var a = argument;
  var length = a.length;
  var b = new Array(length);

  while (length--) {
    b[length] = a[length];
  }

  return b;
}

function animate() {
  var i = 0;
  var interval = setInterval(function() {
    LightUp(sequence[i]);

    i++;
    if (i >= sequence.length) {
      clearInterval(interval);
    }
  }, speed);
}

function LightUp(tile) {
  // Light the button for a short while
  var audio = 'audio' + tile;
  beep(audio);
  var $tile = $('[data-tile=' + tile + ']').addClass('brighten');
  window.setTimeout(function() {
    $tile.removeClass('brighten');
  }, speed / 2);
}

function getColor(num) {
  /* Generate a random number between 1 and 4
  Green: 1   Red: 2   Blue: 3   Yellow: 4
  */
  return Math.floor(Math.random() * num) + 1;
}

function beep(audio) {
  // Plays the correct audio file.
  //
  switch (audio) {
    case 'audio1':
      audio1.play();
      break;
    case 'audio2':
      audio2.play();
      break;
    case 'audio3':
      audio3.play();
      break;
    case 'audio4':
      audio4.play();
      break;
    case 'audioBuzzer':
      audioBuzzer.play();
      break;
  }
}

function strictON() {
  // Handles the case of strict being on.
  if (strict == true) {
    // Reset
    win = false;
    gameOver();
    resetGame();
  } else {
    // Another chance, removed bad move from player and replays sequence.
    player = [];
    animate();

    // Player Moves now
  }
}

function updateRound() {
  // Display round
  $('.round-number').text(round);
}

function resetGame() {
  // Resets the board with the previous values
  $('.start-button').removeClass('brighten');
  $('#start').text('START');
  sequence = [];
  player = [];
  round = 0;
  updateRound();
  lock = false;
  speed = 1000;
}

function onOf() {
  // On-Off toggleClass
  $('.power-button').toggleClass('float-left float-right');
  if ($('.power-button').hasClass('float-right')) {
    power = true;
    round = 0;
    updateRound();
  } else {
    $('.strict-button').removeClass('brighten');
    strict = false;
    power = false;
    resetGame();
    round = '';
    updateRound();
  }
}

function strictOpt() {
  // Switch helper
  if (power == true && lock == false) {
    $('.strict-button').toggleClass('brighten');
    $('.strict-button').hasClass('brighten') ? strict = true : strict = false;
  }
}

function startOpt() {
  // Starts the game
  if (power == true) {
    $('.start-button').toggleClass('brighten');
    if ($('.start-button').hasClass('brighten')) {
      $('#start').text('RESET');
      lock = true;
      NewRound();
    } else {
      $('#start').text('START');
      resetGame();
    }
  }
}

//Game over function
function gameOver() {
  // Handle the game over case
  if (win == true) {
    //Display, player Wins!
    $('.win').removeClass('hidden');
  } else {
    //Display player lost
    $('.lose').removeClass('hidden');
  }
}

function playerMove() {
  // Time for the user to play
  if (power == true && lock == true) {
    var position = $(this).data('tile');
    player.push(position);

    //If the player entry is incorrect at any point, play the buzzersound and start the sequence again. [1,2,3,4]
    if (player[player.length - 1] !== sequence[player.length - 1]) {
      beep('audioBuzzer');
      strictON();
    } else {
      var audio = 'audio' + $(this).data('tile');
      beep(audio);

      // exp = while sequence is greater than player or it is one.
      var exp = sequence.length === player.length;
      if (exp) {
        // If it is round 20, set win to true and call gameover.
        if (round === 20) {
          win = true;
          gameOver();
        } else {
          NewRound();
        }
      }
    }
  }
}

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

Console