diff --git a/alert.mp3 b/alert.mp3 new file mode 100644 index 0000000..e0c6be2 Binary files /dev/null and b/alert.mp3 differ diff --git a/images/agar-io-game-spiked-ball-ball-thumb.jpg b/images/agar-io-game-spiked-ball-ball-thumb.jpg new file mode 100644 index 0000000..342cbe2 Binary files /dev/null and b/images/agar-io-game-spiked-ball-ball-thumb.jpg differ diff --git a/images/cactus.gif b/images/cactus.gif new file mode 100644 index 0000000..1c5d8bd Binary files /dev/null and b/images/cactus.gif differ diff --git a/images/cat.gif b/images/cat.gif new file mode 100644 index 0000000..71ab56c Binary files /dev/null and b/images/cat.gif differ diff --git a/images/cat2.gif b/images/cat2.gif new file mode 100644 index 0000000..b636829 Binary files /dev/null and b/images/cat2.gif differ diff --git a/images/cat3.gif b/images/cat3.gif new file mode 100644 index 0000000..73c3860 Binary files /dev/null and b/images/cat3.gif differ diff --git a/images/catt.png b/images/catt.png new file mode 100644 index 0000000..88bdfb8 Binary files /dev/null and b/images/catt.png differ diff --git a/images/iconCat.jpg b/images/iconCat.jpg new file mode 100644 index 0000000..e25903b Binary files /dev/null and b/images/iconCat.jpg differ diff --git a/images/pic1.png b/images/pic1.png new file mode 100644 index 0000000..90d4f82 Binary files /dev/null and b/images/pic1.png differ diff --git a/images/pic2.png b/images/pic2.png new file mode 100644 index 0000000..b5d5b9d Binary files /dev/null and b/images/pic2.png differ diff --git a/images/pika.gif b/images/pika.gif new file mode 100644 index 0000000..44547bc Binary files /dev/null and b/images/pika.gif differ diff --git a/images/slack-imgs.com.gif b/images/slack-imgs.com.gif new file mode 100644 index 0000000..f6460b1 Binary files /dev/null and b/images/slack-imgs.com.gif differ diff --git a/images/spik.png b/images/spik.png new file mode 100644 index 0000000..d674d3a Binary files /dev/null and b/images/spik.png differ diff --git a/images/spike3.png b/images/spike3.png new file mode 100644 index 0000000..187fdef Binary files /dev/null and b/images/spike3.png differ diff --git a/images/spikes2.gif b/images/spikes2.gif new file mode 100644 index 0000000..46884b9 Binary files /dev/null and b/images/spikes2.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ad8919f --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + + + + + + SamiraRuns + + + + + + + + + +
+
+ +
+ + + + +
+
+ +
+
+ +
+ +
+
+ + +
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/infopage.html b/infopage.html new file mode 100644 index 0000000..b1bea1c --- /dev/null +++ b/infopage.html @@ -0,0 +1,72 @@ + + + + + + + + SamiraRuns + + + + + + + + + + +
+ +
+ + + + +
+
+

About :

+

Samira (our lovely kitten) has to run and jump over obstacles to reach safe shelter Knowing that she s beeing chased by RBK students

+

How To play:

+

Avoid obstacles by pressing 'spacebar' to jump and try to get the best score

+

Time your jumps

+

Challenge yourself and overcome your highest score

+ + +

Roadmap :

+ +

Resources:

+

https://www.w3schools.com/

+

https://developer.mozilla.org/

+

https://www.youtube.com/watch?v=bG2BmmYr9NQ&t=116s

+

https://www.youtube.com/watch?v=l0HoJHc-63Q

+

https://www.youtube.com/watch?v=LprJOTU37hk&t=2362s

+

https://www.youtube.com/watch?v=MW8HcwHK1S0

+

https://giphy.com/

+

Contact :

+

Email : benthabet.chayma@gmail.com or smaouiali22@gmail.com

