diff --git a/.github/workflows/pr_tags.yaml b/.github/workflows/pr_tags.yaml index 5eb783c1e2..726c629b88 100644 --- a/.github/workflows/pr_tags.yaml +++ b/.github/workflows/pr_tags.yaml @@ -1,78 +1,78 @@ -name: Pull Request Labels +# name: Pull Request Labels -on: - pull_request_target: - types: - - opened - - synchronize +# on: +# pull_request_target: +# types: +# - opened +# - synchronize -jobs: - pr-validation: - runs-on: ubuntu-latest +# jobs: +# pr-validation: +# runs-on: ubuntu-latest - steps: - - name: Checkout repository - uses: actions/checkout@v2 +# steps: +# - name: Checkout repository +# uses: actions/checkout@v2 - - name: Set up Node.js - uses: actions/setup-node@v2 - with: - node-version: '14' +# - name: Set up Node.js +# uses: actions/setup-node@v2 +# with: +# node-version: '14' - - name: Install dependencies - run: npm install --prefix .github octokit +# - name: Install dependencies +# run: npm install --prefix .github octokit - - name: Fetch related issue and labels - id: fetch_issue - uses: actions/github-script@v4 - with: - github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} - script: | - const prNumber = context.payload.pull_request.number; - const repoOwner = context.payload.repository.owner.login; - const repoName = context.payload.repository.name; +# - name: Fetch related issue and labels +# id: fetch_issue +# uses: actions/github-script@v4 +# with: +# github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} +# script: | +# const prNumber = context.payload.pull_request.number; +# const repoOwner = context.payload.repository.owner.login; +# const repoName = context.payload.repository.name; - const { data: pr } = await github.pulls.get({ - owner: repoOwner, - repo: repoName, - pull_number: prNumber - }); +# const { data: pr } = await github.pulls.get({ +# owner: repoOwner, +# repo: repoName, +# pull_number: prNumber +# }); - const issueNumber = pr.body.match(/#([0-9]+)/)[1]; +# const issueNumber = pr.body.match(/#([0-9]+)/)[1]; - const { data: issue } = await github.issues.get({ - owner: repoOwner, - repo: repoName, - issue_number: issueNumber - }); +# const { data: issue } = await github.issues.get({ +# owner: repoOwner, +# repo: repoName, +# issue_number: issueNumber +# }); - return { - issue: issue, - prNumber: prNumber, - repoOwner: repoOwner, - repoName: repoName - }; +# return { +# issue: issue, +# prNumber: prNumber, +# repoOwner: repoOwner, +# repoName: repoName +# }; - - name: Apply labels to PR - if: | - steps.fetch_issue.outputs.issue.labels.some(function(label) { - return label.name.toLowerCase() === 'gssoc'; - }) - run: | - const issueLabels = steps.fetch_issue.outputs.issue.labels; - const prNumber = steps.fetch_issue.outputs.prNumber; - const repoOwner = steps.fetch_issue.outputs.repoOwner; - const repoName = steps.fetch_issue.outputs.repoName; +# - name: Apply labels to PR +# if: | +# steps.fetch_issue.outputs.issue.labels.some(function(label) { +# return label.name.toLowerCase() === 'gssoc'; +# }) +# run: | +# const issueLabels = steps.fetch_issue.outputs.issue.labels; +# const prNumber = steps.fetch_issue.outputs.prNumber; +# const repoOwner = steps.fetch_issue.outputs.repoOwner; +# const repoName = steps.fetch_issue.outputs.repoName; - const prLabels = issueLabels.filter(function(label) { - return label.name.toLowerCase().startsWith('level'); - }); - prLabels.push('gssoc'); - await github.issues.addLabels({ - owner: repoOwner, - repo: repoName, - issue_number: prNumber, - labels: prLabels.map(function(label) { - return label.name; - }) - }); +# const prLabels = issueLabels.filter(function(label) { +# return label.name.toLowerCase().startsWith('level'); +# }); +# prLabels.push('gssoc'); +# await github.issues.addLabels({ +# owner: repoOwner, +# repo: repoName, +# issue_number: prNumber, +# labels: prLabels.map(function(label) { +# return label.name; +# }) +# }); diff --git a/Games/2048/style/helpers.css b/Games/2048/style/helpers.css new file mode 100644 index 0000000000..0db6b17c0b --- /dev/null +++ b/Games/2048/style/helpers.css @@ -0,0 +1 @@ +/*# sourceMappingURL=helpers.css.map */ \ No newline at end of file diff --git a/Games/2048/style/helpers.css.map b/Games/2048/style/helpers.css.map new file mode 100644 index 0000000000..2df238d04f --- /dev/null +++ b/Games/2048/style/helpers.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"helpers.css"} \ No newline at end of file diff --git a/Games/2048/style/main.css b/Games/2048/style/main.css index 82bb96681a..b50804668f 100644 --- a/Games/2048/style/main.css +++ b/Games/2048/style/main.css @@ -1,18 +1,16 @@ -@import url(fonts/clear-sans.css); - +@import "fonts/clear-sans.css"; html, body { margin: 0; padding: 0; background: #faf8ef; - color: #776e65; + color: #776E65; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-size: 18px; } body { margin: 80px 0; - margin-top: 25px; } .heading:after { @@ -28,43 +26,16 @@ h1.title { display: block; float: left; } - -@-webkit-keyframes move-up { - 0% { - top: 25px; - opacity: 1; - } - - 100% { - top: -50px; - opacity: 0; - } -} - -@-moz-keyframes move-up { +@keyframes $animation-name { 0% { top: 25px; opacity: 1; } - - 100% { - top: -50px; - opacity: 0; - } -} - -@keyframes move-up { - 0% { - top: 25px; - opacity: 1; - } - 100% { top: -50px; opacity: 0; } } - .scores-container { float: right; text-align: right; @@ -85,7 +56,6 @@ h1.title { margin-top: 8px; text-align: center; } - .score-container:after, .best-container:after { position: absolute; @@ -98,7 +68,6 @@ h1.title { text-align: center; color: #eee4da; } - .score-container .score-addition, .best-container .score-addition { position: absolute; @@ -109,11 +78,7 @@ h1.title { font-weight: bold; color: rgba(119, 110, 101, 0.9); z-index: 100; - -webkit-animation: move-up 600ms ease-in; - -moz-animation: move-up 600ms ease-in; animation: move-up 600ms ease-in; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; animation-fill-mode: both; } @@ -132,7 +97,7 @@ p { } a { - color: #776e65; + color: #776E65; font-weight: bold; text-decoration: underline; cursor: pointer; @@ -153,37 +118,14 @@ hr { width: 500px; margin: 0 auto; } - -@-webkit-keyframes fade-in { +@keyframes $animation-name { 0% { opacity: 0; } - 100% { opacity: 1; } } - -@-moz-keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - .game-container { margin-top: 40px; position: relative; @@ -194,17 +136,13 @@ hr { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; - -ms-touch-action: none; touch-action: none; background: #bbada0; border-radius: 6px; width: 500px; height: 500px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } - .game-container .game-message { display: none; position: absolute; @@ -215,14 +153,9 @@ hr { background: rgba(238, 228, 218, 0.5); z-index: 100; text-align: center; - -webkit-animation: fade-in 800ms ease 1200ms; - -moz-animation: fade-in 800ms ease 1200ms; animation: fade-in 800ms ease 1200ms; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; animation-fill-mode: both; } - .game-container .game-message p { font-size: 60px; font-weight: bold; @@ -230,12 +163,10 @@ hr { line-height: 60px; margin-top: 222px; } - .game-container .game-message .lower { display: block; margin-top: 59px; } - .game-container .game-message a { display: inline-block; background: #8f7a66; @@ -247,22 +178,17 @@ hr { line-height: 42px; margin-left: 9px; } - .game-container .game-message a.keep-playing-button { display: none; } - .game-container .game-message.game-won { background: rgba(237, 194, 46, 0.5); color: #f9f6f2; } - .game-container .game-message.game-won a.keep-playing-button { display: inline-block; } - -.game-container .game-message.game-won, -.game-container .game-message.game-over { +.game-container .game-message.game-won, .game-container .game-message.game-over { display: block; } @@ -274,11 +200,9 @@ hr { .grid-row { margin-bottom: 15px; } - .grid-row:last-child { margin-bottom: 0; } - .grid-row:after { content: ""; display: block; @@ -293,7 +217,6 @@ hr { border-radius: 3px; background: rgba(238, 228, 218, 0.35); } - .grid-cell:last-child { margin-right: 0; } @@ -309,384 +232,185 @@ hr { height: 107px; line-height: 107px; } - .tile.tile-position-1-1 { - -webkit-transform: translate(0px, 0px); - -moz-transform: translate(0px, 0px); - -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } - .tile.tile-position-1-2 { - -webkit-transform: translate(0px, 121px); - -moz-transform: translate(0px, 121px); - -ms-transform: translate(0px, 121px); transform: translate(0px, 121px); } - .tile.tile-position-1-3 { - -webkit-transform: translate(0px, 242px); - -moz-transform: translate(0px, 242px); - -ms-transform: translate(0px, 242px); transform: translate(0px, 242px); } - .tile.tile-position-1-4 { - -webkit-transform: translate(0px, 363px); - -moz-transform: translate(0px, 363px); - -ms-transform: translate(0px, 363px); transform: translate(0px, 363px); } - .tile.tile-position-2-1 { - -webkit-transform: translate(121px, 0px); - -moz-transform: translate(121px, 0px); - -ms-transform: translate(121px, 0px); transform: translate(121px, 0px); } - .tile.tile-position-2-2 { - -webkit-transform: translate(121px, 121px); - -moz-transform: translate(121px, 121px); - -ms-transform: translate(121px, 121px); transform: translate(121px, 121px); } - .tile.tile-position-2-3 { - -webkit-transform: translate(121px, 242px); - -moz-transform: translate(121px, 242px); - -ms-transform: translate(121px, 242px); transform: translate(121px, 242px); } - .tile.tile-position-2-4 { - -webkit-transform: translate(121px, 363px); - -moz-transform: translate(121px, 363px); - -ms-transform: translate(121px, 363px); transform: translate(121px, 363px); } - .tile.tile-position-3-1 { - -webkit-transform: translate(242px, 0px); - -moz-transform: translate(242px, 0px); - -ms-transform: translate(242px, 0px); transform: translate(242px, 0px); } - .tile.tile-position-3-2 { - -webkit-transform: translate(242px, 121px); - -moz-transform: translate(242px, 121px); - -ms-transform: translate(242px, 121px); transform: translate(242px, 121px); } - .tile.tile-position-3-3 { - -webkit-transform: translate(242px, 242px); - -moz-transform: translate(242px, 242px); - -ms-transform: translate(242px, 242px); transform: translate(242px, 242px); } - .tile.tile-position-3-4 { - -webkit-transform: translate(242px, 363px); - -moz-transform: translate(242px, 363px); - -ms-transform: translate(242px, 363px); transform: translate(242px, 363px); } - .tile.tile-position-4-1 { - -webkit-transform: translate(363px, 0px); - -moz-transform: translate(363px, 0px); - -ms-transform: translate(363px, 0px); transform: translate(363px, 0px); } - .tile.tile-position-4-2 { - -webkit-transform: translate(363px, 121px); - -moz-transform: translate(363px, 121px); - -ms-transform: translate(363px, 121px); transform: translate(363px, 121px); } - .tile.tile-position-4-3 { - -webkit-transform: translate(363px, 242px); - -moz-transform: translate(363px, 242px); - -ms-transform: translate(363px, 242px); transform: translate(363px, 242px); } - .tile.tile-position-4-4 { - -webkit-transform: translate(363px, 363px); - -moz-transform: translate(363px, 363px); - -ms-transform: translate(363px, 363px); transform: translate(363px, 363px); } .tile { position: absolute; - -webkit-transition: 100ms ease-in-out; - -moz-transition: 100ms ease-in-out; transition: 100ms ease-in-out; - -webkit-transition-property: -webkit-transform; - -moz-transition-property: -moz-transform; transition-property: transform; } - .tile .tile-inner { border-radius: 3px; - background: #f7e4e6; + background: #eee4da; text-align: center; font-weight: bold; z-index: 10; font-size: 55px; } - .tile.tile-2 .tile-inner { - background: #fdecee; + background: #eee4da; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } - .tile.tile-4 .tile-inner { - background: #f9d5d8; - /* box-shadow: 0 0 30px 10px rgba(255, 251, 236, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); */ + background: #eee1c9; + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } - .tile.tile-8 .tile-inner { color: #f9f6f2; - background: #ff909d; + background: #f3b27a; } - .tile.tile-16 .tile-inner { color: #f9f6f2; - background: #f85d96; + background: #f69664; } - .tile.tile-32 .tile-inner { color: #f9f6f2; - background: #f067a4; + background: #f77c5f; } - .tile.tile-64 .tile-inner { color: #f9f6f2; - background: #ff7c5f; + background: #f75f3b; } - .tile.tile-128 .tile-inner { color: #f9f6f2; - background: #f70776; - box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286); + background: #edd073; + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2380952381), inset 0 0 0 1px rgba(255, 255, 255, 0.1428571429); font-size: 45px; } - @media screen and (max-width: 520px) { .tile.tile-128 .tile-inner { font-size: 25px; } } - .tile.tile-256 .tile-inner { color: #f9f6f2; - background: #c3195d; - box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048); + background: #edcc62; + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.3174603175), inset 0 0 0 1px rgba(255, 255, 255, 0.1904761905); font-size: 45px; } - @media screen and (max-width: 520px) { .tile.tile-256 .tile-inner { font-size: 25px; } } - .tile.tile-512 .tile-inner { color: #f9f6f2; - background: #cd0756; - box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381); + background: #edc950; + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.3968253968), inset 0 0 0 1px rgba(255, 255, 255, 0.2380952381); font-size: 45px; } - @media screen and (max-width: 520px) { .tile.tile-512 .tile-inner { font-size: 25px; } } - .tile.tile-1024 .tile-inner { color: #f9f6f2; background: #edc53f; - box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571); + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.4761904762), inset 0 0 0 1px rgba(255, 255, 255, 0.2857142857); font-size: 35px; } - @media screen and (max-width: 520px) { .tile.tile-1024 .tile-inner { font-size: 15px; } } - .tile.tile-2048 .tile-inner { color: #f9f6f2; background: #edc22e; - box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333); + box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.5555555556), inset 0 0 0 1px rgba(255, 255, 255, 0.3333333333); font-size: 35px; } - @media screen and (max-width: 520px) { .tile.tile-2048 .tile-inner { font-size: 15px; } } - .tile.tile-super .tile-inner { color: #f9f6f2; - background: #3c3a32; + background: #3c3a33; font-size: 30px; } - @media screen and (max-width: 520px) { .tile.tile-super .tile-inner { font-size: 10px; } } - -@-webkit-keyframes appear { +@keyframes $animation-name { 0% { opacity: 0; - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); transform: scale(0); } - 100% { opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); transform: scale(1); } } - -@-moz-keyframes appear { - 0% { - opacity: 0; - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - } - - 100% { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } -} - -@keyframes appear { - 0% { - opacity: 0; - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - } - - 100% { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } -} - .tile-new .tile-inner { - -webkit-animation: appear 200ms ease 100ms; - -moz-animation: appear 200ms ease 100ms; animation: appear 200ms ease 100ms; - -webkit-animation-fill-mode: backwards; - -moz-animation-fill-mode: backwards; animation-fill-mode: backwards; } - -@-webkit-keyframes pop { - 0% { - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - } - - 50% { - -webkit-transform: scale(1.2); - -moz-transform: scale(1.2); - -ms-transform: scale(1.2); - transform: scale(1.2); - } - - 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } -} - -@-moz-keyframes pop { - 0% { - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - } - - 50% { - -webkit-transform: scale(1.2); - -moz-transform: scale(1.2); - -ms-transform: scale(1.2); - transform: scale(1.2); - } - - 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } -} - -@keyframes pop { +@keyframes $animation-name { 0% { - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); transform: scale(0); } - 50% { - -webkit-transform: scale(1.2); - -moz-transform: scale(1.2); - -ms-transform: scale(1.2); transform: scale(1.2); } - 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); transform: scale(1); } } - .tile-merged .tile-inner { z-index: 20; - -webkit-animation: pop 200ms ease 100ms; - -moz-animation: pop 200ms ease 100ms; animation: pop 200ms ease 100ms; - -webkit-animation-fill-mode: backwards; - -moz-animation-fill-mode: backwards; animation-fill-mode: backwards; } @@ -721,45 +445,37 @@ hr { } @media screen and (max-width: 520px) { - html, body { font-size: 15px; } - body { margin: 20px 0; padding: 0 20px; } - h1.title { font-size: 27px; margin-top: 15px; } - .container { width: 280px; margin: 0 auto; } - .score-container, .best-container { margin-top: 0; padding: 15px 10px; min-width: 40px; } - .heading { margin-bottom: 10px; } - .game-intro { width: 55%; display: block; box-sizing: border-box; line-height: 1.65; } - .restart-button { width: 42%; padding: 0; @@ -767,28 +483,23 @@ hr { box-sizing: border-box; margin-top: 2px; } - .game-container { - margin-top: 17px; + margin-top: 40px; position: relative; - padding: 10px; + padding: 15px; cursor: default; -webkit-touch-callout: none; -ms-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; - -ms-touch-action: none; touch-action: none; background: #bbada0; border-radius: 6px; - width: 280px; - height: 280px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; + width: 500px; + height: 500px; box-sizing: border-box; } - .game-container .game-message { display: none; position: absolute; @@ -799,14 +510,9 @@ hr { background: rgba(238, 228, 218, 0.5); z-index: 100; text-align: center; - -webkit-animation: fade-in 800ms ease 1200ms; - -moz-animation: fade-in 800ms ease 1200ms; animation: fade-in 800ms ease 1200ms; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; animation-fill-mode: both; } - .game-container .game-message p { font-size: 60px; font-weight: bold; @@ -814,12 +520,10 @@ hr { line-height: 60px; margin-top: 222px; } - .game-container .game-message .lower { display: block; margin-top: 59px; } - .game-container .game-message a { display: inline-block; background: #8f7a66; @@ -831,193 +535,113 @@ hr { line-height: 42px; margin-left: 9px; } - .game-container .game-message a.keep-playing-button { display: none; } - .game-container .game-message.game-won { background: rgba(237, 194, 46, 0.5); color: #f9f6f2; } - .game-container .game-message.game-won a.keep-playing-button { display: inline-block; } - - .game-container .game-message.game-won, - .game-container .game-message.game-over { + .game-container .game-message.game-won, .game-container .game-message.game-over { display: block; } - .grid-container { position: absolute; z-index: 1; } - .grid-row { - margin-bottom: 10px; + margin-bottom: 15px; } - .grid-row:last-child { margin-bottom: 0; } - .grid-row:after { content: ""; display: block; clear: both; } - .grid-cell { - width: 57.5px; - height: 57.5px; - margin-right: 10px; + width: 106.25px; + height: 106.25px; + margin-right: 15px; float: left; border-radius: 3px; - background: white; + background: rgba(238, 228, 218, 0.35); } - .grid-cell:last-child { margin-right: 0; } - .tile-container { position: absolute; z-index: 2; } - .tile, .tile .tile-inner { - width: 58px; - height: 58px; - line-height: 58px; + width: 107px; + height: 107px; + line-height: 107px; } - .tile.tile-position-1-1 { - -webkit-transform: translate(0px, 0px); - -moz-transform: translate(0px, 0px); - -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } - .tile.tile-position-1-2 { - -webkit-transform: translate(0px, 67px); - -moz-transform: translate(0px, 67px); - -ms-transform: translate(0px, 67px); - transform: translate(0px, 67px); + transform: translate(0px, 121px); } - .tile.tile-position-1-3 { - -webkit-transform: translate(0px, 135px); - -moz-transform: translate(0px, 135px); - -ms-transform: translate(0px, 135px); - transform: translate(0px, 135px); + transform: translate(0px, 242px); } - .tile.tile-position-1-4 { - -webkit-transform: translate(0px, 202px); - -moz-transform: translate(0px, 202px); - -ms-transform: translate(0px, 202px); - transform: translate(0px, 202px); + transform: translate(0px, 363px); } - .tile.tile-position-2-1 { - -webkit-transform: translate(67px, 0px); - -moz-transform: translate(67px, 0px); - -ms-transform: translate(67px, 0px); - transform: translate(67px, 0px); + transform: translate(121px, 0px); } - .tile.tile-position-2-2 { - -webkit-transform: translate(67px, 67px); - -moz-transform: translate(67px, 67px); - -ms-transform: translate(67px, 67px); - transform: translate(67px, 67px); + transform: translate(121px, 121px); } - .tile.tile-position-2-3 { - -webkit-transform: translate(67px, 135px); - -moz-transform: translate(67px, 135px); - -ms-transform: translate(67px, 135px); - transform: translate(67px, 135px); + transform: translate(121px, 242px); } - .tile.tile-position-2-4 { - -webkit-transform: translate(67px, 202px); - -moz-transform: translate(67px, 202px); - -ms-transform: translate(67px, 202px); - transform: translate(67px, 202px); + transform: translate(121px, 363px); } - .tile.tile-position-3-1 { - -webkit-transform: translate(135px, 0px); - -moz-transform: translate(135px, 0px); - -ms-transform: translate(135px, 0px); - transform: translate(135px, 0px); + transform: translate(242px, 0px); } - .tile.tile-position-3-2 { - -webkit-transform: translate(135px, 67px); - -moz-transform: translate(135px, 67px); - -ms-transform: translate(135px, 67px); - transform: translate(135px, 67px); + transform: translate(242px, 121px); } - .tile.tile-position-3-3 { - -webkit-transform: translate(135px, 135px); - -moz-transform: translate(135px, 135px); - -ms-transform: translate(135px, 135px); - transform: translate(135px, 135px); + transform: translate(242px, 242px); } - .tile.tile-position-3-4 { - -webkit-transform: translate(135px, 202px); - -moz-transform: translate(135px, 202px); - -ms-transform: translate(135px, 202px); - transform: translate(135px, 202px); + transform: translate(242px, 363px); } - .tile.tile-position-4-1 { - -webkit-transform: translate(202px, 0px); - -moz-transform: translate(202px, 0px); - -ms-transform: translate(202px, 0px); - transform: translate(202px, 0px); + transform: translate(363px, 0px); } - .tile.tile-position-4-2 { - -webkit-transform: translate(202px, 67px); - -moz-transform: translate(202px, 67px); - -ms-transform: translate(202px, 67px); - transform: translate(202px, 67px); + transform: translate(363px, 121px); } - .tile.tile-position-4-3 { - -webkit-transform: translate(202px, 135px); - -moz-transform: translate(202px, 135px); - -ms-transform: translate(202px, 135px); - transform: translate(202px, 135px); + transform: translate(363px, 242px); } - .tile.tile-position-4-4 { - -webkit-transform: translate(202px, 202px); - -moz-transform: translate(202px, 202px); - -ms-transform: translate(202px, 202px); - transform: translate(202px, 202px); + transform: translate(363px, 363px); } - .tile .tile-inner { font-size: 35px; } - .game-message p { font-size: 30px !important; height: 30px !important; line-height: 30px !important; margin-top: 90px !important; } - .game-message .lower { margin-top: 30px !important; } -} \ No newline at end of file +}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/Games/2048/style/main.css.map b/Games/2048/style/main.css.map new file mode 100644 index 0000000000..249ac6b410 --- /dev/null +++ b/Games/2048/style/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["main.scss","main.css","helpers.scss"],"names":[],"mappings":"AACQ,8BAAA;AAwBR;;EAEE,SAAA;EACA,UAAA;EAEA,mBAAA;EACA,cAnBW;EAoBX,8DAAA;EACA,eAAA;ACxBF;;AD2BA;EACE,cAAA;ACxBF;;AC+DE;EACE,WAAA;EACA,cAAA;EACA,WAAA;AD5DJ;;ADyBA;EACE,eAAA;EACA,iBAAA;EACA,SAAA;EACA,cAAA;EACA,WAAA;ACtBF;ACmCE;EFTA;IACE,SAAA;IACA,UAAA;ECFF;EDKA;IACE,UAAA;IACA,UAAA;ECHF;AACF;ADMA;EACE,YAAA;EACA,iBAAA;ACJF;;ADOA;;EAIE,kBAAA;EACA,qBAAA;EACA,mBAtD0B;EAuD1B,kBAAA;EACA,eANS;EAOT,YAPS;EAQT,iBAAA;EACA,iBAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;ACNF;ADQE;;EACE,kBAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,yBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,cAhFS;AC2Eb;ADQE;;EACE,kBAAA;EACA,WAAA;EACA,UAAA;EACA,eA/BO;EAgCP,iBAhCO;EAiCP,iBAAA;EACA,+BAAA;EACA,YAAA;EEpEF,gCFqEE;EE/DF,yBFgEE;ACDJ;;ADKA;EACE,gBAAA;ACFF;;ADKA;EACE,eAAA;ACFF;;ADKA;EACE,aAAA;EACA,mBAAA;EACA,iBAAA;ACFF;;ADKA;EACE,cAnHW;EAoHX,iBAAA;EACA,0BAAA;EACA,eAAA;ACFF;;ADME;EACE,yBAAA;ACHJ;;ADOA;EACE,YAAA;EACA,gCAAA;EACA,gBAAA;EACA,mBAAA;ACJF;;ADOA;EACE,YAhJY;EAiJZ,cAAA;ACJF;AClFE;EF0FA;IACE,UAAA;ECYF;EDTA;IACE,UAAA;ECWF;AACF;ADME;EACE,gBA5JwB;EA6JxB,kBAAA;EACA,aA9KW;EAgLX,eAAA;EACA,2BAAA;EACA,uBAAA;EAEA,yBAAA;EACA,sBAAA;EACA,qBAAA;EAGA,kBAAA;EAEA,mBA1KwB;EA2KxB,kBAAA;EACA,YA9LU;EA+LV,aA/LU;EAkMV,sBAAA;ACRJ;ADUI;EACE,aAAA;EAEA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,oCAAA;EACA,YAAA;EAEA,kBAAA;EE5KJ,oCFuMI;EEjMJ,yBFkMI;AChCN;ADMM;EACE,eAAA;EACA,iBAAA;EACA,YAAA;EACA,iBAAA;EACA,iBAAA;ACJR;ADSM;EACE,cAAA;EACA,gBAAA;ACPR;ADUM;EAhEJ,qBAAA;EACA,mBAAA;EACA,kBAAA;EACA,eAAA;EACA,qBAAA;EACA,cA3JkB;EA4JlB,YAAA;EACA,iBAAA;EA2DM,gBAAA;ACDR;ADIQ;EACE,aAAA;ACFV;ADSM;EACE,mCAAA;EACA,cArOY;AC8NpB;ADSQ;EACE,qBAAA;ACPV;ADWM;EAEE,cAAA;ACVR;;ADeE;EACE,kBAAA;EACA,UAAA;ACZJ;;ADeE;EACE,mBAlQW;ACsPf;ADcI;EACE,gBAAA;ACZN;ADeI;EACE,WAAA;EACA,cAAA;EACA,WAAA;ACbN;;ADiBE;EACE,eA9QQ;EA+QR,gBA/QQ;EAgRR,kBAlRW;EAmRX,WAAA;EAEA,kBAjRiB;EAmRjB,qCAAA;AChBJ;ADkBI;EACE,eAAA;AChBN;;ADoBE;EACE,kBAAA;EACA,UAAA;ACjBJ;;ADsBI;;EAEE,YAAA;EACA,aAAA;EACA,kBAAA;ACnBN;ADyBQ;EEhQN,8BFmQQ;ACtBV;ADmBQ;EEhQN,gCFmQQ;AChBV;ADaQ;EEhQN,gCFmQQ;ACVV;ADOQ;EEhQN,gCFmQQ;ACJV;ADCQ;EEhQN,gCFmQQ;ACEV;ADLQ;EEhQN,kCFmQQ;ACQV;ADXQ;EEhQN,kCFmQQ;ACcV;ADjBQ;EEhQN,kCFmQQ;ACoBV;ADvBQ;EEhQN,gCFmQQ;AC0BV;AD7BQ;EEhQN,kCFmQQ;ACgCV;ADnCQ;EEhQN,kCFmQQ;ACsCV;ADzCQ;EEhQN,kCFmQQ;AC4CV;AD/CQ;EEhQN,gCFmQQ;ACkDV;ADrDQ;EEhQN,kCFmQQ;ACwDV;AD3DQ;EEhQN,kCFmQQ;AC8DV;ADjEQ;EEhQN,kCFmQQ;ACoEV;;AD1DA;EACE,kBAAA;EEvSA,6BFqTA;EAGA,8BAAA;ACkDF;ADjEE;EACE,kBA5TiB;EA8TjB,mBAvTS;EAwTT,kBAA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9QQ;IA+QR,gBA/QQ;IAgRR,kBAlRW;IAmRX,WAAA;IAEA,kBAjRiB;IAmRjB,qCAAA;EC8eF;ED5eE;IACE,eAAA;EC8eJ;ED1eA;IACE,kBAAA;IACA,UAAA;EC4eF;EDveE;;IAEE,YAAA;IACA,aAAA;IACA,kBAAA;ECyeJ;EDneM;IEhQN,8BFmQQ;ECseR;EDzeM;IEhQN,gCFmQQ;EC4eR;ED/eM;IEhQN,gCFmQQ;ECkfR;EDrfM;IEhQN,gCFmQQ;ECwfR;ED3fM;IEhQN,gCFmQQ;EC8fR;EDjgBM;IEhQN,kCFmQQ;ECogBR;EDvgBM;IEhQN,kCFmQQ;EC0gBR;ED7gBM;IEhQN,kCFmQQ;ECghBR;EDnhBM;IEhQN,gCFmQQ;ECshBR;EDzhBM;IEhQN,kCFmQQ;EC4hBR;ED/hBM;IEhQN,kCFmQQ;ECkiBR;EDriBM;IEhQN,kCFmQQ;ECwiBR;ED3iBM;IEhQN,gCFmQQ;EC8iBR;EDjjBM;IEhQN,kCFmQQ;ECojBR;EDvjBM;IEhQN,kCFmQQ;EC0jBR;ED7jBM;IEhQN,kCFmQQ;ECgkBR;EDvVA;IACE,eAAA;ECyVF;EDrVE;IACE,0BAAA;IACA,uBAAA;IACA,4BAAA;IACA,2BAAA;ECuVJ;EDpVE;IACE,2BAAA;ECsVJ;AACF","file":"main.css"} \ No newline at end of file diff --git a/Games/AquaSort_Game/README.md b/Games/AquaSort_Game/README.md new file mode 100644 index 0000000000..fd33c60b1a --- /dev/null +++ b/Games/AquaSort_Game/README.md @@ -0,0 +1,45 @@ +# **Aquasort** + +--- A water sorting puzzle game! + +
+ +## **Description 📃** + +- Aquasort is a puzzle game where players must sort colored water into test tubes according to certain rules. +- Developed using HTML, CSS, and JavaScript. +- Players need to strategize and use logic to successfully complete each level. + +
+ +## **Functionalities 🎮** + +- Sorting colored water into test tubes. +- Multiple difficulty levels to challenge players. +- Dynamic water shuffling to provide a unique experience each time. + +
+ +## **How to play? 🕹️** + +- Choose a difficulty level (Easy, Medium, Hard, Very Hard, Impossible). +- Click on test tubes to transfer water between them according to the rules. +- The objective is to have all test tubes filled with the same color of water. + +
+ +## **Screenshots 📸** + +![Aquasort_Game](https://github.com/kunjgit/GameZone/assets/AquaSort.png) + +
+ +## **Created By 👦** + +[Vijay Shanker Sharma](https://github.com/thevijayshankersharma) + +
+ +### Thanks for playing Aquasort! + +
diff --git a/Games/AquaSort_Game/index.html b/Games/AquaSort_Game/index.html new file mode 100644 index 0000000000..24f380c67c --- /dev/null +++ b/Games/AquaSort_Game/index.html @@ -0,0 +1,30 @@ + + + + Page Title + + + +
+ +
+
+
+
RULES
+
There will be some glasses (or test tubes to be exact xD), your task is to put the liquids with same color together! You can transfer different colored water from one glass to another only if the other glass is empty or its top most layer of water is of the same color as that of the one from which water is to be taken. The glass you have selected will be highlighted to prevent confusion. Restart button will take you back to the beginning of the level, also every time you open the same level the water will be shuffled. Check out the real game 'Water sort puzzle' on playstore, I have cloned it.
+
BACK
+
+
+
+ + + diff --git a/Games/AquaSort_Game/script.js b/Games/AquaSort_Game/script.js new file mode 100644 index 0000000000..5038bf4499 --- /dev/null +++ b/Games/AquaSort_Game/script.js @@ -0,0 +1,241 @@ +var game,level,color=["red","blue","yellow","green","purple","lightgreen","lightblue","orange","brown","pink"],water=[],w=[],currentLevel,clicked=[],transferring=false,t=false,size=1,sizechange=0.05,won=false,moves=0; +var testTubePosition = { + 0: [[-110,130], [-20, 130], [70, 130], [-65,320], [15, 320]], + 1: [[-110,130], [-20, 130], [70, 130],[-110,320], [-20, 320], [70, 320]], + 2: [[-140,130],[-60,130],[20,130],[100,130],[-110,320], [-20, 320], [70, 320]], + 3: [[-140,130],[-60,130],[20,130],[100,130],[-140,320],[-60,320],[20,320],[100,320]], + 7: [[-140,100],[-60,100],[20,100],[100,100],[-140,275],[-60,275],[20,275],[100,275],[-140,450],[-60,450],[20,450],[100,450]], +} + +window.onload = function() { + game = document.getElementById("game"); + level = document.getElementById("level"); +} + +window.OpenLevel = function(x) { + moves = 0; + currentLevel=x; + won=false; + level.style.display = "block"; + level.innerHTML = ""; + water=[]; + let a = [],c=0; + for (let i = 0; i < x+3; i++) { + for (let j = 0; j < 4; j++) { + a.push(color[i]); + } + } + a=shuffle(a); + for (let i = 0; i < x+3; i++) { + water[i]=[]; + for (let j = 0; j < 4; j++) { + water[i].push(a[c]); + c++; + } + } + water.push(["transparent","transparent","transparent","transparent"],["transparent","transparent","transparent","transparent"]); + w = water.map((a)=>[...a]); + //console.log(water[0]); + ApplyInfo(); +} + +function ApplyInfo(a = water) { + if (!won) { + let d=0,heading=["EASY","MEDIUM","HARD","VERY HARD","","","","IMPOSSIBLE"][currentLevel]; + level.innerHTML = `
${heading}
`; + for (let i of testTubePosition[currentLevel]) { + level.innerHTML += `
+
+
+
+
+
`; + d++; + } + level.innerHTML+=`
RESTART
HOME
Moves: ${moves}
`; + } +} + +window.Clicked = function(x) { + //console.log(x); + if (!transferring) { + if (clicked.length == 0) { + clicked.push(x); + document.getElementsByClassName("test-tube")[x].style.transition = "0.2s linear"; + document.getElementsByClassName("test-tube")[x].style.transform = "scale(1.08)"; + } + else { + clicked.push(x); + let el = document.getElementsByClassName("test-tube")[clicked[0]]; + el.style.transform = "scale(1) rotate(0deg)"; + if (clicked[0]!=clicked[1]) { + el.style.transition = "1s linear"; + moves++; + document.getElementById("moves").innerHTML = "Moves: "+moves; + Transfer(...clicked); + } + clicked = []; + } + } +} + +function TransferAnim(a,b) { + let el = document.getElementsByClassName("test-tube")[a]; + transferring = true; + el.style.zIndex = "100"; + el.style.top = `calc(${testTubePosition[currentLevel][b][1]}px - 90px)`; + el.style.left = `calc(50vw + ${testTubePosition[currentLevel][b][0]}px - 70px)`; + el.style.transform = "rotate(75deg)"; + setTimeout(function() { + el.style.transform = "rotate(90deg)"; + },1000) + setTimeout(function() { + el.style.left = `calc(50vw + ${testTubePosition[currentLevel][a][0]}px)`; + el.style.top = `calc(${testTubePosition[currentLevel][a][1]}px)`; + el.style.transform = "rotate(0deg)"; + },2000); + setTimeout(function() { + el.style.zIndex = "0"; + transferring=false; + },3000) +} + +function Transfer(a,b) { + /* + a represents the index of the glass from which water is to ne taken + b represents the index of the glass to which water is to be transferred + constraints: + b should have white + last element of a = last non-white element in b + */ + if (!water[b].includes("transparent") || water[a] == ["transparent","transparent","transparent","transparent"]) { + moves-=1; + document.getElementById("moves").innerHTML = "Moves: "+moves; + return; + } + let p,q,r=false,s=false,count=0,c=0; + for (let i = 0; i < 4; i++) { + if (((water[a][i]!="transparent" && water[a][i+1]=="transparent") || i === 3) && !r) { + r=true; + p=[water[a][i],i]; + if (water[a].map(function(x) { + if (x=="transparent" || x==p[0]) {return 1;} else {return 0;} + }).reduce((x,y)=>x+y) === 4) { + p.push(i+1) + } + else { + for (let j = 1; j < 4; j++) { + if (i-j>=0 && water[a][i-j]!=p[0]) { + p.push(j); + break; + } + } + } + } + if (((water[b][i]!="transparent" && water[b][i+1]=="transparent") || water[b][0]=="transparent") && !s) { + s=true; + q=[water[b][i],i,water[b].map((x)=>x= (x=="transparent") ? 1 : 0).reduce((x,y)=>x+y)]; + } + } + //console.log(p); + if (q[0]!="transparent" && p[0]!=q[0]) { + moves-=1; + document.getElementById("moves").innerHTML = "Moves: "+moves; + return; + } + for (let i = 3; i >= 0; i--) { + if ((water[a][i]==p[0] || water[a][i]=="transparent") && count0) { + count--; + water[b][i]=p[0]; + } + } + setTimeout(function() {ApplyInfo();},3020); + setTimeout(function() {TransferAnim(a,b);},10); + setTimeout(Won,3000); +} + +function WaterDec(p,a,count) { + p[1] = 3-p[1]; + //console.log(count*30); + document.getElementsByClassName("test-tube")[a].innerHTML += `
`; + setTimeout(function() {document.getElementById("white-bg").style.height = count*30+1 + "px";},50); + setTimeout(function() { + document.getElementsByClassName("test-tube")[a].innerHTML = ` +
+
+
+
`; + },1050); +} + +function WaterInc(p,q,b,count) { + q[1] = 4-q[1]; + q[1]-= (q[0]!="transparent" ? 1: 0); + document.getElementsByClassName("test-tube")[b].innerHTML += `
`; + setTimeout(function() { + document.getElementById("colorful-bg").style.height = count*30+1 + "px"; + document.getElementById("colorful-bg").style.top = `calc(10px + ${q[1]*30}px - ${count*30}px)`; + },50); +} + +window.Restart = function() { + moves = 0; + water = w.map((a)=>[...a]); + won=false; + ApplyInfo(w); +} + +window.ShowMenu = function() { + document.getElementById("level").style.display = "none"; +} + +function Won() { + for (let i of water) { + if (i[0]!=i[1]||i[1]!=i[2]||i[2]!=i[3]) { + return; + } + } + won=true; + //console.log("hello"); + level.innerHTML = `
YOU WON
RESTART
HOME
`; +} + +function shuffle(x) { + let a=[],len=x.length; + for (let i = 0; i < len; i++) { + let n = Math.floor(Math.random()*x.length); + a.push(x[n]); + x.splice(n,1); + } + return a; +} + +window.ShowRules = function() { + document.getElementById("rules-page").style.display = "block"; + setTimeout(function() { + document.getElementById("rules-page").style.opacity = "1"; + },50); +} + +window.HideRules = function() { + setTimeout(function() { + document.getElementById("rules-page").style.display = "none"; + },500); + document.getElementById("rules-page").style.opacity = "0"; +} diff --git a/Games/AquaSort_Game/style.css b/Games/AquaSort_Game/style.css new file mode 100644 index 0000000000..0f54e2cad0 --- /dev/null +++ b/Games/AquaSort_Game/style.css @@ -0,0 +1,245 @@ +@import url('https://fonts.googleapis.com/css2?family=Sriracha&family=Raleway&display=swap'); + +body { + font-family: Raleway; + user-select: none; +} + +#game { + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background-color: white; +} + +#menu { + position: absolute; + margin-top: 0; + left: 0; + height: 100vh; + width: 100vw; + background-color: purple; + overflow-y:scroll; + overflow-x: hidden; + /*display: none;*/ +} + +#menu-heading { + position: relative; + margin-top: 0; + left: 0; + height: 50px; + width: 100vw; + background-color: yellow; + font-size: 30px; + line-height: 50px; + text-align: center; + font-weight: 900; +} + +.lvl { + position: relative; + margin-top: 30px; + left: 10px; + width: calc(100vw - 20px); + height: 80px; + color: white; + background-color: darkgreen; + text-align: center; + font-size: 30px; + font-weight: 600; + line-height: 80px; + border-radius: 20px; +} + +#level { + z-index: 1; + height: 100vh; + width: 100vw; + position: absolute; + top: 0; + left: 0; + background-color: white; + overflow-y: scroll; + overflow-x: hidden; + display: none; +} + +.lvl:hover { + background-color: green; +} + +.test-tube { + position: absolute; + height: 130px; + width: 40px; + border: 2px solid rgb(150,150,150); + border-radius: 2px 2px 20px 20px; + background-position: 0 10px; + overflow: hidden; + transition: 1s linear; + transform: rotate(0deg); +} + +@keyframes glassAnim { + 0%,100% {transform: scale(1);} + 50% {transform: scale(1.05);} +} + +.colors { + position: absolute; + left: 0; + height: 30px; + width: 40px; +} + +#won { + position: absolute; + top: 100px; + left: 0; + width: 100vw; + text-align: center; + font-size: 60px; + font-weight: 900; +} + +#white-bg { + position: absolute; + left: 0; + top: 10px; + width: 40px; + height: 10px; + background-color: white; + z-index: 1000; + transition: 1s; +} + +#colorful-bg { + position: absolute; + width: 100%; + height: 0; + z-index: 1000; + transition: 1s; +} + +#restart { + left: 0; +} + +#home { + left: calc(100vw - 150px); +} + +.game-buttons { + position: fixed; + top: calc(100vh - 50px); + height: 50px; + width: 150px; + font-size: 25px; + font-weight: 600; + text-align: center; + line-height: 50px; + background-color: lightgreen; + border-radius: 10px 10px 0 0; +} + +#lvl-heading { + position: absolute; + top: 0; + left: 0; + height: 50px; + width: 100vw; + background-color: yellow; + border-radius: 0 0 25px 25px; + font-size: 40px; + font-weight: 800; + line-height: 50px; + text-align: center; + letter-spacing: 5px; +} + +#moves { + position: fixed; + top: calc(100vh - 80px); + width: 150px; + height: 30px; + left: 10px; + font-size: 20px; +} + +#rules-btn { + position: fixed; + left: calc(100vw - 200px); + top: calc(100vh - 50px); + height: 50px; + width: 200px; + background-color: lightgreen; + border-radius: 20px 20px 0 0; + text-align: center; + font-size: 25px; + line-height: 50px; + font-weight: 500; +} + +#rules-page { + display: none; + z-index: 1000; + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background-color: rgba(0,0,0,0.5); + opacity: 0; + transition: 0.5s linear; +} + +#rules { + position: absolute; + top: 100px; + left: 50px; + height: calc(100vh - 200px); + width: calc(100vw - 100px); + background-color: white; + border-radius: 10px; +} + +#rules-heading { + position: absolute; + top: 10px; + left: 0; + height: 30px; + width: 100%; + font-size: 30px; + font-weight: 800; + text-align: center; +} + +#rules-text { + position: absolute; + top: 70px; + left: 5%; + width: 90%; + font-size: 20px; + height: calc(100vh - 200px - 150px); + overflow-x: hidden; +} + +#back { + position: absolute; + top: calc(100% - 120px + 65px + 10px); + height: 40px; + width: 100px; + left: calc(100% - 100px); + background-color: rgb(100, 255, 100); + font-size: 20px; + line-height: 40px; + text-align: center; + border-radius: 10px 0 0 10px; +} + +#alert-button:hover { + background-color: rgb(150,255,150); +} \ No newline at end of file diff --git a/Games/Colour_Generator_Game/README.md b/Games/Colour_Generator_Game/README.md new file mode 100644 index 0000000000..06e27ace9e --- /dev/null +++ b/Games/Colour_Generator_Game/README.md @@ -0,0 +1,39 @@ +# Random Color Generator Game + +This is a simple web-based game that generates random colors. Each generated color is displayed in a box along with its corresponding 6-digit hex code. + + +## Features + +- Generates six random colors at a time. +- Displays the hex code of each color inside the color box. +- Clean and simple user interface. + +## Installation + +To run this project locally, follow these steps: + +1. Clone the repository: + + ```bash + git clone https://github.com/your-username/random-color-generator-game.git + ``` + +2. Navigate to the project directory: + + ```bash + cd random-color-generator-game + ``` + +3. Open `index.html` in your web browser: + + ```bash + open index.html + ``` + +## Usage + +- Click the "Generate Colors" button to generate a new set of random colors. +- The hex code of each generated color is displayed inside the corresponding color box. + + diff --git a/Games/Colour_Generator_Game/index.html b/Games/Colour_Generator_Game/index.html new file mode 100644 index 0000000000..daccb54888 --- /dev/null +++ b/Games/Colour_Generator_Game/index.html @@ -0,0 +1,16 @@ + + + + + + Random Color Generator Game + + + +

Random Color Generator Game

+ +
+ + + + diff --git a/Games/Colour_Generator_Game/script.js b/Games/Colour_Generator_Game/script.js new file mode 100644 index 0000000000..eb1473ed8e --- /dev/null +++ b/Games/Colour_Generator_Game/script.js @@ -0,0 +1,27 @@ +document.getElementById('generateBtn').addEventListener('click', generateColors); + +function generateColors() { + const colorContainer = document.getElementById('colorContainer'); + colorContainer.innerHTML = ''; // Clear existing colors + + for (let i = 0; i < 6; i++) { + const color = getRandomColor(); + const colorBox = document.createElement('div'); + colorBox.className = 'colorBox'; + colorBox.style.backgroundColor = color; + colorBox.innerText = color.toUpperCase(); + colorContainer.appendChild(colorBox); + } +} + +function getRandomColor() { + const letters = '0123456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} + +// Generate initial colors on page load +generateColors(); diff --git a/Games/Colour_Generator_Game/style.css b/Games/Colour_Generator_Game/style.css new file mode 100644 index 0000000000..b1863ca482 --- /dev/null +++ b/Games/Colour_Generator_Game/style.css @@ -0,0 +1,36 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f4f4f4; + margin: 0; + padding: 0; +} + +h1 { + margin: 20px 0; +} + +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + margin-bottom: 20px; +} + +#colorContainer { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; +} + +.colorBox { + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-weight: bold; + border-radius: 5px; +} diff --git a/Games/Doraemon_Jump/index.html b/Games/Doraemon_Jump/index.html index 1b0961d5d3..44e3cdd805 100644 --- a/Games/Doraemon_Jump/index.html +++ b/Games/Doraemon_Jump/index.html @@ -19,6 +19,7 @@ + diff --git a/Games/Earth_Guardian/static/styles/main.css b/Games/Earth_Guardian/static/styles/main.css index f645bf9718..85faf24cd5 100644 --- a/Games/Earth_Guardian/static/styles/main.css +++ b/Games/Earth_Guardian/static/styles/main.css @@ -3,16 +3,12 @@ body { overflow: hidden; color: #f5f5f5; } - body .mainMenu-fade { opacity: 0; } - body .main-menu_buttons:hover { - -webkit-animation: buttonsAnimation 0.5s ease forwards infinite; - animation: buttonsAnimation 0.5s ease forwards infinite; + animation: buttonsAnimation 0.5s ease forwards infinite; } - body button { outline: none; } @@ -21,43 +17,24 @@ body button { width: 100%; height: 100vh; position: relative; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-transition: 2.5s ease; + justify-content: center; + align-items: center; transition: 2.5s ease; z-index: 3; opacity: 1; overflow: hidden; } - .main-menu .title { text-align: center; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + flex-direction: column; + justify-content: center; + align-items: center; } - .main-menu .title * { margin: 15px 0; } - .main-menu .title h1 { text-align: center; font-family: "Press Start 2P"; @@ -67,13 +44,11 @@ body button { margin: 0 auto; margin-bottom: 40px; } - @media (min-width: 1920px) { .main-menu .title h1 { font-size: 70px; } } - .main-menu .title .mainButtons { font-size: 14px; font-family: "Press Start 2P"; @@ -84,20 +59,16 @@ body button { cursor: pointer; z-index: 3; outline: none; - -webkit-transition: 0.3s ease; transition: 0.3s ease; } - @media (min-width: 1920px) { .main-menu .title .mainButtons { font-size: 18px; } } - .main-menu .title .mainButtons:hover { color: gold; } - .main-menu .title #copyright { margin-top: 80px; font-family: "Press Start 2P"; @@ -105,13 +76,11 @@ body button { color: #f5f5f5; justify-self: flex-end; } - @media (min-width: 1920px) { .main-menu .title #copyright { font-size: 14px; } } - .main-menu .title .soundControl { cursor: pointer; } @@ -124,41 +93,35 @@ body button { position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); color: #f5f5f5; background-color: #000016; z-index: 3; - border: 1px solid #dddddd30; + border: 1px solid rgba(221, 221, 221, 0.1882352941); text-align: center; font-family: "Press Start 2P"; font-size: 12px; letter-spacing: 2px; line-height: 15px; } - @media (min-width: 1920px) { .aboutMenu { width: 600px; line-height: 20px; } } - .aboutMenu h3 { color: gold; font-size: 20px; } - .aboutMenu p { padding: 25px; } - @media (min-width: 1920px) { .aboutMenu p { font-size: 18px; } } - .aboutMenu a { color: gold; text-decoration: none; @@ -169,58 +132,44 @@ body button { width: 400px; height: auto; padding: 20px; - border: 1px solid #f5f5f535; + border: 1px solid rgba(245, 245, 245, 0.2078431373); font-family: "Press Start 2P"; color: #f5f5f5; background-color: #000016; position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); z-index: 3; } - .highscoresList-menu h3 { font-size: 20px; letter-spacing: 2px; color: gold; margin-bottom: 20px; } - .highscoresList-menu #theName { color: gold; } - .highscoresList-menu p { font-size: 12px; margin: 10px 0; } - .highscoresList-menu .highscoreList-items { width: 100%; padding: 0 5px; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: space-between; + align-items: center; font-size: 12px; list-style-type: none; } - .highscoresList-menu .highscoreList-items * { margin: 3px 0; } - .highscoresList-menu #clearList { display: none; } - .highscoresList-menu #clearList:hover { color: #bd0e08; } @@ -229,51 +178,37 @@ body button { position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); display: none; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + flex-direction: column; + justify-content: center; + align-items: center; z-index: 3; font-family: "Press Start 2P"; } - .loading .loading-text { font-size: 12px; color: #f5f5f5; margin-bottom: 10px; } - @media (min-width: 1920px) { .loading .loading-text { font-size: 18px; } } - .loading .loading-bar { width: 200px; height: 20px; border: 1px solid grey; } - .loading .loading-bar .loading-bar_fill { width: 0%; height: 100%; background-color: #f5f5f5; } - .loading .info { margin: 30px 0px; } - .loading .info h2 { margin: 10px 0; font-size: 16px; @@ -281,20 +216,17 @@ body button { color: gold; letter-spacing: 2px; } - @media (min-width: 1920px) { .loading .info h2 { font-size: 22px; letter-spacing: 3px; } } - .loading .info p { color: #f5f5f5; font-size: 10px; margin: 5px 0; } - @media (min-width: 1920px) { .loading .info p { font-size: 18px; @@ -305,37 +237,24 @@ body button { width: 1280px; height: 500px; position: relative; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + flex-direction: column; + justify-content: flex-end; + align-items: center; position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); overflow: hidden; } - .container canvas { display: none; - border: 2px solid #dddddd10; + border: 2px solid rgba(221, 221, 221, 0.062745098); position: absolute; left: 50%; top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } - .container .containerText { width: 60px; height: 12px; @@ -344,15 +263,9 @@ body button { border-radius: 25px; background-color: PeachPuff; color: #111; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: flex-end; + align-items: center; position: absolute; bottom: 7px; left: 15px; @@ -360,7 +273,6 @@ body button { font-size: 12px; font-family: "Press Start 2P"; } - .container .health-container { display: none; position: absolute; @@ -368,11 +280,9 @@ body button { left: 5px; z-index: 3; } - .container .health-container img { z-index: 2; } - .container .shield-container { display: none; position: absolute; @@ -380,25 +290,21 @@ body button { left: 90px; z-index: 3; } - .container .shield-container img { z-index: 2; } - .container .countdown { display: none; font-family: "Press Start 2P"; font-size: 30px; color: #f5f5f5; - text-shadow: 3px 3px #a82121; + text-shadow: 3px 3px rgb(168, 33, 33); z-index: 3; position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } - .container .emptyWarning-text { display: none; font-family: "Press Start 2P"; @@ -409,208 +315,136 @@ body button { position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); z-index: 3; } - .container .emptyWarning-textActive { display: block; - -webkit-animation: overheatAnimation 0.6s ease forwards infinite; - animation: overheatAnimation 0.6s ease forwards infinite; + animation: overheatAnimation 0.6s ease forwards infinite; } - .container .emptyWarning-highscore { display: block; - -webkit-animation: highscoreAnimation 1.25s ease forwards infinite; - animation: highscoreAnimation 1.25s ease forwards infinite; + animation: highscoreAnimation 1.25s ease forwards infinite; } - .container .notificationsContainer { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: center; + align-items: center; position: absolute; left: 50%; bottom: 5px; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } - .container .notificationsContainer .notification { padding: 5px; width: 300px; height: 40px; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-transform: translateY(100px); - transform: translateY(100px); + justify-content: center; + align-items: center; + transform: translateY(100px); font-size: 12px; font-family: "Press Start 2P"; } - .container .notificationsContainer .notification i { color: #e1302a; } - .container .notificationsContainer .notification p { margin-left: 5px; color: #f5f5f5; } - .container .notificationsContainer .notification .health { color: #f5f5f5; } - .container .notificationsContainer .notification .shield { color: #1aeb71; } - .container .notificationsContainer .notification .timer { color: gold; } - .container .notificationsContainer .activeNotification { - -webkit-animation: notification 3s ease forwards; - animation: notification 3s ease forwards; + animation: notification 3s ease forwards; } .menu { display: none; width: 1250px; opacity: 0; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: space-between; + align-items: center; position: absolute; top: 20px; left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); z-index: 3; - -webkit-transition: 0.75s ease; transition: 0.75s ease; color: #f5f5f5; font-family: "Press Start 2P"; } - .menu #pauseGame { cursor: pointer; } - .menu .time { width: 150px; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: center; + align-items: center; } - .menu .time * { margin: 0 3px; } - .menu .time i { font-size: 30px; } - .menu .time #timerDisplay { font-size: 17px; letter-spacing: 2px; color: gold; font-family: "Press Start 2P"; } - .menu .time #timerDisplay.timeLow { color: #b30d07; font-size: 22px; } - .menu .timeShake { - -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; - animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-perspective: 1000px; - perspective: 1000px; + animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; } - .menu .level-container { width: 350px; padding: 3px; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: space-between; + align-items: center; font-size: 14px; } - .menu .level-container .levelTextActive { - -webkit-animation: notifyLevelUp 0.5s ease forwards infinite; - animation: notifyLevelUp 0.5s ease forwards infinite; + animation: notifyLevelUp 0.5s ease forwards infinite; } - .menu .level-container .level-bar { width: 200px; height: 25px; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 2px solid #f5f5f520; + justify-content: center; + align-items: center; + border: 2px solid rgba(245, 245, 245, 0.1254901961); border-radius: 3px; position: relative; overflow: hidden; } - .menu .level-container .level-bar p { color: #f5f5f5; z-index: 9999; } - .menu .level-container .level-bar .level-bar_fill { position: absolute; top: 0; left: 0; width: 0%; height: 100%; - -webkit-transition: 0.3s ease; transition: 0.3s ease; border-top-left-radius: 3px; border-bottom-left-radius: 3px; @@ -627,24 +461,14 @@ body button { position: absolute; left: 16%; bottom: 3px; - -webkit-transform: translate(-16%); - transform: translate(-16%); + transform: translate(-16%); background-color: rgba(0, 0, 0, 0.95); z-index: 3; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-transition: 0.5s ease; + flex-direction: column; + justify-content: center; + align-items: center; transition: 0.5s ease; } - .overheat-container p { text-align: center; font-family: "Press Start 2P"; @@ -652,47 +476,34 @@ body button { letter-spacing: 2px; color: goldenrod; } - .overheat-container .overheat-bar { width: 140px; height: 25px; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: center; + align-items: center; } - .overheat-container .overheat-bar * { margin: 0px 2px; } - .overheat-container .overheat-bar .overheat-bar_block:nth-child(1) { margin-left: -5px; } - .overheat-container .overheat-bar .overheat-bar_block { width: 10px; height: 20px; background-color: #fff; } - .overheat-container .overheat-bar .greenPhase { width: 10px; height: 20px; background-color: #2ECC40; } - .overheat-container .overheat-bar .yellowPhase { width: 10px; height: 20px; background-color: #FFDC00; } - .overheat-container .overheat-bar .redPhase { width: 10px; height: 20px; @@ -709,83 +520,63 @@ body button { color: #f5f5f5; font-family: "Press Start 2P"; font-size: 12px; - border: 1px solid #f5f5f535; + border: 1px solid rgba(245, 245, 245, 0.2078431373); position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); z-index: 3; } - .game--over #message { margin: 10px 0; font-family: "Press Start 2P"; font-size: 12px; } - .game--over .newHighscore-input { width: 340px; height: auto; padding: 15px; margin: 0 auto; display: none; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + justify-content: center; + align-items: center; + flex-direction: column; z-index: 3; } - .game--over .newHighscore-input * { margin: 5px 0; } - .game--over .newHighscore-input input { background-color: #010120; - border: 1px solid #f5f5f535; + border: 1px solid rgba(245, 245, 245, 0.2078431373); padding: 5px; color: #f5f5f5; font-family: "Press Start 2P"; font-size: 10px; outline: none; } - .game--over .newHighscore-input #scoreText { font-size: 12px; } - .game--over .newHighscore-notification { color: #f5f5f5; text-shadow: 4px 4px #860905; - -webkit-animation: highscoreAnimation 1.25s ease forwards infinite; - animation: highscoreAnimation 1.25s ease forwards infinite; + animation: highscoreAnimation 1.25s ease forwards infinite; } - .game--over .scores { margin-top: 5px; text-align: left; } - .game--over .scores span { color: gold; font-size: 15px; } - .game--over .scores * { margin: 10px 0; } - .game--over .scores #finalScore, .game--over .scores #highscore { color: gold; } - .game--over .gameOverBtn { display: inline-block; margin-top: 10px; @@ -798,9 +589,8 @@ body button { cursor: pointer; border-radius: 1px; } - .game--over .gameOverBtn:hover { - text-shadow: 3px 3px #a10909; + text-shadow: 3px 3px rgb(161, 9, 9); } .pause--menu { @@ -812,58 +602,39 @@ body button { color: #f5f5f5; text-align: center; font-family: "Press Start 2P"; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 2px solid #dddddd30; + flex-direction: column; + justify-content: center; + align-items: center; + border: 2px solid rgba(221, 221, 221, 0.1882352941); position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); z-index: 9; } - .pause--menu h3 { font-size: 19px; margin: 20px 0; - -webkit-animation: pauseTitle 0.8s ease infinite forwards; - animation: pauseTitle 0.8s ease infinite forwards; + animation: pauseTitle 0.8s ease infinite forwards; } - .pause--menu p { margin: 10px 0; cursor: pointer; } - .pause--menu p:hover { color: gold; - text-shadow: 2px 2px #a10909; + text-shadow: 2px 2px rgb(161, 9, 9); } .settings-menu { display: none; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + flex-direction: column; + justify-content: center; + align-items: center; width: 350px; height: 400px; background-color: #000016; - border: 1px solid #f5f5f535; + border: 1px solid rgba(245, 245, 245, 0.2078431373); padding: 15px; z-index: 10; font-family: "Press Start 2P"; @@ -871,23 +642,18 @@ body button { position: absolute; left: 50%; top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } - .settings-menu h2 { font-size: 22px; margin-bottom: 10px; color: gold; letter-spacing: 3px; - -webkit-animation: settingsText 1s ease forwards infinite; - animation: settingsText 1s ease forwards infinite; + animation: settingsText 1s ease forwards infinite; } - .settings-menu h3 { color: #f5f5f5; } - .settings-menu button { background: none; border: none; @@ -896,56 +662,36 @@ body button { color: #f5f5f5; cursor: pointer; margin-top: 10px; - -webkit-transition: 0.35s ease; transition: 0.35s ease; } - .settings-menu button:hover { color: gold; text-shadow: 2px 2px #860905; } - .settings-menu .settings-music, .settings-menu .settings-sfx { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: space-between; + align-items: center; width: 320px; } - .settings-menu * { margin: 5px 0; } - .settings-menu .directionControl { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: space-between; + align-items: center; width: 320px; } - .settings-menu .directionControl * { margin: 5px 0; } - .settings-menu input { width: 100px; cursor: pointer; margin: 2px 0; } - -.settings-menu input[type="text"] { +.settings-menu input[type=text] { width: 100px; cursor: text; background: none; @@ -956,35 +702,24 @@ body button { text-align: right; font-size: 10px; outline: none; - -webkit-transition: 0.3s ease; transition: 0.3s ease; opacity: 0.2; } - -.settings-menu input[type="text"]:focus { +.settings-menu input[type=text]:focus { opacity: 1; border-bottom: 2px solid gold; padding: 5px; } - .settings-menu .muteContainer { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: flex-start; + align-items: center; width: 100%; height: 20px; margin-left: 5px; font-size: 14px; color: gold; } - .settings-menu .muteContainer img { cursor: pointer; -} -/*# sourceMappingURL=main.css.map */ \ No newline at end of file +}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/Games/Earth_Guardian/static/styles/main.css.map b/Games/Earth_Guardian/static/styles/main.css.map index 14ae75ee1f..33a0fdc61e 100644 --- a/Games/Earth_Guardian/static/styles/main.css.map +++ b/Games/Earth_Guardian/static/styles/main.css.map @@ -1,9 +1 @@ -{ - "version": 3, - "mappings": "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", - "sources": [ - "main.scss" - ], - "names": [], - "file": "main.css" -} \ No newline at end of file +{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/Games/Forest_Guardian/README.md b/Games/Forest_Guardian/README.md new file mode 100644 index 0000000000..4bad8e8a5b --- /dev/null +++ b/Games/Forest_Guardian/README.md @@ -0,0 +1,59 @@ +# Forest Guardian + +Forest Guardian is a simple browser-based game where players control a guardian spirit navigating through a magical forest, collecting orbs while avoiding harmful creatures. + +## How to Play + +### Objective: +The goal of the game is to collect magical orbs while avoiding harmful creatures. As you collect orbs, you gain points and advance to higher levels, where the game becomes more challenging. + +### Controls: +- **Move Left:** Press the left arrow key (`←`) to move the guardian left. +- **Move Right:** Press the right arrow key (`→`) to move the guardian right. +- **Move Up:** Press the up arrow key (`↑`) to move the guardian up. +- **Move Down:** Press the down arrow key (`↓`) to move the guardian down. + +### Gameplay: +1. **Starting the Game:** + - The game starts automatically when you open the HTML file in a web browser. + - The guardian spirit appears at the bottom center of the screen. + - Orbs and creatures will start appearing randomly in the forest. + +2. **Collecting Orbs:** + - Move the guardian to collect the magical orbs. Each orb collected increases your score by 10 points. + - As you collect orbs, they will reappear at new random positions. + +3. **Avoiding Creatures:** + - Harmful creatures appear and move down the screen. Avoid touching them. + - If the guardian collides with a creature, the game ends. + +4. **Advancing Levels:** + - Every 50 points, you advance to a new level. + - More creatures appear, and they move faster, making it more challenging. + +5. **Game Over:** + - If the guardian collides with a creature, the game will display a "Game Over" alert with your final score. + - You can restart the game by clicking the "OK" button on the alert. + +## Functionalities + +- **Guardian Movement:** Use arrow keys to move the guardian in four directions: left, right, up, and down. +- **Orb Collection:** Collect magical orbs to increase your score. +- **Creature Avoidance:** Avoid harmful creatures to stay alive and continue playing. +- **Progressive Difficulty:** The game becomes more challenging as you advance levels, with more creatures and faster movement. +- **Score Tracking:** Track your score and current level on the scoreboard. + +## Screenshots (if available) + +Adding screenshots of the game in action to showcase its visuals and gameplay. +![image](https://github.com/Aditi22Bansal/GameZone/assets/142652964/26166445-f8e8-4eb6-81d9-b08d95725592) + +## Technologies Used + +- HTML +- CSS +- JavaScript + +## Credits + +This game was created by Aditi Bansal. diff --git a/Games/Forest_Guardian/index.html b/Games/Forest_Guardian/index.html new file mode 100644 index 0000000000..8c0c674a8e --- /dev/null +++ b/Games/Forest_Guardian/index.html @@ -0,0 +1,21 @@ + + + + + + Forest Guardian + + + +
+
+
+
+
+ Score: 0 + Level: 1 +
+
+ + + diff --git a/Games/Forest_Guardian/script.js b/Games/Forest_Guardian/script.js new file mode 100644 index 0000000000..198c8d364d --- /dev/null +++ b/Games/Forest_Guardian/script.js @@ -0,0 +1,142 @@ +// script.js +const guardian = document.getElementById('guardian'); +const orb = document.getElementById('orb'); +const creatures = document.getElementById('creatures'); +const scoreBoard = document.getElementById('score'); +const levelBoard = document.getElementById('level'); + +let score = 0; +let level = 1; +let gameInterval; +let moveLeft = false; +let moveRight = false; +let moveUp = false; +let moveDown = false; + +// Function to start the game +function startGame() { + placeOrb(); + placeCreatures(); + gameInterval = setInterval(updateGame, 20); +} + +// Function to update game elements +function updateGame() { + moveGuardian(); + moveCreatures(); + checkCollisions(); +} + +// Function to move the guardian +function moveGuardian() { + let left = parseInt(window.getComputedStyle(guardian).left); + let top = parseInt(window.getComputedStyle(guardian).top); + if (moveLeft && left > 0) { + guardian.style.left = left - 5 + 'px'; + } + if (moveRight && left < window.innerWidth - 50) { + guardian.style.left = left + 5 + 'px'; + } + if (moveUp && top > 0) { + guardian.style.top = top - 5 + 'px'; + } + if (moveDown && top < window.innerHeight - 50) { + guardian.style.top = top + 5 + 'px'; + } +} + +// Event listeners for key presses +document.addEventListener('keydown', (e) => { + if (e.key === 'ArrowLeft') moveLeft = true; + if (e.key === 'ArrowRight') moveRight = true; + if (e.key === 'ArrowUp') moveUp = true; + if (e.key === 'ArrowDown') moveDown = true; +}); + +document.addEventListener('keyup', (e) => { + if (e.key === 'ArrowLeft') moveLeft = false; + if (e.key === 'ArrowRight') moveRight = false; + if (e.key === 'ArrowUp') moveUp = false; + if (e.key === 'ArrowDown') moveDown = false; +}); + +// Function to place the orb at a random position +function placeOrb() { + orb.style.top = Math.random() * (window.innerHeight - 100) + 'px'; + orb.style.left = Math.random() * (window.innerWidth - 30) + 'px'; +} + +// Function to place creatures at random positions +function placeCreatures() { + creatures.innerHTML = ''; + for (let i = 0; i < level; i++) { + let creature = document.createElement('div'); + creature.className = 'creature'; + creature.style.top = Math.random() * (window.innerHeight - 40) + 'px'; + creature.style.left = Math.random() * (window.innerWidth - 40) + 'px'; + creatures.appendChild(creature); + } +} + +// Function to move creatures +function moveCreatures() { + let creatureElements = document.querySelectorAll('.creature'); + creatureElements.forEach(creature => { + let top = parseInt(window.getComputedStyle(creature).top); + creature.style.top = top + 2 + 'px'; + if (top > window.innerHeight) { + creature.style.top = '-40px'; + creature.style.left = Math.random() * (window.innerWidth - 40) + 'px'; + } + }); +} + +// Function to check collisions +function checkCollisions() { + // Check collision with orb + let guardianRect = guardian.getBoundingClientRect(); + let orbRect = orb.getBoundingClientRect(); + if ( + guardianRect.x < orbRect.x + orbRect.width && + guardianRect.x + guardianRect.width > orbRect.x && + guardianRect.y < orbRect.y + orbRect.height && + guardianRect.y + guardianRect.height > orbRect.y + ) { + score += 10; + scoreBoard.textContent = 'Score: ' + score; + placeOrb(); + if (score % 50 === 0) { + level++; + levelBoard.textContent = 'Level: ' + level; + placeCreatures(); + } + } + + // Check collision with creatures + let creatureElements = document.querySelectorAll('.creature'); + creatureElements.forEach(creature => { + let creatureRect = creature.getBoundingClientRect(); + if ( + guardianRect.x < creatureRect.x + creatureRect.width && + guardianRect.x + guardianRect.width > creatureRect.x && + guardianRect.y < creatureRect.y + creatureRect.height && + guardianRect.y + guardianRect.height > creatureRect.y + ) { + clearInterval(gameInterval); + alert('Game Over! Your score: ' + score); + resetGame(); + } + }); +} + +// Function to reset the game +function resetGame() { + score = 0; + level = 1; + scoreBoard.textContent = 'Score: ' + score; + levelBoard.textContent = 'Level: ' + level; + startGame(); +} + +// Start the game initially +startGame(); diff --git a/Games/Forest_Guardian/styles.css b/Games/Forest_Guardian/styles.css new file mode 100644 index 0000000000..df4703b599 --- /dev/null +++ b/Games/Forest_Guardian/styles.css @@ -0,0 +1,55 @@ +/* styles.css */ +body { + margin: 0; + overflow: hidden; + font-family: Arial, sans-serif; + background-color: #e0f7fa; +} + +#game-container { + position: relative; + width: 100vw; + height: 100vh; + background: #2e8b57; /* Simulating forest background with a solid color */ +} + +#guardian { + position: absolute; + bottom: 10px; + left: 50%; + width: 50px; + height: 50px; + background-color: blue; /* Placeholder for guardian */ + transform: translateX(-50%); +} + +#orb { + position: absolute; + width: 30px; + height: 30px; + background-color: #ffeb3b; + border-radius: 50%; +} + +#creatures { + position: absolute; + width: 100%; + height: 100%; +} + +.creature { + position: absolute; + width: 40px; + height: 40px; + background-color: red; /* Placeholder for creatures */ +} + +#score-board { + position: absolute; + top: 10px; + left: 10px; + color: #ffffff; + background: rgba(0, 0, 0, 0.5); + padding: 10px; + border-radius: 5px; +} diff --git a/Games/Guess_The_Song/Demo.mp4 b/Games/Guess_The_Song/Demo.mp4 new file mode 100644 index 0000000000..5aa1c7c769 Binary files /dev/null and b/Games/Guess_The_Song/Demo.mp4 differ diff --git a/Games/Guess_The_Song/README.md b/Games/Guess_The_Song/README.md new file mode 100644 index 0000000000..e9518b6547 --- /dev/null +++ b/Games/Guess_The_Song/README.md @@ -0,0 +1,36 @@ +# **Guess_The_Song** + +--- + +
+ +## **Description 📃** + +Guess the Song is the song guessing game where the hint is provided to the user in form of emoji and get 5 Chances to user to get the desired answer. This game contribute in out of the box thinking regarding any guessing. + +## **functionalities 🎮** + +Guess The Song is game that contribute to think regarding the song in deeper manner in order to get proper or desired result. The song should be guessed in 5 Chances by consider the hint. +- +
+ +## **How to play? 🕹️** +Step 1 : Enter the Letter. +Step 2 : If letter matches the desired output will shown on the screen. +Step 3 : If Letter doen't match with the desired output it won't shown on screen and the chance will get decrement by one. +Step 4 : Their will be 5 Chances and all are taken then the player will loss the match. +Step 5 : Otherwise the Player will win + +
+ +## **Screenshots 📸** + +
+ +![image](/assets/images/Guess_The_Song.png) + + +
+ +## **Working video 📹** +![video](/Games/Guess_The_Song/Demo.mp4) diff --git a/Games/Guess_The_Song/index.html b/Games/Guess_The_Song/index.html new file mode 100644 index 0000000000..e45432aa3c --- /dev/null +++ b/Games/Guess_The_Song/index.html @@ -0,0 +1,31 @@ + + + + + + Emoji Movie Quiz + + + + + + +
+

Emoji Movie Quiz

+

Mixture of Hollywood and Bollywood Songs..🎶🎶

+
+ Tries Left: 05 +
+
+
+
+ +
+ + + + + diff --git a/Games/Guess_The_Song/script.js b/Games/Guess_The_Song/script.js new file mode 100644 index 0000000000..765f4018be --- /dev/null +++ b/Games/Guess_The_Song/script.js @@ -0,0 +1,125 @@ +const moviesObject = { + "🎸🎤🔥": "We Will Rock You", + "👶👶": "Baby", + "💃🕺": "Despacito", + "🌧️☔": "Purple Rain", + "🎅🏠": "Santa Claus is Coming to Town", + "😢🎤": "Crying", + "🌧️🌧️🔥": "Tip Tip Barsa Pani", + "😜👩🏻😜": "Aankh Maare", + "👁️⚫": "Yeh Kaali Kaali Aankhen", + "💃🏽💍": "London Thumakda", + "🌟🌛": "Chand Sifarish", + "🏍️🏍️🏍️": "Dhoom Machale", + "😊": "Smile", + "🥳🥳🥳": "Happy Birthday", + "🛏️👦": "Bad Guy", + "🕺🐒": "Dance Monkey", + "👻": "Ghots", + "⭐🤘": "Rockstar", + "🚀👶": "Rocket Man", + "🎅👶": "Santa Baby", +}; +const container = document.querySelector(".container"); +const startButton = document.getElementById("start"); +const letterContainer = document.getElementById("letter-container"); +const resultContainer = document.querySelector(".result-container"); +const userInputSection = document.getElementById("userInputSection"); +const resultText = document.getElementById("result"); +const hints = Object.keys(moviesObject); +let randomHint = "", +randomWord = ""; +let winCount = 0, +lossCount = 5; + +const generateRandomValue = (array) => Math.floor(Math.random() * array.length); + +// Blocker +const blocker = () => { + let letterButtons = document.querySelectorAll(".letters"); + letterButtons.forEach((button) => { + button.disabled = true; + }); +}; + +// Start game +const startGame = () => { + init(); +}; + +// Generate Word +const generateWord = () => { + letterContainer.classList.remove("hide"); + userInputSection.innerText = ""; + randomHint = hints[generateRandomValue(hints)]; + randomWord = moviesObject[randomHint]; + container.innerHTML = `
${randomHint}
`; + let displayItem = ""; + randomWord.split("").forEach((value) => { + if (value == " ") { + winCount += 1; + displayItem += ` `; + } else { + displayItem += `_`; + } + }); + userInputSection.innerHTML = displayItem; +}; + +// Initial Function +const init = () => { + winCount = 0; + lossCount = 5; + document.getElementById( + "chanceCount" + ).innerHTML = `Tries Left: ${lossCount}`; + randomHint = null; + randomWord = ""; + userInputSection.innerHTML = ""; + letterContainer.classList.add("hide"); + letterContainer.innerHTML = ""; + generateWord(); + for (let i = 65; i < 91; i++) { + let button = document.createElement("button"); + button.classList.add("letters"); + // Number to ASCII [A - Z] + button.innerText = String.fromCharCode(i); + // Character button click + button.addEventListener("click", () => { + let charArray = randomWord.toUpperCase().split(""); + let inputSpace = document.getElementsByClassName("inputSpace"); + if (charArray.includes(button.innerText)) { + charArray.forEach((char, index) => { + if (char === button.innerText) { + button.classList.add("used"); + inputSpace[index].innerText = char; + winCount += 1; + if (winCount == charArray.length) { + resultText.innerHTML = "You Won"; + resultContainer.style.display = ''; + blocker(); + } + } + }); + } else { + lossCount -= 1; + document.getElementById( + "chanceCount" + ).innerHTML = `Tries Left: ${lossCount}`; + button.classList.add("used"); + if (lossCount == 0) { + resultText.innerHTML = "Game Over"; + blocker(); + resultContainer.style.display = ''; + letterContainer.classList.add("hide"); + } + } + button.disabled = true; + }); + letterContainer.appendChild(button); + } +}; + +window.onload = () => { + startGame(); +}; diff --git a/Games/Guess_The_Song/style.css b/Games/Guess_The_Song/style.css new file mode 100644 index 0000000000..8ccbdac850 --- /dev/null +++ b/Games/Guess_The_Song/style.css @@ -0,0 +1,113 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); + +* { + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; +} + +body { + background-image: linear-gradient(to right, #868f96 0%, #596164 100%); + background-repeat: no-repeat; + background-attachment: fixed; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.wrapper { + position: absolute; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; + width: 100%; + max-width: 600px; + background-color: #ffffff; + padding: 5em 3em; + border-radius: 0.8em; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; +} + +.wrapper > h1 { + font-size: 50px; +} + +.num-of-tries-left { + text-align: center; + margin-bottom: 2em; +} + +.num-of-tries-left span { + font-weight: 600; + font-size: 20px; +} + +.container { + font-size: 1.87em; + display: flex; + justify-content: space-around; +} + +#letter-container { + margin: 2em 0 1em 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; +} + +.letters { + width: 2em; + height: 2em; + background-color: #ffffff; + border: 2px solid #596164; + border-radius: 0.3em; + color: #596164; + font-size: 22px; + cursor: pointer; +} + +#userInputSection { + display: flex; + justify-content: center; + gap: 0.5em; + font-size: 30px; +} + +.controls-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background-image: linear-gradient(to right, #868f96 0%, #596164 100%); + height: 100vh; + width: 100vw; +} + +#start:active { + box-shadow: 0 0 #000000; + transform: translateY(7px); +} + +.hide { + display: none; +} + +.used { + background-color: #f5f5f5; + border-color: #9e9ea6; + color: #9e9ea6; +} + +.result-container > button { + font-size: 20px; + padding: 5px 20px; + border-radius: 5px; + border: none; + outline: none; + background-color: #9e9ea6; + color: rgb(255, 255, 255); + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + margin-top: 20px; +} \ No newline at end of file diff --git a/Games/Hit_the_hamster/README.md b/Games/Hit_the_hamster/README.md new file mode 100644 index 0000000000..d325e0da36 --- /dev/null +++ b/Games/Hit_the_hamster/README.md @@ -0,0 +1,29 @@ +# **Game_Name** + +Hit_the_hamster + +
+ +## **Description 📃** +A game in which you have to hit maximum number of hamster popping out within a given time frame of 30sec. +- + +## **functionalities 🎮** +Made using HTML CSS and JS click on hamster to score a point. +- +
+ +## **How to play? 🕹️** +Click on hamster to score as much as you can +- + +
+ +## **Screenshots 📸** + +
+ +![Alt text](../../assets/images/Hit_the_hamster_game.png) +
+ +## **Working video 📹** diff --git a/Games/Hit_the_hamster/images/Hit_the_hamster.webp b/Games/Hit_the_hamster/images/Hit_the_hamster.webp new file mode 100644 index 0000000000..6499e75e40 Binary files /dev/null and b/Games/Hit_the_hamster/images/Hit_the_hamster.webp differ diff --git a/Games/Hit_the_hamster/images/Hit_the_hamster_board.webp b/Games/Hit_the_hamster/images/Hit_the_hamster_board.webp new file mode 100644 index 0000000000..2704d6e113 Binary files /dev/null and b/Games/Hit_the_hamster/images/Hit_the_hamster_board.webp differ diff --git a/Games/Hit_the_hamster/index.html b/Games/Hit_the_hamster/index.html new file mode 100644 index 0000000000..204051ff10 --- /dev/null +++ b/Games/Hit_the_hamster/index.html @@ -0,0 +1,30 @@ + + + + + + Hit the Hamster + + + + +
+



+

HIT THE HAMSTER

+
+ +
+
+
+
+ Score: 0 +
+
+ Time: 30s +
+
+

Just click with cursor to beat the hamster.

+
+ + + diff --git a/Games/Hit_the_hamster/script.js b/Games/Hit_the_hamster/script.js new file mode 100644 index 0000000000..aa64bf3679 --- /dev/null +++ b/Games/Hit_the_hamster/script.js @@ -0,0 +1,61 @@ +document.addEventListener('DOMContentLoaded', () => { + const startButton = document.getElementById('start-button'); + const hamster = document.getElementById('hamster'); + const scoreBoard = document.getElementById('score'); + const timerDisplay = document.getElementById('time'); + + let score = 0; + let timeLeft = 30; // 30 seconds timer + let gameInterval; + let timerInterval; + + hamster.style.display = 'none'; // Hide hamster initially + + startButton.addEventListener('click', startGame); + + hamster.addEventListener('click', () => { + score += 1; + scoreBoard.textContent = `Score: ${score}`; + moveHamster(); + }); + + function moveHamster() { + const gridContainer = document.getElementById('grid-container'); + const cellWidth = gridContainer.clientWidth / 6; + const cellHeight = gridContainer.clientHeight / 6; + + const randomX = Math.floor(Math.random() * 6) * cellWidth; + const randomY = Math.floor(Math.random() * 6) * cellHeight; + + hamster.style.left = `${randomX + (cellWidth - hamster.clientWidth) / 2}px`; + hamster.style.top = `${randomY + (cellHeight - hamster.clientHeight) / 2}px`; + } + + function startGame() { + score = 0; + timeLeft = 30; + scoreBoard.textContent = `Score: ${score}`; + timerDisplay.textContent = `Time: ${timeLeft}s`; + hamster.style.display = 'block'; // Show hamster + + moveHamster(); + + gameInterval = setInterval(moveHamster, 1000); // move the hamster every second + timerInterval = setInterval(updateTimer, 1000); // update the timer every second + + startButton.disabled = true; // Disable start button during the game + } + + function updateTimer() { + timeLeft -= 1; + timerDisplay.textContent = `Time: ${timeLeft}s`; + + if (timeLeft <= 0) { + clearInterval(gameInterval); + clearInterval(timerInterval); + hamster.style.display = 'none'; // Hide hamster when game ends + alert(`Game over! Your score is ${score}.`); + startButton.disabled = false; // Enable start button for a new game + } + } +}); diff --git a/Games/Hit_the_hamster/style.css b/Games/Hit_the_hamster/style.css new file mode 100644 index 0000000000..f705483e2c --- /dev/null +++ b/Games/Hit_the_hamster/style.css @@ -0,0 +1,80 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; +} + + +#game { + position: relative; + width: 600px; + height: 600px; + border: 2px solid #000; + background-color: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +h1{ + text-align: center; +} +#start-button { + margin-bottom: 20px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + +#grid-container { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(6, 1fr); + width: 100%; + height: 100%; + position: relative; + background-image: url(https://imgs.search.brave.com/Olfjz7my7Tl7hvVpjejD28AJOxuPDwRJ3oMVZ84Svr0/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbnNw/aXJpbmdzdG9yeXMu/Y29tL3dwLWNvbnRl/bnQvdXBsb2Fkcy8y/MDIxLzA1L3RoZS1i/bGFjay1kb3Qtc3Rv/cnktNzUweDQ2MC5q/cGc); + background-size:100px 92px; +} + +#hamster { + width: 80px; + height: 80px; + background-image: url(https://imgs.search.brave.com/EOauzPsAeNtSn9zznwYBgfRiUU7tNPkZuHVtQnxf8gA/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/cHJlbWl1bS1waG90/by9jbG9zZS11cC1o/YW1zdGVyLXdpdGgt/YnJvd24tZmFjZS1i/cm93bi1leWVzLWdl/bmVyYXRpdmUtYWlf/OTU4MTY1LTkwODA4/LmpwZz9zaXplPTYy/NiZleHQ9anBn); + background-size:cover; + border-radius: 50%; + position: absolute; + cursor: pointer; + transition: transform 0.2s ease; +} + +#hamster:active { + transform: scale(0.8); +} + +#score-board { + position: absolute; + top: 10px; + left: 10px; + font-size: 20px; + font-weight: bold; +} + +#timer { + position: absolute; + top: 10px; + right: 10px; + font-size: 20px; + font-weight: bold; +} +p{ + font-size: 25px; + text-align: center; + margin-top: 20px; + color: rgb(238, 88, 88); + font-weight: bold; + +} \ No newline at end of file diff --git a/Games/Knife-Thrower/README.md b/Games/Knife-Thrower/README.md index 417b3a2222..337c306108 100644 --- a/Games/Knife-Thrower/README.md +++ b/Games/Knife-Thrower/README.md @@ -31,6 +31,7 @@ Knife-Thrower is an addictive and challenging game where players test their prec + Game Screenshot
diff --git a/Games/Labyrinth/README.md b/Games/Labyrinth/README.md index d2909bdbe8..c95017ec31 100644 --- a/Games/Labyrinth/README.md +++ b/Games/Labyrinth/README.md @@ -1,6 +1,24 @@ -Labyrinth is a game where you must solve mazes different each time: -Pick the key and go to exit, avoid the eyes! +# **Labyrinth** +------EXPLORE THE MAZE------- +## **Description 📃** +Labyrinth is an engaging and challenging game where players navigate through a series of unique mazes. Each maze is designed to be different from the last, providing a fresh and exciting experience every time you play. Your objective is simple yet thrilling: pick up the key and find your way to the exit while avoiding the watchful eyes that lurk within the maze. These eyes are obstacles that you must skillfully evade to successfully complete each level. -Use the arrow keys to move around the maze. +## **Functionalities 🎮** +Movement Controls: Use the arrow keys on your keyboard to move your character up, down, left, or right within the maze. The intuitive controls make it easy to navigate through the twists and turns of each labyrinth. +Dynamic Mazes: Each maze is randomly generated, ensuring a new and unique challenge with every playthrough. +Collect the Key: Before you can exit the maze, you must first find and pick up the key. The key is hidden somewhere within the labyrinth and reaching it is the first step to completing the level. + +Avoid the Eyes: The maze is populated with eyes that act as obstacles. Avoid these eyes as you make your way to the key and then to the exit. + +Exit the Maze: After collecting the key, navigate your way to the exit point to complete the level and move on to the next maze. + +## **Screenshots 📸** +
+ + + +Game Screenshot + +
diff --git a/Games/Love Calculator Game/README.md b/Games/Love Calculator Game/README.md new file mode 100644 index 0000000000..70335494f5 --- /dev/null +++ b/Games/Love Calculator Game/README.md @@ -0,0 +1,12 @@ + +# Love Calculator App + +![love-calculator](https://user-images.githubusercontent.com/72425181/124382212-e4d84e00-dce3-11eb-958a-8d82b6a05426.png) + +*This is a good-looking love calculator app. Love calculator is a fun application where friends and couples can calculate the percentage of love between them. Simple and interesting app to work on.* + +> Technologies used: + +- HTML +- CSS +- JAVASCRIPT diff --git a/Games/Love Calculator Game/heart.png b/Games/Love Calculator Game/heart.png new file mode 100644 index 0000000000..27f52bf764 Binary files /dev/null and b/Games/Love Calculator Game/heart.png differ diff --git a/Games/Love Calculator Game/index.html b/Games/Love Calculator Game/index.html new file mode 100644 index 0000000000..df32c5756c --- /dev/null +++ b/Games/Love Calculator Game/index.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + Love Calculator + + + + + + +
+

Welcome to this great invention of Doctor Love!

+

We all know that a name can tell a lot about a person. Names are not randomly chosen: they all + have a meaning. Doctor Love knew this so he made another great invention just for the lonely you! + + Sometimes you'd like to know if a relationship with someone could work out. Therefore Doctor Love himself + designed this great machine for you. With The Love Calculator you can calculate the probability of a + successful relationship between two people. The Love Calculator is an affective way to get an impression of + what the chances are on a relationship between two people. + + To find out what the chances for you and your dream partner are, just fill in both full names (both first + and last name) in the two text boxes below, and press Calculate.

+ +
+
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/Games/Love Calculator Game/script.js b/Games/Love Calculator Game/script.js new file mode 100644 index 0000000000..4fcc4230bf --- /dev/null +++ b/Games/Love Calculator Game/script.js @@ -0,0 +1,10 @@ + +function calculateLove(){ + var random = Math.random(); + random = (random * 100) + 1; + random = Math.floor(random); + var p = document.createElement("p"); + var text = document.createTextNode(random + "%"); + p.appendChild(text); + document.getElementById("lovePercentage").appendChild(p); +} diff --git a/Games/Love Calculator Game/style.css b/Games/Love Calculator Game/style.css new file mode 100644 index 0000000000..f7064755b3 --- /dev/null +++ b/Games/Love Calculator Game/style.css @@ -0,0 +1,78 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Lato', sans-serif; +} + +body{ + background-color: #eee; +} + +.logo{ + font-family: 'Dancing Script', cursive; + font-size: 39px; + color: red; + padding: 20px 70px; +} + +.wrapper{ + width: 70%; + margin: 0 auto; + text-align: center; + margin-top: 80px; +} + +.heading{ + font-size: 28px; + letter-spacing: 0.9px; + line-height: 54px; +} + +.about{ + font-size: 19px; + line-height: 30px; + text-align: left; +} + +.box{ + padding: 100px 0; + background-image: url('./heart.png'); + background-repeat: no-repeat; + background-size: contain; + background-position: 50% 60%; + opacity: 0.8; +} + +.flex-box{ + display: flex; + justify-content: space-around; +} + +.bold{ + font-weight: bold; + font-size: 17px; + letter-spacing: 0.7px; + +} + +input{ + padding: 20px 70px; + border: none; + border-radius: 35px; + +} + +button{ + padding: 15px 28px; + font-size: 20px; + border-radius: 30px; + background-image: linear-gradient(210deg, red, orange); + border: none; + color: #fff; + cursor: pointer; + +} + +#lovePercentage{ + font-size: 30px; +} \ No newline at end of file diff --git a/Games/Number_Recall_Game/README.md b/Games/Number_Recall_Game/README.md new file mode 100644 index 0000000000..ac9bf046e5 --- /dev/null +++ b/Games/Number_Recall_Game/README.md @@ -0,0 +1,24 @@ +# Number Recall Game + +## Description +The Number Recall Game is a simple web-based game designed to test and improve your memory. The game presents a sequence of numbers that you must memorize and then recall correctly. The sequence grows longer with each round if you recall it correctly, and the game continues until you make a mistake. + +# Functionality +- Displays a sequence of numbers to memorize. +- Increases the length of the sequence with each round. +- Simple and intuitive user interface. +- You can track your current score. + +## Usage +- Open the game by opening index.html in a web browser. +- Click the `Start Game` button to begin. +- A sequence of numbers will be displayed for a short period. +- Memorize the sequence and enter it into the input field once it disappears. +- Click the "Submit" button to check your input. +- If you recall the sequence correctly, a new number will be added to the sequence, and the game continues. +- If you input the sequence incorrectly, the game will end and display the correct sequence. + +## Files +- `index.html`: The main HTML file that sets up the structure of the game. +- `styles.css`: The CSS file that styles the game. +- `script.js`: The JavaScript file that contains the game logic. \ No newline at end of file diff --git a/Games/Number_Recall_Game/background.jpeg b/Games/Number_Recall_Game/background.jpeg new file mode 100644 index 0000000000..61b818de8b Binary files /dev/null and b/Games/Number_Recall_Game/background.jpeg differ diff --git a/Games/Number_Recall_Game/index.html b/Games/Number_Recall_Game/index.html new file mode 100644 index 0000000000..7ebd2441b0 --- /dev/null +++ b/Games/Number_Recall_Game/index.html @@ -0,0 +1,24 @@ + + + + + + Number Recall Game + + + +
+

Recall the Number

+
+
+ + +
+
+ + +
+

Score is : 0

+ + + diff --git a/Games/Number_Recall_Game/script.js b/Games/Number_Recall_Game/script.js new file mode 100644 index 0000000000..650f50baba --- /dev/null +++ b/Games/Number_Recall_Game/script.js @@ -0,0 +1,73 @@ +document.addEventListener('DOMContentLoaded', () => { + const sequenceDiv = document.getElementById('pattern') + const playerInput = document.getElementById('input') + const submit = document.getElementById('submit') + const start = document.getElementById('start') + const restart = document.getElementById('restart') + const message = document.getElementById('msg') + const score = document.getElementById('score') + + let sequence = [] + let round = 0 + playerInput.disabled = true + submit.disabled = true + + //generate a random number + const generateNextNumber = () => { + return Math.floor(Math.random() * 10); + } + + const showSequence = () => { + //it sets pattern to be the current sequence of numbers ( from array sequence ) + sequenceDiv.innerText = sequence.join(' ') + + //for round 1, sequenceDiv.innerText = '' will get executed after 1400ms, i.e, sequence is shown for 1400ms + setTimeout(() => { + sequenceDiv.innerText = '...' + }, 1000 + 200 * round) //it ensures as the game progresses and round increases, the sequence is displayed for a longer period before it is hidden. + } + + const startGame = () => { + sequence = [] + round = 0 + currScore = 0 + score.innerHTML = 'Score is : ' + currScore + message.innerText = '' + playerInput.value = '' + playerInput.disabled = false + submit.disabled = false + restart.style.display = 'block' + start.style.display = 'none' + nextRound() + } + + //it will show next sequence of numbers + const nextRound = () => { + round++ + sequence.push(generateNextNumber()) + showSequence() + } + + const checkSequence = () => { + //converting input value to an array + const playerSequence = playerInput.value.split('').map(Number) + if (playerSequence.join('') === sequence.join('')) { + // message.innerText = 'Correct!' + currScore += 10 + score.innerHTML = 'Score is : ' + currScore + playerInput.value = '' + setTimeout(() => { + message.innerText = '' + nextRound(); + }, 1000); + } else { + message.innerText = 'Game Over!' + '\n' + 'The correct sequence was: ' + sequence.join('') + playerInput.disabled = true + submit.disabled = true + } + } + + submit.addEventListener('click', checkSequence) + start.addEventListener('click', startGame) + restart.addEventListener('click', startGame) +}) \ No newline at end of file diff --git a/Games/Number_Recall_Game/style.css b/Games/Number_Recall_Game/style.css new file mode 100644 index 0000000000..c6b1eee4d9 --- /dev/null +++ b/Games/Number_Recall_Game/style.css @@ -0,0 +1,58 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-image: url('./background.jpeg'); + background-position: 10%; + flex-direction: column; +} + +.container { + text-align: center; + backdrop-filter: blur(10px) brightness(72%); + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 465px; + height: 43%; +} + +.pattern { + font-size: 2em; + margin-bottom: 20px; +} + +#input { + padding: 10px; + font-size: 1em; + margin-bottom: 10px; + outline: none; +} + +#input:hover{ + border: 2px solid navy; +} + +button { + padding: 10px 20px; + font-size: 1em; + margin: 5px; + cursor: pointer; +} + +#msg { + margin-top: 8px; + margin-bottom: 12px; + font-size: 1.1em; + color: rgb(122, 14, 14); +} +#restart{ + display: none; + margin-left: 35%; +} +#score{ + font-size: 1.3em; +} \ No newline at end of file diff --git a/Games/Reflex_Game/README.md b/Games/Reflex_Game/README.md new file mode 100644 index 0000000000..bff8ba5b80 --- /dev/null +++ b/Games/Reflex_Game/README.md @@ -0,0 +1,23 @@ +## **Game_Name** +Reflex Game +
+ +## Description 📃 +Through this game, one can find his/her average optical reflex time . + +## **Functionalities 🎮** +Change the color as per your wish and find your reflex time ! +
+ +## **How to play? 🕹️** +Among many colors, first choose one color and then click on start, as soon as the background color gets changed click on stop. +
+ +## **Screenshots 📸** +![ss4](https://github.com/Sara1428/GameZone/assets/146193518/59f91f43-533a-4afd-8717-c7be1c188f61) + +## **Working video 📹** +https://github.com/Sara1428/GameZone/assets/146193518/0a9c6106-a45c-43da-b093-5b8a13c95189 + + + diff --git a/Games/Reflex_Game/index.html b/Games/Reflex_Game/index.html new file mode 100644 index 0000000000..b559ced45d --- /dev/null +++ b/Games/Reflex_Game/index.html @@ -0,0 +1,47 @@ + + + + + + + + + Reflex Time Game + + + +

Reflex Game

+

Test your Response time!

How To Play

+

Click on "Start" first, and wait until the +background color changes. As soon as it changes, hit "stop!" +

+ +
+
+

Change background color to:

+
+
+ + +
+ +
+ + + diff --git a/Games/Reflex_Game/script.js b/Games/Reflex_Game/script.js new file mode 100644 index 0000000000..07fadca10d --- /dev/null +++ b/Games/Reflex_Game/script.js @@ -0,0 +1,87 @@ +var startTime=new Date(); +var endTime=new Date(); +var startPressed=false; +var bgChangeStarted=false; +var maxWait=20; +var timerID; + +function startTest() +{ + document.body.style.background=document.response.bgColorChange.options[ +document.response.bgColorChange.selectedIndex].text; + bgChangeStarted=true; + startTime=new Date(); +} + +function remark(responseTime) +{ + var responseString=""; + if (responseTime < 0.20) + responseString="Well done!"; + if (responseTime >= 0.30 && responseTime < 0.20) + responseString="Nice!"; + if (responseTime >=0.40 && responseTime < 0.30) + responseString="Good but could be better..."; + if (responseTime >=0.50 && responseTime < 0.60) + responseString="Fine but keep practicing!"; + if (responseTime >=0.60 && responseTime < 1) + responseString="Seems you need to practise !"; + if (responseTime >=1) + responseString="You need to improve and you can !!"; + + return responseString; +} + +function stopTest() +{ + if(bgChangeStarted) + { + endTime=new Date(); + var responseTime=(endTime.getTime()-startTime.getTime())/1000; + + document.body.style.background="white"; + alert("Your response time is: " + responseTime + + " seconds " + "\n" + remark(responseTime)); + startPressed=false; + bgChangeStarted=false; + } + else + { + if (!startPressed) + { + alert("press start first to start test"); + } + else + { + clearTimeout(timerID); + startPressed=false; + alert("you pressed too early!"); + } + } +} + +var randMULTIPLIER=0x015a4e35; +var randINCREMENT=1; +var today=new Date(); +var randSeed=today.getSeconds(); +function randNumber() +{ + randSeed = (randMULTIPLIER * randSeed + randINCREMENT) % (1 << 31); + return((randSeed >> 15) & 0x7fff) / 32767; +} + +function startit() +{ + if(startPressed) + { + alert("Already started. Press stop to stop"); + return; + } + else + { + startPressed=true; + timerID=setTimeout('startTest()', 6000*randNumber()); + } +} + + diff --git a/Games/Reflex_Game/style.css b/Games/Reflex_Game/style.css new file mode 100644 index 0000000000..a2d77df2b9 --- /dev/null +++ b/Games/Reflex_Game/style.css @@ -0,0 +1,86 @@ +@media only screen and (min-width: 600px) { +input[type=button]{ + background-color: #c7f3e9; + border: 2px solid rgb(1, 100, 1); + color: rgb(46, 1, 1); + padding: 16px 32px; + text-decoration: none; + display: block; + margin-right: auto; + margin-left: auto; + width: 100px; + cursor: pointer; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-weight: 900; +} +input:hover{ + color: rgb(247, 250, 250); + background-color: rgb(1, 56, 56); + transition: color 0.5s; +} +input:active{ + color: rgb(247, 250, 250); + background-color: rgb(1, 56, 56); + box-shadow: 3px 4px 5px black; +} + +body{ + background-color: white; +} +p, h1, h2, h3{ + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: rgb(2, 112, 76); + text-align: center; + font-weight: bold; +} +select{ + display: block; + margin-right: auto; + margin-left: auto; + border: 2px solid rgb(0, 78, 0); +} +} + +@media only screen and (max-width: 600px) { + input[type=button]{ + background-color: #c7f3e9; + border: 2px solid rgb(1, 100, 1); + color: rgb(46, 1, 1); + padding: 16px 32px; + text-decoration: none; + display: block; + margin-right: auto; + margin-left: auto; + width: 100px; + cursor: pointer; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-weight: 900; + } + input:hover{ + color: rgb(247, 250, 250); + background-color: rgb(1, 56, 56); + transition: color 0.5s; + } + input:active{ + color: rgb(247, 250, 250); + background-color: rgb(1, 56, 56); + box-shadow: 3px 4px 5px black; + } + + body{ + background-color: white; + } + p, h1, h2, h3{ + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: rgb(2, 112, 76); + text-align: center; + font-weight: bold; + } + select{ + display: block; + margin-right: auto; + margin-left: auto; + border: 2px solid rgb(0, 78, 0); + } +} + diff --git a/Games/Screen_Pet_Game/README.md b/Games/Screen_Pet_Game/README.md new file mode 100644 index 0000000000..53b171d063 --- /dev/null +++ b/Games/Screen_Pet_Game/README.md @@ -0,0 +1,34 @@ +# Screen Pet Game + +## Description 📃 +The Screen Pet game is an interactive, event-based program where a cute pet on your screen responds to your mouse interactions. The pet can display different emotions such as happiness, cheekiness, and sadness based on how you interact with it. This game provides a delightful way to engage with a virtual pet that reacts in real-time. + +## Functionalities 🎮 +1. **Happy Face**: The pet blushes and looks happy when the mouse moves over it. +2. **Cheeky Face**: The pet shows its tongue and crosses its eyes when double-clicked. +3. **Sad Face**: The pet becomes sad if ignored for a period of time and will become happy again when the mouse moves over it. + +## How to Play? 🕹️ +1. **Move Mouse Over Pet**: + - When you move your mouse over the pet, it will blush and look happy. +2. **Double-Click on Pet**: + - Double-clicking on the pet will make it show a cheeky face, sticking out its tongue and crossing its eyes for a short period. +3. **Ignore the Pet**: + - If you ignore the pet by not interacting with it, it will gradually become sad. Move the mouse over the pet again to make it happy. + +## Screenshots 📸 + + +1. **Happy Face**: + ![Happy Face](assets/images/Screen_Pet_Game_2.png) + +2. **Cheeky Face**: + ![Cheeky Face](assets/images/Screen_Pet_Game_3.png) + +3. **Sad Face**: + ![Sad Face](assets/images/Screen_Pet_Game_1.png) + +3. **Tongue Face**: + ![Tongue Face](assets/images/Screen_Pet_Game_4.png) + + diff --git a/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_1.png b/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_1.png new file mode 100644 index 0000000000..c59ce985bb Binary files /dev/null and b/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_1.png differ diff --git a/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_2.png b/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_2.png new file mode 100644 index 0000000000..90398c4599 Binary files /dev/null and b/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_2.png differ diff --git a/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_3.png b/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_3.png new file mode 100644 index 0000000000..d92cc6c02f Binary files /dev/null and b/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_3.png differ diff --git a/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_4.png b/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_4.png new file mode 100644 index 0000000000..a2e9775f20 Binary files /dev/null and b/Games/Screen_Pet_Game/assets/images/Screen_Pet_Game_4.png differ diff --git a/Games/Screen_Pet_Game/index.html b/Games/Screen_Pet_Game/index.html new file mode 100644 index 0000000000..6ec6bd8c67 --- /dev/null +++ b/Games/Screen_Pet_Game/index.html @@ -0,0 +1,13 @@ + + + + + + Screen Pet + + + + + + + diff --git a/Games/Screen_Pet_Game/script.js b/Games/Screen_Pet_Game/script.js new file mode 100644 index 0000000000..cb54c1be8b --- /dev/null +++ b/Games/Screen_Pet_Game/script.js @@ -0,0 +1,170 @@ +const canvas = document.getElementById('screenPetCanvas'); +const ctx = canvas.getContext('2d'); + +const bodyColor = 'SkyBlue1'; +let happyLevel = 10; +let eyesCrossed = false; +let tongueOut = false; + +function drawPet() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Body + ctx.fillStyle = bodyColor; + ctx.beginPath(); + ctx.ellipse(200, 185, 165, 165, 0, 0, Math.PI * 2); + ctx.fill(); + + // Ears + drawPolygon([[75, 80], [75, 10], [165, 70]], bodyColor); + drawPolygon([[255, 45], [325, 10], [320, 70]], bodyColor); + + // Feet + ctx.fillStyle = bodyColor; + ctx.beginPath(); + ctx.ellipse(105, 340, 40, 20, 0, 0, Math.PI * 2); + ctx.fill(); + ctx.beginPath(); + ctx.ellipse(290, 340, 40, 20, 0, 0, Math.PI * 2); + ctx.fill(); + + // Eyes + drawEye(eyesCrossed ? 135 : 145, 140, 'white'); + drawEye(eyesCrossed ? 255 : 245, 140, 'white'); + + // Tongue + if (tongueOut) { + drawTongue(); + } + + // Mouth + drawMouth(); + + // Cheeks + if (happyLevel > 0) { + drawCheek(95, 205); + drawCheek(305, 205); + } +} + +function drawPolygon(points, color) { + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(points[0][0], points[0][1]); + for (let i = 1; i < points.length; i++) { + ctx.lineTo(points[i][0], points[i][1]); + } + ctx.closePath(); + ctx.fill(); +} + +function drawEye(x, y, color) { + ctx.fillStyle = color; + ctx.beginPath(); + ctx.ellipse(x, y, 15, 30, 0, 0, Math.PI * 2); + ctx.fill(); + + ctx.fillStyle = 'black'; + ctx.beginPath(); + ctx.ellipse(x, y + 10, 5, 5, 0, 0, Math.PI * 2); + ctx.fill(); +} + +function drawMouth() { + ctx.strokeStyle = 'black'; + ctx.lineWidth = 2; + + if (tongueOut) { + ctx.beginPath(); + ctx.moveTo(170, 250); + ctx.quadraticCurveTo(200, 282, 230, 250); + ctx.stroke(); + } else if (happyLevel > 0) { + ctx.beginPath(); + ctx.moveTo(170, 250); + ctx.quadraticCurveTo(200, 282, 230, 250); + ctx.stroke(); + } else { + ctx.beginPath(); + ctx.moveTo(170, 250); + ctx.quadraticCurveTo(200, 232, 230, 250); + ctx.stroke(); + } +} + +function drawTongue() { + ctx.fillStyle = 'red'; + ctx.beginPath(); + ctx.rect(185, 250, 30, 40); + ctx.fill(); + ctx.beginPath(); + ctx.ellipse(200, 290, 15, 10, 0, 0, Math.PI); + ctx.fill(); +} + +function drawCheek(x, y) { + ctx.fillStyle = 'pink'; + ctx.beginPath(); + ctx.ellipse(x, y, 25, 25, 0, 0, Math.PI * 2); + ctx.fill(); +} + +function toggleEyes() { + const color = ctx.fillStyle === 'white' ? bodyColor : 'white'; + ctx.fillStyle = color; +} + +function blink() { + toggleEyes(); + setTimeout(toggleEyes, 250); + setTimeout(blink, 3000); +} + +function togglePupils() { + eyesCrossed = !eyesCrossed; + drawPet(); +} + +function toggleTongue() { + tongueOut = !tongueOut; + drawPet(); +} + +function cheeky(event) { + toggleTongue(); + togglePupils(); + hideHappy(); + setTimeout(toggleTongue, 1000); + setTimeout(togglePupils, 1000); +} + +function showHappy(event) { + if (event.offsetX >= 20 && event.offsetX <= 350 && event.offsetY >= 20 && event.offsetY <= 350) { + happyLevel = 10; + } + drawPet(); +} + +function hideHappy() { + happyLevel = 0; + drawPet(); +} + +function sad() { + if (happyLevel === 0) { + drawPet(); + } else { + happyLevel -= 1; + drawPet(); + } + setTimeout(sad, 5000); +} + +canvas.addEventListener('mousemove', showHappy); +canvas.addEventListener('mouseleave', hideHappy); +canvas.addEventListener('dblclick', cheeky); + +setTimeout(blink, 1000); +setTimeout(sad, 5000); + +drawPet(); diff --git a/Games/Screen_Pet_Game/styles.css b/Games/Screen_Pet_Game/styles.css new file mode 100644 index 0000000000..8a9da4a17b --- /dev/null +++ b/Games/Screen_Pet_Game/styles.css @@ -0,0 +1,13 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: rgb(147, 147, 181); +} + +canvas { + background-color: skyblue; + border: none; +} diff --git a/Games/Snake_Ladder/scss/style.css b/Games/Snake_Ladder/scss/style.css index 7ead3ea96a..f8f15126f0 100644 --- a/Games/Snake_Ladder/scss/style.css +++ b/Games/Snake_Ladder/scss/style.css @@ -1,6 +1,7 @@ @font-face { font-family: Pacifico; - src: url(../fonts/Pacifico.ttf); } + src: url(../fonts/Pacifico.ttf); +} /* -------------------------------- Primary style @@ -8,47 +9,52 @@ Primary style -------------------------------- */ html * { -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } + -moz-osx-font-smoothing: grayscale; +} *, *:after, *:before { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; +} body { font-size: 100%; font-family: "Nunito", sans-serif; color: #2c3d50; - background-color: #d9dadc; } + background-color: #d9dadc; +} body, html { /* important */ height: 100%; - font-size: 20px; } - @media only screen and (min-width: 960px) { - body, html { - font-size: 23px; } } + font-size: 20px; +} +@media only screen and (min-width: 960px) { + body, html { + font-size: 23px; + } +} a { color: #2c3d50; - text-decoration: none; } + text-decoration: none; +} /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ -.container { - /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ +.container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 95%; max-width: 960px; margin: 10px auto; - z-index: 1; } - .container::after { - /* clearfix */ - content: ''; - display: table; - clear: both; } + z-index: 1; +} +.container::after { /* clearfix */ + content: ""; + display: table; + clear: both; +} /* -------------------------------- @@ -66,14 +72,12 @@ Main components z-index: 2000; visibility: hidden; /*@include backface-visibility(hidden);*/ - -webkit-transform: translateX(-50%) translateY(-50%); - -moz-transform: translateX(-50%) translateY(-50%); - -ms-transform: translateX(-50%) translateY(-50%); - -o-transform: translateX(-50%) translateY(-50%); - transform: translateX(-50%) translateY(-50%); } + transform: translateX(-50%) translateY(-50%); +} .show { - visibility: visible; } + visibility: visible; +} .overlay { position: fixed; @@ -85,17 +89,18 @@ Main components z-index: 2; opacity: 0; background: rgba(0, 0, 0, 0.72); - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; } + transition: all 0.3s; +} .loading { opacity: 1; - visibility: visible; } + visibility: visible; +} .show ~ .overlay { opacity: 1; - visibility: visible; } + visibility: visible; +} .content { color: black; @@ -105,277 +110,316 @@ Main components margin: 0 auto; padding: 5px; text-align: center; - color: #3a8183; } - .content .who-won p { - color: #3a8183; - margin: 10px 0; } - .content .who-won p.greetings { - font-family: Pacifico, "Nunito", sans-serif; - font-size: 1.8rem; - margin: 10px 0; - color: #ffb700; } - .content .who-won .which-avatar-won { - width: 90px; } + color: #3a8183; +} +.content .who-won p { + color: #3a8183; + margin: 10px 0; +} +.content .who-won p.greetings { + font-family: Pacifico, "Nunito", sans-serif; + font-size: 1.8rem; + margin: 10px 0; + color: #ffb700; +} +.content .who-won .which-avatar-won { + width: 90px; +} +.content .who-won .go { + text-align: center; +} +@media only screen and (min-width: 960px) { + .content .who-won .go { + margin: 40px 0 20px 0; + } +} +@media only screen and (min-width: 320px) { .content .who-won .go { - text-align: center; } - @media only screen and (min-width: 960px) { - .content .who-won .go { - margin: 40px 0 20px 0; } } - @media only screen and (min-width: 320px) { - .content .who-won .go { - margin: 20px auto; } } - .content .who-won .go a.faded { - background-color: #ffd466; - cursor: not-allowed; } - .content .who-won .go a { - background-color: #ffb700; - padding: 7px 20px; - border-radius: 40px; - color: white; - cursor: pointer; - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; } - @media only screen and (min-width: 960px) { - .content .who-won .go a { - padding: 7px 50px; } } - .content .who-won .go a:hover { - background-color: white; - border: 3px solid #ffb700; - color: #ffb700; } - .content p.welcome { - font-family: Pacifico, "Nunito", sans-serif; - font-size: 2rem; - padding: 10px; - border-bottom: 2px solid #ffb700; } + margin: 20px auto; + } +} +.content .who-won .go a.faded { + background-color: #ffd466; + cursor: not-allowed; +} +.content .who-won .go a { + background-color: #ffb700; + padding: 7px 20px; + border-radius: 40px; + color: white; + cursor: pointer; + transition: all 0.3s; +} +@media only screen and (min-width: 960px) { + .content .who-won .go a { + padding: 7px 50px; + } +} +.content .who-won .go a:hover { + background-color: white; + border: 3px solid #ffb700; + color: #ffb700; +} +.content p.welcome { + font-family: Pacifico, "Nunito", sans-serif; + font-size: 2rem; + padding: 10px; + border-bottom: 2px solid #ffb700; +} +.content p.instructions { + font-size: 0.8rem; + margin: 13px 0; + transition: all 0.3s; +} +@media only screen and (min-width: 960px) { .content p.instructions { - font-size: 0.8rem; - margin: 13px 0; - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; } - @media only screen and (min-width: 960px) { - .content p.instructions { - margin: 20px 0; } } - .content p.instructions.error { - color: #ff5858; - -webkit-animation: shake 1s 1; - animation: shake 1s 1; } -@-webkit-keyframes shake { - from, to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - 10%, 30%, 50%, 70%, 90% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); } - 20%, 40%, 60%, 80% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); } } + margin: 20px 0; + } +} +.content p.instructions.error { + color: #ff5858; + animation: shake 1s 1; +} @keyframes shake { from, to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } + transform: translate3d(0, 0, 0); + } 10%, 30%, 50%, 70%, 90% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); } + transform: translate3d(-10px, 0, 0); + } 20%, 40%, 60%, 80% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); } } - @media only screen and (min-width: 960px) { - .content div.choose-avatar label:first-child { - margin-right: 40px; } } + transform: translate3d(10px, 0, 0); + } +} +@media only screen and (min-width: 960px) { + .content div.choose-avatar label:first-child { + margin-right: 40px; + } +} +.content div.choose-avatar img { + width: 80px; + transition: all 0.3s; +} +@media only screen and (min-width: 960px) { .content div.choose-avatar img { - width: 80px; - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; } - @media only screen and (min-width: 960px) { - .content div.choose-avatar img { - width: 90px; } } - .content div.choose-avatar label > input { - display: none; } - .content div.choose-avatar label > input + img { - cursor: pointer; - border: 2px solid transparent; } - .content div.choose-avatar label > input:checked + img { - border: 3px solid #ffb700; - border-radius: 50%; } - .content div.choose-who-play-first label { - cursor: pointer; - user-select: none; - -webkit-user-select: none; - -webkit-touch-callout: none; } - .content div.choose-who-play-first label:first-child { - margin-right: 40px; } - .content div.choose-who-play-first label:hover > i { - /* HOVER STYLE */ - box-shadow: inset 0 0 0 3px #fff; - background: #ffb700; } - .content div.choose-who-play-first label > input:checked + i { - /* (RADIO CHECKED) STYLE */ - box-shadow: inset 0 0 0 3px #fff; - background: #ffb700; } - .content div.choose-who-play-first label > input { - visibility: hidden; - position: absolute; } - .content div.choose-who-play-first label > i { - display: inline-block; - vertical-align: sub; - width: 26px; - height: 26px; - border-radius: 50%; - transition: 0.2s; - box-shadow: inset 0 0 0 8px #fff; - border: 1px solid gray; } - .content div.choose-who-play-first label span { - font-size: 1rem; - margin-left: 2px; } + width: 90px; + } +} +.content div.choose-avatar label > input { + display: none; +} +.content div.choose-avatar label > input + img { + cursor: pointer; + border: 2px solid transparent; +} +.content div.choose-avatar label > input:checked + img { + border: 3px solid #ffb700; + border-radius: 50%; +} +.content div.choose-who-play-first label { + cursor: pointer; + -moz-user-select: none; + user-select: none; + -webkit-user-select: none; + -webkit-touch-callout: none; +} +.content div.choose-who-play-first label:first-child { + margin-right: 40px; +} +.content div.choose-who-play-first label:hover > i { /* HOVER STYLE */ + box-shadow: inset 0 0 0 3px #fff; + background: #ffb700; +} +.content div.choose-who-play-first label > input:checked + i { /* (RADIO CHECKED) STYLE */ + box-shadow: inset 0 0 0 3px #fff; + background: #ffb700; +} +.content div.choose-who-play-first label > input { + visibility: hidden; + position: absolute; +} +.content div.choose-who-play-first label > i { + display: inline-block; + vertical-align: sub; + width: 26px; + height: 26px; + border-radius: 50%; + transition: 0.2s; + box-shadow: inset 0 0 0 8px #fff; + border: 1px solid gray; +} +.content div.choose-who-play-first label span { + font-size: 1rem; + margin-left: 2px; +} +.content .go { + text-align: center; +} +@media only screen and (min-width: 960px) { + .content .go { + margin: 40px 0 20px 0; + } +} +@media only screen and (min-width: 320px) { .content .go { - text-align: center; } - @media only screen and (min-width: 960px) { - .content .go { - margin: 40px 0 20px 0; } } - @media only screen and (min-width: 320px) { - .content .go { - margin: 20px auto; } } - .content .go a.faded { - background-color: #ffd466; - cursor: not-allowed; } - .content .go a { - background-color: #ffb700; - padding: 7px 20px; - border-radius: 40px; - color: white; - cursor: pointer; - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; } - @media only screen and (min-width: 960px) { - .content .go a { - padding: 7px 50px; } } - .content .go a:hover { - background-color: white; - border: 3px solid #ffb700; - color: #ffb700; } + margin: 20px auto; + } +} +.content .go a.faded { + background-color: #ffd466; + cursor: not-allowed; +} +.content .go a { + background-color: #ffb700; + padding: 7px 20px; + border-radius: 40px; + color: white; + cursor: pointer; + transition: all 0.3s; +} +@media only screen and (min-width: 960px) { + .content .go a { + padding: 7px 50px; + } +} +.content .go a:hover { + background-color: white; + border: 3px solid #ffb700; + color: #ffb700; +} .effect .content { - -webkit-transform: scale(0.7); - -moz-transform: scale(0.7); - -ms-transform: scale(0.7); - -o-transform: scale(0.7); transform: scale(0.7); opacity: 0; - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; } + transition: all 0.3s; +} .show.effect .content { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); transform: scale(1); - opacity: 1; } + opacity: 1; +} .side-container { padding: 10px; float: left; - width: 100%; } - @media only screen and (min-width: 960px) { - .side-container { - max-width: 270px; } } + width: 100%; +} +@media only screen and (min-width: 960px) { + .side-container { + max-width: 270px; + } +} +.side-container .players { + text-align: center; +} +@media only screen and (min-width: 960px) { .side-container .players { - text-align: center; } - @media only screen and (min-width: 960px) { - .side-container .players { - margin-top: 60px; } } - .side-container .players #player1 { - margin-right: 10px; - width: 48px; } - @media only screen and (min-width: 960px) { - .side-container .players #player1 { - width: 88px; } } - .side-container .players #player2 { - width: 48px; } - @media only screen and (min-width: 960px) { - .side-container .players #player2 { - width: 88px; } } + margin-top: 60px; + } +} +.side-container .players #player1 { + margin-right: 10px; + width: 48px; +} +@media only screen and (min-width: 960px) { + .side-container .players #player1 { + width: 88px; + } +} +.side-container .players #player2 { + width: 48px; +} +@media only screen and (min-width: 960px) { + .side-container .players #player2 { + width: 88px; + } +} +.side-container .whose-turn { + text-align: center; + margin: 18px; + position: relative; +} +@media only screen and (min-width: 960px) { .side-container .whose-turn { - text-align: center; - margin: 18px; - position: relative; } - @media only screen and (min-width: 960px) { - .side-container .whose-turn { - margin: 16px; } } - .side-container .whose-turn .caret { - position: absolute; - top: -22px; - left: 32%; - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; } - @media only screen and (min-width: 960px) { - .side-container .whose-turn .caret { - top: -17px; - left: 22%; } } - .side-container .whose-turn .nextturn { - -webkit-transform: translateX(66px); - -moz-transform: translateX(66px); - -ms-transform: translateX(66px); - -o-transform: translateX(66px); - transform: translateX(66px); } - @media only screen and (min-width: 960px) { - .side-container .whose-turn .nextturn { - -webkit-transform: translateX(106px); - -moz-transform: translateX(106px); - -ms-transform: translateX(106px); - -o-transform: translateX(106px); - transform: translateX(106px); } } - .side-container .whose-turn .turn { - font-size: .8rem; - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; - padding: 6px 20px; - border-radius: 40px; - background: white; } - @media only screen and (min-width: 960px) { - .side-container .whose-turn .turn { - display: block; - padding: 16px 20px; } } + margin: 16px; + } +} +.side-container .whose-turn .caret { + position: absolute; + top: -22px; + left: 32%; + transition: all 0.3s; +} +@media only screen and (min-width: 960px) { + .side-container .whose-turn .caret { + top: -17px; + left: 22%; + } +} +.side-container .whose-turn .nextturn { + transform: translateX(66px); +} +@media only screen and (min-width: 960px) { + .side-container .whose-turn .nextturn { + transform: translateX(106px); + } +} +.side-container .whose-turn .turn { + font-size: 0.8rem; + transition: all 0.3s; + padding: 6px 20px; + border-radius: 40px; + background: white; +} +@media only screen and (min-width: 960px) { + .side-container .whose-turn .turn { + display: block; + padding: 16px 20px; + } +} +.side-container .dice-and-roll { + background-color: #3a8183; + border-radius: 20px; + padding: 17px; +} +@media only screen and (min-width: 960px) { .side-container .dice-and-roll { - background-color: #3a8183; - border-radius: 20px; - padding: 17px; } - @media only screen and (min-width: 960px) { - .side-container .dice-and-roll { - margin-top: 50px; - text-align: center; - padding-bottom: 40px; } } - .side-container .dice-and-roll img { - width: 80px; - vertical-align: middle; } - @media only screen and (min-width: 960px) { - .side-container .dice-and-roll img { - display: block; - margin: 20px auto 30px auto; - width: 113px; } } - .side-container .dice-and-roll a#roll-dice { - background-color: #ffb700; - border-radius: 40px; - text-align: center; - font-size: .8rem; - margin-left: 20px; - cursor: pointer; - padding: 7px 26px; - color: white; } - @media only screen and (min-width: 960px) { - .side-container .dice-and-roll a#roll-dice { - margin-left: 0; - padding: 7px 56px; } } - .side-container .dice-and-roll a#roll-dice.not-active { - background-color: #ffd466; - cursor: not-allowed; } + margin-top: 50px; + text-align: center; + padding-bottom: 40px; + } +} +.side-container .dice-and-roll img { + width: 80px; + vertical-align: middle; +} +@media only screen and (min-width: 960px) { + .side-container .dice-and-roll img { + display: block; + margin: 20px auto 30px auto; + width: 113px; + } +} +.side-container .dice-and-roll a#roll-dice { + background-color: #ffb700; + border-radius: 40px; + text-align: center; + font-size: 0.8rem; + margin-left: 20px; + cursor: pointer; + padding: 7px 26px; + color: white; +} +@media only screen and (min-width: 960px) { + .side-container .dice-and-roll a#roll-dice { + margin-left: 0; + padding: 7px 56px; + } +} +.side-container .dice-and-roll a#roll-dice.not-active { + background-color: #ffd466; + cursor: not-allowed; +} .main-container { float: left; @@ -383,102 +427,127 @@ Main components background-color: #2c3d50; /*.player1{ @include transition(all 0.3s); - }*/ } - @media only screen and (min-width: 960px) { - .main-container { - max-width: 690px; - max-height: 690px; } } + }*/ +} +@media only screen and (min-width: 960px) { + .main-container { + max-width: 690px; + max-height: 690px; + } +} +.main-container .player_in_board { + width: 50px; + transition: all 1s; +} +@media only screen and (min-width: 960px) { .main-container .player_in_board { - width: 50px; - -webkit-transition: all 1s; - -moz-transition: all 1s; - transition: all 1s; } - @media only screen and (min-width: 960px) { - .main-container .player_in_board { - width: 90px; - margin: 10px 0 0 3px; } } + width: 90px; + margin: 10px 0 0 3px; + } +} +.main-container #ladder1 { + top: 5%; + left: 50%; + width: 73px; +} +@media only screen and (min-width: 960px) { .main-container #ladder1 { top: 5%; left: 50%; - width: 73px; } - @media only screen and (min-width: 960px) { - .main-container #ladder1 { - top: 5%; - left: 50%; - width: 156px; } } + width: 156px; + } +} +.main-container #ladder2 { + top: 67%; + left: 67%; + width: 72px; +} +@media only screen and (min-width: 960px) { .main-container #ladder2 { top: 67%; left: 67%; - width: 72px; } - @media only screen and (min-width: 960px) { - .main-container #ladder2 { - top: 67%; - left: 67%; - width: 159px; } } + width: 159px; + } +} +.main-container #snake1 { + top: 32%; + left: 6%; + width: 71px; +} +@media only screen and (min-width: 960px) { .main-container #snake1 { top: 32%; left: 6%; - width: 71px; } - @media only screen and (min-width: 960px) { - .main-container #snake1 { - top: 32%; - left: 6%; - width: 158px; } } + width: 158px; + } +} +.main-container #snake2 { + top: 7%; + left: 10%; + width: 172px; +} +@media only screen and (min-width: 960px) { .main-container #snake2 { top: 7%; left: 10%; - width: 172px; } - @media only screen and (min-width: 960px) { - .main-container #snake2 { - top: 7%; - left: 10%; - width: 379px; } } + width: 379px; + } +} +.main-container #snake3 { + top: 52%; + left: 27%; + width: 70px; +} +@media only screen and (min-width: 960px) { .main-container #snake3 { top: 52%; left: 27%; - width: 70px; } - @media only screen and (min-width: 960px) { - .main-container #snake3 { - top: 52%; - left: 27%; - width: 154px; } } + width: 154px; + } +} +.main-container #flag { + top: 8%; + left: 82%; + width: 30px; +} +@media only screen and (min-width: 960px) { .main-container #flag { top: 8%; left: 82%; - width: 30px; } - @media only screen and (min-width: 960px) { - .main-container #flag { - top: 8%; - left: 82%; - width: 70px; } } - .main-container img { - position: absolute; } + width: 70px; + } +} +.main-container img { + position: absolute; +} +.main-container ul li.box { + float: left; + width: 60.8px; + height: 60.8px; + color: white; +} +@media only screen and (min-width: 960px) { .main-container ul li.box { - float: left; - width: 60.8px; - height: 60.8px; - color: white; } - @media only screen and (min-width: 960px) { - .main-container ul li.box { - width: 138px; - height: 138px; } } - .main-container ul li.box span { - font-size: 0.8rem; - float: right; - padding: 0.4rem; - -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=261, Color=#000000)"; - /*IE 8*/ - text-shadow: 1px -6px 9px rgba(0, 0, 0, 0.6); - /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */ - filter: progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=135, Color=#000000); - /*IE 5.5-7*/ } - .main-container ul li:nth-child(odd) { - background-color: #2c3d50; } - .main-container ul li:nth-child(even) { - background-color: #cfa175; } - .main-container::after { - clear: both; - content: ""; - display: table; } - -/*# sourceMappingURL=style.css.map */ + width: 138px; + height: 138px; + } +} +.main-container ul li.box span { + font-size: 0.8rem; + float: right; + padding: 0.4rem; + -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=261, Color=#000000)"; /*IE 8*/ + text-shadow: 1px -6px 9px rgba(0, 0, 0, 0.6); /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */ + filter: progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=135, Color=#000000); /*IE 5.5-7*/ +} +.main-container ul li:nth-child(odd) { + background-color: #2c3d50; +} +.main-container ul li:nth-child(even) { + background-color: #cfa175; +} +.main-container::after { + clear: both; + content: ""; + display: table; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/Games/Snake_Ladder/scss/style.css.map b/Games/Snake_Ladder/scss/style.css.map index 1bd2a85fa1..daeaaa2817 100644 --- a/Games/Snake_Ladder/scss/style.css.map +++ b/Games/Snake_Ladder/scss/style.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["../partials/_variables.scss","style.scss","../bourbon/addons/_prefixer.scss","../partials/_layout.scss","../partials/_mixins.scss","../bourbon/addons/_clearfix.scss"], -"names": [], -"file": "style.css" -} +{"version":3,"sources":["../partials/_variables.scss","style.css","style.scss","../bourbon/addons/_prefixer.scss","../partials/_layout.scss","../partials/_mixins.scss","../bourbon/addons/_clearfix.scss"],"names":[],"mappings":"AAeA;EACE,qBAAA;EACA,+BAAA;ACdF;ACKA;;;;kCAAA;AAMA;EACE,mCAAA;EACA,kCAAA;ADJF;;ACQA;EC+BQ,sBD9Bc;ADHtB;;ACMA;EAEI,eAAA;EACA,iCFPY;EESd,cF3BW;EE4BX,yBF7BS;ACwBX;;ACQA;EACE,cAAA;EACA,YAAA;EACA,eAAA;ADLF;AGlBG;EFoBH;IAKI,eAAA;EDHF;AACF;;ACMA;EACE,cFzCW;EE0CX,qBAAA;ADHF;;ACMA;;;;kCAAA;AAMA,aAAA,sIAAA;EACE,UAAA;EACA,gBEpDM;EFqDN,iBAAA;EACA,UAAA;ADJF;ACKE,oBAAA,aAAA;EACE,WAAA;EACA,cAAA;EACA,WAAA;ADHJ;;ACOA;;;;kCAAA;AAMA;EACE,eAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,wCAAA;EC9BM,4CD+Ba;ADDrB;;ACIA;EACE,mBAAA;ADDF;;ACIA;EACE,eAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,UAAA;EACA,+BAAA;EC/CM,oBDgDN;ADCF;;ACEA;EACE,UAAA;EACA,mBAAA;ADCF;;ACEA;EACE,UAAA;EACA,mBAAA;ADCF;;ACEA;EACE,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,cFlHc;ACmHhB;ACCI;EACE,cFrHU;EEuHV,cAAA;ADAN;ACEI;EACE,2CF3GS;EE4GT,iBAAA;EACA,cAAA;EACA,cF5Hc;AC4HpB;ACEI;EACE,WAAA;ADAN;ACEI;EGhGF,kBAAA;AJiGF;AG5HG;EF2HC;IGnGA,qBAAA;EJwGF;AACF;AGpIG;EF8HC;IG9FA,iBAAA;EJwGF;AACF;AIvGE;EACE,yBAAA;EACA,mBAAA;AJyGJ;AIpGE;EAEE,yBL9CgB;EK+ChB,iBAAA;EAKA,mBAAA;EACA,YAAA;EACA,eAAA;EFVI,oBEWJ;AJmGJ;AGpJG;ECsCD;IAKI,iBAAA;EJ6GJ;AACF;AIvGI;EACE,uBAAA;EACA,yBAAA;EACA,cL3Dc;ACoKpB;AC/BE;EACE,2CFxHW;EEyHX,eAAA;EAEA,aAAA;EACA,gCAAA;ADgCJ;AC7BE;EACE,iBAAA;EACA,cAAA;ECnGI,oBDuGJ;AD8BJ;AG3KG;EFuID;IAII,cAAA;EDoCJ;AACF;AClCI;EACE,cFzJQ;EE8LR,qBAAA;ADCN;ACnBM;EACE;IAEE,+BAAA;EDmCR;EChCM;IAEE,mCAAA;EDkCR;EC/BM;IAEE,kCAAA;EDiCR;AACF;AGjNG;EF2LK;IACE,kBAAA;EDyBR;AACF;ACrBI;EACE,WAAA;EC5JE,oBDiKF;ADqBN;AG5NG;EFiMC;IAGI,WAAA;ED4BN;AACF;ACxBI;EAEE,aAAA;ADyBN;ACvBI;EACE,eAAA;EACA,6BAAA;ADyBN;ACvBI;EACE,yBAAA;EACA,kBAAA;ADyBN;ACpBI;EAIE,eAAA;EACA,sBAAA;OAAA,iBAAA;EACA,yBAAA;EACA,2BAAA;ADmBN;ACzBM;EACE,kBAAA;AD2BR;ACrBM,qDAAA,oBAAA;EACE,gCAAA;EACA,mBFxOY;AC+PpB;ACrBM,+DAAA,8BAAA;EACE,gCAAA;EACA,mBF5OY;ACmQpB;ACrBM;EACE,kBAAA;EACA,kBAAA;ADuBR;ACrBM;EACE,qBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,gCAAA;EACA,sBAAA;ADuBR;ACpBM;EACE,eAAA;EACA,gBAAA;ADsBR;ACjBE;EGnOA,kBAAA;AJuPF;AGlRG;EF8PD;IGtOE,qBAAA;EJ8PF;AACF;AG1RG;EFiQD;IGjOE,iBAAA;EJ8PF;AACF;AI7PE;EACE,yBAAA;EACA,mBAAA;AJ+PJ;AI1PE;EAEE,yBL9CgB;EK+ChB,iBAAA;EAKA,mBAAA;EACA,YAAA;EACA,eAAA;EFVI,oBEWJ;AJyPJ;AG1SG;ECsCD;IAKI,iBAAA;EJmQJ;AACF;AI7PI;EACE,uBAAA;EACA,yBAAA;EACA,cL3Dc;AC0TpB;;ACjDA;EC7NQ,qBD8Na;EACnB,UAAA;EC/NM,oBDiON;ADyDF;;ACtDA;ECpOQ,mBDsOa;EACnB,UAAA;AD4DF;;ACzDA;EACE,aAAA;EACA,WAAA;EAKA,WAAA;ADwDF;AG/UG;EFgRH;IAII,gBAAA;ED+DF;AACF;AC5DE;EAIE,kBAAA;AD2DJ;AGvVG;EFwRD;IAEI,gBAAA;EDiEJ;AACF;AC/DI;EACE,kBAAA;EACA,WAAA;ADiEN;AGhWG;EF6RC;IAII,WAAA;EDmEN;AACF;ACjEI;EAIE,WAAA;ADgEN;AGxWG;EFoSC;IAEI,WAAA;EDsEN;AACF;AClEE;EACE,kBAAA;EACA,YAAA;EAIA,kBAAA;ADiEJ;AGlXG;EF2SD;IAII,YAAA;EDuEJ;AACF;ACpEI;EACE,kBAAA;EACA,UAAA;EACA,SAAA;EChRE,oBDsRF;ADmEN;AG/XG;EFmTC;IAMI,UAAA;IACA,SAAA;ED0EN;AACF;ACtEI;ECzRI,2BD0RiB;AD4EzB;AG5YG;EF+TC;ICzRI,4BD4RmB;EDkFzB;AACF;AChFI;EACE,iBAAA;EChSE,oBDiSF;EACA,iBAAA;EACA,mBAAA;EACA,iBAAA;ADoFN;AG9ZG;EFqUC;IAOI,cAAA;IACA,kBAAA;EDsFN;AACF;ACnFE;EAEE,yBF1VY;EE2VZ,mBAAA;EACA,aAAA;ADoFJ;AGzaG;EFiVD;IAMI,gBAAA;IACA,kBAAA;IACA,oBAAA;EDsFJ;AACF;ACrFI;EACE,WAAA;EAEA,sBAAA;ADsFN;AGpbG;EF2VC;IAKI,cAAA;IACA,2BAAA;IACA,YAAA;EDwFN;AACF;ACrFI;EACE,yBF7Wc;EE8Wd,mBAAA;EACA,kBAAA;EACA,iBAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,YAAA;ADuFN;AGrcG;EFsWC;IAUI,cAAA;IACA,iBAAA;EDyFN;AACF;ACvFI;EACE,yBAAA;EACA,mBAAA;ADyFN;;AClFA;EACE,WAAA;EACA,kBAAA;EACA,yBAAA;EAaA;;IAAA;AD2EF;AGxdG;EF6XH;IAKI,gBAAA;IACA,iBAAA;ED0FF;AACF;ACzFE;EACE,WAAA;EChWI,kBDiWJ;AD6FJ;AGpeG;EFqYD;IAII,WAAA;IACA,oBAAA;ED+FJ;AACF;AC1FE;EACE,OAAA;EACA,SAAA;EACA,WAAA;AD4FJ;AG/eG;EFgZD;IAKI,OAAA;IACA,SAAA;IACA,YAAA;ED8FJ;AACF;AC3FE;EACE,QAAA;EACA,SAAA;EACA,WAAA;AD6FJ;AG3fG;EF2ZD;IAKI,QAAA;IACA,SAAA;IACA,YAAA;ED+FJ;AACF;AC5FE;EACE,QAAA;EACA,QAAA;EACA,WAAA;AD8FJ;AGvgBG;EFsaD;IAKI,QAAA;IACA,QAAA;IACA,YAAA;EDgGJ;AACF;AC7FE;EACE,OAAA;EACA,SAAA;EACA,YAAA;AD+FJ;AGnhBG;EFibD;IAKI,OAAA;IACA,SAAA;IACA,YAAA;EDiGJ;AACF;AC/FE;EACE,QAAA;EACA,SAAA;EACA,WAAA;ADiGJ;AG/hBG;EF2bD;IAKI,QAAA;IACA,SAAA;IACA,YAAA;EDmGJ;AACF;ACjGE;EACE,OAAA;EACA,SAAA;EACA,WAAA;ADmGJ;AG3iBG;EFqcD;IAKI,OAAA;IACA,SAAA;IACA,WAAA;EDqGJ;AACF;ACnGE;EAEE,kBAAA;ADoGJ;ACjGI;EACE,WAAA;EACA,aAAA;EACA,cAAA;EACA,YAAA;ADmGN;AG3jBG;EFodC;IAMI,YAAA;IACA,aAAA;EDqGN;AACF;ACnGM;EACE,iBAAA;EACA,YAAA;EACA,eAAA;EACA,gGAAA,EAAA,OAAA;EACA,4CAAA,EAAA,0CAAA;EACA,0FAAA,EAAA,WAAA;ADqGR;AClGI;EACE,yBFjfU;ACqlBhB;AClGI;EACE,yBFnfW;ACulBjB;AKzkBE;EACE,WAAA;EACA,WAAA;EACA,cAAA;AL2kBJ","file":"style.css"} \ No newline at end of file diff --git a/Games/Stone_paper_scissor/src/styles/index.css b/Games/Stone_paper_scissor/src/styles/index.css new file mode 100644 index 0000000000..55dece0d8a --- /dev/null +++ b/Games/Stone_paper_scissor/src/styles/index.css @@ -0,0 +1,145 @@ +@font-face { + font-family: "8BIT WONDER"; + src: url("../fonts/8BITWONDERNominal.woff2") format("woff2"), url("../fonts/8BITWONDERNominal.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} +html { + font-size: 1rem; + font-family: "Courier New", Courier, monospace; + background: #0f0c29; + background: linear-gradient(to left, #24243e, #302b63, #0f0c29); + color: #dae0e0; + height: 100%; +} + +body { + text-align: center; +} + +.instructions { + font-weight: 700; + margin: 24px 0 32px; +} + +.game-container { + max-width: 620px; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + margin: -6px auto; +} + +.player-headline { + display: flex; + justify-content: space-between; +} +.player-headline .nick, +.player-headline .score { + font-family: "8BIT WONDER", sans-serif; + font-size: 24px; + padding: 0 24px; +} + +.player { + margin: 6px; + width: calc(50% - 12px); + background-color: #999999; +} + +.messages { + margin: 6px; + padding: 12px; + width: calc(100% - 12px); + background-color: #333333; + border: 1px solid #cccccc; +} + +.message-text { + font-weight: 700; +} + +.fade-in-out { + animation: fadeInOut 1s; + animation-iteration-count: infinite; +} + +@keyframes fadeInOut { + 0% { + opacity: 1; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 1; + } +} +.player-container, +.robot-container { + position: relative; +} + +.player-container .player-video { + min-height: 298px; + width: 100%; + -o-object-fit: cover; + object-fit: cover; + transform: scaleX(-1); + display: block; +} + +.robot-container .avatar { + width: 100%; + display: block; +} + +.robot-container .robot-hand { + position: absolute; + width: 100%; + display: none; + top: 0; + left: 0; +} + +.player-hand-container { + position: absolute; + width: 100px; + height: 100px; + top: 0; + right: 0; +} + +.player-hand { + position: absolute; + top: 2px; + right: 1px; + width: 100px; + height: 100px; + text-align: center; + font-size: 42px; + line-height: 100px; +} + +.player-hand-zoom { + animation: handZoom 0.5s; + animation-iteration-count: 1; +} + +@keyframes handZoom { + 0% { + font-size: 42px; + } + 50% { + font-size: 64px; + } + 100% { + font-size: 42px; + } +} +.timer-ring-circle { + transition: stroke-dashoffset 0.1s; + transform: rotate(-90deg); + transform-origin: 50% 50%; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/Games/Stone_paper_scissor/src/styles/index.css.map b/Games/Stone_paper_scissor/src/styles/index.css.map new file mode 100644 index 0000000000..5c3af4e174 --- /dev/null +++ b/Games/Stone_paper_scissor/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.scss","index.css","_game.scss","_variables.scss"],"names":[],"mappings":"AAAA;EACE,0BAAA;EACA,mHAAA;EAEA,mBAAA;EACA,kBAAA;EACA,kBAAA;ACAF;ACNA;EACE,eCDU;EDEV,8CCDY;EDEZ,mBAAA;EAEA,+DAAA;EACA,cCHW;EDIX,YAAA;ADQF;;ACLA;EACE,kBAAA;ADQF;;ACLA;EACE,gBAAA;EACA,mBAAA;ADQF;;ACLA;EACE,gBAAA;EACA,aAAA;EACA,eAAA;EACA,6BAAA;EACA,iBAAA;ADQF;;ACLA;EACE,aAAA;EACA,8BAAA;ADQF;ACNE;;EAEE,sCAAA;EACA,eAAA;EACA,eAAA;ADQJ;;ACJA;EACE,WAAA;EACA,uBAAA;EACA,yBAAA;ADOF;;ACJA;EACE,WAAA;EACA,aAAA;EACA,wBAAA;EACA,yBAAA;EACA,yBAAA;ADOF;;ACJA;EACE,gBAAA;ADOF;;ACJA;EACE,uBAAA;EACA,mCAAA;ADOF;;ACJA;EACE;IAAK,UAAA;EDQL;ECPA;IAAM,YAAA;EDUN;ECTA;IAAO,UAAA;EDYP;AACF;ACVA;;EAEE,kBAAA;ADYF;;ACTA;EACE,iBAAA;EACA,WAAA;EACA,oBAAA;KAAA,iBAAA;EACA,qBAAA;EACA,cAAA;ADYF;;ACTA;EACE,WAAA;EACA,cAAA;ADYF;;ACTA;EACE,kBAAA;EACA,WAAA;EACA,aAAA;EACA,MAAA;EACA,OAAA;ADYF;;ACTA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,MAAA;EACA,QAAA;ADYF;;ACTA;EACE,kBAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;ADYF;;ACTA;EACE,wBAAA;EACA,4BAAA;ADYF;;ACTA;EACE;IAAK,eAAA;EDaL;ECZA;IAAM,eAAA;EDeN;ECdA;IAAO,eAAA;EDiBP;AACF;ACfA;EACE,kCAAA;EACA,yBAAA;EACA,yBAAA;ADiBF","file":"index.css"} \ No newline at end of file diff --git a/Games/Tic-Tac-Toe Game/README.md b/Games/Tic-Tac-Toe Game/README.md new file mode 100644 index 0000000000..3491a47cc5 --- /dev/null +++ b/Games/Tic-Tac-Toe Game/README.md @@ -0,0 +1,40 @@ +# Project Title + +Tic-Tac-Toe Game + +## Features + +- Interactive Game Board: Play on a 3x3 grid. +- Two-Player Mode: Play with a friend. +- Reset Game: Easily reset to a new game. +- New Game: Easily start a new game. + +## How to Play + +1. Start the Game: + +- Open the game in your web browser. + +2. Make Your Moves: + +- Click on any cell in the grid to place your marker (X or O). +- Players take turns to make their moves. + +3. Win the Game: + +- Get three of your markers in a row (horizontally, vertically, or diagonally) to win. +- The game will display the winner. + +4. Start a New Game: + +- Click the "New Game" button to start a new game. + +5. Reset the Game: + +- Click the "Reset Game" button to reset a game. + +## Technologies Used + +- HTML +- CSS +- JavaScript diff --git a/Games/Tic-Tac-Toe Game/index.html b/Games/Tic-Tac-Toe Game/index.html new file mode 100644 index 0000000000..33dd3ac482 --- /dev/null +++ b/Games/Tic-Tac-Toe Game/index.html @@ -0,0 +1,55 @@ + + + + + + + Tic-Tac-Toe Game + + + + + + +

Tic-Tac-Toe

+ + + +
+

Winner

+
+ + +
+ + + +
+
+ + + + + + + + + + + +
+
+ + + +
+ + +
+ +
+ + + + + \ No newline at end of file diff --git a/Games/Tic-Tac-Toe Game/script.js b/Games/Tic-Tac-Toe Game/script.js new file mode 100644 index 0000000000..f20bca24ad --- /dev/null +++ b/Games/Tic-Tac-Toe Game/script.js @@ -0,0 +1,97 @@ +// Access the elements + +let boxes = document.querySelectorAll(".box"); +let resetButton = document.querySelector("#resetButton"); +let newGameButton = document.querySelector("#newButton"); +let msgContainer = document.querySelector(".msgContainer"); +let msg = document.querySelector("#msg"); + +// 2 Players : player-X , player-O + +let turn_O = true; + +// 2D Array : 0-9 + +const winPatterns = [ + [0, 1, 2], + [0, 3, 6], + [0, 4, 8], + [1, 4, 7], + [2, 5, 8], + [2, 4, 6], + [3, 4, 5], + [6, 7, 8], +]; + +// Iterate through each winner pattern for turn and write the value + +boxes.forEach((box) => { + box.addEventListener("click", () => { + if(turn_O){ + box.innerText = "O"; + turn_O = false; + } + else{ + box.innerText = "X"; + turn_O = true; + } + checkWinner(); + // disable box so that no box can be repeated for marking + box.disabled = true; + }); +}); + +// Disable Boxes after winner is selected + +const disableBoxes = () => { + for(let box of boxes) { + box.disabled = true; + } +} + +// Enable Boxes after winner is selected + +const enableBoxes = () => { + for(let box of boxes) { + box.disabled = false; + box.innerText = ""; + } +} + +// Show Winner + +const showWinner = (winner) => { + msg.innerText = `Congratulations, Winner is ${winner}`; + msg.classList.remove("hide"); + disableBoxes(); +} + +// Check isWinner or Not on every click + +const checkWinner = () => { + for(let pattern of winPatterns){ + let pos1Val = boxes[pattern[0]].innerText; + let pos2Val = boxes[pattern[1]].innerText; + let pos3Val = boxes[pattern[2]].innerText; + if(pos1Val != "" && pos2Val != "" && pos3Val != ""){ + if(pos1Val === pos2Val && pos2Val === pos3Val){ + console.log("winner", pos1Val); + showWinner(pos1Val); + } + } + } + +}; + +// Reset Game + +const resetGame = () => { + turn_O = true; + enableBoxes(); + msg.classList.add("hide"); +} + +// Reset Game & Reset button - trigger + +newGameButton.addEventListener("click", resetGame); +resetButton.addEventListener("click", resetGame); \ No newline at end of file diff --git a/Games/Tic-Tac-Toe Game/styles.css b/Games/Tic-Tac-Toe Game/styles.css new file mode 100644 index 0000000000..2f73f4b53a --- /dev/null +++ b/Games/Tic-Tac-Toe Game/styles.css @@ -0,0 +1,113 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +/* Body */ + +body { + background-color: cadetblue; + margin-top: 1.6rem; + text-align: center; +} + +/* Heading */ + +.heading{ + font-size: 6vmin; +} + +/* message container */ + +#msg{ + color: white; + font-size: 4.5vmin; +} + +.msgContainer{ + height: 10vmin; + margin-top: 1.4rem; +} + +.hide{ + display: none; +} + +/* Game Container */ + +.container{ + height: 70%; + display: flex; + align-items: center; + justify-content: center; +} + +/* box - 9 boxes */ + +.game{ + height: 60vmin; + width: 60vmin; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 2vmin; +} + +/* 9 Boxes */ + +.box{ + height: 18vmin; + width: 18vmin; + border-radius: 1rem; + border: none; + box-shadow: 0 0 0.5rem black; + font-size: 8vmin; + background-color:white; + color: rgba(255, 0, 0, 0.8); +} + +.box:hover{ + transform: scale(1.015); + cursor: pointer; +} + +/* Buttons */ + +.buttons { + margin-top: 2rem; + display: flex; + justify-content: center; + gap: 1rem; +} + +/* New Game Button */ + +#newButton { + padding: 1rem; + font-size: 1rem; + border-radius: 1rem; + border: none; + background-color: rgba(0, 0, 0, 0.9); + color: white; +} + +#newButton:hover{ + background-color: rgba(0, 0, 0, 0.8); +} + +/* Reset Button */ + +#resetButton{ + padding: 1rem; + font-size: 1rem; + border-radius: 1rem; + border: none; + background-color: rgba(0, 0, 0, 0.9); + color: white; +} + +#resetButton:hover{ + background-color: rgba(0, 0, 0, 0.8); +} \ No newline at end of file diff --git a/Games/Touch-No-Fire-Game/images/Logo.png b/Games/Touch-No-Fire-Game/images/Logo.png new file mode 100644 index 0000000000..f45107f86c Binary files /dev/null and b/Games/Touch-No-Fire-Game/images/Logo.png differ diff --git a/Games/Touch-No-Fire-Game/index.html b/Games/Touch-No-Fire-Game/index.html index fead74b11d..e073e0487d 100644 --- a/Games/Touch-No-Fire-Game/index.html +++ b/Games/Touch-No-Fire-Game/index.html @@ -5,7 +5,7 @@ Touch-No-Fire-Game - + diff --git a/Games/Whack_a_Mole/CSS/style.css b/Games/Whack_a_Mole/CSS/style.css index 62c45f742f..d096bd9a0b 100644 --- a/Games/Whack_a_Mole/CSS/style.css +++ b/Games/Whack_a_Mole/CSS/style.css @@ -210,3 +210,4 @@ } } + diff --git a/Games/Whack_a_Mole/index.html b/Games/Whack_a_Mole/index.html index 9a7fd0effe..5caae89eb4 100644 --- a/Games/Whack_a_Mole/index.html +++ b/Games/Whack_a_Mole/index.html @@ -8,7 +8,10 @@ -

Whack a Mole

+
+

HOME

+
+

Whack a Mole

Score:

0

@@ -20,5 +23,6 @@

Score:

0

+ diff --git a/Games/Whack_a_Mole/mole.css b/Games/Whack_a_Mole/mole.css index 2b2b939332..3b4997ea9e 100644 --- a/Games/Whack_a_Mole/mole.css +++ b/Games/Whack_a_Mole/mole.css @@ -39,6 +39,14 @@ body { -webkit-user-select: none; -ms-user-select: none; } +.home{ + background-color: aqua; + padding:25px; +} +.home h3{ + font-size: sans-serif; +} + diff --git a/Games/color matcher/README.md b/Games/color matcher/README.md new file mode 100644 index 0000000000..f0aca85126 --- /dev/null +++ b/Games/color matcher/README.md @@ -0,0 +1,31 @@ +Color Matcher +Color Matcher is a simple game where players need to match the color displayed on the screen with a color selected from a color picker. It's a fun and quick game to test your color perception skills! + +How to Play +Launch the Game: Open the index.html file in your web browser. + +Match the Color: + +1.You'll see a color displayed in a box at the top of the screen. +2.Use the color picker input field to select a color that you think matches the displayed color. +3.Click the "Match Color" button to submit your choice. + + +Check the Result: + +1.If the color you selected matches the displayed color, you'll see a success message in green. +2.If the color does not match, you'll see a failure message in red, and you can try again. +3.Keep Playing: Click the "Match Color" button to play again with a new color. + +Features +Randomly generated colors for each game session. +Simple and intuitive interface. +Immediate feedback on color matching. +Technologies Used +HTML +CSS +JavaScript +Screenshots + +Try It Out +You can try out the game by opening the index.html file in your web browser. \ No newline at end of file diff --git a/Games/color matcher/ReadMe.md b/Games/color matcher/ReadMe.md new file mode 100644 index 0000000000..f0aca85126 --- /dev/null +++ b/Games/color matcher/ReadMe.md @@ -0,0 +1,31 @@ +Color Matcher +Color Matcher is a simple game where players need to match the color displayed on the screen with a color selected from a color picker. It's a fun and quick game to test your color perception skills! + +How to Play +Launch the Game: Open the index.html file in your web browser. + +Match the Color: + +1.You'll see a color displayed in a box at the top of the screen. +2.Use the color picker input field to select a color that you think matches the displayed color. +3.Click the "Match Color" button to submit your choice. + + +Check the Result: + +1.If the color you selected matches the displayed color, you'll see a success message in green. +2.If the color does not match, you'll see a failure message in red, and you can try again. +3.Keep Playing: Click the "Match Color" button to play again with a new color. + +Features +Randomly generated colors for each game session. +Simple and intuitive interface. +Immediate feedback on color matching. +Technologies Used +HTML +CSS +JavaScript +Screenshots + +Try It Out +You can try out the game by opening the index.html file in your web browser. \ No newline at end of file diff --git a/Games/color matcher/Screenshot 2024-05-21 144653.png b/Games/color matcher/Screenshot 2024-05-21 144653.png new file mode 100644 index 0000000000..ccf9a22ec3 Binary files /dev/null and b/Games/color matcher/Screenshot 2024-05-21 144653.png differ diff --git a/Games/color matcher/index.html b/Games/color matcher/index.html new file mode 100644 index 0000000000..073991be11 --- /dev/null +++ b/Games/color matcher/index.html @@ -0,0 +1,24 @@ + + + + + + Color Matcher + + + + +
+

Color Matcher

+
+ + +

+
+ + + diff --git a/Games/color matcher/script.js b/Games/color matcher/script.js new file mode 100644 index 0000000000..790d666df5 --- /dev/null +++ b/Games/color matcher/script.js @@ -0,0 +1,29 @@ +document.addEventListener("DOMContentLoaded", function() { + const colorDisplay = document.getElementById("colorDisplay"); + const colorInput = document.getElementById("colorInput"); + const matchButton = document.getElementById("matchButton"); + const result = document.getElementById("result"); + + let targetColor = generateRandomColor(); + colorDisplay.style.backgroundColor = targetColor; + + matchButton.addEventListener("click", function() { + const userColor = colorInput.value; + if (userColor.toLowerCase() === targetColor.toLowerCase()) { + result.textContent = "Congratulations! You matched the color!"; + result.style.color = "green"; + } else { + result.textContent = "Sorry! Wrong color. Try again!"; + result.style.color = "red"; + } + }); + + function generateRandomColor() { + const letters = "0123456789ABCDEF"; + let color = "#"; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; + } +}); diff --git a/Games/color matcher/styles.css b/Games/color matcher/styles.css new file mode 100644 index 0000000000..dc177833b2 --- /dev/null +++ b/Games/color matcher/styles.css @@ -0,0 +1,41 @@ +@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Acme&family=Jersey+10&display=swap'); + +*{ + margin: 0; + padding: 0; +} + +body { + font-family: "Acme", sans-serif; + background-color:beige; +} + +.container { + text-align: center; + margin-top: 100px; +} + + +#colorDisplay { + width: 100px; + height: 100px; + margin: 20px auto; + border: 2px solid black; +} + +#result { + margin-top: 20px; + font-weight: bold; +} +.container1{ + padding: 30px; + width: 100%; + height: 10vh; + background-color: rgb(204, 142, 35); + text-align: center; + font-family: "Jersey 10", sans-serif; + font-weight: 400; + font-size: 700%; +} + diff --git a/Games/linkup/css/style.css b/Games/linkup/css/style.css index 3bed4e3dd0..6de1f8b458 100644 --- a/Games/linkup/css/style.css +++ b/Games/linkup/css/style.css @@ -1,15 +1,18 @@ * { margin: 0; padding: 0; - box-sizing: border-box; } + box-sizing: border-box; +} -.flex, .container, .heading, .grid-cell, .grid-item, .grid-item-content { +.flex, .grid-item-content, .grid-item, .grid-cell, .heading, .container { display: flex; justify-content: center; - align-items: center; } + align-items: center; +} html, body { - height: 100%; } + height: 100%; +} body { margin: 0 auto; @@ -18,7 +21,8 @@ body { background-size: cover; overflow: hidden; color: white; - font-size: 16px; } + font-size: 16px; +} .btn { padding: 0 8px; @@ -26,124 +30,154 @@ body { color: white; height: 40px; line-height: 40px; - border-radius: 3px; } + border-radius: 3px; +} a { text-decoration: none; - color: inherit; } + color: inherit; +} .container { flex-wrap: wrap; margin: 0 auto; background: rgba(0, 0, 0, 0.5); height: 100%; - overflow: hidden; } - .container > div { - width: 100%; } + overflow: hidden; +} +.container > div { + width: 100%; +} .heading { justify-content: space-around; align-items: center; - height: 50px; } + height: 50px; +} .heading .time { width: 65px; text-align: center; - font-size: 2.6rem; } + font-size: 2.6rem; +} .grid-cell { margin: 0 auto; - max-width: 400px; } + max-width: 400px; +} .grid-item { position: relative; float: left; height: 100%; - border-radius: 5px; } - .grid-item > div { - width: 100%; - height: 100%; } + border-radius: 5px; +} +.grid-item > div { + width: 100%; + height: 100%; +} .grid-item.action .grid-item-content { - background: #fc813f; } + background: #fc813f; +} .grid-item.hidden .grid-item-content { - opacity: 0; } + opacity: 0; +} .grid-item-content { padding: 1px; color: white; font-size: 12px; transition: all 0.2s ease; - border-radius: 3px; } + border-radius: 3px; +} .grid-item-content img { width: 40px; height: 40px; - cursor: pointer; } + cursor: pointer; +} .grid-item-direction { position: absolute; - pointer-events: none; } - .grid-item-direction > div { - position: absolute; - background: #fc813f; - opacity: 0; } - .grid-item-direction.up > div.y, .grid-item-direction.down > div.y { - margin: 0 auto; - left: 0; - right: 0; - width: 2px; - height: 50%; } - .grid-item-direction.left > div.x, .grid-item-direction.right > div.x { - margin: auto 0; - top: 0; - bottom: 0; - width: 50%; - height: 2px; } - .grid-item-direction.up > div.up { - top: 0; - opacity: 1; - animation: height 0.2s ease; } - .grid-item-direction.down > div.down { - bottom: 0; - opacity: 1; - animation: height 0.2s ease; } - .grid-item-direction.left > div.left { - left: 0; - opacity: 1; - animation: width 0.2s ease; } - .grid-item-direction.right > div.right { - right: 0; - opacity: 1; - animation: width 0.2s ease; } + pointer-events: none; +} +.grid-item-direction > div { + position: absolute; + background: #fc813f; + opacity: 0; +} +.grid-item-direction.up > div.y, .grid-item-direction.down > div.y { + margin: 0 auto; + left: 0; + right: 0; + width: 2px; + height: 50%; +} +.grid-item-direction.left > div.x, .grid-item-direction.right > div.x { + margin: auto 0; + top: 0; + bottom: 0; + width: 50%; + height: 2px; +} +.grid-item-direction.up > div.up { + top: 0; + opacity: 1; + animation: height 0.2s ease; +} +.grid-item-direction.down > div.down { + bottom: 0; + opacity: 1; + animation: height 0.2s ease; +} +.grid-item-direction.left > div.left { + left: 0; + opacity: 1; + animation: width 0.2s ease; +} +.grid-item-direction.right > div.right { + right: 0; + opacity: 1; + animation: width 0.2s ease; +} .footer { - text-align: center; } + text-align: center; +} @keyframes height { 0% { - height: 0; } + height: 0; + } 100% { - height: 50%; } } + height: 50%; + } +} @keyframes width { 0% { - width: 0; } + width: 0; + } 100% { - width: 50%; } } + width: 50%; + } +} @media screen and (max-width: 400px) { .heading { - padding: 0 28px; } - + padding: 0 28px; + } .grid-item-content img { width: 41px; - height: 41px; } } + height: 41px; + } +} @media screen and (max-width: 325px) { .heading { - padding: 0 28px; } - + padding: 0 28px; + } .grid-item-content img { width: 35px; - height: 35px; } } - -/*# sourceMappingURL=style.css.map */ + height: 35px; + } +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/Games/linkup/css/style.css.map b/Games/linkup/css/style.css.map index 5d94d5d2c0..43a1b9d194 100644 --- a/Games/linkup/css/style.css.map +++ b/Games/linkup/css/style.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["style.scss"], -"names": [], -"file": "style.css" -} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACAJ;;ADEA;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;ACCJ;;ADCA;EACI,YAAA;ACEJ;;ADAA;EACI,cAAA;EACA,gBAAA;EACA,kCAAA;EACA,sBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;ACGJ;;ADDA;EACI,cAAA;EACA,oCAAA;EACA,YAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;ACIJ;;ADFA;EACI,qBAAA;EACA,cAAA;ACKJ;;ADHA;EAEI,eAAA;EACA,cAAA;EACA,8BAAA;EACA,YAAA;EACA,gBAAA;ACKJ;ADJI;EACI,WAAA;ACMR;;ADHA;EAGI,6BAAA;EACA,mBAAA;EACA,YAAA;ACIJ;;ADDA;EACI,WAAA;EACA,kBAAA;EACA,iBAAA;ACIJ;;ADFA;EAEI,cAAA;EACA,gBAAA;ACIJ;;ADFA;EAEI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACIJ;ADHI;EACI,WAAA;EACA,YAAA;ACKR;;ADFA;EACI,mBAAA;ACKJ;;ADHA;EACI,UAAA;ACMJ;;ADJA;EAEI,YAAA;EAEA,YAAA;EACA,eAAA;EACA,yBAAA;EACA,kBAAA;ACKJ;;ADHA;EACI,WAAA;EACA,YAAA;EACA,eAAA;ACMJ;;ADJA;EACI,kBAAA;EACA,oBAAA;ACOJ;ADNI;EACI,kBAAA;EACA,mBAAA;EACA,UAAA;ACQR;ADLQ;EACI,cAAA;EACA,OAAA;EACA,QAAA;EACA,UA5GM;EA6GN,WAAA;ACOZ;ADFQ;EACI,cAAA;EACA,MAAA;EACA,SAAA;EACA,UAAA;EACA,WAvHM;AC2HlB;ADDI;EACI,MAAA;EACA,UAAA;EACA,2BAAA;ACGR;ADDI;EACI,SAAA;EACA,UAAA;EACA,2BAAA;ACGR;ADDI;EACI,OAAA;EACA,UAAA;EACA,0BAAA;ACGR;ADDI;EACI,QAAA;EACA,UAAA;EACA,0BAAA;ACGR;;ADCA;EACI,kBAAA;ACEJ;;ADCA;EACI;IACI,SAAA;ECEN;EDAE;IACI,WAAA;ECEN;AACF;ADAA;EACI;IACI,QAAA;ECEN;EDAE;IACI,UAAA;ECEN;AACF;ADCA;EACI;IACI,eAAA;ECCN;EDCE;IACI,WAAA;IACA,YAAA;ECCN;AACF;ADCA;EACI;IACI,eAAA;ECCN;EDCE;IACI,WAAA;IACA,YAAA;ECCN;AACF","file":"style.css"} \ No newline at end of file diff --git a/Games/rapid_click_frenzy/README.md b/Games/rapid_click_frenzy/README.md new file mode 100644 index 0000000000..c35cf7272a --- /dev/null +++ b/Games/rapid_click_frenzy/README.md @@ -0,0 +1,26 @@ +# Rapid Click Frenzy + +**Rapid Click Frenzy** is a simple yet addictive game where the player clicks a button as many times as possible within a set time limit. This project is built using HTML, CSS, and JavaScript. + +## Game Description + +In **Rapid Click Frenzy**, the player’s objective is to accumulate the highest score by clicking the "Click Me!" button as many times as possible within 10 seconds. The game begins when the player clicks the "Start Game" button. A countdown timer tracks the remaining time, and the game ends when the timer reaches zero, displaying the player's final score. + +## Features + +- **Simple and Intuitive Gameplay**: Click the button as fast as you can within the time limit. +- **Time-Limited Challenge**: 10-second countdown to achieve the highest score. +- **Score Tracking**: Real-time score display updates with each button click. +- **Timer Display**: Countdown timer shows the remaining time. +- **Start and Restart Game**: "Start Game" button to begin or restart the game. +- **Game Over Screen**: Displays the final score when the game ends. +- **Responsive Design**: Works on both desktop and mobile devices. + +## How to Play + +1. Open the game in a web browser. +2. Click the "Start Game" button to begin. +3. Click the "Click Me!" button as many times as possible before the time runs out. +4. Your score will be displayed at the end of the game. +5. Click "Start Game" to play again. + diff --git a/Games/rapid_click_frenzy/index.html b/Games/rapid_click_frenzy/index.html new file mode 100644 index 0000000000..6de8168397 --- /dev/null +++ b/Games/rapid_click_frenzy/index.html @@ -0,0 +1,27 @@ + + + + + + Rapid Frenzy + + + +
+

ClickMe Game

+
+ Score: 0 +
+ +
+ Time Left: 10 seconds +
+ + +
+ + + diff --git a/Games/rapid_click_frenzy/script.js b/Games/rapid_click_frenzy/script.js new file mode 100644 index 0000000000..9e6fc8e377 --- /dev/null +++ b/Games/rapid_click_frenzy/script.js @@ -0,0 +1,49 @@ +let score = 0; +let timeLeft = 10; +let timer; + +const scoreElement = document.getElementById('score'); +const timerElement = document.getElementById('timer'); +const clickButton = document.getElementById('click-button'); +const startButton = document.getElementById('start-button'); +const gameOverContainer = document.getElementById('game-over'); +const finalScoreElement = document.getElementById('final-score'); + +clickButton.addEventListener('click', () => { + if (timeLeft > 0) { + score++; + scoreElement.textContent = score; + } +}); + +startButton.addEventListener('click', () => { + resetGame(); + startGame(); +}); + +function startGame() { + timer = setInterval(() => { + timeLeft--; + timerElement.textContent = timeLeft; + + if (timeLeft <= 0) { + clearInterval(timer); + endGame(); + } + }, 1000); +} + +function resetGame() { + score = 0; + timeLeft = 10; + scoreElement.textContent = score; + timerElement.textContent = timeLeft; + gameOverContainer.style.display = 'none'; + clickButton.disabled = false; +} + +function endGame() { + clickButton.disabled = true; + gameOverContainer.style.display = 'block'; + finalScoreElement.textContent = score; +} diff --git a/Games/rapid_click_frenzy/styles.css b/Games/rapid_click_frenzy/styles.css new file mode 100644 index 0000000000..9aa7e49c80 --- /dev/null +++ b/Games/rapid_click_frenzy/styles.css @@ -0,0 +1,46 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #282c34; + color: white; + font-family: Arial, sans-serif; + margin: 0; +} + +#game-container { + text-align: center; + background-color: #61dafb; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +button { + padding: 10px 20px; + font-size: 16px; + margin: 10px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#click-button { + background-color: #21a1f1; + color: white; +} + +#start-button { + background-color: #4caf50; + color: white; +} + +#score-container, #timer-container { + margin: 20px; + font-size: 18px; +} + +#game-over { + margin-top: 20px; +} diff --git a/README.md b/README.md index fa72bb57d9..ddc78baef1 100644 --- a/README.md +++ b/README.md @@ -105,9 +105,6 @@ This repository also provides one such platforms where contributers come over an
- - -
| Game | Game | Game | Game | Game | @@ -192,38 +189,44 @@ This repository also provides one such platforms where contributers come over an | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | [Color_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Color_Blast) | | [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Coloron](https://github.com/kunjgit/GameZone/tree/main/Games/Coloron) | [PenPointerFight](https://github.com/kunjgit/GameZone/tree/main/Games/PenPointerFight) | [MathQuiz](https://github.com/kunjgit/GameZone/tree/main/Games/MathQuiz) | +| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | | | +| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | | - -| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | | | -| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | | - -| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | [HTML5_Controller_Tester](https://github.com/kunjgit/GameZone/tree/main/Games/HTML5_Controller_Tester) +| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | [HTML5_Controller_Tester](https://github.com/kunjgit/GameZone/tree/main/Games/HTML5_Controller_Tester) | [escaperoom](https://github.com/kunjgit/GameZone/tree/main/Games/escaperoom) -| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [HTML5_Controller_Tester](https://github.com/kunjgit/GameZone/tree/main/Games/HTML5_Controller_Tester) +| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [HTML5_Controller_Tester](https://github.com/kunjgit/GameZone/tree/main/Games/HTML5_Controller_Tester) -| [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz) | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga) | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road) | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero) | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner) | -| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | [Tower Stack](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Stack) | -| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [TriHand_Tactics](https://github.com/kunjgit/GameZone/tree/main/Games/TriHand_Tactics) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | -| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) | +| [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz) | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga) | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road) | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero) | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner) | +| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | [Tower Stack](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Stack) | +| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [TriHand_Tactics](https://github.com/kunjgit/GameZone/tree/main/Games/TriHand_Tactics) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | +| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) | -| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [DoraemonRun ](https://github.com/kunjgit/GameZone/tree/main/Games/DoraemonRun) | -| [Memory_Cards_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Cards_Game) | +| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [DoraemonRun ](https://github.com/kunjgit/GameZone/tree/main/Games/DoraemonRun) | +| [Memory_Cards_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Cards_Game) | | [Technical_Mind_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Technical_Mind_Game) | +[Slide_Master_Puzzle](https://github.com/kunjgit/GameZone/tree/Main/Games/Slide_Master_Puzz)| | -[Slide_Master_Puzzle](https://github.com/kunjgit/GameZone/tree/Main/Games/Slide_Master_Puzz)| | - -| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [Letter_Sleuth](https://github.com/swetha5157/GameZone/tree/main/Games/Letter_Sleuth) +| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [Letter_Sleuth](https://github.com/swetha5157/GameZone/tree/main/Games/Letter_Sleuth) +| [Rock_paper_scissor](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_paper_scissor) | +| [City_Builder_Game](https://github.com/kunjgit/GameZone/tree/main/Games/City_Builder_Game) | -| [Rock_paper_scissor](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_paper_scissor) | -| [City_Builder_Game](https://github.com/kunjgit/GameZone/tree/main/Games/City_Builder_Game) | +[Mancala_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Mancala_Game) | +[Knife_hit](https://github.com/kunjgit/GameZone/tree/main/Games/Knife_hit) | -[Mancala_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Mancala_Game) | -[Knife_hit](https://github.com/kunjgit/GameZone/tree/main/Games/Knife_hit) | +| [Dice_Roller](https://github.com/kunjgit/GameZone/tree/main/Games/Dice_Roller) | [Chrome_Dino_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Chrome_Dino_Game) | +| [Rock_paper_scissor](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_paper_scissor) | +| [City_Builder_Game](https://github.com/kunjgit/GameZone/tree/main/Games/City_Builder_Game) | +| [Pokemon_Stats_Card](https://github.com/kunjgit/GameZone/tree/main/Games/Pokemon_Stats_Card) | +| [Steampunk_FlappyBird](https://github.com/kunjgit/GameZone/tree/main/Games/Steampunk_FlappyBird) | +| [Catch_The_Circle](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_The_Circle) | +| [Automated_rock_paper_scissor](https://github.com/kunjgit/GameZone/tree/main/Games/automated_rock_paper_scissor) | +| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Astronaut_runner](https://github.com/tanishkaa08/GameZone/tree/main/Games/Astronaunt_runner) | +[16_Puzzle](https://github.com/kunjgit/GameZone/tree/main/Games/16_Puzzle) | | [Rock_paper_scissor](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_paper_scissor) | | [City_Builder_Game](https://github.com/kunjgit/GameZone/tree/main/Games/City_Builder_Game) | @@ -277,8 +280,12 @@ This repository also provides one such platforms where contributers come over an | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) | | [Candy_Crush_Saga](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Crush_Saga) | - - +| [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz) | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga) | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road) | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero) | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner) | +| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | [Tower Stack](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Stack) | +| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [TriHand_Tactics](https://github.com/kunjgit/GameZone/tree/main/Games/TriHand_Tactics) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | +| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) | + [Candy_Crush_Saga](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Crush_Saga) | + [Colour_Generator_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Colour_Generator_Game) | | [Rock_paper_scissor](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_paper_scissor) | | [City_Builder_Game](https://github.com/kunjgit/GameZone/tree/main/Games/City_Builder_Game) | @@ -308,6 +315,7 @@ This repository also provides one such platforms where contributers come over an | [Random_joke_Generator](https://github.com/Jagpreet153/GameZone/tree/main/Games/Random_joke_Generator) | | [Arkanoid_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Arkanoid_Game) | | [Catch_Stars](https://github.com/Kunjgit/GameZone/tree/main/Games/Catch_Stars) | +| [Color Matcher](https://github.com/1911aditi/GameZone/tree/1a4f3847e11bb13b1aca4652a87868c9bc467a93/Games/color%20matcher)                | | [LaserDarts] (https://github.com/Jagpreet153/GameZone/tree/main/Games/LaserDarts) | [Block Building](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Building) | | [Flames Game](https://github.com/kunjgit/GameZone/tree/main/Games/Flames_Game)| @@ -317,16 +325,21 @@ This repository also provides one such platforms where contributers come over an | [Emoji_slot_machine] (https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_slot_machine) | [NewsJunction](https://github.com/kunjgit/GameZone/tree/main/Games/NewsJunction) | [Pixel Painter](https://github.com/kunjgit/GameZone/tree/main/Games/pixel_painter) | +| [Guess_The_Song](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Song) | | [NewsJunction](https://github.com/kunjgit/GameZone/tree/main/Games/NewsJunction) | -| [Recognizing_Figures](https://github.com/kunjgit/GameZone/tree/main/Games/Recognizing_Figures) | - +| [Recognizing_Figures](https://github.com/kunjgit/GameZone/tree/main/Games/Recognizing_Figures) | [Screen Pet Game](https://github.com/kunjgit/GameZone/tree/main/Games/Screen-Pet-Game) | | [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme) | - | [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball) | |[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)| - - - +| [Number_Recall_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Recall_Game) | +| [Hit_the_hamster] (https://github.com/kunjgit/GameZone/tree/main/Games/Hit_the_hamster) | +| [Forest_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Forst_Guardian) | +| [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme) | +| [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball) | +|[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)| +|[AquaSort_Game](https://github.com/kunjgit/GameZone/tree/main/Games/AquaSort_Game) | +| [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) | +| [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) | @@ -392,4 +405,3 @@ Terms and conditions for use, reproduction and distribution are under the [Apach

Back to top

- diff --git a/assets/Forest_guardian.png b/assets/Forest_guardian.png new file mode 100644 index 0000000000..9b27b27ef9 Binary files /dev/null and b/assets/Forest_guardian.png differ diff --git a/assets/css/style.css b/assets/css/style.css index 194200e61b..3d19f19841 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,22 +1,26 @@ /* About Paragraph */ - +html,body { +width: 100%; +height: 100%; +margin: 0px; +padding: 0px; +overflow-x: hidden;} #about { color: white; font-size: 1.2rem; /* font-family: 'Agency FB', Times, serif; */ font-family: Verdana, Geneva, Tahoma, sans-serif; - text-align: center; + text-align: center; } /* Copyright */ -#copyright{ +#copyright { text-align: center; color: white; font-size: 1.1rem; } - /*-----------------------------------*\ #style.css \*-----------------------------------*/ @@ -28,8 +32,9 @@ */ @font-face { - font-family: 'gamezone'; - src: url('https://github.com/Winter262005/GameZone/blob/main/assets/fonts/MouldyCheeseRegular-WyMWG.woff2') format('woff2'); + font-family: "gamezone"; + src: url("https://github.com/Winter262005/GameZone/blob/main/assets/fonts/MouldyCheeseRegular-WyMWG.woff2") + format("woff2"); } /*-----------------------------------*\ @@ -124,7 +129,6 @@ input:checked + .slider:before { color: #000000; } - a { text-decoration: none; color: #fff; @@ -216,11 +220,9 @@ footer { color: #ffffff; } - a:hover svg { - fill:rgb(0, 119, 181); -} - + fill: rgb(0, 119, 181); +} .fa-linkedin-square:hover { color: rgb(0, 119, 181); @@ -1462,6 +1464,26 @@ main { .project-category { margin-left: 10px; } +.title-container { + display: flex; + justify-content: center; + align-items: center; + position: relative; + color: white; +} + +.like-button { + background: none; + border: none; + font-size: 16px; + color: #fff !important; + position: absolute; + right: 40px; +} + +.like-button.liked { + color: rgb(238, 8, 8) !important; +} .project-title { color: var(--white-2); @@ -2420,7 +2442,7 @@ textarea.form-input::-webkit-resizer { margin-bottom: 40px; color: #000; display: flex; - justify-content: center; + justify-content: space-between; align-items: center; cursor: pointer; transition: 0.8s; @@ -2429,7 +2451,6 @@ textarea.form-input::-webkit-resizer { min-width: 100px; max-width: 400px; margin: auto; - &::after { position: absolute; @@ -2462,10 +2483,47 @@ textarea.form-input::-webkit-resizer { font-size: 16px; } +/* @media screen and (max-width: 920px) { + .search-container:hover > .search-input { + width: 90vw; + font-size: 16px; + } +} */ @media screen and (max-width: 920px) { + .search-container { + display: flex; + justify-content: space-between; + align-items: center; + min-width: 50px; + max-width: 250px; + margin-left: 10px; + } + .search-container:hover > .search-input { width: 90vw; font-size: 16px; + visibility: visible; + transition: width 2.5s ease-in-out, font-size 2.5s ease-in-out; + font-weight: 250; + color: #000; + } + + + .fa.fa-search, + .favorites-link { + flex: 1; + order: 1; + margin-left: 5px; + } + .favorites-link { + position: relative; + left: -10px; + } + + .favorites-link img { + width: 30px; + height: 30px; + margin-left: 0; } } @@ -2473,24 +2531,44 @@ textarea.form-input::-webkit-resizer { background: transparent; border: none; outline: none; - width: 10px; + width: 100%; font-weight: 500; - font-size: 0px; + font-size: 16px; transition: 0.8s; + color: #000; } .search-container ::placeholder { color: #000000; } .search-container .search-btn { - position: absolute; /* Added position absolute for icon positioning */ - right: 12px; /* Adjusted right positioning for icon */ + position: absolute; + right: 12px; } .search-btn { - padding-right: 5px; + width: 30px; + height: 30px; + position: relative; + right: 0; } - -.clear-btn{ +.fa.fa-search { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + order: 1; +} +.favorites-link { + order: 2; + margin-left: 80px; + width: 50px; + height: 50px; +} +.favorites-link img { + width: 40px; + height: 30px; +} +.clear-btn { position: absolute; right: 40px; top: 50%; @@ -2500,40 +2578,49 @@ textarea.form-input::-webkit-resizer { border: none; cursor: pointer; font-size: 18px; - display:none; - color:rgba(16, 2, 2, 0.731) + display: none; + color: rgba(16, 2, 2, 0.731); } .search-input:not(:placeholder-shown) ~ .clear-btn { - display: block; /* Show when input is not empty */ + display: block; } #search-related { display: flex; justify-content: space-around; color: white; padding: 30px 0 20px 0; -} -#search-related p{ +} +#search-related p { color: #b7b7b7; } -#search-related #search-term{ +#search-related #search-term { animation: none; display: contents; font-weight: bolder; } -#search-related #clear-search{ +#search-related #clear-search { background: #e1e1e1; color: black; padding: 0px 10px; border-radius: 50px; font-weight: bolder; } -#search-related #clear-search:hover{ - box-shadow:0 0 10px red; +#search-related #clear-search:hover { + box-shadow: 0 0 10px red; color: red; } +.like-button { + background: none; + border: none; + font-size: 24px; + color: #fff; /* White */ +} +.like-button.liked { + color: #f00; /* Red */ +} /*-----------------------------------*\ #PAGINATION SECTION \*-----------------------------------*/ @@ -2606,7 +2693,6 @@ textarea.form-input::-webkit-resizer { border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(5.1px); -webkit-backdrop-filter: blur(9.1px); - } /* pagination hover effect on non-active */ @@ -2621,7 +2707,6 @@ textarea.form-input::-webkit-resizer { /* font-weight: 800; */ opacity: 1; background-color: #df87ef; - } #scrollToTopButton { @@ -2685,7 +2770,7 @@ textarea.form-input::-webkit-resizer { /* GameZone heading **/ .heading { margin-top: -2%; - font: 5.5vw/1 'Agency FB', Times, serif; + font: 5.5vw/1 "Agency FB", Times, serif; font-size: 5.5vw; display: flex; align-items: center; @@ -2966,17 +3051,16 @@ box-shadow: 0px 0px 21px 0px rgba(204,153,255,1); */ font-size: 2rem; } - .bgContainer { position: relative; /* width: 500px; */ /* height: 420px; */ - margin: auto; + margin: auto; } .bgContainer::before { content: ""; position: fixed; - top: 0px; + top: 0px; left: -30%; /*width: 500px;*/ /*commented beacuse it causes @@ -2984,7 +3068,12 @@ box-shadow: 0px 0px 21px 0px rgba(204,153,255,1); */ height: 800px; border-radius: 100%; background-color: rgb(120, 47, 152); - background: linear-gradient(343deg, rgba(120, 47, 152, 1) 0%, rgba(5, 50, 129, 1) 82%, rgba(52, 39, 100, 1) 100%); + background: linear-gradient( + 343deg, + rgba(120, 47, 152, 1) 0%, + rgba(5, 50, 129, 1) 82%, + rgba(52, 39, 100, 1) 100% + ); filter: blur(600px); z-index: -10; } @@ -2992,16 +3081,168 @@ box-shadow: 0px 0px 21px 0px rgba(204,153,255,1); */ .bgContainer::after { content: ""; position: fixed; - top: 0px; + top: 0px; right: -30%; width: 500px; height: 800px; border-radius: 100%; background-color: rgb(120, 47, 152); - background: linear-gradient(343deg, rgba(120, 47, 152, 1) 0%, rgba(5, 50, 129, 1) 82%, rgba(52, 39, 100, 1) 100%); + background: linear-gradient( + 343deg, + rgba(120, 47, 152, 1) 0%, + rgba(5, 50, 129, 1) 82%, + rgba(52, 39, 100, 1) 100% + ); filter: blur(600px); z-index: -10; } +@import url('https://fonts.googleapis.com/css?family=Exo:400,700'); + +*{ + margin: 0px; + padding: 0px; +} + +body{ + font-family: 'Exo', sans-serif; +} + + +.context { + width: 100%; + position: absolute; + top:50vh; + +} + +.context h1{ + text-align: center; + color: #fff; + font-size: 50px; +} + + +.area{ + width: 100%; + height:100vh; + + +} + +.circles{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.circles li{ + position: absolute; + display: block; + list-style: none; + width: 20px; + height: 20px; + background: rgba(255, 255, 255, 0.2); + animation: animate 25s linear infinite; + bottom: -150px; + +} + +.circles li:nth-child(1){ + left: 25%; + width: 80px; + height: 80px; + animation-delay: 0s; +} + + +.circles li:nth-child(2){ + left: 10%; + width: 20px; + height: 20px; + animation-delay: 2s; + animation-duration: 12s; +} + +.circles li:nth-child(3){ + left: 70%; + width: 20px; + height: 20px; + animation-delay: 4s; +} + +.circles li:nth-child(4){ + left: 40%; + width: 60px; + height: 60px; + animation-delay: 0s; + animation-duration: 18s; +} + +.circles li:nth-child(5){ + left: 65%; + width: 20px; + height: 20px; + animation-delay: 0s; +} + +.circles li:nth-child(6){ + left: 75%; + width: 110px; + height: 110px; + animation-delay: 3s; +} + +.circles li:nth-child(7){ + left: 35%; + width: 150px; + height: 150px; + animation-delay: 7s; +} + +.circles li:nth-child(8){ + left: 50%; + width: 25px; + height: 25px; + animation-delay: 15s; + animation-duration: 45s; +} + +.circles li:nth-child(9){ + left: 20%; + width: 15px; + height: 15px; + animation-delay: 2s; + animation-duration: 35s; +} + +.circles li:nth-child(10){ + left: 85%; + width: 150px; + height: 150px; + animation-delay: 0s; + animation-duration: 11s; +} + + + +@keyframes animate { + + 0%{ + transform: translateY(0) rotate(0deg); + opacity: 1; + border-radius: 0; + } + + 100%{ + transform: translateY(-1000px) rotate(720deg); + opacity: 0; + border-radius: 50%; + } + +} #suggestion-list { list-style: none; @@ -3033,19 +3274,19 @@ box-shadow: 0px 0px 21px 0px rgba(204,153,255,1); */ } /* Animations */ -.fromTop{ +.fromTop { animation: slideTop 1s ease forwards; } -.fromLeft{ +.fromLeft { animation: slideLeft 1s ease forwards; } -.fromRight{ +.fromRight { animation: slideRight 1s ease forwards; } -.fromBottom{ +.fromBottom { animation: slideBottom 1s ease forwards; } -.zoomIn{ +.zoomIn { animation: zoomIn 1s ease forwards; } @@ -3098,4 +3339,4 @@ box-shadow: 0px 0px 21px 0px rgba(204,153,255,1); */ transform: scale(1); opacity: 1; } -} \ No newline at end of file +} diff --git a/assets/images/AquaSort.png b/assets/images/AquaSort.png new file mode 100644 index 0000000000..353048f392 Binary files /dev/null and b/assets/images/AquaSort.png differ diff --git a/assets/images/Colour_Generator_Game.png b/assets/images/Colour_Generator_Game.png new file mode 100644 index 0000000000..7f115a8060 Binary files /dev/null and b/assets/images/Colour_Generator_Game.png differ diff --git a/assets/images/FavFolder.png b/assets/images/FavFolder.png new file mode 100644 index 0000000000..8ca4df072f Binary files /dev/null and b/assets/images/FavFolder.png differ diff --git a/assets/images/Forest_guardian.png b/assets/images/Forest_guardian.png new file mode 100644 index 0000000000..9b27b27ef9 Binary files /dev/null and b/assets/images/Forest_guardian.png differ diff --git a/assets/images/Guess_The_Song.png b/assets/images/Guess_The_Song.png new file mode 100644 index 0000000000..5d049be33e Binary files /dev/null and b/assets/images/Guess_The_Song.png differ diff --git a/assets/images/Hit_the_hamster_game.png b/assets/images/Hit_the_hamster_game.png new file mode 100644 index 0000000000..5ceb822e69 Binary files /dev/null and b/assets/images/Hit_the_hamster_game.png differ diff --git a/assets/images/Love calculator game.png b/assets/images/Love calculator game.png new file mode 100644 index 0000000000..bb264d2297 Binary files /dev/null and b/assets/images/Love calculator game.png differ diff --git a/assets/images/Number_recall_game (1).png b/assets/images/Number_recall_game (1).png new file mode 100644 index 0000000000..033d581dbc Binary files /dev/null and b/assets/images/Number_recall_game (1).png differ diff --git a/assets/images/Number_recall_game (2).png b/assets/images/Number_recall_game (2).png new file mode 100644 index 0000000000..413cfd3733 Binary files /dev/null and b/assets/images/Number_recall_game (2).png differ diff --git a/assets/images/Pixel_Painter.png b/assets/images/Pixel_Painter.png deleted file mode 100644 index a778aeef8a..0000000000 Binary files a/assets/images/Pixel_Painter.png and /dev/null differ diff --git a/assets/images/Reflex_Game.png b/assets/images/Reflex_Game.png new file mode 100644 index 0000000000..2c49fe6099 Binary files /dev/null and b/assets/images/Reflex_Game.png differ diff --git a/assets/images/Reflex_Game.webp b/assets/images/Reflex_Game.webp new file mode 100644 index 0000000000..59342fd5de Binary files /dev/null and b/assets/images/Reflex_Game.webp differ diff --git a/assets/images/Screen_Pet_Game.png b/assets/images/Screen_Pet_Game.png new file mode 100644 index 0000000000..19175ee9dc Binary files /dev/null and b/assets/images/Screen_Pet_Game.png differ diff --git a/assets/images/Screenshot 2024-05-21 144653.png b/assets/images/Screenshot 2024-05-21 144653.png new file mode 100644 index 0000000000..ccf9a22ec3 Binary files /dev/null and b/assets/images/Screenshot 2024-05-21 144653.png differ diff --git a/assets/images/Tic-Tac-Toe Game.png b/assets/images/Tic-Tac-Toe Game.png new file mode 100644 index 0000000000..d457e5589c Binary files /dev/null and b/assets/images/Tic-Tac-Toe Game.png differ diff --git a/assets/images/pixel_painter.png b/assets/images/pixel_painter.png deleted file mode 100644 index 5452499cd2..0000000000 Binary files a/assets/images/pixel_painter.png and /dev/null differ diff --git a/assets/images/rapidgame.png b/assets/images/rapidgame.png new file mode 100644 index 0000000000..e0d1721586 Binary files /dev/null and b/assets/images/rapidgame.png differ diff --git a/assets/index_old.html b/assets/index_old.html index 26b59423c7..5d8f6d1843 100644 --- a/assets/index_old.html +++ b/assets/index_old.html @@ -2764,7 +2764,21 @@

+ +
+
+ Eye +
+ game thumbnail +
+

143.Guess_The_Song🔗

+

Gessing The song by emoji as a hint with 5 Chances.

+ + diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json index 020bd82b8f..4804631e5d 100644 --- a/assets/js/gamesData.json +++ b/assets/js/gamesData.json @@ -2048,10 +2048,6 @@ "411":{ "gameTitle": "Tiny Fishing", "gameUrl": "Tiny_Fishing", "thumbnailUrl": "Tiny_Fishing.png" - - - - }, "398":{ "gameTitle": "Shrek Vs Wild", @@ -2067,8 +2063,12 @@ "gameTitle": "16_Puzzle", "gameUrl": "16_Puzzle", "thumbnailUrl": "16_Puzzle.png" - }, +"420":{ + "gameTitle" : "Colour_Generator_Game", + "gameUrl": "Colour_Generator_Game", + "thumbnailUrl": "Colour_Generator_Game.png" + }, "406":{ "gameTitle": "Knife_hit", "gameUrl": "Knife_hit", @@ -2077,16 +2077,18 @@ "gameTitle": "Anagram_Checker_Game", "gameUrl": "Anagram_Checker_Game", "thumbnailUrl": "Anagram_Checker_Game.png" + +}, +"407":{ + "gameTitle": "Screen_Pet_Game", + "gameUrl": "Screen_Pet_Game", + "thumbnailUrl": "Screen_Pet_Game.png" + },"416":{ - "gameTitle": "Pen_Pointer_Fight", - "gameUrl": "PenPointerFight", - "thumbnailUrl": "PenPointerFight.png" -},"417":{ - "gameTitle": "MathQuiz", - "gameUrl": "MathQuiz", - "thumbnailUrl": "MathQuiz.png" + "gameTitle": "Guess_The_Song", + "gameUrl": "Guess_The_Song", + "thumbnailUrl": "Guess_The_Song.png" } } - diff --git a/assets/js/index.js b/assets/js/index.js index d17d026c13..86f599b40f 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -10,6 +10,7 @@ const generateLiTags = (gamesData, searchText = "") => { if (gameData) { const { gameTitle, gameUrl, thumbnailUrl } = gameData; if (gameTitle.toLowerCase().includes(searchText)) { + const liked = localStorage.getItem(`liked-${tagNumber}`) === "true"; const liTag = `
  • @@ -19,7 +20,10 @@ const generateLiTags = (gamesData, searchText = "") => { ${gameTitle} -

    ${tagNumber}. ${gameTitle} 🔗

    +
    + ${tagNumber}. ${gameTitle} 🔗 + +
    • `; @@ -57,7 +61,10 @@ fetch("./assets/js/gamesData.json") // Search functionality const searchInput = document.getElementById("searchbar"); searchInput.addEventListener("input", () => { - projectListContainer.innerHTML = generateLiTags(gamesData, searchInput.value); + projectListContainer.innerHTML = generateLiTags( + gamesData, + searchInput.value + ); }); }) .catch((error) => console.error("Error fetching game data:", error)); @@ -75,22 +82,21 @@ window.addEventListener("scroll", function () { // Get references to the div and input elements const searchContainer = document.getElementById("search-container-id"); const searchInput = document.getElementById("searchbar"); -const clearButton=document.getElementById("clearButton") +const clearButton = document.getElementById("clearButton"); // Add a click event listener to the div - searchContainer.addEventListener("click", function () { +searchContainer.addEventListener("click", function () { // Focus on the input field when the div is clicked searchInput.focus(); }); - // Improved searching and filtering of the games -document.addEventListener('DOMContentLoaded', () => { - const searchInput = document.getElementById('searchbar'); - const clearSearchButton = document.getElementById('clear-search'); - const searchTermDisplay = document.getElementById('search-term'); +document.addEventListener("DOMContentLoaded", () => { + const searchInput = document.getElementById("searchbar"); + const clearSearchButton = document.getElementById("clear-search"); + const searchTermDisplay = document.getElementById("search-term"); const searchRelatedDiv = document.getElementById("search-related"); - const suggestionList = document.getElementById('suggestion-list'); + const suggestionList = document.getElementById("suggestion-list"); if (!searchInput) return; searchRelatedDiv.style.display = "none"; const updateSearchRelatedVisibility = (searchText) => { @@ -101,30 +107,32 @@ document.addEventListener('DOMContentLoaded', () => { } }; //old code from script.js - const searchList=(searchText)=>{ - suggestionList.innerHTML = ''; - if (searchText.length === 0) { - suggestionList.style.display = 'none'; - return; - } - const filteredGames = Object.values(gamesData).filter(game => - game.gameTitle.toLowerCase().includes(searchText) || game.gameUrl.toLowerCase().includes(searchText) - ); - filteredGames.forEach(game => { - const li = document.createElement('li'); - const anchor = document.createElement('a'); - anchor.href = `./Games/${game.gameUrl}`; - anchor.target = "_blank"; - anchor.setAttribute('aria-label', game.gameTitle); - anchor.textContent = game.gameTitle; - li.appendChild(anchor); - suggestionList.appendChild(li); - }); - suggestionList.style.display = filteredGames.length ? 'block' : 'none'; -} -//for serching - searchInput.addEventListener('input', function () { - const searchText = searchInput.value.trim().toLowerCase(); + const searchList = (searchText) => { + suggestionList.innerHTML = ""; + if (searchText.length === 0) { + suggestionList.style.display = "none"; + return; + } + const filteredGames = Object.values(gamesData).filter( + (game) => + game.gameTitle.toLowerCase().includes(searchText) || + game.gameUrl.toLowerCase().includes(searchText) + ); + filteredGames.forEach((game) => { + const li = document.createElement("li"); + const anchor = document.createElement("a"); + anchor.href = `./Games/${game.gameUrl}`; + anchor.target = "_blank"; + anchor.setAttribute("aria-label", game.gameTitle); + anchor.textContent = game.gameTitle; + li.appendChild(anchor); + suggestionList.appendChild(li); + }); + suggestionList.style.display = filteredGames.length ? "block" : "none"; + }; + //for searching + searchInput.addEventListener("input", function () { + const searchText = searchInput.value.trim().toLowerCase(); fetch("./assets/js/gamesData.json") .then((response) => response.json()) .then((gamesData) => { @@ -136,8 +144,8 @@ document.addEventListener('DOMContentLoaded', () => { }) .catch((error) => console.error("Error fetching game data:", error)); }); -//for search clearing - clearSearchButton.addEventListener('click', function () { + //for search clearing + clearSearchButton.addEventListener("click", function () { searchInput.value = ""; fetch("./assets/js/gamesData.json") .then((response) => response.json()) @@ -151,3 +159,13 @@ document.addEventListener('DOMContentLoaded', () => { .catch((error) => console.error("Error fetching game data:", error)); }); }); + +function like(button, tagNumber, gameData) { + button.classList.toggle("liked"); + const isLiked = button.classList.contains("liked"); + + // Store both liked state and game data in localStorage + localStorage.setItem(`liked-${tagNumber}`, isLiked); + localStorage.setItem(`game-${tagNumber}`, JSON.stringify(gameData)); +} + diff --git a/assets/js/scroll.js b/assets/js/scroll.js index ca97264698..55e46cdad8 100644 --- a/assets/js/scroll.js +++ b/assets/js/scroll.js @@ -1,33 +1,33 @@ -// let calcScrollValue = () => { -// let scrollProg = document.getElementById("progress"); -// let pos = document.documentElement.scrollTop; -// let calcHeight = -// document.documentElement.scrollHeight - -// document.documentElement.clientHeight; -// let scrollValue = Math.round((pos * 100) / calcHeight); -// if (pos > 100) { -// scrollProg.style.display = "grid"; -// } else { -// scrollProg.style.display = "none"; -// } -// scrollProg.addEventListener("click", () => { -// document.documentElement.scrollTop = 0; -// }); -// scrollProg.style.background = `conic-gradient(#6862e8 ${scrollValue}%, #d499de ${scrollValue}%)`; -// }; +let calcScrollValue = () => { + let scrollProg = document.getElementById("progress"); + let pos = document.documentElement.scrollTop; + let calcHeight = + document.documentElement.scrollHeight - + document.documentElement.clientHeight; + let scrollValue = Math.round((pos * 100) / calcHeight); + if (pos > 100) { + scrollProg.style.display = "grid"; + } else { + scrollProg.style.display = "none"; + } + scrollProg.addEventListener("click", () => { + document.documentElement.scrollTop = 0; + }); + scrollProg.style.background = `conic-gradient(#6862e8 ${scrollValue}%, #d499de ${scrollValue}%)`; + }; -// window.addEventListener('scroll', function() { -// var scrollToTopButton = document.getElementById('progress'); -// if (window.pageYOffset > 200) { -// scrollToTopButton.style.display = 'block'; -// } else { -// scrollToTopButton.style.display = 'none'; -// } -// }); + window.addEventListener('scroll', function() { + var scrollToTopButton = document.getElementById('progress'); + if (window.pageYOffset > 200) { + scrollToTopButton.style.display = 'block'; + } else { + scrollToTopButton.style.display = 'none'; + } + }); -// window.onscroll = calcScrollValue; -// window.onload = calcScrollValue; + window.onscroll = calcScrollValue; + window.onload = calcScrollValue; const filled = document.querySelector(".filled"); diff --git a/color matcher b/color matcher new file mode 100644 index 0000000000..5593caa048 --- /dev/null +++ b/color matcher @@ -0,0 +1,74 @@ + + + + + + Color Matcher + + + + +
    +

    Color Matcher

    +
    + + +

    +
    + + + diff --git a/index.html b/index.html index ae0cacf613..e06858977d 100644 --- a/index.html +++ b/index.html @@ -105,6 +105,20 @@ +
    +
      +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    +
    @@ -144,6 +158,7 @@ + @@ -177,8 +192,16 @@
    +
    + + fav + + +
    +
    +
    diff --git a/pages/fav.html b/pages/fav.html new file mode 100644 index 0000000000..cb41d96adf --- /dev/null +++ b/pages/fav.html @@ -0,0 +1,222 @@ + + + + + + Favorites + + + + +
    +

    Your Favorite Games

    +
      +
      + + + diff --git a/pages/script.js b/pages/script.js new file mode 100644 index 0000000000..e69de29bb2