Simon Game

index.html

<div class="container">
  <div class="row">
    <div class="col col-md-6 offset-md-3">
      <header>
      <div class="head float-none text-center"><h1>Simon Game</h1></div>
      <div class="settings float-left">
        <a id="start-btn" class="btn btn-sm btn-info">Start</a>
        <a id="strict-toggle" class="btn btn-sm btn-dark">Strict</a>
        </div>
      <div class="level float-right"><span class="curr-level">0</span>/20</div>
      </header>
      <div class="game-field text-center">
        <div id="auds">
        <audio id="audio-first" loop>
	        <source id="first" src="https://raw.githubusercontent.com/NJM8/sounds/master/simonSound1updated.mp3"/>
        </audio>
        <audio id="audio-second" loop>
	        <source id="second" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"/>
        </audio>
        <audio id="audio-third" loop>
	        <source id="third" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"/>
        </audio>
        <audio id="audio-fourth" loop>
	        <source id="fourth" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"/>
        </audio>
        </div>
        <table id="game-btns">
          <tr>
            <td><div id="c1" value="1" class="colors"></div></td>
            <td><div id="c2" value="2" class="colors"></div></td>
          </tr>
          <tr>
            <td><div id="c3" value="3" class="colors"></div></td>
            <td><div id="c4" value="4" class="colors"></div></td>
          </tr>
        </table>
      </div>
      <footer><hr><h6 class="text-center">Ali Emir Sen</h6></footer>
    </div>
  </div>
</div>

script.js

var game = {
  userInput: 0,
  gameArray: [],
  userInputLevel: 0,
  gameLevel: 0,
  allowUserInput: false,
  strict: false,
  colors: ['#c1','#c2','#c3','#c4'],
  sound:{
    green: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'), 
    red: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'), 
    yellow: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3'), 
    blue: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')
  },
};

var gameOver = function(){
  $(".head h1").text("Game Over :(");
  game.allowUserInput = false;
}
var clickAnimation = function(id){
  $(game.colors[id-1]).animate({opacity:'0.3'},350,function(){
    $(game.colors[id-1]).animate({opacity:'1.0'},350);
  });
}
var showMove = function(){
  var sh_moves = 0;
  var mov = setInterval(showMoves,1000);
  function showMoves(){
    if(sh_moves < game.gameLevel){
      clickAnimation(game.gameArray[sh_moves]);
      sh_moves++;
    } else if(sh_moves == game.gameLevel){
      clearInterval(mov);
      game.allowUserInput = true;
    }
  }
};
var clearUserI = function(){
  game.userInputLevel = 0;
  game.allowUserInput = false;
};
var updateLevel = function(){
  $(".curr-level").text(game.gameLevel);
}
var goGame = function(){
  clearUserI();
  game.gameLevel++;
  updateLevel();
  game.gameArray.push(((Math.floor((Math.random()*1000)+1))%4)+1);
  showMove();
};
var startGame = function(){
  $("#start-btn").html("Reset");
  goGame();
};
var resetGame = function(){
  $("#start-btn").html("Start");
  $(".head h1").text("Simon Game");
  game.gameArray = [];
  game.gameLevel = 0;
};
var gameWin = function(){
  game.allowUserInput = false;
  $(".head h1").text("You Win !!!");
}
var toggleStrict = function(){
  if(game.strict){
    game.strict = false;
    $("#strict-toggle").removeClass('btn-warning');
    $("#strict-toggle").addClass('btn-dark');
  } else {
    game.strict = true;
    $("#strict-toggle").removeClass('btn-dark');
    $("#strict-toggle").addClass('btn-warning');
  }
};
var userInputCheck = function(){  
  if(game.gameArray[game.userInputLevel] === game.userInput){
    game.userInputLevel++;
    if(game.userInputLevel == 20){
      gameWin();
      return true;
    }
    if(game.userInputLevel == game.gameLevel){
      goGame();
    }
      
  } else {
    if(game.strict)
      gameOver();
    else{
      if(game.gameLevel > 1){
        game.gameLevel--;
        console.log('here');
        goGame();
      } else {
        gameOver();
      }
    }
  }
};
var colorClick = function(id){
  return function(){
    if(true){
      clickAnimation(id);
      game.userInput = id;
      $(document).trigger('input_check');
    }
  };
};
$(document).ready(function(){
  $("#start-btn").on('click',function(){
    ($("#start-btn").text() == "Start") ? startGame() : resetGame();
  });
  $("#strict-toggle").on('click',toggleStrict);
  $(document).bind('input_check',userInputCheck);
  for(var i = 1;i<5;i++){
    $("#c"+i).on("click",colorClick(i));
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

simon-game.markdown

Simon Game

A Pen by ali emir on CodePen.

License.

style.css

@import url('https://fonts.googleapis.com/css?family=Pacifico');
body{
    background-color: #FAFAFA;
}
footer {
  padding-top: 2%;
}
footer h6 {
  margin-bottom: 10%;
}
.container {
  margin-top: 10%;
}
.head { 
  font-family: 'Pacifico', cursive;
  padding-bottom: 2%;
}
.settings {
  
}
.level {
  margin-right: 1%;
  font-weight: 500;
}
.btn {
  color: #fff !important;
}
.game-field {
  padding-top: 13%;
  margin-left: auto;
  margin-right: auto;
}
table {
  width: 100%;
}
td {
  width: 50%;
  position: relative;
  border: 2px solid #37474F;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}
td .colors {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#c1 {
  background-color:#43A047;
}
#c2 {
  background-color:#E53935;
}
#c3 {
  background-color:#FBC02D;
}
#c4 {
  background-color:#039BE5;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />