123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="game">
<div id="board">

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 744.09448819 1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="simonboard.svg">
  <defs
     id="defs4">
    <linearGradient
       id="linearGradient4268"
       osb:paint="solid">
      <stop
         style="stop-color:#ff0000;stop-opacity:1;"
         offset="0"
         id="stop4270" />
    </linearGradient>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.16"
     inkscape:cx="134.17974"
     inkscape:cy="669.95618"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="706"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     style="display:inline">
    <circle
       style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.0999999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path4136"
       cx="374.28571"
       cy="498.07651"
       r="360" />
    <g
       transform="matrix(8.1600329,0,0,8.1600329,-36.1019,90.188337)"
       id="g12"
       style="fill:#c40223;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-opacity:1">
      <path id="redButtonOutline"
         style="fill:#c40223;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-opacity:1"
         inkscape:connector-curvature="0"
         d="m 86.802,47.445 -17.539,0 c -0.482,0 -0.896,-0.345 -0.983,-0.82 C 66.902,39.108 60.927,33.122 53.413,31.728 52.941,31.64 52.599,31.23 52.596,30.751 L 52.488,13.138 c -0.002,-0.283 0.116,-0.553 0.325,-0.744 0.208,-0.19 0.49,-0.283 0.77,-0.258 18.097,1.729 32.486,16.119 34.216,34.214 0.027,0.281 -0.065,0.56 -0.255,0.768 -0.19,0.208 -0.46,0.327 -0.742,0.327 z m -16.724,-2 15.606,0 C 83.63,29.184 70.753,16.307 54.493,14.249 L 54.59,29.93 c 7.669,1.75 13.752,7.844 15.488,15.515 z"
         id="path14" />
    </g>
    <g
       transform="matrix(8.1600329,0,0,8.1600329,-36.1019,90.188337)"
       id="g16"
       style="fill:#0087bf;fill-opacity:1;fill-rule:nonzero">
      <path id="blueButtonOutline"
         style="fill:#0087bf;fill-opacity:1;fill-rule:nonzero"
         inkscape:connector-curvature="0"
         d="m 53.594,87.889 c -0.247,0 -0.486,-0.092 -0.672,-0.259 -0.209,-0.189 -0.328,-0.459 -0.328,-0.741 l 10e-4,-17.633 c 0,-0.482 0.344,-0.896 0.817,-0.983 7.738,-1.436 13.748,-7.625 14.953,-15.403 0.075,-0.487 0.495,-0.847 0.988,-0.847 l 17.498,-0.001 c 0.279,0 0.546,0.116 0.734,0.321 0.189,0.206 0.285,0.48 0.263,0.759 -1.473,18.35 -15.838,32.978 -34.157,34.782 -0.032,0.003 -0.065,0.005 -0.097,0.005 z M 54.595,70.07 54.594,85.768 C 71.064,83.642 83.931,70.532 85.752,54.021 l -15.56,10e-4 c -1.573,7.945 -7.7,14.249 -15.597,16.048 z"
         id="path18" />
    </g>
    <g
       transform="matrix(8.1600329,0,0,8.1600329,-36.1019,90.188337)"
       id="g20"
       style="fill:#ffd300;fill-opacity:1;fill-rule:nonzero">
      <path id="yellowButtonOutline"
         style="fill:#ffd300;fill-opacity:1;fill-rule:nonzero"
         inkscape:connector-curvature="0"
         d="m 47.017,87.958 c -0.026,0 -0.051,-0.001 -0.077,-0.003 C 28.479,86.525 13.8,72.111 12.038,53.682 c -0.027,-0.28 0.066,-0.559 0.255,-0.768 0.19,-0.208 0.458,-0.327 0.74,-0.327 l 17.704,-0.001 c 0.483,0 0.896,0.345 0.983,0.819 1.426,7.775 7.634,13.802 15.447,14.996 0.488,0.074 0.849,0.494 0.849,0.988 l 0,17.568 c 0,0.278 -0.116,0.545 -0.321,0.734 -0.185,0.172 -0.427,0.267 -0.678,0.267 z M 14.15,54.587 C 16.239,71.163 29.4,84.08 46.017,85.861 l 0,-15.631 C 38.036,68.667 31.711,62.521 29.921,54.585 L 14.15,54.587 Z"
         id="path22" />
    </g>
    <g
       id="g5755"
       transform="translate(-1211.4286,-845.71429)">
      <g
         style="fill:#00a368;fill-opacity:1;fill-rule:nonzero"
         id="g8"
         transform="matrix(8.1600329,0,0,8.1600329,1172.4695,933.04548)">
        <path id="greenButtonOutline"
           id="path10"
           d="m 30.737,47.445 0,0 -17.704,0 c -0.282,0 -0.55,-0.119 -0.74,-0.328 C 12.104,46.909 12.011,46.63 12.038,46.349 13.8,27.92 28.479,13.506 46.939,12.076 c 0.281,-0.021 0.552,0.074 0.756,0.263 0.204,0.189 0.321,0.455 0.321,0.734 l 0,17.568 c 0,0.494 -0.361,0.914 -0.849,0.989 -7.813,1.193 -14.021,7.22 -15.447,14.995 -0.086,0.475 -0.5,0.82 -0.983,0.82 z m -16.587,-2.001 15.771,0 c 1.791,-7.936 8.114,-14.082 16.096,-15.645 l 0,-15.631 C 29.4,15.951 16.239,28.868 14.15,45.444 Z"
           inkscape:connector-curvature="0"
           style="fill:#00a368;fill-opacity:1;fill-rule:nonzero" />
      </g>
      <path id="greenButton"
         inkscape:connector-curvature="0"
         id="path5753"
         d="m 1290.5095,1295.9787 c 0,-9.9658 11.1085,-48.6569 20.3283,-70.8038 19.1723,-46.0539 63.848,-99.7789 106.2674,-127.7923 33.2398,-21.9514 77.7027,-39.243 118.4043,-46.0475 l 12.1429,-2.03 0,62.5865 0,62.5865 -16.4286,5.1057 c -51.7143,16.0721 -90.8308,53.2329 -109.2578,103.795 l -6.5079,17.8571 -62.4743,0 c -58.7591,0 -62.4743,-0.3126 -62.4743,-5.2572 z"
         style="opacity:1;fill:#00a368;fill-opacity:1;fill-rule:nonzero;stroke:#00a368;stroke-width:8.85714245;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    </g>
    <path id="redButton"
       style="opacity:1;fill:#c40223;fill-opacity:1;fill-rule:nonzero;stroke:#c40223;stroke-width:8.85714245;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M 532.52074,446.23591 C 517.47122,398.67708 473.33025,353.66477 427.82946,339.47803 l -17.27111,-5.38498 -0.0244,-63.5 -0.0244,-63.5 9.28572,1.75903 c 116.74122,22.11468 206.84019,105.37787 235.2596,217.41052 3.78579,14.92403 6.88325,28.89831 6.88325,31.05395 0,3.20129 -11.42056,3.91936 -62.33536,3.91936 l -62.33537,0 -4.7466,-15 z"
       id="path5762"
       inkscape:connector-curvature="0" />
    <path id="yellowButton"
       style="opacity:1;fill:#ffd300;fill-opacity:1;fill-rule:nonzero;stroke:#ffd300;stroke-width:8.85714245;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M 324.79522,787.78078 C 208.54954,767.46415 116.22672,682.96059 87.480981,570.56583 84.432382,558.64592 81.938074,545.88465 81.938074,542.20745 l 0,-6.68582 62.404896,0 62.40489,0 3.58781,12.14285 c 5.3691,18.17156 21.5707,47.56239 34.57514,62.72173 15.64124,18.23307 49.86121,40.56096 74.15665,48.38584 l 20.01347,6.44576 0,62.29477 c 0,48.13856 -0.81159,62.20634 -3.57143,61.90567 -1.96428,-0.214 -6.78571,-0.95086 -10.71428,-1.63747 z"
       id="path5764"
       inkscape:connector-curvature="0" />
    <path id="blueButton"
       style="opacity:1;fill:#0087bf;fill-opacity:1;fill-rule:nonzero;stroke:#0086bf;stroke-width:8.85714245;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 410.54883,725.84587 0.0393,-63.18139 16.3266,-5.18898 c 38.90986,-12.36648 75.98712,-44.60595 95.01064,-82.61378 6.1741,-12.33548 12.0601,-26.87619 13.07999,-32.31269 l 1.85436,-9.88455 62.7903,0 62.79031,0 -1.88082,12.14286 c -10.12124,65.34421 -48.85897,134.25229 -99.182,176.42857 -37.89055,31.75649 -91.10288,57.27284 -135.86803,65.15139 l -15,2.63995 0.0393,-63.18138 z"
       id="path5766"
       inkscape:connector-curvature="0" />
    <circle
       style="opacity:1;fill:#fcfbe3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.0999999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path5768"
       cx="370"
       cy="496.64792"
       r="132.85715" />
    <rect id="counter"
       style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:#333333;stroke-width:2.68007135;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect4168"
       width="63.350964"
       height="42.24419"
       x="271.30728"
       y="470.74176" />
    <text id="countNum" x="278" y="502" font-family="Orbitron" font-size="30px" fill="red">- -</text>
    <circle id="startButton"
       style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:#333333;stroke-width:4.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path4170"
       cx="379.62082"
       cy="494.36221"
       r="14.655172" />
    <circle id="strictButton"
       style="display:inline;opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:#333333;stroke-width:4.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path4170-6"
       cx="447.23523"
       cy="494.36221"
       r="14.655172" />
    <rect
       style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:#333333;stroke-width:4.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect4187"
       width="92.241379"
       height="25"
       x="325.86206"
       y="565.29327" />
    <rect id="onOffButton"
       style="opacity:1;fill:rgb(0, 135, 191);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;"
       id="rect4189"
       width="44.827587"
       height="18.965517"
       x="328.48276"
       y="568.74152" />
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:30px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x="289.93103"
       y="585.98285"
       id="text4155"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4157"
         x="289.93103"
         y="585.98285"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.5px;font-family:Oswald;-inkscape-font-specification:Oswald;fill:#333333;fill-opacity:1">OFF</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:30px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x="430.44827"
       y="585.98285"
       id="text4159"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4161"
         x="430.44827"
         y="585.98285"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.5px;font-family:Oswald;-inkscape-font-specification:Oswald;fill:#333333;fill-opacity:1">ON</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:30px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x="278.70236"
       y="537.46564"
       id="text4163"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4165"
         x="278.70236"
         y="537.46564"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.5px;font-family:Oswald;-inkscape-font-specification:Oswald;fill:#333333;fill-opacity:1">COUNT</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:30px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x="357.75864"
       y="537.46564"
       id="text4167"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4169"
         x="357.75864"
         y="537.46564"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.5px;font-family:Oswald;-inkscape-font-specification:Oswald;fill:#333333;fill-opacity:1">START</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:30px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x="422.72412"
       y="537.46564"
       id="text4171"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4173"
         x="422.72412"
         y="537.46564"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.5px;font-family:Oswald;-inkscape-font-specification:Oswald;fill:#333333;fill-opacity:1">STRICT</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:30px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x="273.35699"
       y="450.63806"
       id="text4165"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4167"
         x="273.35699"
         y="450.63806"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:50px;font-family:'Alfa Slab One';-inkscape-font-specification:'Alfa Slab One';fill:#333333;fill-opacity:1">Simone</tspan></text>
  </g>
</svg>
  </div>
</div>
            
          
!
            
              h1 {
  font-family: 'Alfa Slab One', cursive;
}
body {
  background: url('https://s3.amazonaws.com/showcase.knanthony.com/Simone/purty_wood.png');
}
#game {
  margin: 0 auto;
  text-align: center;
}
#board svg {
  width: 600px;
  height: 600px;
}

#redButton, 
#blueButton, 
#greenButton, 
#yellowButton,
#onOffButton,
#startButton,
#strictButton
{
  cursor: pointer;
}

.toggleOn {
  -webkit-transition: .4s;
  transition: .4s;
  -webkit-transform: translateX(40px);
  -ms-transform: translateX(40px);
  transform: translateX(40px);
}

.toggleOff {
  -webkit-transition: .4s;
  transition: .4s;
}

#countNum {
  display: none;
  align: center;
}
            
          
!
            
              //Game Board Elements
var redButton = document.getElementById("redButton");
var redButtonOutline = document.getElementById("redButtonOutline");
var redOriginalColor = redButton.style.fill;
var yellowButton = document.getElementById("yellowButton");
var yellowButtonOutline = document.getElementById("yellowButtonOutline");
var yellowOriginalColor = yellowButton.style.fill;
var blueButton = document.getElementById("blueButton");
var blueButtonOutline = document.getElementById("blueButtonOutline");
var blueOriginalColor = blueButton.style.fill;
var greenButton = document.getElementById("greenButton");
var greenButtonOutline = document.getElementById("greenButtonOutline");
var greenOriginalColor = greenButton.style.fill;
var startButton = document.getElementById("startButton");
var onOffButton = document.getElementById("onOffButton");
var strictButton = document.getElementById("strictButton");
var countBoard = document.getElementById("counter");
var countNum = document.getElementById("countNum");

