Created a game

CodeBeginner000001 · Jun 4, 2024 · 9ebe033 · 9ebe033
commit 9ebe033
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 0 deletions.
diff --git a/Screenshot 2024-06-05 at 12.24.40 AM.png b/Screenshot 2024-06-05 at 12.24.40 AM.png
diff --git a/app.js b/app.js
@@ -0,0 +1,92 @@
+let button = ["button-1", "button-2", "button-3", "button-4"];
+let gameseq = [];
+let userseq = [];
+let level = 0;
+let count = 0;
+let starter = false;
+let h2 = document.querySelector("h2");
+document.addEventListener("keypress", function (event) {
+    if (!starter) {
+        console.log("Game Started...");
+        starter = true;
+    }
+    if (event.code == "Enter") count++;
+    // console.log(event.code);
+    if (count<2) {
+        levelup();
+    }
+});
+let maxScore = 0;
+
+// creating a flash for a button
+function gameflash(btn) {
+    btn.classList.add("flash"); //add the class name from css
+    setTimeout(function () {
+        btn.classList.remove("flash");
+    }, 200);
+}
+// creating a user flash for a button
+function userflash(btn) {
+    btn.classList.add("userflash"); //add the class name from css
+    setTimeout(function () {
+        btn.classList.remove("userflash");
+    }, 200);
+}
+// Change the level and flash the button for level change
+function levelup() {
+    userseq = [];
+    level++;
+    h2.innerText = `Level ${level}`;
+    //  Random Color Generator
+    let randomNumber = Math.floor(Math.random() * button.length); //choosing a random number
+    let randomColor = button[randomNumber]; //getting the index value (class name) from color array by using randomNumber
+    let randombtn = document.querySelector(`.${randomColor}`); //selecting button according to class-name got from randomColor
+    // console.log(randomColor);
+    // console.log(randomNumber);
+    // console.log(randombtn);
+    gameseq.push(randomColor);
+    console.log(gameseq);
+    // calling btnflash function for flashing
+    gameflash(randombtn);
+}
+function checkans(idx) {
+    if (userseq[idx] === gameseq[idx]) {
+        if (userseq.length == gameseq.length)
+        {
+            setTimeout(levelup, 1000);
+        }
+
+    } else {
+        if (maxScore < level) {
+            maxScore = level;
+        }
+        h2.innerHTML = `Game Over! Your score is <b>${level}</b> <br> Your Highest Score is <b> ${maxScore}</b> <br> Press any key to start again`;
+        document.querySelector("body").style.backgroundColor = "red";
+        setTimeout(function () {
+            document.querySelector("body").style.backgroundColor = "aquamarine";
+        }, 100);
+        reset();
+    }
+}
+
+function reset() {
+    starter = false;
+    gameseq = [];
+    userseq = [];
+    level = 0;
+    count = 0;
+}
+
+// calling userflash function
+function btnpress() {
+    // console.log(this);
+    userflash(this);
+    userseq.push(this.getAttribute("id"));
+    // console.log(userseq);
+    checkans(userseq.length-1);
+}
+// User pressed the button
+let allbtns = document.querySelectorAll(".btn");
+for (btns of allbtns) {
+    btns.addEventListener("click", btnpress);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simon Syes Game:Memory Booster</title>
+    <link rel="icon" href="./Screenshot 2024-06-05 at 12.24.40 AM.png">
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <h1>Simon Game</h1>
+    <h2>Press any key to start the game</h2>
+    <div class="box-container">
+        <div class="line-one">
+            <div class="btn button-1" id="button-1"><p>0</p></div>
+            <div class="btn  button-3" id="button-3"><p>2</p></div>
+        </div>
+        <div class="line-two">
+            <div class="btn  button-2"  id="button-2"><p>1</p></div>
+            <div class="btn button-4" id="button-4"><p>3</p></div>
+        </div>
+    </div>
+    <script src="./app.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,42 @@
+body{
+    text-align: center;
+    background-color: aquamarine;
+}
+
+.box-container{
+    display: flex;
+    justify-content: center;
+
+}
+
+.btn{
+    height: 200px;
+    width: 200px;
+    border-radius: 20%;
+    border: 10px solid black;
+    margin: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+p{
+    font-size: 30px;
+}
+.button-1{
+    background-color: #d95980;
+}
+.button-2{
+    background-color: #63aac0;
+}
+.button-3{
+    background-color: #f99b45;
+}
+.button-4{
+    background-color: #819ff9;
+}
+.flash{
+    background-color: #ffffff;
+}
+.userflash{
+    background-color: black;
+}