Created
May 16, 2017 09:20
-
-
Save sankalpsingha/ca034ec7204b4be991f2adfe60b5b350 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment