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.

            
              <body>
<div class="container">
<div class="row top-row">
  <div class="col-md-12 game-header">
    <h4 class="game-title"> Saiyan Says </h4>
  </div>
</div>

<div class="row mid-row">

  <div class="col-md-7 game-screen">
      <div class="row health-bars">
        <div class="col-md-6 half">
          
          <div class="healthBarContainer">
            <div class="hb-label"> Player Health: <span id="playerHealth">0</span> </div>
              <div class="healthBar bg-success" id="playerHealthBar" data-p="100" >
                  
              </div>
          </div>
        </div>
         <div class="col-md-6 half">
            <div class="healthBarContainer">
              <div class="hb-label"> Enemy Health: <span id="enemyHealth">0</span> </div>
        
              <div class="healthBar bg-warning" id="enemyHealthBar" data-p="100" syle="min-width: 1em">
                  
              </div>
            </div>           
        </div>
      </div>


      <div class="row">
        <div class="col-md-12 fight-ring">

          <div class="fighter-space player-space" id="player-space">
          </div>

          <div id="projectile">
            <div class="fighter-space ki-space">
            </div>

            <div class="fighter-space lazer-space">
            </div>
            
            <div class="fighter-space km-space">
            </div>
          </div>



          <div class="fighter-space enemy-space">
          </div>
          
          <div class="fighter-space db-space">
          </div>

        </div>

        
        
      </div>
      
      <div class="game-message">
            Press Start To Begin
      </div>
  </div>

  <div class="col-md-5 game-control">
    <div class="bottom-right corners"> Input Count: <span id="in-count">0</span> </div>
    <div class="top-left corners" id="diff"> Mode: <span id="mode">Easy</span> <span id="toggle"> <i class="fa fa-toggle-off fa-lg" aria-hidden="true"></i></span></div>
    <div class="top-right corners"> Turn: <span id="turn">Demo</span> </div> 
    <div class="bg-primary bottom-left corners" style="color: white" id="restart"> Start</div>
    

    <div class="row">
      <div class="button-group">
        <div data-i=0 class="simon element demo-turn attack">Attack</div>
      </div>
    </div>
      
    <div class="row">
      <div class="button-group">
        <div data-i=1 class="simon element demo-turn block">Block</div>
        <div data-i=2 class="simon element demo-turn blast">Blast</div>
      </div>
    </div>

      <div class="button-group">
      <div data-i=3 class="simon element demo-turn dodge">Dodge</div>
      </div>
  </div>

</div>

<div class="row bottom-row">
  <div class="col-md-12 test-actions">
    <button class="btn btn-primary test-action" data-p="0" data-a="0">Attack</button>
    <button class="btn btn-primary test-action" data-p="0" data-a="1">Block</button>
    <button class="btn btn-primary test-action" data-p="0" data-a="2">Blast</button>
    <button class="btn btn-primary test-action" data-p="0" data-a="3">Dodge</button>
    <button class="btn btn-primary test-action" data-p="0" data-a="4">Finish</button>
    <br>
    <button class="btn btn-default test-action" data-p="1" data-a="0">E. Attack</button>
    <button class="btn btn-default test-action" data-p="1" data-a="1">E. Block</button>
    <button class="btn btn-default test-action" data-p="1" data-a="2">E. Blast</button>
    <button class="btn btn-default test-action" data-p="1" data-a="3">E. Dodge</button>
    <button class="btn btn-default test-action" data-p="1" data-a="4">E. Finish</button>
    <button id="animatinoTest">Test Animation </button>
  </div>
 <!-- <button class="btn btn-default" id="testButton"> Test Controls</button> -->
  






</div>






  

</div>
</body>
            
          
!
            
              .container {
  padding: 10px;
}

.row {
  margin: 0;
}

.element {
  display: inline-block;
  
  
  border: solid 1px #0275d8;
  border-radius: 50px;
  min-width: 75px;
  min-height: 75px;
  text-align: center;
  padding: 10px;
  margin: 5px;
  padding-top: 25px;
}

