diff --git a/DropTheNumbers/README.md b/DropTheNumbers/README.md new file mode 100644 index 0000000..aa8d31a --- /dev/null +++ b/DropTheNumbers/README.md @@ -0,0 +1,7 @@ +Drop The Numbers Game +by Michal & Gila (@gilakassab) + +Drop The Numbers Game +Collect points by merging number cubes! +2 cubes that connect become a cube with a higher number, and the higher the number, the higher the points! +Play as far as you can without reaching the top of the board, because when you get there, you'll lose! diff --git a/DropTheNumbers/audio/crash.mp3 b/DropTheNumbers/audio/crash.mp3 new file mode 100644 index 0000000..e1b54de Binary files /dev/null and b/DropTheNumbers/audio/crash.mp3 differ diff --git a/DropTheNumbers/audio/crash.ogg b/DropTheNumbers/audio/crash.ogg new file mode 100644 index 0000000..cc82a65 Binary files /dev/null and b/DropTheNumbers/audio/crash.ogg differ diff --git a/DropTheNumbers/audio/game-over1.mp3 b/DropTheNumbers/audio/game-over1.mp3 new file mode 100644 index 0000000..6f90665 Binary files /dev/null and b/DropTheNumbers/audio/game-over1.mp3 differ diff --git a/DropTheNumbers/audio/game-over2.mp3 b/DropTheNumbers/audio/game-over2.mp3 new file mode 100644 index 0000000..5e75018 Binary files /dev/null and b/DropTheNumbers/audio/game-over2.mp3 differ diff --git a/DropTheNumbers/audio/pause.mp3 b/DropTheNumbers/audio/pause.mp3 new file mode 100644 index 0000000..886a793 Binary files /dev/null and b/DropTheNumbers/audio/pause.mp3 differ diff --git a/DropTheNumbers/audio/pause.ogg b/DropTheNumbers/audio/pause.ogg new file mode 100644 index 0000000..a07245b Binary files /dev/null and b/DropTheNumbers/audio/pause.ogg differ diff --git a/DropTheNumbers/audio/rotate.mp3 b/DropTheNumbers/audio/rotate.mp3 new file mode 100644 index 0000000..12c57f1 Binary files /dev/null and b/DropTheNumbers/audio/rotate.mp3 differ diff --git a/DropTheNumbers/audio/rotate.ogg b/DropTheNumbers/audio/rotate.ogg new file mode 100644 index 0000000..49bdd6b Binary files /dev/null and b/DropTheNumbers/audio/rotate.ogg differ diff --git a/DropTheNumbers/audio/win.mp3 b/DropTheNumbers/audio/win.mp3 new file mode 100644 index 0000000..33bdee1 Binary files /dev/null and b/DropTheNumbers/audio/win.mp3 differ diff --git a/DropTheNumbers/css/game.css b/DropTheNumbers/css/game.css new file mode 100644 index 0000000..d8a8752 --- /dev/null +++ b/DropTheNumbers/css/game.css @@ -0,0 +1,221 @@ +* { + font-weight: bold; + font-family: 'Assistant ExtraLight'; + box-sizing: border-box; +} + +@font-face { + font-family: 'Assistant ExtraLight'; + src: url('../font/Assistant\ Extra\ Light.woff') format('woff'); +} + + +body { + background-image: url("../images/pic1111.jpg"); + overflow: hidden; + background-repeat: no-repeat; + background-size: 105%; + max-width: unset; + position: relative; +} + +html { + size: 100%; + height: 100%; +} + +.grid-container { + display: grid; + grid-template-columns: auto auto auto auto auto; + background-color: white; + border-radius: 5px; + width: 385px; + height: 559px; + top: 35%; + margin-right: 40%; + color: #8a8cdb +} + +.grid-item { + position: relative; + text-align: center; + background-color: #070975; + border: ridge #070975; + border-radius: 10px; + font-size: 40px; + font-weight: bold; + font-family: monospace; + width: 80px; + height: 80px; + color: white; +} + + +.start-btn { + position: absolute; + width: 120px; + height: 60px; + color: #070975; + font-size: medium; + font-family: fantasy; + border: #070975 ridge; + justify-content: center; + text-align: center; + background-color: white; +} + +#start-btn { + margin-right: 15%; + top: 36%; + + width: 126px; + height: 66px; +} + +#stage1 { + text-align: start; + margin-right: 15%; + top: 23%; +} + +#stage2 { + text-align: start; + margin-right: 20%; + top: 23%; + +} + +#stage3 { + text-align: start; + margin-right: 25%; + top: 23%; +} + +h4 { + color: #070975; + background-color: white; + position: absolute; + margin-right: 15%; + top: 13%; + font-size: 20px; +} + +#score { + + justify-content: center; + text-align: center; + margin-right: 15%; + top: 49%; +} + +#maxScore { + + text-align: center; + margin-right: 15%; + top: 62%; +} + +#new-game { + margin-right: 15%; + top: 75%; + width: 126px; + height: 66px; +} + +.start-btn:hover { + background-color: #070975; + color: white; +} + +h3 { + font-size: 35px; + top: 5%; + margin-right: 75%; + color: white; + position: relative; + +} + +h3 { + animation-name: rotate; + animation-duration: 0.7s; + animation-direction: alternate; +} + +@keyframes rotate { + 0% { + transform: rotate(0); + color: white; + } + + 100% { + transform: rotate(360deg); + color: #070975; + } +} + +#audio { + font-size: 40px; + color: white; + position: absolute; + top:123%; + left: 2%; + border: none; + background-color: rgb(107, 143, 193); +} + +#sendHome { + position: absolute; + top: 0; + left: 1%; + width: 80px; + height: 60px; + font-size: 50px; + border: none; + background-color: #070975 +} + +.gameOver { + text-align: center; + font-size: 20px; +} + +.gameOver:hover { + animation-name: rotate; + animation-duration: 0.7s; + animation-direction: alternate; +} + +#instructions { + position: absolute; + width: 50; + height: 300; + top: 23%; + left: 8%; + background-color: rgba(53, 50, 56, 0.2); + color: white; +} + + +#instructions h2 { + text-align: left; + font-size: 30px; +} + + +#instructions p { + font-size: 20px; + text-align: left; +} + +h1 { + color: white; + text-align: center; + top: 2%; + left: 40%; +} + +.gameOver { + font-size: 60px; + text-align: center +} \ No newline at end of file diff --git a/DropTheNumbers/css/home.css b/DropTheNumbers/css/home.css new file mode 100644 index 0000000..6c20a23 --- /dev/null +++ b/DropTheNumbers/css/home.css @@ -0,0 +1,99 @@ +body { + background-image: url("..//images/pic11.jpg"); + + overflow: hidden; + background-repeat: no-repeat; + background-size: 105%; + max-width: unset; + position: relative; +} + +.header { + width: 100%; + float: left; + font-size: 50px; + color: #fffdfd; + text-transform: uppercase; + text-align: center; + font-weight: bold; + font-family: Roboto; +} + +.pics1 { + + display: grid; + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; + justify-items: space-between; + grid-gap: 15%; + flex-wrap: wrap; + padding: 100px 25% 100px 25%; + +} + +.pics { + border: black solid 1mm; + border-radius: 10%; + height: 200px; + width: 300px; +} + +h1 { + margin: 0px; +} + +h2 { + text-align: center; +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; +} + +span { + font-size: 12px; +} + +a { + color: blue; + font-size: 12px; + text-decoration: none; + margin: 15px 0; + cursor: pointer; +} + +button { + border-radius: 20px; + border: 1px solid #FF4B2B; + background-color: #FF4B2B; + color: #FFFFFF; + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; +} + +#exit { + position: absolute; + top: 2%; + right: 1%; + width: 40px; + height: 60px; + border: none; + background-color: white; +} + +#x-pic { + position: absolute; + top: 2%; + right: 2%; + width: 60px; + height: 60px; + border: none; +} \ No newline at end of file diff --git a/DropTheNumbers/css/log-in- sign-up.css b/DropTheNumbers/css/log-in- sign-up.css new file mode 100644 index 0000000..8720056 --- /dev/null +++ b/DropTheNumbers/css/log-in- sign-up.css @@ -0,0 +1,211 @@ +* { + box-sizing: border-box; +} + +body { + background-image: url("..//images/pic1111.jpg"); + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: 'Montserrat', sans-serif; + height: 50vh; + margin: 150px 0 50px; + width: 800 px; + height: 400px; + overflow: hidden; + background-size: 105%; + max-width: unset; + position: relative; +} + +h1 { + margin: 0px; + +} + +h2 { + text-align: center; +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; +} + +span { + font-size: 12px; +} + +a { + color: blue; + font-size: 12px; + text-decoration: none; + margin: 15px 0; + cursor: pointer; +} + +button { + border-radius: 20px; + border: 1px solid #070975; + background-color: #070975; + color: #FFFFFF; + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; +} + +button:active { + transform: scale(0.95); +} + + +button.new { + background-color: transparent; + border-color: #FFFFFF; +} + +form { + background-color: #FFFFFF; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input { + background-color: #eee; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; +} + +.container { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); + position: relative; + overflow: hidden; + width: 800px; + max-width: 100%; + min-height: 480px; +} + +.form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.sign-in-container { + left: 0; + width: 50%; + z-index: 2; +} + +.container.right-panel-active .sign-in-container { + transform: translateX(100%); +} + +.sign-up-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.right-panel-active .sign-up-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; +} + +@keyframes show { + + 0%, + 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, + 100% { + opacity: 1; + z-index: 5; + } +} + +.overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; +} + +.container.right-panel-active .overlay-container { + transform: translateX(-100%); +} + +.overlay { + + color: #FFFFFF; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay-left { + transform: translateX(-20%); +} + +.container.right-panel-active .overlay-left { + transform: translateX(0); +} + +.overlay-right { + right: 0; + transform: translateX(0); +} + +.container.right-panel-active .overlay-right { + transform: translateX(20%); +} \ No newline at end of file diff --git a/DropTheNumbers/font/Assistant Extra Light.woff b/DropTheNumbers/font/Assistant Extra Light.woff new file mode 100644 index 0000000..4ea55ed Binary files /dev/null and b/DropTheNumbers/font/Assistant Extra Light.woff differ diff --git a/DropTheNumbers/html/game.html b/DropTheNumbers/html/game.html new file mode 100644 index 0000000..a7e0f48 --- /dev/null +++ b/DropTheNumbers/html/game.html @@ -0,0 +1,72 @@ + + + + + + + + + Document + + + + +

