sankalpsingha/simongame.html

## simongame.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Game</title>
    <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      width: 100%;
      height: 100vh;
      background-image: url("http://i.imgur.com/1MycyuK.png");
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
          flex-direction: column;
    }
    .game-button{
      margin-top: -150px;
      padding: 30px;
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .button{
      max-width: 45%;
      padding: 50px;
      margin: 20px;
      border: 0;
      border-radius: 60px;
      box-shadow: 3px 5px 10px #333;
      transition: all 0.5s ease;
      outline: 0;
    }
    .active {
      transform: scale(1.2);
      border: 2px solid #fff;
      z-index: 10;
    }
    .two-button{
      display: flex;
    }
    .button-1{
      background-color: #9F0F17;
    }
    .button-2{
      background-color: #094A8F;
    }
    .button-3{
      background-color: #CCA707;
    }
    .button-4{
      background-color: #00A74A;
    }
    .manage-game > button{
      width: 100px;
      height: 40px;
      color: white;
      margin: 0 10px;
      background-color: purple;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      box-shadow: 2px 3px 5px #333;
      border: 0;
      border-radius: 50px;
    }

    </style>
  </head>
  <body>
    <strong>The current level is: <span id="currentLevel"></span></strong>

    <div class="container">
      <div class="game-button">
        <div class="two-button">
          <div class="button button-1" id="1" data-key="1">

          </div>
          <div class="button button-2" id="2" data-key="2">

          </div>
        </div>
      <div class="two-button">
        <div class="button button-3" id="3" data-key="3">

        </div>
        <div class="button button-4" id="4" data-key="4">

        </div>
      </div>
      <audio data-key="1" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
     <audio data-key="2" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
     <audio data-key="3" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
     <audio data-key="4" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
      </div>
      <div class="manage-game">
        <button type="button" name="button" id="start">start</button>
        <button type="button" name="button" id="strict">strict</button>
        <button type="button" name="button" id="onOrOff">On</button>
        <button type="button" name="button" id="myscore"> My Score</button>
      </div>
    </div>

    <script src="/bower_components/jquery/dist/jquery.js"></script>

    <script type="text/javascript">

    // Let us create a game object.
    var game = {
      levelCount: 0,
      currentGame: [],
      player: [],
      sound: {
       a: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'),
       b: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'),
       c: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3'),
       d: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')
     },
     strict: false
    }

    function newGame(){
      clearGame();
    }

    function clearGame(){
      game.levelCount = 0;
      game.currentGame = [];
      // Let us increase the game level count to 1.
      increaseLevel();
    }

    function increaseLevel(){
      var currentLevel = ++game.levelCount;
      $('#currentLevel').text(currentLevel);
      generateRandom();
    }

    function generateRandom(){
        game.currentGame.push(Math.floor(Math.random() * (4)) + 1);
        showMoves();
    }

    function showMoves(){
      // Let us show the moves to the user.
      console.log('The moves of the current Game: ',game.currentGame);
      var i = 0;
      var moves = setInterval(function(){
        playMove(game.currentGame[i]);
        i++;
        if(i >= game.currentGame.length){
          clearInterval(moves);
        }
      }, 600);
      // Clearing the past moves of the user.
      clearPlayer();
    }

    function playMove(val){
      $(`#${val}`).addClass('active');
      playSound(val);
      setTimeout(function(){
        $(`#${val}`).removeClass('active');
      }, 300);
    }

    function playSound(val){
      switch (val) {
        case 1:
          game.sound.a.play();
        case 2:
          game.sound.b.play();
        case 3:
          game.sound.c.play();
        case 4:
          game.sound.d.play();
        default:
          console.log('NO SOUND FOUND FOR THIS');
      }
    }
    function clearPlayer(){
      game.player = [];
    }

    $('#start').on('click', function(e){
      e.preventDefault();
      newGame();
    });

    function addToPlayer(val){
      // Pushing the value of the input into the player array.
      game.player.push(val);
      console.log('The current value of the player array: ', game.player);
      playerTurn(val);
    }

    function nextLevel(){
      increaseLevel();
    }

    function playerTurn(val){
      if(game.player[game.player.length - 1] !== game.currentGame[game.player.length - 1]){
        if(game.strict){
          alert('Strict mode on.. Start Again!');
          newGame();
        }else{
          alert('Sorry wrong move! Try again');
          showMoves();
        }
      } else {
        console.log('Correct move...');
        playSound(val);
        if(game.player.length === game.currentGame.length){
          if(game.levelCount === 20){
            alert('You Win!!');
          }else {
            nextLevel();
          }
        }
      }
    }

    // What will happen when we click on the respective buttons?
    $('#1').on('click', function(e){
      e.preventDefault();
      $(this).addClass('active');
      setTimeout(function(){
        $('#1').removeClass('active');
      }, 300);
      addToPlayer(1);
    });

    $('#2').on('click', function(e){
      e.preventDefault();
      $(this).addClass('active');
      setTimeout(function(){
        $('#2').removeClass('active');
      }, 300);
      addToPlayer(2);
    });

    $('#3').on('click', function(e){
      e.preventDefault();
      $(this).addClass('active');
      setTimeout(function(){
        $('#3').removeClass('active');
      }, 300);
      addToPlayer(3);
    });

    $('#4').on('click', function(e){
      e.preventDefault();
      $(this).addClass('active');
      setTimeout(function(){
        $('#4').removeClass('active');
      }, 300);
      addToPlayer(4);
    });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Simon Game</title>
	<style media="screen">
	*{
	margin: 0;
	padding: 0;
	}
	.container{
	width: 100%;
	height: 100vh;
	background-image: url("http://i.imgur.com/1MycyuK.png");
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}
	.game-button{
	margin-top: -150px;
	padding: 30px;
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	}
	.button{
	max-width: 45%;
	padding: 50px;
	margin: 20px;
	border: 0;
	border-radius: 60px;
	box-shadow: 3px 5px 10px #333;
	transition: all 0.5s ease;
	outline: 0;
	}
	.active {
	transform: scale(1.2);
	border: 2px solid #fff;
	z-index: 10;
	}
	.two-button{
	display: flex;
	}
	.button-1{
	background-color: #9F0F17;
	}
	.button-2{
	background-color: #094A8F;
	}
	.button-3{
	background-color: #CCA707;
	}
	.button-4{
	background-color: #00A74A;
	}
	.manage-game > button{
	width: 100px;
	height: 40px;
	color: white;
	margin: 0 10px;
	background-color: purple;
	text-align: center;
	line-height: 40px;
	font-size: 20px;
	box-shadow: 2px 3px 5px #333;
	border: 0;
	border-radius: 50px;
	}

	</style>
	</head>
	<body>
	<strong>The current level is: <span id="currentLevel"></span></strong>

	<div class="container">
	<div class="game-button">
	<div class="two-button">
	<div class="button button-1" id="1" data-key="1">

	</div>
	<div class="button button-2" id="2" data-key="2">

	</div>
	</div>
	<div class="two-button">
	<div class="button button-3" id="3" data-key="3">

	</div>
	<div class="button button-4" id="4" data-key="4">

	</div>
	</div>
	<audio data-key="1" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
	<audio data-key="2" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
	<audio data-key="3" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
	<audio data-key="4" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
	</div>
	<div class="manage-game">
	<button type="button" name="button" id="start">start</button>
	<button type="button" name="button" id="strict">strict</button>
	<button type="button" name="button" id="onOrOff">On</button>
	<button type="button" name="button" id="myscore"> My Score</button>
	</div>
	</div>

	<script src="/bower_components/jquery/dist/jquery.js"></script>

	<script type="text/javascript">

	// Let us create a game object.
	var game = {
	levelCount: 0,
	currentGame: [],
	player: [],
	sound: {
	a: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'),
	b: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'),
	c: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3'),
	d: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')
	},
	strict: false
	}

	function newGame(){
	clearGame();
	}

	function clearGame(){
	game.levelCount = 0;
	game.currentGame = [];
	// Let us increase the game level count to 1.
	increaseLevel();
	}

	function increaseLevel(){
	var currentLevel = ++game.levelCount;
	$('#currentLevel').text(currentLevel);
	generateRandom();
	}

	function generateRandom(){
	game.currentGame.push(Math.floor(Math.random() * (4)) + 1);
	showMoves();
	}

	function showMoves(){
	// Let us show the moves to the user.
	console.log('The moves of the current Game: ',game.currentGame);
	var i = 0;
	var moves = setInterval(function(){
	playMove(game.currentGame[i]);
	i++;
	if(i >= game.currentGame.length){
	clearInterval(moves);
	}
	}, 600);
	// Clearing the past moves of the user.
	clearPlayer();
	}

	function playMove(val){
	$(`#${val}`).addClass('active');
	playSound(val);
	setTimeout(function(){
	$(`#${val}`).removeClass('active');
	}, 300);
	}

	function playSound(val){
	switch (val) {
	case 1:
	game.sound.a.play();
	case 2:
	game.sound.b.play();
	case 3:
	game.sound.c.play();
	case 4:
	game.sound.d.play();
	default:
	console.log('NO SOUND FOUND FOR THIS');
	}
	}
	function clearPlayer(){
	game.player = [];
	}

	$('#start').on('click', function(e){
	e.preventDefault();
	newGame();
	});

	function addToPlayer(val){
	// Pushing the value of the input into the player array.
	game.player.push(val);
	console.log('The current value of the player array: ', game.player);
	playerTurn(val);
	}

	function nextLevel(){
	increaseLevel();
	}

	function playerTurn(val){
	if(game.player[game.player.length - 1] !== game.currentGame[game.player.length - 1]){
	if(game.strict){
	alert('Strict mode on.. Start Again!');
	newGame();
	}else{
	alert('Sorry wrong move! Try again');
	showMoves();
	}
	} else {
	console.log('Correct move...');
	playSound(val);
	if(game.player.length === game.currentGame.length){
	if(game.levelCount === 20){
	alert('You Win!!');
	}else {
	nextLevel();
	}
	}
	}
	}

	// What will happen when we click on the respective buttons?
	$('#1').on('click', function(e){
	e.preventDefault();
	$(this).addClass('active');
	setTimeout(function(){
	$('#1').removeClass('active');
	}, 300);
	addToPlayer(1);
	});

	$('#2').on('click', function(e){
	e.preventDefault();
	$(this).addClass('active');
	setTimeout(function(){
	$('#2').removeClass('active');
	}, 300);
	addToPlayer(2);
	});

	$('#3').on('click', function(e){
	e.preventDefault();
	$(this).addClass('active');
	setTimeout(function(){
	$('#3').removeClass('active');
	}, 300);
	addToPlayer(3);
	});

	$('#4').on('click', function(e){
	e.preventDefault();
	$(this).addClass('active');
	setTimeout(function(){
	$('#4').removeClass('active');
	}, 300);
	addToPlayer(4);
	});

	</script>
	</body>
	</html>