.demo-turn {
    background-color: white;
    color: #0275d8 ;
}

.player-turn {
    background-color: #0275d8;
    color: white;
}


.progress {
  margin: 5px;
}

.healthBar {
  min-height: 20px;
  width: 100%;
  border-radius: 5px;
  padding-left: 5px;
  color: #023a6b;
}
.hb-label {
    position: absolute;
    margin-left: 5px;
    font-size: small;
    color: #03036d;
}

.healthBarContainer {
background-color: white; 
  border-radius: 5px;
  margin: 5px;
  border: solid 1px #3b66e6;
}

.gameInfo {
    border: solid 1px gray;
    border-radius: 5px;
    display: inline-block;
    position: absolute;
}

.corners {
    position: absolute;
    font-size: small;
    margin: 5px;
    color: #0275d8;
}
.top-right {
    top: 0;
    right: 0;
}

.bottom-right {
    bottom: 0;
    right: 0;
}

.bottom-left {
    bottom: 0;
    left: 0;
    padding: 10px;
    border-radius: 10px;
}

.top-left {
    top: 0;
    left: 0;
}

.game-screen {
    background-color: #b2ebff;
    border: solid 1px #0275d8;
    height: 228px;
    border-radius: 0 0 0 10px;
}

.game-control {
    border: solid 1px #0275d8;
    border-left: none;
    text-align: center;
    padding: 10px;
    border-radius: 0 0 10px 0;
    background-color: #91ff8b;
}
.button-group {
    margin: auto;
}

.game-header {
    border: solid 1px #0275d8;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    text-align: center;
    z-index: 1;
    background-color: #0275d8;
    height: 50px;
    
}

.game-title {
    color: white;
    font-weight: normal;

}
.game-settings {
    border: solid 1px #0275d8;
    border-top: none;
    text-align: center;    
}

.block {
    margin-right: 40px;
}

.attack {
    margin-bottom: -20px;
}

.dodge {
    margin-top: -20px;
}


.fighter-space {
    /* border: solid 1px #3b66e6; */
    border-radius: 20px;
    height: 100px;
    width: 100px;
    text-align: center;
}

.enemy-space {
    position: absolute;
    right: 20%;
    top: 30px;
}

.player-space {
    position: absolute;
    left: 20%;
    top: 30px;
    z-index: 1;
}
.player-image, .enemy-image, .ki-image {
    height: 100;
    width: 100;
}

.enemy-larger {
    height: 120;
    width: 120;
}




.db-image {
    height: 10;
    width: 10;
    margin-top: 40px;
}


.half {
    float: left !important;
    width: 50% !important;
    z-index: 1;
}

.ki-space {
    display:none;
    position: absolute;
    top: 30px;
    left: 30%;
    z-index: 1;
}

.lazer-space {
    position: absolute;
    top: 9px;
    left: 27%;
    display: none;
}

.lazer-image {
    height: 100px;
    width: 250px;
}


.test-actions {
    margin: 10px;
    display: none;
}

.km-space {
    position: absolute;
    top: 25px;
    left: 20%;
    height: 100px;
    width: 400px;
    display:none;
    z-index:2
}
.km-image {
    height: 100px;
    width: 400px;
}

.fighter-space.db-space {
    position: absolute;
    top: -80px;
    right: 20%;
    display: none;
}

img#db-image {
    margin-top: 40px;

}

.game-details {
    position: absolute;
    bottom: 0;
}
.game-title {
    margin-top: 10px;
}
.game-message {
    text-align: center;
    margin-top: 75px;
    color: #0275d8;
}
            
          
!
            
              $( document ).ready(function() {

//Game Settings
var choices = [0, 1, 2, 3]
var moves = ['Attack', 'Block', 'Blast', 'Dodge']
var gameOn = false;
var enemy = true;
var sequence = [];
var inputArray = [];
var inputCount = 0;
var currentEl;
var enemyHealth = 5;
var maxEenemyHealth = 15;
var playerHealth = 3;
var maxPlayerHealth = 3;
var demo = true;
var easy = true;
var tc = true;

var root = "https://s3.ca-central-1.amazonaws.com/saiyan-says/saiyan-says/";
//var root = 'https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/';
//var root = './';

//Audio Files
var audio0 = new Audio(['https://s3.amazonaws.com/freecodecamp/simonSound1.mp3']);
var audio1 = new Audio(['https://s3.amazonaws.com/freecodecamp/simonSound2.mp3']);
var audio2 = new Audio(['https://s3.amazonaws.com/freecodecamp/simonSound3.mp3']);
var audio3 = new Audio(['https://s3.amazonaws.com/freecodecamp/simonSound4.mp3']);
var audio = [audio0, audio1, audio2, audio3];
var tlp = new Audio( root + 'sounds/misc/instant-transmission.mp3');
var hitSound = new Audio( root + 'sounds/misc/hit.mp3');
var blkSound = new Audio( root + 'sounds/misc/block.mp3');
var dgSound = new Audio( root + 'sounds/misc/dodge.mp3');
var bltSound = new Audio( root + 'sounds/misc/ki-blast.mp3');
var chSound =  new Audio( root + 'sounds/misc/charge.mp3');
var kmSound =  new Audio( root + 'sounds/misc/kamehameha.mp3');
var dbcSound =  new Audio( root + 'sounds/misc/db-charge.mp3');
var dbeSound =  new Audio( root + 'sounds/misc/db-explode.mp3');



//Element References
var playerSpace = $('.player-space');
var playerAvatar =  $('#player-image');
var enemySpace = $('.enemy-space');
var enemyAvatar = $('#enemy-image');
var kiSpace = $('.ki-space');
var kiAvatar = $('#ki-image');
var lzSpace = $('.lazer-space');
var lzAvatar = $('#lazer-image');
var kmSpace = $('.km-space');
var kmAvatar = $('#km-image');
var dbSpace = $('.db-space');
var dbAvatar = $('#db-image');

//Stock Images
var playerImageLinks = {
  'basic': root + 'images/goku/goku-basic.png',
  'blur': root + 'images/misc/instant-transmission.png',
  'attack': root + 'images/goku/goku-attack.png',
  'attack2': root + 'images/goku/goku-attack2.png',
  'attack3': root + 'images/goku/goku-attack3.png',
  'hurt': root + 'images/goku/goku-hurt.png',
  'block': root + 'images/goku/goku-block.png',
  'dodge': root + 'images/goku/goku-dodge.png',
  'blast': root + 'images/goku/goku-blast.png',
  'kick': root + 'images/goku/goku-kick.png',
  'hurt2': root + 'images/goku/goku-hurt2.png',
  'elbow': root + 'images/goku/goku-elbow.png',
  'finisher1': root + 'images/goku/goku-finisher1.png',
  'finisher2': root + 'images/goku/goku-finisher2.png',
  'finisher3': root + 'images/goku/goku-finisher3.png',
  'finisher4': root + 'images/goku/goku-finisher4.png',
  'finisher5': root + 'images/goku/goku-finisher5.png',
  'finisher6': root + 'images/goku/goku-finisher6.png',
  'finisher7': root + 'images/goku/goku-finisher7.png',
  'finisher8': root + 'images/goku/goku-finisher8.png',
  'finisher9': root + 'images/goku/goku-finisher9.png',
  'finisher10': root + 'images/goku/goku-finisher10.png',
  'finisher11': root + 'images/goku/goku-finisher11.png',
  'finisher12': root + 'images/goku/goku-finisher12.png',
  'finisher13': root + 'images/goku/goku-finisher13.png',
  'finisher14': root + 'images/goku/goku-finisher14.png',
  'finisher15': root + 'images/goku/goku-finisher15.png',
  'dead': root + 'images/goku/goku-dead.png'
}
var playerImages = {};

var enemyImageLinks = {
  'basic': root + 'images/frieza/frieza-basic.png',
  'blur': root + 'images/misc/instant-transmission.png',
  'attack': root + 'images/frieza/frieza-attack.png',
  'attack2': root + 'images/frieza/frieza-attack2.png',
  'attack3': root + 'images/frieza/frieza-attack3.png',
  'attack4': root + 'images/frieza/frieza-attack4.png',
  'hurt': root + 'images/frieza/frieza-hurt.png',
  'hurt2': root + 'images/frieza/frieza-hurt2.png',
  'dodge': root + 'images/frieza/frieza-dodge.png',
  'block': root + 'images/frieza/frieza-block.png',
  'whip1': root + 'images/frieza/frieza-whip1.png',
  'whip2': root + 'images/frieza/frieza-whip2.png',
  'whip3': root + 'images/frieza/frieza-whip3.png',
  'whip4': root + 'images/frieza/frieza-whip4.png',
  'whip5': root + 'images/frieza/frieza-whip5.png',
  'charge1': root + 'images/frieza/frieza-charge1.png',
  'charge2': root + 'images/frieza/frieza-charge2.png',
  'charge3': root + 'images/frieza/frieza-charge3.png',
  'dead': root + 'images/frieza/frieza-dead.png',
  'finisher1': root + 'images/frieza/frieza-finisher1.png',
  'finisher3': root + 'images/frieza/frieza-finisher3.png',
  'win': root + 'images/frieza/frieza-win.png'
}
var enemyImages = {};

var miscImageLinks = {
  'ki-image': root + 'images/misc/ki-blast.png',
  'km-image': root + 'images/misc/kamehameha1.png',
  'lazer-image': root + 'images/misc/ki-lazer.png',
  'db-image': root + 'images/misc/frieza-ball.png'
}

var miscImages = {};

//Move Animation
var playerAnimations = [attackAnimation, blockAnimation, blastAnimation, dodgeAnimation, finisherAnimation];
var enemyAnimations = [attackFailAnimation, blockFailAnimation, blastFailAnimation, dodgeFailAnimation, finisherFailAnimation];


// Load Images
function imageInit(obj, cName, target){
  var cycle = false;
  for (key in obj){
    if (cName == undefined || cycle == true){
          cName = key;
          cycle = true;
      }
     var newImg = new Image();
     newImg.src = obj[key];
     newImg.className = cName
     target[key] = newImg;
  }
}

imageInit(playerImageLinks, 'player-image', playerImages);
imageInit(enemyImageLinks, 'enemy-image', enemyImages);
imageInit(miscImageLinks, undefined, miscImages);



// Reset DOM elements
$('#enemyHealth').text(enemyHealth);
$('#playerHealth').text(playerHealth);
playerSpace.html(playerImages['basic']);
enemySpace.html(enemyImages['basic']);
kiSpace.html(miscImages['ki-image']);
lzSpace.html(miscImages['lazer-image']);
kmSpace.html(miscImages['kamehameha']);
dbSpace.html(miscImages['db']);

//Test Action
$('#testButton').click(function(){
 hideC();
})
function hideC(){
  if (tc) {
    $('.test-actions').hide();
    tc = false;
  } else {
    $('.test-actions').show();
    tc = true;
  }
}


$('.test-action').click(function(){
  var $this = $(this);
  var pl = $this.data('p');
  var act = $this.data('a');
  if (pl === 0) {
    playerAnimations[act]();
  } else {
    enemyAnimations[act]();
  }

})


function plImg(newImage){
  playerSpace.html(playerImages[newImage]);
  }

function enImg(newImage){
  enemySpace.html(enemyImages[newImage]);
  }

/*

---- Player Move Animations---

                              */


function attackAnimation(){
  plImg('blur');
  playerSpace.fadeOut( 100, function() {
    // Animation complete.
    playerSpace.fadeIn( 100, function() {
    // Animation complete
       plImg('attack');
       enImg('hurt');
       hitSound.play();
       playerSpace.css({ left: '55%', zIndex: 1});
       setTimeout(function(){
         positionReset();
       }, 400)
     });
  });
}


function blockAnimation(){  
  enImg('blur');
  enemySpace.fadeOut( 100, function() {
    // Animation complete.
    enemySpace.fadeIn( 100, function() {
    // Animation complete
       enImg('attack');
       plImg('block');
       blkSound.play();
       enemySpace.css({ right: '55%'});
       setTimeout(function(){
         enemySpace.css({ right: '45%'});
         enImg('hurt');
         playerSpace.css({ left: '25%'});
         plImg('attack2');
         hitSound.play();
         setTimeout(function(){
                positionReset();
         }, 500)   
       }, 500)
     });
  });
}

function blastAnimation(){
  bltSound.play();
  plImg('blast');
  kiSpace.css({display: 'initial'})
  kiSpace.animate({
    left: '60%'
  }, 200, function(){
    kiSpace.css({display: 'none'});
    enImg('hurt');
    setTimeout(function() {
      enImg('basic');
      plImg('basic');
      kiSpace.css({left: '30%'});
    }, 400);
  })

}


function dodgeAnimation(){
  enImg('blur');
  enemySpace.fadeOut(200, function() {
    enImg('attack3');
    $('.enemy-image').css({height: 120, width: 120});
    enemySpace.css({ right: '60%', zIndex: 1, height: 120, width: 120});
    enemySpace.fadeIn(200);
    plImg('blur');
    playerSpace.fadeOut(200, function(){
      tlp.play();
      playerSpace.css({ top: '0px'});
      playerSpace.fadeIn(200, function(){
      plImg('dodge');
      setTimeout(function() {
         plImg('attack3');
         enImg('hurt2');
         $('.enemy-image').css({height: 120, width: 120});
         enemySpace.css({ top: '50px'});
         hitSound.play();
         setTimeout(function() {
           //continue here
           positionReset();
         }, 500);
      }, 500);
      });
    })
  })
}


function finisherAnimation(){
  chSound.currentTime = 1.4;
  chSound.play();
  plImg('finisher1');
  setTimeout(function() {
    plImg('finisher2');
    setTimeout(function() {
      plImg('finisher3');
      setTimeout(function() {
        kmSound.currentTime = 1.5;
        kmSound.play();
        plImg('finisher4');
        setTimeout(function() {
          chSound.pause();
          plImg('finisher5');
          setTimeout(function() {
            plImg('finisher6');
            setTimeout(function() {
              plImg('finisher7');
              setTimeout(function() {
                plImg('finisher8');
                setTimeout(function() {
                  plImg('finisher9');
                  setTimeout(function() {
                    kmSpace.html(miscImages['km-image']);
                    kmSpace.css({display: 'initial'});
                    plImg('finisher10');
                    enImg('hurt');
                    kmSpace.fadeOut(1000)
                    setTimeout(function() {
                      plImg('finisher11');
                      enImg('dead');
                      message("You Win!");
                    }, 1000);
                  }, 1000);
                }, 300);
              }, 300);
            }, 300);
          }, 300);
        }, 300);
      }, 300);
    }, 300);
   }, 300);
}

/*

---- Enemy Move Animations---

                              */
function attackFailAnimation(){
  chSound.currentTime = 1.4;
  chSound.play();
  console.log('Attack Fail!');
  enImg('charge1');
  setTimeout(function() {
    enImg('charge2');
    setTimeout(function() {
      enImg('charge3');
      enemySpace.css({height: 150, width: 150, top: '-5px', zIndex: 1, right: '25%'});
      $('.enemy-image').css({height: 150, width: 150});
      setTimeout(function() {
        plImg('hurt');
        hitSound.play();
      }, 250);
      enemySpace.animate({
        right: '100%',
        opacity: 0
      }, 500, function(){
        chSound.pause();
        enemyReset();
        plImg('basic');
      })
    }, 200);  
  }, 200);
}
function blockFailAnimation(){
  plImg('blur');
  playerSpace.fadeOut(200, function(){
    blkSound.play();
    enImg('block');
    plImg('elbow');
    playerSpace.css({left: '55%'});
    playerSpace.fadeIn(200)
    setTimeout(function() {
      enImg('whip1');
      setTimeout(function() {
        enImg('whip2');
        setTimeout(function() {
          hitSound.play();
          plImg('hurt2');
          playerSpace.css({left: '50%'});
          enImg('whip3');
          setTimeout(function() { 
            enImg('whip4');
            setTimeout(function() {
            enImg('whip5');
            //continue here
            setTimeout(function() {
              playerReset();
              enImg('basic');
            }, 300);
            }, 100);
          }, 100);   
        }, 100);
      }, 100);  
    }, 500);
  })
}
function blastFailAnimation(){
  bltSound.play();
  enImg('attack4');
  plImg('hurt');
  lzSpace.css({display: 'initial'})
  lzSpace.html(miscImages['lazer-image']);
  lzSpace.fadeOut(1000, function(){
    enImg('basic');
    plImg('basic');
  })
}
function dodgeFailAnimation(){
  plImg('blur');
  playerSpace.fadeOut(100, function(){
    playerSpace.css({left: '60%'});
    playerSpace.fadeIn(100, function(){
      plImg('kick');
      tlp.play();
      enImg('blur');
      enemySpace.fadeOut(200, function(){
        enemySpace.css({right: '10%'});
        enImg('blur');
        enemySpace.fadeIn(200, function(){
          enImg('dodge');
          setTimeout(function() {
            enImg('attack2');
            enemySpace.css({right: '25%', zIndex: 1});
            plImg('hurt2');
            playerSpace.css({left: '50%'});
            hitSound.play();
            setTimeout(function() {
              positionReset();
            }, 500);
          }, 500);
        });
      });
    });
  })
 }


function finisherFailAnimation(){
  dbcSound.currentTime = 0;
  dbcSound.play();
  dbSpace.css({display: 'initial', right: '20%', top: '-80px', opacity: 1});
  dbSpace.html(miscImages['db-image']);
  $('.db-image').css({height: 10, width: 10, marginTop: '40px'});
  $('.db-image').animate({
    height: 100,
    width: 100,
    marginTop: 0
  }, 2200)
  enImg('finisher1');
  setTimeout(function() {
    dbcSound.pause();
    enImg('attack4');
    setTimeout(function() {
    enImg('finisher3');
        dbeSound.volume = 0.3;
          dbeSound.currentTime = 0.3;
      dbeSound.play();
    dbSpace.animate({
          right: '80%',
          top: '70px',
          opacity: 0
    }, 500)
    setTimeout(function() {
      plImg('hurt');
      setTimeout(function() {
        plImg('dead');
        enImg('win');
        message("You lose");
      }, 200);
    }, 250);
    }, 100);
  }, 2000);
}



  function animateLoop(index, end){
   if (index >= end) { 
     setTimeout(function() {
       demoSwitch(false);
       message("Your turn"); 
     }, 1000);
   return;}
  // do some checking on currentIndex
  let currentEl = $('[data-i=' + sequence[index] + ']');
  setTimeout(function(){
      audio[sequence[index]].currentTime = 0;
      audio[sequence[index]].play();
      flash(currentEl);
      animateLoop(index + 1, end)
  }, 500);
}

//Reset

function playerReset(){
    //Player
    plImg('blur');
    $('.player-image').css({width: 100, height: 100});
    playerSpace.fadeOut(100, function(){
      playerSpace.css({left: '20%', top: '30px', height: 100, width: 100, zIndex: 0});
      playerSpace.fadeIn(100, function(){
         plImg('basic');
      })
    })
}

function enemyReset(){
      //Enemy
    enImg('blur');
    $('.enemy-image').css({width: 100, height: 100});
    enemySpace.fadeOut(100, function(){
      enemySpace.css({right: '20%', top: '30px', zIndez: 0, opacity: 1, height: 100, width: 100});
      enemySpace.fadeIn(100, function(){
         enImg('basic');
      })
    })

}

function positionReset(){
  
   playerReset();
  
   enemyReset();
    }
  

function flash(element){
    element.animate({
    backgroundColor: '#0275d8!',
    color: 'white'
  }, 250, function() {
    // Animation complete.
    $(this).animate({
    backgroundColor: 'transparent',
    color: '#0275d8'
  }, 250, function(){
    $(this).css({backgroundColor: "", color: ""})
  })
  });
}

function flashGreen(element){
    element.animate({
    backgroundColor: 'green',
    opacity: 0
  }, 250, function() {
    // Animation complete.
    $(this).animate({
    backgroundColor: '#0275d8',
    opacity: 1

  }, 250, function(){
    $(this).css({backgroundColor: "", color: ""})
  })
  });
}

function flashRed(element){
    element.animate({
    backgroundColor: 'red',
    opacity: 0
  }, 500, function() {
    // Animation complete.
    $(this).animate({
    backgroundColor: '#0275d8',
    opacity: 1

  }, 500, function(){
    $(this).css({backgroundColor: "", color: ""})
  })
  });
}

// Game Mechanics


function generate(){
  message("Watch the sequence");
  gameOn = true;
  inputArray = [];
  inputCount = 0;
  $('#in-count').text(inputCount);
  $('#enemyHealth').html(enemyHealth);
  var newStep = choices[Math.floor(Math.random()*choices.length)]
  console.log('New Step:');
  console.log(newStep);
  sequence.push(newStep);
  //Animate
  setTimeout(function() {
    animateLoop(0, sequence.length);
  }, 500);
  

  console.log('All Steps:');
  console.log(sequence);
}


function demoSwitch(boo){
  if (boo){
    //setTimeout(function(){
      demo = true;
      $('.element').removeClass('player-turn');
      $('.element').addClass('demo-turn');
      $('#turn').text('Demo');
      console.log('switched to Demo');
  //},1000 );

  } else {
    //setTimeout(function(){
    demo = false;
      $('#turn').text('User');
      $('.element').removeClass('demo-turn');
      $('.element').addClass('player-turn');
      console.log('switched to User');
  //},(1000 * (sequence.length + 1)));
  }
}

//When user clicks a button
function userInput(clicked){
  if (demo){return;}
  if (gameOn == false){
    console.log('Press Start');
    return;
  }
  inputCount++;
  $('#in-count').text(inputCount);
  
  var input = clicked.data('i');
  console.log('New Input:');
  console.log(input);
  inputArray.push(input);
  audio[input].currentTime = 0;
  audio[input].play();
  console.log('All Inputs:');
  console.log(inputArray);
  if (check() === false){
    flashRed(clicked);
    message('Wrong!');
     enemyAnimations[input]();
      if (easy) {
      takeDamage(1); 
      } else {
      takeDamage(playerHealth);
      }
    } else if (check() === true){
      flashGreen(clicked);
      setTimeout(function() {
        hit(input);
        playerAnimations[input]();
      }, 500);

  } else {
    flashGreen(clicked);
      return;
    }
}

function check(){
  var lastSeq = sequence[inputCount-1];
  console.log('Last Seq: ' + lastSeq);
  var lastIn = inputArray[inputCount-1];
  console.log('Last Input: ' + lastIn);
  if  (lastSeq !== lastIn){
    //Incorrect Entry
    return false;
  } else if ( inputCount < sequence.length){
    return undefined;
  } else {
    return true;
  }
}

function reduceBar(whichBar, factor){
 if (whichBar == 'player') {
  var element = $('#playerHealthBar');
  var max = maxPlayerHealth;
  var currentHealth = element.data('p');
 } else {
  var element = $('#enemyHealthBar');
  var max = maxEenemyHealth;
  var currentHealth = element.data('p') ;
 }
 console.log('Current Health %: ' + currentHealth)
 var decrease = (100/max) * factor;
 console.log('Current Decrease %: ' + decrease)
 //element.attr('aria-valuenow', (currentHealth - decrease));
 element.data('p', (currentHealth - decrease))
 if ((currentHealth - decrease) < 40) {
   console.log('danger!');
   //element.removeClass('bg warning bg-success').addClass('bg-danger');
   element.addClass('bg-danger');  
 }
 element.animate({
    width: (currentHealth - decrease) + '%'
  }, 2000, function (){
    console.log('Remaing Health is: ' + (currentHealth - decrease))
    if (currentHealth - decrease < 1) {
      if (whichBar == 'player') {
        console.log('Which Bar: ' + whichBar)
        setTimeout(function() {
          finisherFailAnimation();
        }, 700);
        
      } else {
        console.log('Which Bar: ' + whichBar)
        setTimeout(function() {
          finisherAnimation();
        }, 700);
        
      }
      return setTimeout(function() {
        reset();
      }, 7000);
    }
  });
}

function reduceAnimation(element, percent){
    element.animate({
    width: percent + '%'
  }, 2000);

}


function hit(index){
  enemyHealth--;
  demoSwitch(true);
  message("Great!");
  reduceBar('enemy', 1);
  $('#enemyHealth').html(enemyHealth);
  console.log(moves[index]);
  if (enemyHealth === 0) {
    return;
  }
  
  setTimeout(function() {
    generate();
  }, 2000);
  
}


function takeDamage(damage){
  demoSwitch(true);
  playerHealth -= damage;
  reduceBar('player', damage);
  $('#playerHealth').text(playerHealth);
  if (playerHealth <= 0){
      console.log('You lose');
    return;
  }
  inputArray = [];
  inputCount = 0;
  $('#in-count').text(inputCount);
  console.log('Sequence: ');
  console.log(sequence);
  setTimeout(function() {
      message("Watch the sequence");
      animateLoop(0, sequence.length);
  }, 3000);
}

function reset(){
  message("Game Reset");
  positionReset();
  sequence = [];
  inputArray = [];
  enemyHealth = maxEenemyHealth;
  playerHealth = maxPlayerHealth;
  inputCount = 0;
  $('#enemyHealth').html(enemyHealth);
  $('#playerHealth').html(playerHealth);
  $('#playerHealthBar').data('p', 100).css('width', 100 +'%').removeClass('bg-danger');
  $('#enemyHealthBar').data('p', 100).css('width', 100 +'%').removeClass('bg-danger');
  $('#in-count').text(inputCount);
  $('#restart').text('Start')
  demoSwitch(true);
  gameOn = false;
  setTimeout(function() {
    message("Press Start");
  }, 2000);
}

$('#restart').click(function(){
  if (!gameOn) {
       gameOn = true;
       generate();
       $(this).text('Reset');
} else {
   reset();
}
})

$('#diff').click(function(){
  if (!easy) {
       easy = true;
    $('#mode').text('Easy');
    $('#toggle').html('<i class="fa fa-toggle-off fa-lg" aria-hidden="true"></i>');
    message("Easy Mode On");
} else {
    easy = false;
   $('#mode').text('Hard');
   $('#toggle').html('<i class="fa fa-toggle-on fa-lg" aria-hidden="true"></i>');
    message("Hard Mode On" +"<br>" +"One mistake = death");
}
})

function message(str){
  $('.game-message').html(str);
  setTimeout(function() {
    $('.game-message').html("");
  }, 3000);
}


//var item = items[Math.floor(Math.random()*items.length)];

$('.simon').click(function(){
  userInput($(this));
})




//End Ready
});
            
          
!
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