DROP THE NUMBERS

+

⬇️Select Level To Start⬇️

+

HELLO USER

+ + + + + + +
+
+ + +
+
+

?HOW TO PLAY

+

+ By downloading the numbered blocks
below, you can add them up
!and make bigger summed blocks
More + numbered blocks Higher
more you add, more points
you get, more points,
!higher in ranks
Throw + the blocks on one
.other with it number
- merge or combine them
.into a larger number + When you reach
the number 4096 - you will win!
But if you fill one column
....to the top - you will + lose +

+
+ +
+ + + + + + + +
+ + + + + \ No newline at end of file diff --git a/DropTheNumbers/html/home.html b/DropTheNumbers/html/home.html new file mode 100644 index 0000000..5cdd9aa --- /dev/null +++ b/DropTheNumbers/html/home.html @@ -0,0 +1,39 @@ + + + + + + + + Home Page + + + + + + +
+

G a m i n g - W o r l d

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/DropTheNumbers/html/log-in- sign-up.html b/DropTheNumbers/html/log-in- sign-up.html new file mode 100644 index 0000000..6c9e3ef --- /dev/null +++ b/DropTheNumbers/html/log-in- sign-up.html @@ -0,0 +1,53 @@ + + + + + + + SignUp and Login + + + + + +
+ + +
+
+
+ pic-2 + +
+
+ pic-3 +
+
+
+
+ + + + \ No newline at end of file diff --git a/DropTheNumbers/images/445074585.webp b/DropTheNumbers/images/445074585.webp new file mode 100644 index 0000000..5072113 Binary files /dev/null and b/DropTheNumbers/images/445074585.webp differ diff --git a/DropTheNumbers/images/5312.jpg_wh860.jpg b/DropTheNumbers/images/5312.jpg_wh860.jpg new file mode 100644 index 0000000..21d1ae0 Binary files /dev/null and b/DropTheNumbers/images/5312.jpg_wh860.jpg differ diff --git a/DropTheNumbers/images/Dudovich_slider_01-500x291.jpg b/DropTheNumbers/images/Dudovich_slider_01-500x291.jpg new file mode 100644 index 0000000..7ba2ea2 Binary files /dev/null and b/DropTheNumbers/images/Dudovich_slider_01-500x291.jpg differ diff --git a/DropTheNumbers/images/Gamingrig2-240x180.jpg b/DropTheNumbers/images/Gamingrig2-240x180.jpg new file mode 100644 index 0000000..76fcae9 Binary files /dev/null and b/DropTheNumbers/images/Gamingrig2-240x180.jpg differ diff --git a/DropTheNumbers/images/Temple_Run_Brave_logo.png b/DropTheNumbers/images/Temple_Run_Brave_logo.png new file mode 100644 index 0000000..9d4631c Binary files /dev/null and b/DropTheNumbers/images/Temple_Run_Brave_logo.png differ diff --git a/DropTheNumbers/images/c3284706d87258039b5abd5e608e6fbb.jpg b/DropTheNumbers/images/c3284706d87258039b5abd5e608e6fbb.jpg new file mode 100644 index 0000000..c2a26f7 Binary files /dev/null and b/DropTheNumbers/images/c3284706d87258039b5abd5e608e6fbb.jpg differ diff --git a/DropTheNumbers/images/candyCrush.jpeg b/DropTheNumbers/images/candyCrush.jpeg new file mode 100644 index 0000000..d46caaf Binary files /dev/null and b/DropTheNumbers/images/candyCrush.jpeg differ diff --git a/DropTheNumbers/images/dropTheNumber.jpeg b/DropTheNumbers/images/dropTheNumber.jpeg new file mode 100644 index 0000000..4f7e52b Binary files /dev/null and b/DropTheNumbers/images/dropTheNumber.jpeg differ diff --git a/DropTheNumbers/images/img (1).jpg b/DropTheNumbers/images/img (1).jpg new file mode 100644 index 0000000..7b74ae1 Binary files /dev/null and b/DropTheNumbers/images/img (1).jpg differ diff --git a/DropTheNumbers/images/img (1).png b/DropTheNumbers/images/img (1).png new file mode 100644 index 0000000..e87f38f Binary files /dev/null and b/DropTheNumbers/images/img (1).png differ diff --git a/DropTheNumbers/images/img (2).jpg b/DropTheNumbers/images/img (2).jpg new file mode 100644 index 0000000..cf86a1b Binary files /dev/null and b/DropTheNumbers/images/img (2).jpg differ diff --git a/DropTheNumbers/images/img (2).png b/DropTheNumbers/images/img (2).png new file mode 100644 index 0000000..4a79dca Binary files /dev/null and b/DropTheNumbers/images/img (2).png differ diff --git a/DropTheNumbers/images/img (3).jpg b/DropTheNumbers/images/img (3).jpg new file mode 100644 index 0000000..4988f4b Binary files /dev/null and b/DropTheNumbers/images/img (3).jpg differ diff --git a/DropTheNumbers/images/img (4).jpg b/DropTheNumbers/images/img (4).jpg new file mode 100644 index 0000000..818a1da Binary files /dev/null and b/DropTheNumbers/images/img (4).jpg differ diff --git a/DropTheNumbers/images/log-in-img (1).jpg b/DropTheNumbers/images/log-in-img (1).jpg new file mode 100644 index 0000000..5306607 Binary files /dev/null and b/DropTheNumbers/images/log-in-img (1).jpg differ diff --git a/DropTheNumbers/images/log-in-img (2).jpg b/DropTheNumbers/images/log-in-img (2).jpg new file mode 100644 index 0000000..bd72782 Binary files /dev/null and b/DropTheNumbers/images/log-in-img (2).jpg differ diff --git a/DropTheNumbers/images/lovepik-night-sky-background-picture-download-image_400062943.jpg b/DropTheNumbers/images/lovepik-night-sky-background-picture-download-image_400062943.jpg new file mode 100644 index 0000000..d58412a Binary files /dev/null and b/DropTheNumbers/images/lovepik-night-sky-background-picture-download-image_400062943.jpg differ diff --git a/DropTheNumbers/images/marioKart.jpeg b/DropTheNumbers/images/marioKart.jpeg new file mode 100644 index 0000000..c88b213 Binary files /dev/null and b/DropTheNumbers/images/marioKart.jpeg differ diff --git a/DropTheNumbers/images/other-game (1).jpg b/DropTheNumbers/images/other-game (1).jpg new file mode 100644 index 0000000..540171e Binary files /dev/null and b/DropTheNumbers/images/other-game (1).jpg differ diff --git a/DropTheNumbers/images/other-game (1)~1.jpg b/DropTheNumbers/images/other-game (1)~1.jpg new file mode 100644 index 0000000..af5707e Binary files /dev/null and b/DropTheNumbers/images/other-game (1)~1.jpg differ diff --git a/DropTheNumbers/images/other-game (2).jpg b/DropTheNumbers/images/other-game (2).jpg new file mode 100644 index 0000000..3cbdbe4 Binary files /dev/null and b/DropTheNumbers/images/other-game (2).jpg differ diff --git a/DropTheNumbers/images/other-game (2)~1.jpg b/DropTheNumbers/images/other-game (2)~1.jpg new file mode 100644 index 0000000..89c44d2 Binary files /dev/null and b/DropTheNumbers/images/other-game (2)~1.jpg differ diff --git a/DropTheNumbers/images/other-game (3).jpg b/DropTheNumbers/images/other-game (3).jpg new file mode 100644 index 0000000..66f6abc Binary files /dev/null and b/DropTheNumbers/images/other-game (3).jpg differ diff --git a/DropTheNumbers/images/other-game (3)~1.jpg b/DropTheNumbers/images/other-game (3)~1.jpg new file mode 100644 index 0000000..5788d5f Binary files /dev/null and b/DropTheNumbers/images/other-game (3)~1.jpg differ diff --git a/DropTheNumbers/images/pic1.jpg b/DropTheNumbers/images/pic1.jpg new file mode 100644 index 0000000..6936e5b Binary files /dev/null and b/DropTheNumbers/images/pic1.jpg differ diff --git a/DropTheNumbers/images/pic11.jpg b/DropTheNumbers/images/pic11.jpg new file mode 100644 index 0000000..31b62d3 Binary files /dev/null and b/DropTheNumbers/images/pic11.jpg differ diff --git a/DropTheNumbers/images/pic111.jpg b/DropTheNumbers/images/pic111.jpg new file mode 100644 index 0000000..69f4885 Binary files /dev/null and b/DropTheNumbers/images/pic111.jpg differ diff --git a/DropTheNumbers/images/pic1111.jpg b/DropTheNumbers/images/pic1111.jpg new file mode 100644 index 0000000..1f0081e Binary files /dev/null and b/DropTheNumbers/images/pic1111.jpg differ diff --git a/DropTheNumbers/images/pic2.jpg b/DropTheNumbers/images/pic2.jpg new file mode 100644 index 0000000..7cef412 Binary files /dev/null and b/DropTheNumbers/images/pic2.jpg differ diff --git a/DropTheNumbers/images/pic3.jpg b/DropTheNumbers/images/pic3.jpg new file mode 100644 index 0000000..c0d7b14 Binary files /dev/null and b/DropTheNumbers/images/pic3.jpg differ diff --git a/DropTheNumbers/images/pic4.webp b/DropTheNumbers/images/pic4.webp new file mode 100644 index 0000000..a45ea86 Binary files /dev/null and b/DropTheNumbers/images/pic4.webp differ diff --git a/DropTheNumbers/images/pic41.jpg b/DropTheNumbers/images/pic41.jpg new file mode 100644 index 0000000..0f7aa6f Binary files /dev/null and b/DropTheNumbers/images/pic41.jpg differ diff --git a/DropTheNumbers/images/temple-run-2.jpg b/DropTheNumbers/images/temple-run-2.jpg new file mode 100644 index 0000000..7b8056e Binary files /dev/null and b/DropTheNumbers/images/temple-run-2.jpg differ diff --git a/DropTheNumbers/images/ultra pixel survive 1280x720.jpg b/DropTheNumbers/images/ultra pixel survive 1280x720.jpg new file mode 100644 index 0000000..0793629 Binary files /dev/null and b/DropTheNumbers/images/ultra pixel survive 1280x720.jpg differ diff --git a/DropTheNumbers/images/ultra pixel survive 1280x720.webp b/DropTheNumbers/images/ultra pixel survive 1280x720.webp new file mode 100644 index 0000000..212ce92 Binary files /dev/null and b/DropTheNumbers/images/ultra pixel survive 1280x720.webp differ diff --git a/DropTheNumbers/images/x-icon.png b/DropTheNumbers/images/x-icon.png new file mode 100644 index 0000000..a18a821 Binary files /dev/null and b/DropTheNumbers/images/x-icon.png differ diff --git a/DropTheNumbers/js/game.js b/DropTheNumbers/js/game.js new file mode 100644 index 0000000..914a0d7 --- /dev/null +++ b/DropTheNumbers/js/game.js @@ -0,0 +1,373 @@ +//בעזרת ה נעשה ונצליח// + +let isPaused = true; +let isMuted = false; +let highestIndex = 0; +let score = 0; +let row = 0; +let maxIndex = [7, 7, 7, 7, 7]; +let col = 0; +let ourObject; +let intervalId; +let rectObject = [ + { color: "#8a8cdb", number: "2" }, + { color: "#5f60c2", number: "4" }, + { color: "#5255e7", number: "8" }, + { color: "#393cf0", number: "16" }, + { color: "#3133c0", number: "32" }, + { color: "#0e11af", number: "64" }, + { color: "#02047d", number: "128" }, + { color: "#1d1d44", number: "256" }, + { color: "#5c8dcc", number: "512" }, + { color: "#179ee1", number: "1024" }, + { color: "#073850", number: "2048" }, + { color: "#1398a1", number: "4096" }, +]; +//user name +let userName = document.getElementById("name"); +let user = JSON.parse(localStorage.getItem(localStorage.getItem("currentUser"))); +userName.innerText = "Hello " + user.firstname; + +//score +let lblscore = document.getElementById("score"); +lblscore.innerText = `score: ${score}`; +lblmaxScore = document.getElementById("maxScore"); +let maxScore = user.maxScore; +lblmaxScore.innerText = `your high score: ${maxScore}`; + +let level1 = document.getElementById("stage1"); +let level2 = document.getElementById("stage2"); +let level3 = document.getElementById("stage3"); + +//levels +function levels(levelNumber) { + level1.style.backgroundColor = "white"; + level2.style.backgroundColor = "white"; + level3.style.backgroundColor = "white"; + switch (levelNumber) { + case 1: + speed = 500; + level1.style.backgroundColor = "#070975"; + break; + case 2: + speed = 250; + level2.style.backgroundColor = "#070975"; + break; + case 3: + speed = 100; + level3.style.backgroundColor = "#070975"; + break; + + } + isPaused = false; + return speed; +} + +//return +let home = document.getElementById("sendHome"); +home.addEventListener("click", () => { + window.open("../html/home.html", "_self"); +}) + +//start +function start() { + document.addEventListener("keydown", move); + let pauseButton = document.getElementById("start-btn"); + pauseButton.addEventListener("click", () => changeState(pauseButton)); + let newGame = document.getElementById("new-game"); + newGame.addEventListener("click", restart); + buildGrid(); + speedGame(); +} + +function buildGrid() { + let grid = document.getElementsByClassName("grid-container"); + for (let i = 0; i < 7; i++) { + for (let j = 0; j < 5; j++) { + const newDiv = document.createElement("div"); + newDiv.classList.add("grid-item"); + newDiv.id = `${i},${j}`; + grid[0].appendChild(newDiv); + } + } + isMuted = false; +} + +function speedGame() { + level1.addEventListener("click", () => { + speed = levels(1); + play(speed); + }); + level2.addEventListener("click", () => { + speed = levels(2); + play(speed); + }); + level3.addEventListener("click", () => { + speed = levels(3); + play(speed); + }); + +} + + +function randomNumber(min, max) { + // min and max included + return Math.floor(Math.random() * (max - min + 1) + min); +} + +function play(speed) { + col = randomNumber(0, 4); + ourObject = randomNumber(0, highestIndex); + intervalId = setInterval(() => { + if (!isPaused) changeRect(col, ourObject, speed); + }, speed); +} + +//down rect +function changeRect(col, ourObject, speed) { + //check if game over + let i = 0; + for (i; i < 5 && maxIndex[i] != 0; i++); + if (i != 5) { + gameOver("loose"); + return; + } + + if (row === maxIndex[col]) { + clearInterval(intervalId); + crush(col, ourObject); + row = 0; + maxIndex[col]--; + setTimeout(play(speed), 0); + return; + } + + let ourRect = document.getElementById(`${row},${col}`); + ourRect.style.backgroundColor = rectObject[ourObject].color; + ourRect.innerText = rectObject[ourObject].number; + if (row !== 0) { + ourRect = document.getElementById(`${row - 1},${col}`); + ourRect.style.backgroundColor = "white"; + ourRect.innerText = " "; + } + row++; +} + +//move +function move(event) { + switch (event.key) { + case "ArrowRight": + if (col != 0 && row < maxIndex[col - 1] + 1) { + col--; + ourRect = document.getElementById(`${row - 1},${col}`); + ourRect.style.backgroundColor = rectObject[ourObject].color; + ourRect.innerText = rectObject[ourObject].number; + ourRect = document.getElementById(`${row - 1},${col + 1}`); + ourRect.style.backgroundColor = "white"; + ourRect.innerText = " "; + playAudio("moveAudio"); + } + break; + case "ArrowLeft": + if (col != 4 && row < maxIndex[col + 1] + 1) { + col++; + ourRect = document.getElementById(`${row - 1},${col}`); + ourRect.style.backgroundColor = rectObject[ourObject].color; + ourRect.innerText = rectObject[ourObject].number; + ourRect = document.getElementById(`${row - 1},${col - 1}`); + ourRect.style.backgroundColor = "white"; + ourRect.innerText = " "; + playAudio("moveAudio"); + } + break; + } +} +//mute +let mute = document.getElementById("audio") +mute.addEventListener("click", () => { + if (isMuted == true) { + mute.innerText = "🔊"; + isMuted = false; + } + else { + isMuted = true; + mute.innerText = "🔇"; + } +}) + +//sounds +function playAudio(id) { + let audio = document.getElementById(id); + if (isMuted === false) + audio.play(); + return; +} + + +//crush +function crush(col) { + row--; + //down + let downFound, rightFound, leftFound; + if (row != 6) { + downFound = checkSides(1, 0, col); + } + //right + if (col != 0 && !downFound) { + rightFound = checkSides(0, -1, col); + } + //left + if (col != 4 && !downFound && !rightFound) { + leftFound = checkSides(0, 1, col); + } + //up + if (row != 0 && !downFound && !rightFound && !leftFound) { + let upFound = checkSides(-1, 0, col); + } + //בדיקת חורים + findHoles(); +} + +//check sides +function checkSides(rowDir, colDir, col) { + let currentText = document.getElementById(`${row},${col}`).innerText; + let sideText = document.getElementById(`${row + rowDir},${col + colDir}`).innerText; + if (currentText === sideText) { + playAudio("crushAudio"); + let currentRect = document.getElementById(`${row},${col}`); + currentRect.style.backgroundColor = "white"; + currentRect.innerText = ""; + let i; + for (i = 0; i < 12; i++) { + if (rectObject[i].number === sideText) { + i++; + break; + } + } + score += Number(rectObject[i].number); + lblscore.innerText = `score: ${score}`; + user = JSON.parse(localStorage.getItem(localStorage.getItem("currentUser"))); + maxScore = user.maxScore; + + if (score > maxScore) + lblmaxScore.innerText = `your high score: ${score}`; + + //check if win + if (rectObject[i].number === "512") { + gameOver("win"); + return false; + } + + if (highestIndex < 5) + highestIndex = Math.max(highestIndex, i); + + let sideRect = document.getElementById(`${row + rowDir},${col + colDir}`); + sideRect.style.backgroundColor = rectObject[i].color; + sideRect.innerText = rectObject[i].number; + maxIndex[col]++; + row += rowDir + 1; + col += colDir; + + + setTimeout(crush(col), 0); + return true; + } + return false; +} + +function findHoles() { + for (let i = 6; i > 0; i--) { + for (let j = 0; j < 5; j++) { + let currentText = document.getElementById(`${i},${j}`).innerText; + let upText = document.getElementById(`${i - 1},${j}`).innerText; + if (currentText === "" && upText != "") { + //down col + let downRect = document.getElementById(`${i},${j}`); + let upRect = document.getElementById(`${i - 1},${j}`); + let k = 0; + do { + k++; + downRect.style.backgroundColor = upRect.style.backgroundColor; + downRect.innerText = upRect.innerText; + upRect.style.backgroundColor = "white"; + upRect.innerText = ""; + downRect = document.getElementById(`${i - k},${j}`); + upRect = document.getElementById(`${i - 1 - k},${j}`); + } while (upRect.innerText != ""); + } + } + } +} + +//pause/resume +function changeState(pauseButton) { + if (isPaused === true) { + isPaused = false; + pauseButton.innerText = "pause ▶️"; + } else { + isPaused = true; + pauseButton.innerText = "resume ⏸️"; + } + playAudio("pauseAudio"); + +} + +//game over +function gameOver(inputText) { + clearInterval(intervalId); + let gridItems = document.querySelectorAll(".grid-item"); + for (let i = 0; i < gridItems.length; i++) { + gridItems[i].style.backgroundColor = "white"; + gridItems[i].innerText = ""; + } + let grid = document.querySelector(".grid-container"); + if (inputText === "loose") { + grid.innerText = "GAME OVER!!! You Are A Looser😕"; + playAudio("looseAudio1"); + playAudio("looseAudio2"); + } + else { + grid.innerText = "YOU WIN!!!!! congratulations🎇🎇🎇"; + playAudio("winAudio"); + } + grid.classList.add("gameOver"); + //save max score + if (score > maxScore) { + let mail = user.mail; + user = localStorage.getItem(JSON.parse(mail)); + user.maxScore = score; + localStorage.setItem(JSON.stringify(user)); + } + return; +} + +//new game +function restart() { + clearInterval(intervalId); + mute.innerText = "🔊"; + isMuted = false; + isPaused = true; + if (score >= maxScore) { + user.maxScore = score; + localStorage.setItem(user.mail, JSON.stringify(user)); + } + score = 0; + lblscore.innerText = `score: ${score}`; + row = 0; + let grid = document.querySelector(".grid-container"); + grid.innerText = ""; + grid.classList.remove("gameOver"); + + buildGrid(); + level1.style.backgroundColor = "white"; + level2.style.backgroundColor = "white"; + level3.style.backgroundColor = "white"; + highestIndex = 0; + maxIndex = [7, 7, 7, 7, 7]; + level1.removeEventListener("click"); + level2.removeEventListener("click"); + level3.removeEventListener("click"); + speedGame(); +} + +start(); diff --git a/DropTheNumbers/js/home.js b/DropTheNumbers/js/home.js new file mode 100644 index 0000000..3356bb8 --- /dev/null +++ b/DropTheNumbers/js/home.js @@ -0,0 +1,60 @@ +let candyCrush = document.getElementById("candyCrush"); +localStorage.setItem("candyCrush", false); +let dropTheNumber = document.getElementById("dropTheNumber"); +localStorage.setItem("dropTheNumber", false); +let marioKart = document.getElementById("marioKart"); +localStorage.setItem("marioKart", false); +let pixelSurvive = document.getElementById("pixelSurvive"); +localStorage.setItem("pixelSurvive", false); + +candyCrush.addEventListener('click', () => { + localStorage.candyCrush = true; + openFile("candyCrush"); + +}); + +dropTheNumber.addEventListener('click', () => { + localStorage.dropTheNumber = true; + openFile("dropTheNumber"); +}); + +marioKart.addEventListener('click', () => { + localStorage.marioKart = true; + openFile("marioKart"); + +}); + +pixelSurvive.addEventListener('click', () => { + localStorage.pixelSurvive = true; + openFile("pixelSurvive"); + +}); + + +function openFile(game) { + if (localStorage.getItem("isConnected") === "true") { + switch (game) { + case "candyCrush": + window.open("https://play.google.com/store/apps/details?id=com.king.candycrushsaga&hl=en_US"); + break; + case "dropTheNumber": + window.open("../html/game.html", "_self"); + break; + case "marioKart": + window.open("../html/game.html", "_self"); + break; + case "pixelSurvive": + window.open("../html/game.html", "_self"); + break; + } + } + else + open("../html/log-in- sign-up.html", "_self"); +} + + +let exit = document.getElementById("exit"); +exit.addEventListener("click", () => { + localStorage.setItem("currentUser", " "); + localStorage.setItem("isConnected", false); +}); diff --git a/DropTheNumbers/js/log-in- sign-up.js b/DropTheNumbers/js/log-in- sign-up.js new file mode 100644 index 0000000..497f891 --- /dev/null +++ b/DropTheNumbers/js/log-in- sign-up.js @@ -0,0 +1,121 @@ +// try try try +const signUpButton = document.getElementById("signUp"); +const signInButton = document.getElementById("signIn"); +const container = document.getElementById("container"); + +signUpButton.addEventListener("click", () => { + container.classList.add("right-panel-active"); +}); +signInButton.addEventListener("click", () => { + container.classList.remove("right-panel-active"); +}); + +let signForm = document.getElementById("sign"); +signForm.addEventListener("submit", addUser); + +function addUser(event) { + event.preventDefault(); + let firstName = document.querySelector("#fname").value; + let lastName = document.querySelector("#lname").value; + let mail = document.querySelector("#email1").value; + let password = document.querySelector("#password1").value; + let phone = document.querySelector("#phone").value; + let age = document.querySelector("#age").value; + isValid = isNotEmpty(firstName) && isNotEmpty(lastName) && ValidateEmail(mail) && CheckPassword(password) && isNotEmpty(password) && isNotEmpty(phone) && isNotEmpty(age); + let isNew = isNotExist(mail); + if (isValid && isNew) { + let user = { + firstname: firstName, + lastname: lastName, + mail: mail, + password: password, + phone: phone, + age: age, + maxScore: 0, + }; + localStorage.setItem(mail, JSON.stringify(user)); + container.classList.remove("right-panel-active"); + } + else { + if (isValid) + alert("User Is Allredy Exist :("); + else + alert("You Didnt Insert Values"); + } +} + + +function isNotEmpty(inputText) { + if (inputText === "") + return false; + return true; +} + +function isNotExist(inputText) { + let user = localStorage.getItem(inputText); + if (user === null) + return true; + return false; +} + + +function ValidateEmail(inputText) { + let regex = new RegExp( + "([!#-'*+/-9=?A-Z^-~-]+(.[!#-'*+/-9=?A-Z^-~-]+)*|\"([]!#-[^-~ \t]|(\\[\t -~]))+\")@([!#-'*+/-9=?A-Z^-~-]+(.[!#-'*+/-9=?A-Z^-~-]+)*|[[\t -Z^-~]*])" + ); + if (regex.test(inputText)) + return true; + else { + alert("You have entered an invalid email address!"); + return false; + } +} + +function CheckPassword(inputText) { + let passw = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/; + if (inputText.match(passw)) { + return true; + } + else { + alert('please enter password between 6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter'); + return false; + } +} + + +let logForm = document.getElementById("log"); +logForm.addEventListener('submit', linkThePage); + +function linkThePage() { + + let mail = document.querySelector("#email2").value; + let password = document.querySelector("#password2").value; + let storageUser = JSON.parse(localStorage.getItem(mail)); + + if (storageUser === null || storageUser.password != password) + alert("user name or password is not correct!"); + else { + localStorage.setItem("currentUser", mail); + localStorage.setItem("isConnected", true); + let candyCrush = localStorage.getItem("candyCrush"); + if (candyCrush === "true") { + window.open("../html/game.html", "_self"); + localStorage.setItem("candyCrush", false); + } + let dropNumbers = localStorage.getItem("dropTheNumber"); + if (dropNumbers === "true") { + window.open("../html/game.html"); + localStorage.setItem("dropTheNumber", false); + } + let marioKart = localStorage.getItem("marioKart"); + if (marioKart === "true") { + window.open("../html/game.html", "_self"); + localStorage.setItem("marioKart", false); + } + let pixelSurvive = localStorage.getItem("pixelSurvive"); + if (localStorage.getItem("pixelSurvive") === "true") { + window.open("https://gameforge.com/en-US/littlegames/pixel-survival/#", "_self"); + localStorage.setItem("pixelSurvive", false); + } + } +} diff --git a/index.html b/index.html index 04c8ff5..04f7eca 100644 --- a/index.html +++ b/index.html @@ -100,6 +100,12 @@

The Bubble Game

Dev Quiz

+ + + +

Dev Quiz

+
+