+
+
+ + + \ No newline at end of file diff --git a/jump.mp3 b/jump.mp3 new file mode 100644 index 0000000..10caef8 Binary files /dev/null and b/jump.mp3 differ diff --git a/main.js b/main.js new file mode 100644 index 0000000..5efc9d1 --- /dev/null +++ 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'); + } + }); + }); + }); diff --git a/style.css b/style.css new file mode 100644 index 0000000..387a3ee --- /dev/null +++ b/style.css @@ -0,0 +1,252 @@ + +* { + padding: 0; + margin: 0; +} + +body { + /*nightmode*/ + background-image: linear-gradient(to top, white 0%, #0f0a4a 100%); + /*daymode*/ + /* background-image: linear-gradient(to top, #FFBAC3 0%, #88e3fc 100%);*/ + background-repeat: repeat-x; +} + +.game { + height: 80vh; + width: 70vw; + margin: auto; + background-image: url("/images/pic1.png"); + background-size: cover; + position: relative; + overflow-x: hidden; + box-shadow: 1px 2px 60px rgba(0, 0, 0, 0.4); +} + + +/* CARACTERES */ + +#samira { + height: 50px; + width: 20px; + position: relative; + top: 420px; + margin-left: 150px; +} + +#obstacle1 { + height: 20px; + width: 20px; + position: relative; + top: 400px; + left: 1072.8px; + animation: run 5s infinite linear; + background-size: cover; +} + +#obstacle2 { + height: 40px; + width: 20px; + position: relative; + top: 360px; + left: 952.8px; + animation: run 8s infinite linear; +} + +#obstacle3 { + height: 60px; + width: 20px; + position: relative; + top: 300px; + left: 872.8px; + animation: run 11s infinite linear; +} + +#students { + height: 150px; + width: 90px; + position: relative; + top: 220px; + margin-left: 5px; +} + +#cactus { + height: 90px; + width: 50px; +} + +#std { + width: 100px; + height: 130px; +} + +#cat { + width: 60px; + height: 100px; +} + +#spike { + width: 40px; + height: 40px; +} + + +/* ANIMATION*/ + +.execute { + animation: jump 650ms; +} + +@keyframes shake { + from { + top: 220px; + } + to { + top: 210px; + } +} + +@keyframes run { + 0% { + left: 1072.8px; + } + 100% { + left: 0px; + } +} + +@keyframes jump { + 0% { + top: 420px; + } + 30% { + top: 270px; + } + 70% { + top: 270px; + } + 100% { + top: 440px; + } +} + + +/* #CLEARFIX */ + +.group:after { + content: ""; + display: table; + clear: both; +} + + +/* #HEADER */ + +header { + background-color: #0e0a40; + /* #7dbadb; day mode */ + text-align: center; + position: relative; + overflow-x: hidden; +} + +header #logo h1 { + color: #fff; + text-decoration: none; + letter-spacing: .05em; +} + +header #logo2 h5 { + color: #e9d9e9; + text-decoration: none; + letter-spacing: .05em; +} + + +/* #NAVIGATION */ + +#mainnav { + background: #0e0a40; + color: #fff; + font-weight: bold; + text-transform: uppercase; + letter-spacing: .05em; +} + +#mainnav #menu { + display: none; + padding: .8em 1.5em; + cursor: pointer; +} + +#mainnav ul { + display: block; + margin: 0; + text-align: center; +} + +#mainnav ul li { + margin: 0; + list-style: none; + display: inline-block; +} + +#mainnav ul li a { + color: #fff; + text-decoration: none; + display: inline-block; + padding: .9em 1.5em .8em 1.5em; +} + +#mainnav ul li button { + color: #fff; + text-decoration: none; + display: inline-block; + padding: .9em 1.5em .8em 1.5em; + border: none; + cursor: pointer; +} + +#mainnav ul li a:hover { + color: #000; + background: #aaa; +} + +.content { + padding: 1.5em; +} + + +/* MEDIA QUERIES*/ + + +/* Tablet (Between 768px - 992px)*/ + +@media all and (min-width: 768px) and (max-width: 992px) {} + + +/* MOBILE (Smaller than 768px)*/ + +@media all and (max-width: 767px) { + #mainnav #menu { + display: block; + } + #mainnav ul { + display: none; + background: #666; + padding: 1em; + text-align: left; + } + #mainnav ul li { + display: block; + } + #mainnav ul li a { + display: block; + padding: .75em 1.5em .5em 1.5em; + } +} + +p { + color: black;} + +