var previousMoves = [];
var previousPlayerMoves = [];
var allowMistakes = true;
var gameOn = false;
var gameStarted = false;
var simonPlaying = false;
var step = 1;
var blueSound = new Audio('https://s3.amazonaws.com/showcase.knanthony.com/Simone/simonA.mp3');
var yellowSound = new Audio('https://s3.amazonaws.com/showcase.knanthony.com/Simone/simonB.mp3');
var redSound = new Audio('https://s3.amazonaws.com/showcase.knanthony.com/Simone/simonC.mp3');
var greenSound = new Audio('https://s3.amazonaws.com/showcase.knanthony.com/Simone/simonG.mp3');
var wrongBuzzer = new Audio('	https://s3.amazonaws.com/showcase.knanthony.com/Simone/wrong-buzzer.wav');

function chooseRed(){
  flashColor(redButton, redOriginalColor, "#ff0000");
  flashColor(redButtonOutline, redOriginalColor, "#ff0000");
  redSound.play();
  redSound.currentTime = 0;
}

function chooseBlue(){
  flashColor(blueButton, blueOriginalColor, "#0db8ff");
  flashColor(blueButtonOutline, blueOriginalColor, "#0db8ff");
  blueSound.play();
  blueSound.currentTime = 0;
}

function chooseGreen(){
  flashColor(greenButton, greenOriginalColor, "#00ff00");
  flashColor(greenButtonOutline, greenOriginalColor, "#00ff00");
  greenSound.play();
  greenSound.currentTime = 0;
}

