Skip to content

Added Fronted project - Simon_Game #338

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 23, 2023
Merged

Added Fronted project - Simon_Game #338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b2ad2ec
added fronted project
IshitaPathak Oct 23, 2023
cf9676e
removing submodule simon_game
IshitaPathak Oct 23, 2023
aad5746
simon_game
IshitaPathak Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions Fronted Projects/Simon_Game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simon_Game</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Rubik+Vinyl&family=Secular+One&display=swap" rel="stylesheet">
</head>
<body>
<h1>Press any key to Start</h1>
<div class="container">
<button id="red" class="container1 btn"></button>
<button id="yellow" class="container2 btn"></button>
<button id="green" class="container3 btn"></button>
<button id="blue" class="container4 btn"></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
112 changes: 112 additions & 0 deletions Fronted Projects/Simon_Game/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@

var colors = ["blue", "red", "yellow", "green"]
var gamePattern = []
var userClickPattern = []
var start = false
var levelNumber = 1

//This function genetrates random color and push that random color in array gamePattern
function colorGenerator() {
var randomNumber = Math.floor(Math.random() * 4)
var randomColor = colors[randomNumber]
gamePattern.push(randomColor)
// console.log(gamePattern)
}


$(document).on("keypress", function () {
if (!start) {
colorGenerator()
showGamePattern()
$("h1").text("Level-" + levelNumber)
start = true
// console.log(gamePattern)
}
})


for (var i = 0; i < 4; i++)
document.querySelectorAll(".btn")[i].addEventListener("click", function (event) {
if (start) {
var userClickButtonColor = event.target.id
userClickPattern.push(userClickButtonColor)
// console.log(userClickPattern)

animation(userClickButtonColor)
createSound(userClickButtonColor)

if (sublist() && userClickPattern.length == gamePattern.length) {
levelNumber++
userClickPattern = []
colorGenerator()
showGamePattern()
$("h1").text("Level-" + levelNumber)
console.log(gamePattern)
}
else if (!sublist()) {
gameOver()
}
}
})


// for animation when button is clicked
function animation(color) {
$("#" + color).addClass("animate")

setTimeout(function () {
$("#" + color).removeClass("animate")
}, 90)
}

function createSound(color) {
var audio = new Audio("sound/sounds_" + color + ".mp3")
audio.play()
}


function showGamePattern() {
var i = 0;
var pattern = setInterval(thisFunction, 1200)

function thisFunction() {
if (i < gamePattern.length) {
var currentColor = gamePattern[i]
animation(currentColor)
createSound(currentColor)
i++
}
else {
clearInterval(pattern)
}
}
}

function sublist() {
for (var n = 0; n < userClickPattern.length; n++) {
if (userClickPattern[n] != gamePattern[n])
return false
}

return true

}

function gameOver() {
levelNumber = 1
userClickPattern = []
gamePattern = []
start = false

$("body").addClass("out")
$("h1").text("GAME OVER!🙁")

setTimeout(function () {
$("body").removeClass("out")
$("h1").text("Press any key to restart")
}, 1000)


var audio = new Audio("sound/game_over.mp3")
audio.play()
}
Binary file added Fronted Projects/Simon_Game/sound/game_over.mp3
View file
Open in desktop
Binary file not shown.
Binary file added Fronted Projects/Simon_Game/sound/sounds_blue.mp3
View file
Open in desktop
Binary file not shown.
Binary file added Fronted Projects/Simon_Game/sound/sounds_green.mp3
View file
Open in desktop
Binary file not shown.
Binary file added Fronted Projects/Simon_Game/sound/sounds_red.mp3
View file
Open in desktop
Binary file not shown.
Binary file added Fronted Projects/Simon_Game/sound/sounds_yellow.mp3
View file
Open in desktop
Binary file not shown.
49 changes: 49 additions & 0 deletions Fronted Projects/Simon_Game/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
body {
background-color: #263159;
}
h1{
text-align:center;
color:beige;
font-size:5rem;
font-family: 'Secular One', sans-serif;
}
.container{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
.container1,.container2,.container3,.container4 {
padding: 45px;
margin: 17px;
display: inline-block;
border: solid bold;
border-radius: 15%;
border-color: rgb(19, 18, 18);
width: 200px;
height: 200px;
border-width:10px;
}
.container1{
background-color: red;
cursor: pointer;
}
.container2{
background-color:#FFBF00;
cursor: pointer;
}
.container3{
background-color: #54B435;
cursor: pointer;
}
.container4{
background-color: #2192FF;
cursor: pointer;
}
.animate{
box-shadow:0 0 15px white;
background-color:rgb(24, 18, 18);
}
.out{
background-color: rgb(131, 34, 34);
}