Simon Reborn Project

Vishal Prajapat/README.md

@@ -0,0 +1,22 @@
+# SIMON REBORN (Thankyou Shradha Ma'am)
+
+## About
+Simon Reborn is a modern remake of the classic Simon memory game. The game tests and trains the user's memory and challenges players to recall and repeat sequences. It's a logic-based, interactive project that showcases mastery in DOM manipulation, event handling, and game logic implementation using JavaScript.<br>
+
+## Unique Features
+-> **Mobile friendly** <br>
+-> The whole sequence is repeated every new level <br>
+-> It's crazy addictive <br> 
+
+## How to play
+-> Start the game by pressing any key if on computer or just click start if on mobile <br>
+-> Remember the complete pattern <br>
+-> Click the box/button in the same pattern  <br>
+-> That's it, **enjoy!** <br>
+
+## Technologies used 
+   1. HTML
+   2. CSS
+   3. JavaScript
+
+## Play here :- https://vishal621228.github.io/Simon-Says/  

Vishal Prajapat/app.js

@@ -0,0 +1,111 @@
+let gameSeq = [];
+let userSeq = [];
+
+let started = false;
+let level = 0;
+let highScore = 0;
+
+let h2 = document.querySelector("h2");
+let btns = document.querySelectorAll(".box");
+
+const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+let resp;
+let startBtn;
+if(isMobile) {
+    h2.innerText = "Click start button to start the game!";
+    resp = "touchstart";
+    startBtn = document.createElement("button");
+    startBtn.innerText = "Start";
+    startBtn.classList.add("startBtn");
+    let container  = document.querySelector(".container");
+    container.insertAdjacentElement("afterend", startBtn);
+    startBtn.addEventListener(resp, function() {
+        if(started == false) {
+            started = true;
+            levelUp();
+            startBtn.style.display = "none";
+        }
+    });
+} else {
+    resp = "click";
+    document.addEventListener("keypress", function() {
+        if(started == false) {
+            started = true;
+            levelUp();
+        }
+    });
+}
+
+
+function btnFlash(btn) {
+    btn.classList.add("flash");
+    setTimeout(function() {
+        btn.classList.remove("flash");
+    }, 250);
+}
+function randomBtn(btns) {
+    let num = Math.floor(Math.random()*4);
+    return btns[num];
+}
+function levelUp() {
+    level++;
+    h2.innerText = `Level ${level}`;
+    let randBtn = randomBtn(btns);
+    gameSeq.push(randBtn.classList[1]);
+
+    for(let i=0; i<gameSeq.length; i++) {
+        setTimeout(function() {
+            btnFlash(document.querySelector(`.${gameSeq[i]}`));
+        }, 500*(i+1))
+    }
+    userSeq = [];
+}
+
+for(let btn of btns) {
+    btn.addEventListener(resp, function(event) {
+        btnFlash(btn);
+        event.stopPropagation();
+        if(started == true) {
+            userSeq.push(btn.classList[1]);
+            let idx = userSeq.length - 1;
+            if(userSeq[idx] != gameSeq[idx]) {
+                h2.innerHTML = `Game Over! You reached Level ${level}! <br> Press any key to start again`;
+                started = false;
+                gameSeq = [];
+                userSeq = [];
+                if(isMobile) {
+                    startBtn.style.removeProperty("display");
+                    h2.innerHTML = `Game Over! You reached Level <b>${level}!<b> <br> Press start to play again`;
+                }
+                document.querySelector("body").style.background = "red";
+                setTimeout(function() {
+                    document.querySelector("body").style.background = "linear-gradient(90deg, #5AE2DD, #26D7D1, #90EBE8)";
+                }, 100);
+                if(level > highScore) {
+                    highScore = level;
+                    document.querySelector("p").innerHTML = `<b>HIGH SCORE: ${highScore}<b>`;
+                    alert(`Congratulations! You set a new High score: ${highScore}. Play again to beat it!`);
+                }
+
+                level = 0;
+                return;
+            }
+            if(userSeq.length === gameSeq.length) {
+                setTimeout(levelUp, 250);
+            }
+        }
+    });
+}
+
+//prevent double taps
+let lastTap = 0;
+
+for (let btn of btns) {
+    btn.addEventListener('touchend', function(e) {
+        const now = Date.now();
+        if (now - lastTap < 350) {
+            e.preventDefault(); // Prevent double-tap zoom
+        }
+        lastTap = now;
+    });
+}

Vishal Prajapat/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Simon Reborn</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Vishal Says</h1>
+    <h2>Press any key to start the game</h2>
+    <p><b>Good Luck!</b></p>
+    <div class="container">
+        <div class="sub">
+            <div class="box yellow"></div>
+            <div class="box green"></div>
+        </div>
+        <div class="sub">
+            <div class="box red"></div>
+            <div class="box purple"></div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>

Vishal Prajapat/style.css

@@ -0,0 +1,54 @@
+body {
+    text-align: center;
+    background: linear-gradient(90deg, #5AE2DD, #26D7D1, #90EBE8);
+}
+.container {
+    justify-self: center;
+    display: flex;
+    /* width: 70vw;
+    height: 70vw; */
+    flex-wrap: wrap;
+    justify-content: center;
+}
+.box {
+    height: 20vw;
+    width: 20vw;
+    border-radius: 20%;
+    border: 5px solid black;
+    margin: 3vw;
+    touch-action: manipulation;
+}
+
+.yellow {
+    background-color: yellow;
+}
+.green {
+    background-color: green;
+}
+.red {
+    background-color: red;
+}
+.purple {
+    background-color: purple;
+}
+.flash {
+    background-color: white;
+}
+
+.startBtn {
+    background-color: deepskyblue;
+    border-radius: 10px;
+    font-weight: 700;
+    font-size: 1.8em;
+    border: 2px solid black;
+    margin-top: 20px;
+    color: black;
+
+}
+
+@media (min-width: 750px) {
+    .box {
+        width: 150px;
+        height: 150px;
+    }
+}