function chooseYellow(){
  flashColor(yellowButton, yellowOriginalColor, "#ffff00");
  flashColor(yellowButtonOutline, yellowOriginalColor, "#ffff00");
  yellowSound.play();
  yellowSound.currentTime = 0;
}

//Game Board Functions
onOffButton.addEventListener("click", function() {
  if (onOffButton.classList.contains("toggleOn") && gameOn === true) {
  //console.log('off');
  previousMoves = [];
  previousPlayerMoves = [];
  allowMistakes = true;
  gameOn = false;
  step = 1;
  countNum.style.display = "none";  onOffButton.classList.remove("toggleOn");
  strictButton.style.stroke = "rgb(51,51,51)";  onOffButton.classList.add("toggleOff");
    gameOn = false;
  } else {
  //console.log("on");
  onOffButton.classList.remove("toggleOff");  onOffButton.classList.add("toggleOn");
    gameOn = true;
  }
});

function counterStart() {
  countNum.style.display = 'block';
    countNum.innerHTML = '- -';
}

function counter(step) {
  if (step < 10) {
    countNum.innerHTML = "0" + step;
  } else {
    countNum.innerHTML = step;
  }
}

function wrong() {
  countNum.innerHTML = '!!!!'
  wrongBuzzer.play();
  if (!allowMistakes) {
    setTimeout(function() {
      startOver();
    }, 1000);
  } else {
    setTimeout(function(){
      counter(step - 1);
    }, 1000);
  }
}

startButton.addEventListener("click", function() {
  if (gameOn) {
    startButton.style.fill = "#00ff00";
  setTimeout(function(){
    startButton.style.fill = "#ff0000";
  }, 400);
    startOver();
  }
});

strictButton.addEventListener("click", function() {
  if (gameOn) {
    if (allowMistakes) {
      strictButton.style.stroke = "#ff0000";
    allowMistakes = false;
    } else {
      strictButton.style.stroke = "#333333";
    allowMistakes = true;
    }
    
  }
});

