diff --git a/Games/Mario Matching Game/01.jpg b/Games/Mario Matching Game/01.jpg new file mode 100644 index 0000000000..51c56edd3d Binary files /dev/null and b/Games/Mario Matching Game/01.jpg differ diff --git a/Games/Mario Matching Game/02.jpg b/Games/Mario Matching Game/02.jpg new file mode 100644 index 0000000000..db8ce9cc8e Binary files /dev/null and b/Games/Mario Matching Game/02.jpg differ diff --git a/Games/Mario Matching Game/03.jpg b/Games/Mario Matching Game/03.jpg new file mode 100644 index 0000000000..97cd791cf2 Binary files /dev/null and b/Games/Mario Matching Game/03.jpg differ diff --git a/Games/Mario Matching Game/Readme.md b/Games/Mario Matching Game/Readme.md new file mode 100644 index 0000000000..3c80472ede --- /dev/null +++ b/Games/Mario Matching Game/Readme.md @@ -0,0 +1,23 @@ +# Mario Matching Game + +Welcome to the Mario Matching Game! This game challenges players to match three identical images within a specified time limit. + +## Image + +![image](https://github.com/dpvasani/Mario-Matching-Game/assets/109815626/fde14fbe-05fc-4231-9d26-ec8e975a633d) + + +## Gameplay + +- The game board consists of multiple tiles, each containing an image. + +## Features + +- Reset Button: Start a new game round by resetting the board and timer. + +## Technologies Used + +- HTML +- CSS +- JavaScript + diff --git a/Games/Mario Matching Game/index.html b/Games/Mario Matching Game/index.html new file mode 100644 index 0000000000..5ab2a96528 --- /dev/null +++ b/Games/Mario Matching Game/index.html @@ -0,0 +1,34 @@ + + + + + + + + + + + Game + + +

Mario Matching Game

+
+ + + +
+ + + + diff --git a/Games/Mario Matching Game/script.js b/Games/Mario Matching Game/script.js new file mode 100644 index 0000000000..6ebc1da48d --- /dev/null +++ b/Games/Mario Matching Game/script.js @@ -0,0 +1,30 @@ +let chk1 = document.querySelector('#chk1'); +let chk2 = document.querySelector('#chk2'); +let chk3 = document.querySelector('#chk3'); +let reset = document.querySelector('.reset'); +chk1.onclick = function(){ + if(chk1.checked === true){ + chk1.disabled = 'true' + } +} +chk2.onclick = function(){ + if(chk2.checked === true){ + chk2.disabled = 'true' + } +} +chk3.onclick = function(){ + if(chk3.checked === true){ + chk3.disabled = 'true' + } +} + +reset.onclick = function(){ + chk1.disabled = false + chk1.checked = false + + chk2.disabled = false + chk2.checked = false + + chk3.disabled = false + chk3.checked = false +} \ No newline at end of file diff --git a/Games/Mario Matching Game/style.css b/Games/Mario Matching Game/style.css new file mode 100644 index 0000000000..6edfd681d5 --- /dev/null +++ b/Games/Mario Matching Game/style.css @@ -0,0 +1,119 @@ +@font-face { + font-family: 'New Super Mario Font U', sans-serif; + src: url(https://fonts.cdnfonts.com/css/new-super-mario-font-u); +} + +* { + margin: 0; + padding: 0; + font-family: 'New Super Mario Font U', sans-serif; + box-sizing: border-box; +} + +body +{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + min-height: 100vh; + +} +h2 +{ + padding: 1rem; + text-align: center ; + margin-bottom: 3rem; + font-size: 2.5em; +} +.box +{ + position: relative; + width: 600px; + height: 200px; + border: 1px solid #888888; + box-shadow: 5px 10px #888888; + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-items: center; + justify-content: center; +} +.box label +{ + position: relative; + width: 100%; + height: 33.333%; + border: 1px solid black; + border-bottom: none; +} + +.box label input { + position: relative; + appearance: none; + z-index: 10; +} + +.box label i{ + position:absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: 600px; +} + +.box label:nth-child(1) i { + background-image: url(01.jpg); + animation: animate 0.5s steps(3) infinite; +} +.box label:nth-child(2) i { + background-image: url(02.jpg); + animation: animate 0.4s steps(3) infinite; +} +.box label:nth-child(3) i { + background-image: url(03.jpg); + animation: animate 0.7s steps(3) infinite; +} + +@keyframes animate{ + 0% + { + background-position: 0px; + } + 100% + { + background-position: 600px; + } +} + +.box label input:checked ~ i { + animation-play-state: paused; +} + +.reset{ + margin-top: 3rem; + padding: 1rem; + font-size: large; + letter-spacing: 5px; + background-color: rgba(44, 40, 40, 0.897); + color: rgb(255, 255, 255); + border: none; + font-weight: 700; +} + +.reset:active +{ + background: rgba(250, 112, 102, 0.89); + transform: scale(0.95); +} + +@media screen and (max-width:600px) { + .box { + width: 300px; + height: 100px; + } + .box label i{ + background-size: 300px; + } +} \ No newline at end of file diff --git a/README.md b/README.md index 9beae2b51a..33140f5e96 100644 --- a/README.md +++ b/README.md @@ -804,8 +804,8 @@ This repository also provides one such platforms where contributers come over an | [Bunny is Lost](https://github.com/kunjgit/GameZone/tree/main/Games/Bunny_is_Lost)| |[Steam_Punk](https://github.com/kunjgit/GameZone/tree/main/Games/Steam_Punk)| |[Tower Defence Game](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Tower_Defence_Game)| +|[Mario Matching Game](https://github.com/ananyag309/GameZone_ggsoc/tree/main/Games/MarioMatchingGame)| |[Dot_Dash](https://github.com/kunjgit/GameZone/tree/main/Games/Dot_Dash)| - |[Ghost Busting Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ghost_busting_game)| |[Wheel_of_fortune](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Wheel_of_fortune)| |[Dot_Box_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dot_Box_Game)| diff --git a/assets/images/Mario Matching Game (1).jpg b/assets/images/Mario Matching Game (1).jpg new file mode 100644 index 0000000000..51c56edd3d Binary files /dev/null and b/assets/images/Mario Matching Game (1).jpg differ diff --git a/assets/images/Mario Matching Game (2).jpg b/assets/images/Mario Matching Game (2).jpg new file mode 100644 index 0000000000..db8ce9cc8e Binary files /dev/null and b/assets/images/Mario Matching Game (2).jpg differ diff --git a/assets/images/Mario Matching Game (3).jpg b/assets/images/Mario Matching Game (3).jpg new file mode 100644 index 0000000000..97cd791cf2 Binary files /dev/null and b/assets/images/Mario Matching Game (3).jpg differ