chaimAli · chaimathabet · Aug 21, 2020 · Aug 21, 2020 · Aug 21, 2020 · Aug 22, 2020
diff --git a/alert.mp3 b/alert.mp3
diff --git a/images/agar-io-game-spiked-ball-ball-thumb.jpg b/images/agar-io-game-spiked-ball-ball-thumb.jpg
diff --git a/images/cactus.gif b/images/cactus.gif
diff --git a/images/cat.gif b/images/cat.gif
diff --git a/images/cat2.gif b/images/cat2.gif
diff --git a/images/cat3.gif b/images/cat3.gif
diff --git a/images/catt.png b/images/catt.png
diff --git a/images/iconCat.jpg b/images/iconCat.jpg
diff --git a/images/pic1.png b/images/pic1.png
diff --git a/images/pic2.png b/images/pic2.png
diff --git a/images/pika.gif b/images/pika.gif
diff --git a/images/slack-imgs.com.gif b/images/slack-imgs.com.gif
diff --git a/images/spik.png b/images/spik.png
diff --git a/images/spike3.png b/images/spike3.png
diff --git a/images/spikes2.gif b/images/spikes2.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8">
+    <title>SamiraRuns</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+
+</head>
+
+<body>
+    <div id="dayMode">
+        <header>
+            <div id="logo">
+                <h1>Score :
+                    <span id="scoreSpan"></span>
+                </h1>
+                <div id="logo2">
+                    <h5>Highest Score :
+                        <span id="higestScore"></span>
+                    </h5>
+                </div>
+            </div>
+        </header>
+
+
+        <nav id="mainnav" class="group">
+            <div id="menu">&#x2261; Menu</div>
+            <ul>
+                <li><a id="button" href="#"> Change Theme</a></li>
+
+                <li><a href="infopage.html"> Game Info </a></li>
+            </ul>
+        </nav>
+
+        <div id="thebox" class="game">
+            <div id="samira">
+                <img id="cat" src="/images/cat3.gif">
+            </div>
+            <div id="obstacle1">
+                <img id="spike" src="/images/spikes2.gif">
+            </div>
+
+            <div id="obstacle2"><img id="cactus" src="/images/cactus.gif"></div>
+            <div id="obstacle3"> <img id="cactus" src="/images/cactus.gif"></div>
+
+
+            <div id="students">
+                <img id="std" src="/images/slack-imgs.com.gif">
+            </div>
+        </div>
+    </div>
+  <script src='main.js'></script>
+
+</body>
+
+</html>
diff --git a/infopage.html b/infopage.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8">
+    <title>SamiraRuns</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+
+</head>
+
+<body>
+
+    <header>
+        <div id="logo">
+            <h1>Samira Runs
+                <span id="scoreSpan"></span>
+            </h1>
+            <div id="logo2">
+                <h5>
+                    About the Game
+                </h5>
+            </div>
+        </div>
+    </header>
+
+
+    <nav id="mainnav" class="group">
+        <div id="menu">&#x2261; Menu</div>
+        <ul>
+            <li><a href="index.html"> Back to game </a></li>
+        </ul>
+    </nav>
+
+    <div class='container  row'>
+        <div class='col-md-12'>
+            <h2>About :</h2>
+            <p>Samira (our lovely kitten) has to run and jump over obstacles to reach safe shelter Knowing that she s beeing chased by RBK students</p>
+            <h2>How To play:</h2>
+            <p> Avoid obstacles by pressing 'spacebar' to jump and try to get the best score </p>
+            <p>Time your jumps</p>
+            <p>Challenge yourself and overcome your highest score </p>
+
+
+            <h2> Roadmap :</h2>
+            <ul>
+                <li>leveling system</li>
+                <li>Skill set for Samira </li>
+                <li>smoother animation </li>
+                <li>open for suggestions ...</li>
+
+            </ul>
+            <h2>Resources:</h2>
+            <p>https://www.w3schools.com/</p>
+            <p>https://developer.mozilla.org/</p>
+            <p>https://www.youtube.com/watch?v=bG2BmmYr9NQ&t=116s</p>
+            <p>https://www.youtube.com/watch?v=l0HoJHc-63Q</p>
+            <p>https://www.youtube.com/watch?v=LprJOTU37hk&t=2362s</p>
+            <p>https://www.youtube.com/watch?v=MW8HcwHK1S0</p>
+            <p>https://giphy.com/</p>
+            <h2>Contact : </h2>
+            <p> Email : benthabet.chayma@gmail.com or smaouiali22@gmail.com </p>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/jump.mp3 b/jump.mp3
diff --git a/main.js b/main.js
@@ -0,0 +1,132 @@
+
+var samira = document.getElementById('samira');
+var obstacle1 = document.getElementById('obstacle1');
+var obstacle2 = document.getElementById('obstacle2');
+var obstacle3 = document.getElementById('obstacle3');
+var counter = 0;
+var highestScore = 0;
+
+function changeHighScore() {
+    var score = Math.floor(counter / 100);
+    if (score > highestScore) {
+        highestScore = score;
+        document.getElementById("higestScore").innerText = highestScore;
+    }
+}
+
+
+function jump() {
+    if (samira.classList === "execute") {
+        return
+    }
+    samira.classList.add("execute");
+
+    setTimeout(function() {
+        samira.classList.remove("execute");
+
+    }, 650)
+};
+
+
+
+$(".game").click(jump);
+
+var gameOver = setInterval(function() {
+        let samiraTop = parseInt(window.getComputedStyle(samira).getPropertyValue("top"));
+        let obstacle1Left = parseInt(window.getComputedStyle(obstacle1).getPropertyValue("left"));
+        let obstacle2Left = parseInt(window.getComputedStyle(obstacle2).getPropertyValue("left"));
+        let obstacle3Left = parseInt(window.getComputedStyle(obstacle3).getPropertyValue("left"));
+
+        if (obstacle1Left < 170 && obstacle1Left > 135.6 && samiraTop >= 400 || obstacle2Left < 170 && obstacle2Left > 135.6 && samiraTop >= 400 || obstacle3Left < 170 && obstacle3Left > 135.6 && samiraTop >= 400) {
+            obstacle1.style.animation = "none";
+            obstacle2.style.animation = "none";
+            obstacle3.style.animation = "none";
+
+            swal({
+                title: "Game Over!",
+                text: "Your score is " + Math.floor(counter / 100),
+                button: "Restart",
+            });
+
+            var snd = new Audio('alert.mp3');
+            snd.play();
+            //alert("Game Over. score: " + Math.floor(counter / 100));
+            changeHighScore();
+
+            counter = 0;
+            obstacle1.style.animation = "run 5s infinite linear";
+            obstacle2.style.animation = "run 8s infinite linear";
+            obstacle3.style.animation = "run 11s infinite linear";
+
+        } else {
+
+            counter++;
+            document.getElementById("scoreSpan").innerHTML = Math.floor(counter / 100);
+
+        }
+    },
+    10);
+
+document.addEventListener('keyup', function(e) {
+    if (e.keyCode === 32 || e.keyCode === 38) {
+        var snd2 = new Audio('jump.mp3');
+        snd2.play();
+        jump()
+    }
+});
+
+$(document).ready(function() {
+
+    const backChoice = {
+        initial: {
+            //nightMode
+            "background": 'linear-gradient(to top, white 0%, #0f0a4a 100%)',
+            "background-image": "url(/images/pic2.png)",
+            'background-color': '#7dbadb',
+
+        },
+        second: {
+            //dayMode
+            "background": 'linear-gradient(to top, #FFBAC3 0%, #C5C1FF 56%, #2CD8D5 100%)',
+            "background-image": "url(/images/pic1.png)",
+            'background-color': '#0e0a40',
+
+        }
+    }
+    var state = backChoice.initial;
+
+    $("#button").click(function() {
+
+        if (state === backChoice.initial) {
+            console.log("in the main if")
+            $('header').css('background-color', backChoice.second["background-color"])
+            $('#mainnav').css('background-color', backChoice.second["background-color"])
+            $('.game').css("background-image", backChoice.second["background-image"])
+            $('body').css('background', backChoice.initial["background"]);
+            state = backChoice.second;
+            //
+        } else {
+            console.log("in the else")
+            $('header').css('background-color', backChoice.initial["background-color"]);
+            $('#mainnav').css('background-color', backChoice.initial["background-color"]);
+            $('.game').css("background-image", backChoice.initial["background-image"]);
+
+            $('body').css('background', backChoice.second["background"]);
+            state = backChoice.initial;
+        }
+    });
+    $(document).ready(function() {
+
+    // JQUERY NAV TOGGLE
+    $('#menu').bind('click', function(event) {
+        $('#mainnav ul').slideToggle();
+    });
+
+    $(window).resize(function() {
+        var w = $(window).width();
+        if (w > 768) {
+            $('#mainnav ul').removeAttr('style');
+        }
+      });
+    });
+   });