From d15c520e74e7693abc385b9c79b3cfe8d3696360 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 31 Jul 2024 03:34:01 +0530 Subject: [PATCH 1/6] create a template for project --- Source-Code/JumpGame/index.html | 11 +++++++++++ Source-Code/JumpGame/script.js | 0 Source-Code/JumpGame/style.css | 0 3 files changed, 11 insertions(+) create mode 100644 Source-Code/JumpGame/index.html create mode 100644 Source-Code/JumpGame/script.js create mode 100644 Source-Code/JumpGame/style.css diff --git a/Source-Code/JumpGame/index.html b/Source-Code/JumpGame/index.html new file mode 100644 index 0000000..d01f779 --- /dev/null +++ b/Source-Code/JumpGame/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/Source-Code/JumpGame/script.js b/Source-Code/JumpGame/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/JumpGame/style.css b/Source-Code/JumpGame/style.css new file mode 100644 index 0000000..e69de29 From eb4e7115b1f322dbb36d5f0eada3383faa9463bb Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 31 Jul 2024 03:51:34 +0530 Subject: [PATCH 2/6] add div for blocks --- Source-Code/JumpGame/index.html | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/Source-Code/JumpGame/index.html b/Source-Code/JumpGame/index.html index d01f779..e3373ea 100644 --- a/Source-Code/JumpGame/index.html +++ b/Source-Code/JumpGame/index.html @@ -1,11 +1,20 @@ - - - - Document - - - - - \ No newline at end of file + + + + Jump Game + + + +

Jump Game

+

Press space to jump

+
+
+
+
+
+

Score:

+ + + From 5b8e902299752e6ecddb7a8a75b56bf9208d510f Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 31 Jul 2024 03:51:48 +0530 Subject: [PATCH 3/6] Ad styles and keyframes --- Source-Code/JumpGame/style.css | 111 +++++++++++++++++++++++++++++++++ 1 file changed, 111 insertions(+) diff --git a/Source-Code/JumpGame/style.css b/Source-Code/JumpGame/style.css index e69de29..fb6f638 100644 --- a/Source-Code/JumpGame/style.css +++ b/Source-Code/JumpGame/style.css @@ -0,0 +1,111 @@ +* { + padding: 0; + margin: 0; + overflow: hidden; + text-align: center; + background-color: blue; +} + +.game { + top: 40px; + width: 500px; + height: 200px; + border: 1px solid black; + margin: 10% auto; + background-color: aqua; +} + +h2 { + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: rgb(0, 247, 255); + text-shadow: 3px 2px rgb(128, 0, 0); + font-size: 5em; +} + +p { + color: white; + font-size: 20px; +} + +#character { + width: 30px; + height: 50px; + background-color: red; + position: relative; + top: 150px; + border-radius: 70%; +} + +.animate { + animation: jump 0.3s linear; +} + +@keyframes jump { + 0% { + top: 150px; + } + 30% { + top: 100px; + } + 70% { + top: 100px; + } + 100% { + top: 150px; + } +} + +#block { + background-color: blue; + width: 20px; + height: 20px; + position: relative; + top: 130px; + left: 500px; + animation: block 1s infinite linear; +} + +#block2 { + background-color: orange; + width: 20px; + height: 20px; + position: relative; + top: 30px; + left: 500px; +} + +.animate1 { + animation: blocke 1.5s infinite linear; +} + +@keyframes blocke { + 0% { + left: 500px; + } + 100% { + left: -20px; + } +} + +@keyframes block { + 0% { + left: 500px; + } + 100% { + left: -20px; + } +} +p { + text-align: center; +} +#co { + margin-bottom: 10px; + font-weight: bold; +} +.animate2 { + animation: pa 1s ease-in-out; +} +.show { + opacity: 0; +} From 9abe934f8883739848fa9554ebba80169156aa08 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 31 Jul 2024 03:52:06 +0530 Subject: [PATCH 4/6] add functionality --- Source-Code/JumpGame/script.js | 66 ++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/Source-Code/JumpGame/script.js b/Source-Code/JumpGame/script.js index e69de29..7e13d47 100644 --- a/Source-Code/JumpGame/script.js +++ b/Source-Code/JumpGame/script.js @@ -0,0 +1,66 @@ +const character = document.getElementById("character"); +const block = document.getElementById("block"); +const block2 = document.getElementById("block2"); +const co = document.getElementById("co"); +var counter = 0; + +var je = setInterval(() => { + co.classList.add("animate2"); + setTimeout(() => { + co.classList.add("show"); + }, 2000); +}, 1000); +function jump() { + if (character.classList === "animate") { + return; + } + character.classList.add("animate"); + setTimeout(function () { + character.classList.remove("animate"); + }, 300); +} +function myFunction(event) { + var x = event.keyCode; + if (x == 32) { + jump(); + } +} +var checkDead = setInterval(function () { + let characterTop = parseInt( + window.getComputedStyle(character).getPropertyValue("top") + ); + let blockLeft = parseInt( + window.getComputedStyle(block).getPropertyValue("left") + ); + if (blockLeft < 20 && blockLeft > -20 && characterTop >= 130) { + block.style.animation = "none"; + alert("Game Over. score: " + Math.floor(counter / 100)); + counter = 0; + block.style.animation = "block 1s infinite linear"; + } else if (ka()) { + } else { + counter++; + document.getElementById("scoreSpan").innerHTML = Math.floor(counter / 100); + } +}, 10); +var add = setInterval(() => { + block2.classList.add("animate1"); + setTimeout(() => { + block2.classList.remove("animate1"); + }, 9000); +}, 7000); + +function ka() { + let characterTop = parseInt( + window.getComputedStyle(character).getPropertyValue("top") + ); + let blockTop = parseInt( + window.getComputedStyle(block2).getPropertyValue("left") + ); + if (blockTop < 20 && characterTop == 100) { + block2.classList.remove("animate1"); + alert("Game Over. score: " + Math.floor(counter / 100)); + counter = 0; + } +} +window.addEventListener("keydown", myFunction); From 126870b7843122590db9f20d5141052d5bc9a018 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 31 Jul 2024 04:20:16 +0530 Subject: [PATCH 5/6] solve linter error --- Source-Code/JumpGame/script.js | 98 +++++++++++++++++----------------- Source-Code/JumpGame/style.css | 12 +++-- 2 files changed, 58 insertions(+), 52 deletions(-) diff --git a/Source-Code/JumpGame/script.js b/Source-Code/JumpGame/script.js index 7e13d47..9b02e9b 100644 --- a/Source-Code/JumpGame/script.js +++ b/Source-Code/JumpGame/script.js @@ -1,66 +1,66 @@ -const character = document.getElementById("character"); -const block = document.getElementById("block"); -const block2 = document.getElementById("block2"); -const co = document.getElementById("co"); -var counter = 0; +const character = document.getElementById('character'); +const block = document.getElementById('block'); +const block2 = document.getElementById('block2'); +let counter = 0; -var je = setInterval(() => { - co.classList.add("animate2"); +const jump = () => { + if (character.classList.contains('animate')) return; + character.classList.add('animate'); setTimeout(() => { - co.classList.add("show"); - }, 2000); -}, 1000); -function jump() { - if (character.classList === "animate") { - return; - } - character.classList.add("animate"); - setTimeout(function () { - character.classList.remove("animate"); + character.classList.remove('animate'); }, 300); -} -function myFunction(event) { - var x = event.keyCode; - if (x == 32) { - jump(); - } -} -var checkDead = setInterval(function () { - let characterTop = parseInt( - window.getComputedStyle(character).getPropertyValue("top") +}; + +// eslint-disable-next-line no-unused-vars +const checkDead = setInterval(() => { + const characterTop = parseInt( + window.getComputedStyle(character).getPropertyValue('top'), + 10, ); - let blockLeft = parseInt( - window.getComputedStyle(block).getPropertyValue("left") + const blockLeft = parseInt( + window.getComputedStyle(block).getPropertyValue('left'), + 10, ); if (blockLeft < 20 && blockLeft > -20 && characterTop >= 130) { - block.style.animation = "none"; - alert("Game Over. score: " + Math.floor(counter / 100)); + block.style.animation = 'none'; + alert(`Game Over. Score: ${Math.floor(counter / 100)}`); counter = 0; - block.style.animation = "block 1s infinite linear"; - } else if (ka()) { + block.style.animation = 'block 1s infinite linear'; } else { - counter++; - document.getElementById("scoreSpan").innerHTML = Math.floor(counter / 100); + counter += 1; + document.getElementById('scoreSpan').innerText = Math.floor(counter / 100); } }, 10); -var add = setInterval(() => { - block2.classList.add("animate1"); + +const add = () => { + block2.classList.add('animate1'); setTimeout(() => { - block2.classList.remove("animate1"); + block2.classList.remove('animate1'); }, 9000); -}, 7000); +}; -function ka() { - let characterTop = parseInt( - window.getComputedStyle(character).getPropertyValue("top") +// Call the `add` function at regular intervals to animate block2 +setInterval(add, 7000); + +// eslint-disable-next-line no-unused-vars +const ka = () => { + const characterTop = parseInt( + window.getComputedStyle(character).getPropertyValue('top'), + 10, ); - let blockTop = parseInt( - window.getComputedStyle(block2).getPropertyValue("left") + const blockTop = parseInt( + window.getComputedStyle(block2).getPropertyValue('left'), + 10, ); - if (blockTop < 20 && characterTop == 100) { - block2.classList.remove("animate1"); - alert("Game Over. score: " + Math.floor(counter / 100)); + if (blockTop < 20 && characterTop === 100) { + block2.classList.remove('animate1'); + alert(`Game Over. Score: ${Math.floor(counter / 100)}`); counter = 0; } -} -window.addEventListener("keydown", myFunction); +}; + +window.addEventListener('keydown', (event) => { + if (event.keyCode === 32) { + jump(); + } +}); diff --git a/Source-Code/JumpGame/style.css b/Source-Code/JumpGame/style.css index fb6f638..fe3c090 100644 --- a/Source-Code/JumpGame/style.css +++ b/Source-Code/JumpGame/style.css @@ -26,6 +26,7 @@ h2 { p { color: white; font-size: 20px; + text-align: center; } #character { @@ -45,12 +46,15 @@ p { 0% { top: 150px; } + 30% { top: 100px; } + 70% { top: 100px; } + 100% { top: 150px; } @@ -83,6 +87,7 @@ p { 0% { left: 500px; } + 100% { left: -20px; } @@ -92,20 +97,21 @@ p { 0% { left: 500px; } + 100% { left: -20px; } } -p { - text-align: center; -} + #co { margin-bottom: 10px; font-weight: bold; } + .animate2 { animation: pa 1s ease-in-out; } + .show { opacity: 0; } From 472060928eccd71b2aeb0d965874ffaad0c67262 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 31 Jul 2024 04:22:40 +0530 Subject: [PATCH 6/6] update the project --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index db09128..5616387 100644 --- a/README.md +++ b/README.md @@ -353,6 +353,17 @@ In order to run this project you need: +
  • +
    +Dinosaur Game +

    This project is a simple browser-based "Jump Game" where players control a character that must jump over blocks to avoid collisions. It demonstrates the use of HTML, CSS, and JavaScript to create an interactive game with basic animations and collision detection. The player uses the spacebar to jump and scores points based on survival time. The game includes two types of moving obstacles, adding a layer of challenge.

    + +
    +
    • +

    (back to top)