diff --git a/Vishal Prajapat/README.md b/Vishal Prajapat/README.md new file mode 100644 index 00000000..be6cbb10 --- /dev/null +++ b/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.
+ +## Unique Features +-> **Mobile friendly**
+-> The whole sequence is repeated every new level
+-> It's crazy addictive
+ +## How to play +-> Start the game by pressing any key if on computer or just click start if on mobile
+-> Remember the complete pattern
+-> Click the box/button in the same pattern
+-> That's it, **enjoy!**
+ +## Technologies used + 1. HTML + 2. CSS + 3. JavaScript + +## Play here :- https://vishal621228.github.io/Simon-Says/ diff --git a/Vishal Prajapat/app.js b/Vishal Prajapat/app.js new file mode 100644 index 00000000..d8a37dc9 --- /dev/null +++ b/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 Press any key to start again`; + started = false; + gameSeq = []; + userSeq = []; + if(isMobile) { + startBtn.style.removeProperty("display"); + h2.innerHTML = `Game Over! You reached Level ${level}!
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 = `HIGH SCORE: ${highScore}`; + 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; + }); +} diff --git a/Vishal Prajapat/index.html b/Vishal Prajapat/index.html new file mode 100644 index 00000000..0cd10f85 --- /dev/null +++ b/Vishal Prajapat/index.html @@ -0,0 +1,26 @@ + + + + + + Simon Reborn + + + +

Vishal Says

+

Press any key to start the game

+

Good Luck!

+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Vishal Prajapat/style.css b/Vishal Prajapat/style.css new file mode 100644 index 00000000..9e5445d3 --- /dev/null +++ b/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; + } +} \ No newline at end of file