Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <div class="color red" data-value="0"></div>
  <div class="color blue" data-value="1"></div>
  <div class="color green" data-value="2"></div>
  <div class="color yellow" data-value="3"></div>
  <div class="settings">
      <p class="logo">Simon</p>
      <div class="buttons">
      <button class="start">Start</button>
        <div class="stricttoggle">
          <span>Strict Mode:</span>
          <button class="strictbutton on">Off</button>
        </div>
      </div>
      <div class="turncount">
        <p>Sequence:</p><p class="counter">00</p>
      </div>
</div>
</div>

<p>Made By Gianfranco Nuschese</p>
              
            
!

CSS

              
                body{
  margin:0;
  background-color:#9C669A;
  text-align:center;
  font-family:'Oswald', sans-serif;
  box-sizing:border-box;
}
.container{
  position:relative;
  width:600px;
  height:600px;
  background-color:black;
  margin:auto;
  border-radius:50%;
}
.settings{
  position:absolute;
  width:250px;
  height:250px;
  background-color:white;
  border-radius:100%;
  border:solid 10px black;
  z-index:10;
  top:calc(50% - 135px);
  left:calc(50% - 135px);
}

.color{
  display:inline-block;
  width:40%;
  height:40%;
  margin:0 auto;
}
.red,.blue{
  margin-top:40px;
}
.red{
  background-color:red;
  border-radius:100% 0 0 0;
  margin-right:20px;
}
.blue{
  background-color:blue;
  border-radius:0 100% 0 0;  
}
.green,.yellow{
  margin-top:35px;
}
.green{
  background-color:green;
  border-radius:0 0 0 100%;
  margin-right:20px;
}
.yellow{
  background-color:yellow;
  border-radius:0 0 100% 0;
}

.logo{
  font-size:50px;
  margin-top:10px;
  margin-bottom:-10px;
  font-weight:700;
}
.buttons{
  height:80px;
  margin-top:10px;
}
.start{
  background-color:#8AA3DD;
  font-size:28px;
  border:2px solid black;
  float:left;
  margin-left:40px;
  margin-top:20px;
  
}
.stricttoggle{
  display:inline;
  margin-top:-10px;
}
.stricttoggle span{
  margin-left:-20px;
  margin-bottom:20px;
}
.strictbutton{
  float:right;
  margin-top:5px;
  margin-right:50px;
}
.stricttoggle button.on{
  background-color:#FB4552;
  font-size:28px;
  border:2px solid black;
}
.turncount{
  float:clear;
}
.turncount p{
  margin:0;
}
.turncount p.counter{
font-size:30px;
width:40px;
background-color:black;
color:white;
margin-left:105px;
}

.pressed{
 box-shadow: 8px 10px 122px 14px rgba(0,0,0,0.89) inset;
}
              
            
!

JS

              
                //document variables
var colors = document.querySelectorAll(".color");
var start = document.querySelector(".start");
var strict = document.querySelector(".strictbutton");
var counter = document.querySelector(".counter");

// other variables
var strictMode = false;
var computerArray = [1, 1];
var playerArray = [];
var sequence = 0;
var moveCheck;
var turnCount = 0;
var j = 0;
var playVal;

// Howler.js library
// https://howlerjs.com
// sound variable declarations
var redSound = new Howl({
  src: ["https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"]
});

var blueSound = new Howl({
  src: ["https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"]
});

var greenSound = new Howl({
  src: ["https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"]
});

var yellowSound = new Howl({
  src: ["https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"]
});

var errorSound = new Howl({
  src: ["http://www.soundjay.com/button/sounds/beep-03.mp3"]
});

var winnerSound = new Howl({
  src: ['http://serqspq.brinkster.net/prototypes/Greetings/Music/Sound%20Effects/kidscheer.wav']
});

//reset function
function resetGame() {
  computerArray = [];
  playerArray = [];
  sequence = 0;
  turnCount = 0;
}

//function to add random number to computerArray
function randomFunc() {
  //function grabbed from MDN docs on Math.random
  min = Math.ceil(0);
  max = Math.floor(3);
  var random = Math.floor(Math.random() * (max - min)) + min;
  //add random number to array
  computerArray.push(random);
  //add 1 to sequence and display
  sequence = computerArray.length;
  displaySeq();
}

