Merge branch 'main' into readme

Games/Avoider_Game/app.js

@@ -69,11 +69,12 @@ function startGame() {
 
 function loop() {
     let stopGame = false;
-
+    // adjust the screen size Logic
+    let cellsCalculate=window.innerWidth<600?6:8
     for (let i = enemyCells.length - 1; i >= 0; i--) {
         // From 29 till it reaches 0
         const cell = enemyCells[i];
-        const nextCell = cells[i + 8];
+        const nextCell = cells[i + cellsCalculate];
         const enemy = cell.children[0];
 
         // Continue and move on

Games/Avoider_Game/style.css

@@ -21,6 +21,7 @@ body {
   width: 90vh;
   background-color: rgba(20, 198, 243, 0.25);
   padding: 2%;
+  max-width: 700px;
   border-radius: 10%;
   box-shadow: 0 0 50px 0 rgba(20, 198, 243, 0.3);
 }
@@ -116,4 +117,9 @@ hr {
 
 .author a:hover {
   text-decoration: underline;
+}
+@media (max-width:600px) {
+  .container{width:95% !important;}
+  .grid{grid-template-columns: repeat(6, 40px) !important;}
+  .cell{height:40px !important;}
 }

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

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);
+});

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>

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 */
+}

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>

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;
+  }
+}