Final Commit

kunjgit · kunjgit · Jul 18, 2024 · Jul 8, 2024 · Jul 8, 2024 · Jul 8, 2024
commit b5e29d02af89a4b47b34a6196dfac861b232b794
diff --git a/Games/Blink_Beat/README.md b/Games/Blink_Beat/README.md
@@ -0,0 +1,8 @@
+
+# Blink Beat
+A web-based game inspired by the classic Simon game, built using HTML, CSS, and JavaScript.
+
+
+## Live Website
+
+https://github.com/Shantnu-singh/Blink-Beat
diff --git a/Games/Blink_Beat/Script.js b/Games/Blink_Beat/Script.js
@@ -0,0 +1,121 @@
+var colorOptions = ["red", "blue", "yellow", "green"];
+var gamePattern = [];
+var userChosenColor = [];
+var levelCount = 0;
+var started = false;
+
+// Generate the game sequence
+function gameSequence() {
+    userChosenColor = [];
+    levelCount++;
+    document.querySelector("#level-title").innerHTML = "Level " + levelCount;
+
+    var randomDigit = Math.floor(Math.random() * 4);
+    var newColor = colorOptions[randomDigit];
+    gamePattern.push(newColor);
+
+    $("." + newColor).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
+    playSound(newColor);
+}
+
+// Handle user click/touch events
+function handleUserClick(event) {
+    if (event.type === "touchstart") {
+        event.preventDefault();
+    }
+
+    var colorName = event.target.id;
+    userChosenColor.push(colorName);
+
+    playSound(colorName);
+    animatePress(colorName);
+
+    checkAnswer(userChosenColor.length - 1);
+}
+
+// Play sound for a given color
+function playSound(name) {
+    var audio = new Audio("sounds/" + name + ".mp3");
+    audio.play();
+}
+
+// Animate the button press
+function animatePress(name) {
+    $("#" + name).addClass("pressed");
+    setTimeout(function() {
+        $("#" + name).removeClass("pressed");
+    }, 100);
+}
+
+// Start the game
+function startGame(event) {
+    if (event.type === "touchstart") {
+        event.preventDefault();
+    }
+
+    if (!started) {
+        document.querySelector("#level-title").innerHTML = "Level " + (levelCount + 1);
+        gameSequence();
+        started = true;
+    }
+}
+
+// Check the user's answer
+function checkAnswer(currentLevel) {
+    if (gamePattern[currentLevel] === userChosenColor[currentLevel]) {
+        if (userChosenColor.length === gamePattern.length) {
+            setTimeout(function() {
+                gameSequence();
+            }, 1000);
+        }
+    } else {
+        document.querySelector("#level-title").innerHTML = "Game Over, Press Any Key or Touch the Screen to Restart";
+        document.querySelector("body").classList.add("game-over");
+        setTimeout(function() {
+            document.querySelector("body").classList.remove("game-over");
+        }, 200);
+        playSound("wrong");
+
+        // Set up the event listeners to restart the game
+        document.addEventListener("keydown", restartGameOnEvent, { once: true });
+        document.addEventListener("touchstart", restartGameOnEvent, { once: true });
+    }
+}
+
+// Restart the game
+function restartGameOnEvent(event) {
+    if (event.type === "touchstart") {
+        event.preventDefault();
+    }
+    restartTheGame();
+}
+
+function restartTheGame() {
+    levelCount = 0;
+    gamePattern = [];
+    started = false;
+
+    // Remove existing event listeners to avoid multiple bindings
+    document.removeEventListener("keydown", restartGameOnEvent);
+    document.removeEventListener("touchstart", restartGameOnEvent);
+
+    // Add event listeners to restart the game on key press or touch
+    document.addEventListener("keydown", startGame, { once: true });
+    document.addEventListener("touchstart", startGame, { once: true });
+}
+
+// Initial event listeners to start the game
+document.addEventListener("keydown", startGame, { once: true });
+document.addEventListener("touchstart", handleTouchStart, { once: true });
+
+// Handle touch start event to start the game
+function handleTouchStart(event) {
+    event.preventDefault();
+    startGame(event);
+}
+
+// Add event listeners to buttons
+document.querySelectorAll(".btn").forEach(button => {
+    button.addEventListener("click", handleUserClick);
+    button.addEventListener("touchstart", handleUserClick);
+});
diff --git a/Games/Blink_Beat/assets/images/Blibk_Beat_1.jpg b/Games/Blink_Beat/assets/images/Blibk_Beat_1.jpg
diff --git a/Games/Blink_Beat/assets/images/Blink_Beat.png b/Games/Blink_Beat/assets/images/Blink_Beat.png
diff --git a/Games/Blink_Beat/assets/images/Blink_Beat_2.jpg b/Games/Blink_Beat/assets/images/Blink_Beat_2.jpg
diff --git a/Games/Blink_Beat/assets/images/Blink_Beat_3.jpg b/Games/Blink_Beat/assets/images/Blink_Beat_3.jpg
diff --git a/Games/Blink_Beat/assets/sounds/blue.mp3 b/Games/Blink_Beat/assets/sounds/blue.mp3
diff --git a/Games/Blink_Beat/assets/sounds/green.mp3 b/Games/Blink_Beat/assets/sounds/green.mp3
diff --git a/Games/Blink_Beat/assets/sounds/red.mp3 b/Games/Blink_Beat/assets/sounds/red.mp3
diff --git a/Games/Blink_Beat/assets/sounds/wrong.mp3 b/Games/Blink_Beat/assets/sounds/wrong.mp3
diff --git a/Games/Blink_Beat/assets/sounds/yellow.mp3 b/Games/Blink_Beat/assets/sounds/yellow.mp3
diff --git a/Games/Blink_Beat/index.html b/Games/Blink_Beat/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Blink Beat</title>
+  <link rel="stylesheet" href="landing_style.css">
+  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="image-background">
+    <div class="overlay"></div>
+  </div>
+  <div class="container">
+    <h1 id="level-title">Blink Beat</h1>
+    <p class="description">Test your memory and reflexes with Blink Beat! Follow the pattern of lights and sounds, and repeat the sequence. See how long you can go without making a mistake!</p>
+      <a href="page.html" class="play-button">Play <i class="bi bi-play-fill"></i></a>
+  </div>
+</body>
+
+<script>
+  if (window.location.pathname !== '/index.html') {
+    window.location.href = '/index.html';
+  }
+</script>
+
+</html>
diff --git a/Games/Blink_Beat/landing_style.css b/Games/Blink_Beat/landing_style.css
@@ -0,0 +1,73 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Press Start 2P', cursive;
+  background-color: #011F3F;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('sounds/bg.png');
+  background-size: cover;
+  background-position: center;
+  filter: brightness(50%); /* Adjust the opacity of the background image */
+  z-index: -1;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(1, 31, 63, 0.7); /* Overlay color with opacity */
+}
+
+.container {
+  text-align: center;
+  color: #FEF2BF;
+  max-width: 600px; /* Constrain the width of the container */
+  padding: 20px; /* Add some padding for better spacing */
+}
+
+#level-title {
+  font-size: 3rem;
+  margin: 20px 0;
+}
+
+.description {
+  font-size: 1.5rem;
+  margin: 20px 0;
+  line-height: 1.5;
+}
+
+.play-button {
+  display: inline-block;
+  padding: 15px 30px;
+  font-size: 2rem;
+  color: #FEF2BF;
+  background-color: #FF5733; /* Red background color */
+  border: none;
+  border-radius: 10px;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+}
+
+.play-button i {
+  margin-left: 10px; /* Adjust icon position */
+}
+
+.play-button:hover {
+  background-color: #FF6347; /* Darker red on hover */
+}
diff --git a/Games/Blink_Beat/page.html b/Games/Blink_Beat/page.html
@@ -0,0 +1,41 @@
+<!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>
+  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
+<script src="Script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Blink_Beat/styles.css b/Games/Blink_Beat/styles.css
@@ -0,0 +1,87 @@
+body {
+  text-align: center;
+  background-color: #011F3F;
+}
+
+#level-title {
+  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;
+}
+
+/* Media Queries for responsiveness */
+@media (max-width: 768px) {
+  #level-title {
+    font-size: 2rem;
+    margin: 5%;
+  }
+
+  .container {
+    width: 80%;
+  }
+
+  .btn {
+    height: 150px;
+    width: 150px;
+    margin: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  #level-title {
+    font-size: 1.5rem;
+    margin: 5%;
+  }
+
+  .container {
+    width: 100%;
+  }
+
+  .btn {
+    height: 100px;
+    width: 100px;
+    margin: 10px;
+  }
+}