diff --git a/Dino Game/chrome-dino-game-1200x763-removebg-preview.png b/Dino Game/chrome-dino-game-1200x763-removebg-preview.png new file mode 100644 index 0000000..abdca65 Binary files /dev/null and b/Dino Game/chrome-dino-game-1200x763-removebg-preview.png differ diff --git a/Dino Game/index.html b/Dino Game/index.html new file mode 100644 index 0000000..222f333 --- /dev/null +++ b/Dino Game/index.html @@ -0,0 +1,24 @@ + + + + + + Dino Game + + + +
+
Score : 0
+
+
+ +
+
+
+
Reset
+
+ + + + + \ No newline at end of file diff --git a/Dino Game/script.js b/Dino Game/script.js new file mode 100644 index 0000000..9e0ceb2 --- /dev/null +++ b/Dino Game/script.js @@ -0,0 +1,51 @@ +let dino = document.querySelector(".dino"); +let box = document.querySelector(".obstacle"); +let reset = document.querySelector(".reset"); +let flag = true; +let score = 0; +let scoreDiv = document.querySelector(".score"); + +function jump() { + if (!dino.classList.contains("animateDino")) { + dino.classList.add("animateDino"); + } + + setTimeout(() => { + dino.classList.remove("animateDino"); + }, 500); +} + +setInterval(() => { + let dinoPos = parseInt(window.getComputedStyle(dino).getPropertyValue("top")); + let boxPos = parseInt(window.getComputedStyle(box).getPropertyValue("left")); + + // if (boxPos > 0 && boxPos <= 80 && dinoPos >= 350) { + // box.style.display = 'none'; + // box.classList.remove("animateBox"); + // flag = false; + // alert('Game Over') ; + // } + if (boxPos > 0 && boxPos <= 50 && dinoPos >= 370) { + box.style.display = 'none'; + box.classList.remove("animateBox"); + flag = false; + alert('Game Over') ; + } +}, 10); + +setInterval(() => { + if(flag) { + score++; + scoreDiv.innerHTML = `Score : ${score}`; + } + +}, 1200); +document.addEventListener("keydown", jump); + +reset.addEventListener("click", () => { + box.style.display = 'inline-block'; + box.classList.add("animateBox"); + scoreDiv.innerHTML = `Score : 0`; + score = 0; + flag = true; +}) diff --git a/Dino Game/style.css b/Dino Game/style.css new file mode 100644 index 0000000..266c689 --- /dev/null +++ b/Dino Game/style.css @@ -0,0 +1,113 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + min-width: 100vw; +} + +.wrapper{ + min-height: 100vh; + min-width: 100vw; + background: url(../assets/bg.webp); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 2rem; +} + +.game-div{ + width: 1000px; + height: 500px; + background-color: #fff; + border: 3px solid white; + overflow: hidden; +} + +.dino{ + height: 100px; + width: 80px; + background-color: #fff; + position: relative; + top: 398px; +} + +img{ + height: 100%; + width: 100%; +} + +.obstacle{ + display: inline-block; + height: 50px; + width: 50px; + background-color: blue; + position: relative; + top: 350px; + left: 1000px; +} + +.animateBox{ + animation-name: animate; + animation-duration: 1.2s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.animateDino { + animation-name: animate2; + animation-duration: 500ms; + animation-iteration-count: 1; + animation-timing-function: linear; +} + +@keyframes animate { + 0%{ + left: 1000px; + } + + 100%{ + left: -60px; + } +} + +@keyframes animate2 { + 0%{ + top: 398px; + } + + 30%{ + top: 300px; + } + + 70%{ + top: 300px; + } + + 100%{ + top: 398px; + } +} + +.reset , .score{ + border: 2px solid white; + color: black; + font-size: 2rem; + padding: 5px 10px; + background-color: white; + border-radius: 5px; + cursor: pointer; + transition: all 0.2s ease-in-out; +} + +.reset:hover{ + transform: scale(1.05); + transition: all 0.2s ease-in-out; +} \ No newline at end of file diff --git a/index.html b/index.html index 0707815..361196e 100644 --- a/index.html +++ b/index.html @@ -662,6 +662,18 @@

Game

+
+ Dino Game +
+

Dino Game

+

Game

+

Play it !

+ +
TRY NOW!
+ +
+
+