// Player moves

redButton.addEventListener("click", function() {
  if (!simonPlaying) {
    //console.log("clicked red");
    playerTurn("red");
  }
});
blueButton.addEventListener("click", function(){
  if (!simonPlaying) {
    //console.log("clicked blue");
    playerTurn("blue");
  }
});
greenButton.addEventListener("click", function() {
  if (!simonPlaying) {
    //console.log("clicked green");
    playerTurn("green");
  }
});
yellowButton.addEventListener("click", function() {
  if (!simonPlaying) {
    //console.log("clicked yellow");
    playerTurn("yellow");
  }
});

function flashColor (element, color1, color2) {
  element.style.fill = color2;
  element.style.stroke = color2;
  setTimeout(function(){
    element.style.fill = color1;
    element.style.stroke = color1;
  }, 400);
}

//Step 1: Simon's turn - Choose a random 1st step from among the colors and record it

//Step 2: Wait for player to repeat the moves

//Step 3: If player repeats the moves properly, then start the pattern from the beginning and add one more move. If not, then play the last pattern from the beginning

//Step 4: Repeat for 20 moves

function chooseMove(){
  var choicesArray = ["blue", "yellow", "green", "red"];
  var moveChoice = choicesArray[Math.floor(Math.random()*choicesArray.length)];
  //console.log(moveChoice);
  return moveChoice;
}

function playMoves(index, previousMovesArray) {
  //console.log(previousMovesArray.length);
  //console.log(index);
  if (gameOn) {
    if (previousMovesArray.length > index) {
          switch (previousMovesArray[index]) {
        case "red":
          chooseRed();
          break;
        case "blue":
         chooseBlue();
          break;
        case "green":
        chooseGreen();
          break;
        case "yellow":
       chooseYellow();
          break;
      } 
      index++;
  setTimeout(function() {
     playMoves(index, previousMovesArray);
  }, 1000);
    } else {
      simonPlaying = false;
    }
  }
    
  //console.log("simon is not playing" + simonPlaying);
  }

function simonTurn() {
  //console.log("simon Turn");
  gameStarted = true;
  simonPlaying = true;
  //console.log("simon is now playing" + simonPlaying);
  if (step > 20) {
    gameEnd();
  } else {
    var move = chooseMove();
  previousMoves.push(move);
  counter(step);
  //console.log(previousMoves);
    setTimeout(function() {
      playMoves(0, previousMoves);
    }, 1500);
  } 
  step++;
}

function playerTurn(color) {
  if (gameStarted) {
    previousPlayerMoves.push(color);
  //console.log(previousPlayerMoves);
    //console.log(simonPlaying);
      switch (color) {
        case "red":
          chooseRed();
          break;
        case "blue":
          chooseBlue();
          break;
        case "green":
          chooseGreen();
          break;
        case "yellow":
          chooseYellow();
          break;
    }
    
    var repeat = compareMoves(previousPlayerMoves, previousMoves);
    
    if (repeat) {
      //console.log("repeat");
      simonTurn();
      previousPlayerMoves = [];
    }
  }
}

function compareMoves(playerMove, simonMove) {
  var comparison = false;
  simonMove.forEach(function(simon, simonIndex) {
    //console.log([simonMove.length, playerMove.length, playerMove[simonIndex], simonMove[simonIndex]]);
    if (playerMove[simonIndex] !== simonMove[simonIndex]) {
      if (playerMove[simonIndex] !== undefined) {
        //console.log("wrong!");
        if (allowMistakes) {
          previousPlayerMoves = [];
          wrong();
        setTimeout(function(){
        playMoves(0, previousMoves);
        }, 1200);
        comparison = false;
        } else {
          comparison = false;
          wrong();
        }
        
      }
    }
    if (simonMove.length === playerMove.length && playerMove[simonIndex] === simonMove[simonIndex]) {
    comparison = true;
  }
  });
  return comparison;
}

function startOver() {
  previousMoves = [];
  previousPlayerMoves = [];
  step = 1;
  gameOn = false;
  
  setTimeout(function() {
    gameOn = true;
    counterStart();
  }, 500);
  setTimeout(function() {
    simonTurn();
  }, 1000);
}

function gameEnd() {
  countNum.innerHTML = "YA";
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console