// change sequence counter for user
function displaySeq() {
  if (sequence < 10) {
    counter.textContent = "0" + sequence;
  } else {
    counter.textContent = sequence;
  }
}

//function that iterates over the computerArray (colors) with delay between each iteration
function myLoop() {
  //setTimeout to delay function on each iteration
  setTimeout(function() {
    //pass interation of computer array to playSound func
    playSound(computerArray[j]);
    j++;
    if (j < computerArray.length) {
      myLoop();
    }
  }, 1000);
}

function compTurn() {
  //run recursive function to have delay between           //iterations of computer Array
  myLoop();
  //reset recursive iteration to 0
  j = 0;
}

//function that plays Sounds and highlights buttons
function playSound(num) {
  if (num === 0) {
    //toggle class to highlight section
    colors[num].classList.toggle("pressed");
    //play corresponding sound
    redSound.play();
    //toggle class when sound ends
    redSound.once("end", function() {
      colors[num].classList.toggle("pressed");
    });
  } else if (num === 1) {
    colors[num].classList.toggle("pressed");
    blueSound.play();
    blueSound.once("end", function() {
      colors[num].classList.toggle("pressed");
    });
  } else if (num === 2) {
    colors[num].classList.toggle("pressed");
    greenSound.play();
    greenSound.once("end", function() {
      colors[num].classList.toggle("pressed");
    });
  } else if (num === 3) {
    colors[num].classList.toggle("pressed");
    yellowSound.play();
    yellowSound.once("end", function() {
      colors[num].classList.toggle("pressed");
    });
  }

  return;
}

//check player's move
function playCheck() {
  var index = turnCount - 1;
  if (playerArray[index] === computerArray[index]) {
    return true;
  } else {
    return false;
  }
}
//handle button functionality
//onclick of strict button
strict.addEventListener("click", function() {
  //toggle strict mode
  if (strictMode) {
    strictMode = false;
    //change button outlook
    strict.textContent = "Off";
    strict.style.backgroundColor = "#FB4552";
  } else {
    strictMode = true;
    strict.textContent = "On";
    strict.style.backgroundColor = "#4AB839";
  }
  //check if game is running and use reset function
  if (sequence > 0) {
    resetGame();
    randomFunc();
    compTurn();
  }
});

//onclick of start
start.addEventListener("click", function() {
  //start resets game and starts new game
  resetGame();
  //add number to computerArray
  randomFunc();
  //initiate first computer turn
  compTurn();
});

//onclick of color button
for (var i = 0; i < colors.length; i++) {
  colors[i].addEventListener("click", colorFunction);
}
//function that checks user input/
function colorFunction() {
  //parseInt of data-value of element pressed
  playVal = parseInt(this.dataset.value);
  //add number to player array via data-value attribute (parse Int of number)
  playerArray.push(playVal);
  //add 1 to turnCount
  turnCount++;
  //check for incorrect input
  moveCheck = playCheck(); //********
  //if incorrect move
  if (!moveCheck) {
    //play error
    this.classList.toggle("pressed");
    errorSound.play();
    errorSound.once("end", function() {
      colors[playVal].classList.toggle("pressed");
    });
    //if strictmode enabled
    if (strictMode) {
      //reset game and start new after some time
      resetGame();
      randomFunc();
      setTimeout(compTurn, 800);
    } else {
      //else, reset turn
      playerArray = [];
      turnCount = 0;
      setTimeout(compTurn, 800);
      return;
    }
    //else if move correct
  } else if (moveCheck) {
    //play sound and change color
    playSound(playVal);
    //check for sequence end
    if (turnCount === computerArray.length) {
      //check for victory
      if (turnCount === 20) {
        //alert that the player has won and play sound
        winnerSound.play();
        alert("You win!");
        //reset game after some time
        setTimeout(function(){
          resetGame();
          randomFunc();
          compTurn();
        },1000);
      } else {
        //clear playerArray on successful turn
        playerArray = [];
        //reset turnCount
        turnCount = 0;
        //add random number to computerArray
        randomFunc();
        //start next sequence
        setTimeout(compTurn, 400);
      }
    }
  }
}

              
            
!
999px

Console