Added Mario Matching Game

kunjgit · Jun 16, 2024 · fffb62d · fffb62d
1 parent bd6097c
commit fffb62d
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 0 deletions.
diff --git a/Games/Mario Matching Game/01.jpg b/Games/Mario Matching Game/01.jpg
diff --git a/Games/Mario Matching Game/02.jpg b/Games/Mario Matching Game/02.jpg
diff --git a/Games/Mario Matching Game/03.jpg b/Games/Mario Matching Game/03.jpg
diff --git a/Games/Mario Matching Game/Readme.md 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
@@ -0,0 +1,34 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="style.css" rel="stylesheet"  />
+    <link href="https://fonts.cdnfonts.com/css/new-super-mario-font-u" rel="stylesheet">
+    <style>
+      @import url('https://fonts.cdnfonts.com/css/new-super-mario-font-u');
+      </style>           
+    <title>Game</title>
+</head>
+<body>
+    <h2>Mario <span style="color: rgb(255, 102, 102);">Matching</span> Game</h2>
+    <div class = "box">
+      <label>
+        <input type="checkbox" class = "checkbox" id = "chk1">
+        <i></i>
+      </label>
+      <label>
+        <input type="checkbox" class = "checkbox" id = "chk2">
+        <i></i>
+      </label>
+      <label>
+        <input type="checkbox" class = "checkbox" id = "chk3">
+        <i></i>
+      </label>
+    </div>
+    <button type="checkbox" class="reset">Reset Game</button>
+    <script src="/script.js"></script>
+</body>
+</html>
diff --git a/Games/Mario Matching Game/script.js 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
+}
diff --git a/Games/Mario Matching Game/style.css 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;
+    }
+}