Skip to content

Add Simon Game project by Tanmita Roy #37

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add Simon Game project by Tanmita Roy #37

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c5cf73
Add Simon Game project by Tanmita Roy
Tr1120 Apr 24, 2025
ffbb861
Changed the file structure
Tr1120 Apr 25, 2025
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
6 changes: 6 additions & 0 deletions simon-game/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Simon Game 🎮

A memory game made using HTML, CSS, Bootstrap5, JavaScript, and jQuery.

## Demo
[Live Version](https://tr1120.github.io/SimonGame/)
10 changes: 10 additions & 0 deletions simon-game/SimonGame-main/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# SimonGame
A simple visualising memory game build using HTML, CSS, JS and Jquery.

HighScore will be maintained until you refresh the page

Play with your friends to compete and win.

Website deployed at: https://tr1120.github.io/SimonGame/

[Modified website with modern ui/ux coming soon]
42 changes: 42 additions & 0 deletions simon-game/SimonGame-main/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>Simon</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>

<body>
<h1 id="level-title">Press A Key to Start</h1>
<div class="container">
<div lass="row">

<div type="button" id="green" class="btn green">

</div>

<div type="button" id="red" class="btn red">

</div>
</div>

<div class="row">

<div type="button" id="yellow" class="btn yellow">

</div>
<div type="button" id="blue" class="btn blue">

</div>

</div>
</div>
<h1 id="hs">HighScore: 0</h1>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="index.js" charset="utf-8"></script>

</body>

</html>
92 changes: 92 additions & 0 deletions simon-game/SimonGame-main/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
var gamePattern = [];
var userClickedPattern= [];
var highScore=0;
var buttonColours =["red", "blue", "green", "yellow"];

var started= false;
var level=0;

$(document).keydown(function(){
if(!started){
$("#level-title").text("Level " + level);
nextSequence();
started=true;
}
});

$(".btn").click(function (){

var userChosenColour= $(this).attr("id");
userClickedPattern.push(userChosenColour);

playSound(userChosenColour);
animatePress(userChosenColour);
checkAnswer(userClickedPattern.length-1);
});

function checkAnswer(currentLevel){

if (gamePattern[currentLevel] === userClickedPattern[currentLevel]){
if(userClickedPattern.length=== gamePattern.length){
setTimeout(function () {
nextSequence();
}, 1000);
if(highScore<level){
highScore=level;
$("#hs").text("HighScore: "+highScore);
}

}
}
else {
playSound("wrong");
$("body").addClass("game-over");
$("#level-title").text("Game Over, Press Any Key to Restart");

setTimeout(function () {
$("body").removeClass("game-over");
}, 200);

startOver();
}


}



function nextSequence(){
userClickedPattern = [];
level++;
$("#level-title").text("Level "+level);


var randomnumber= Math.floor(Math.random()*4);
var randomChosenColour= buttonColours[randomnumber];
gamePattern.push(randomChosenColour);

$("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
playSound(randomChosenColour);


}

function playSound(name){

var audio= new Audio("sounds/"+name+".mp3");
audio.play();


}
function animatePress(currentColour){
$("#"+currentColour).addClass("pressed");
setTimeout(function () {
$("#"+currentColour).removeClass("pressed");}, 100);
}


function startOver(){
level=0;
gamePattern= [];
started= false;
}
Binary file added simon-game/SimonGame-main/sounds/blue.mp3
View file
Open in desktop
Binary file not shown.
Binary file added simon-game/SimonGame-main/sounds/green.mp3
View file
Open in desktop
Binary file not shown.
Binary file added simon-game/SimonGame-main/sounds/red.mp3
View file
Open in desktop
Binary file not shown.
Binary file added simon-game/SimonGame-main/sounds/wrong.mp3
View file
Open in desktop
Binary file not shown.
Binary file added simon-game/SimonGame-main/sounds/yellow.mp3
View file
Open in desktop
Binary file not shown.
53 changes: 53 additions & 0 deletions simon-game/SimonGame-main/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
body {
text-align: center;
background-color: #011F3F;
}

#level-title, #hs {
font-family: 'Press Start 2P', cursive;
font-size: 3rem;
margin: 5%;
color: #FEF2BF;
}

.container {
display: block;
width: 50%;
margin: auto;

}

.btn {
margin: 25px;
display: inline-block;
height: 200px;
width: 200px;
border: 10px solid black;
border-radius: 20%;
}

.game-over {
background-color: red;
opacity: 0.8;
}

.red {
background-color: red;
}

.green {
background-color: green;
}

.blue {
background-color: blue;
}

.yellow {
background-color: yellow;
}

.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}