diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml new file mode 100644 index 00000000..00352331 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -0,0 +1,52 @@ +name: ๐Ÿชฒ Bug Report +description: Report your bug by filling teh information given below +title: "[Bug]: " + +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out this bug report! + - type: textarea + id: bug-description + attributes: + label: Give a brief about the bug โœ๏ธ + description: Enter a brief description about the bug report + placeholder: Please include a summary, also include relevant motivation and context. + value: "Description" + validations: + required: true + - type: textarea + id: behaviors + attributes: + label: What is the expected behavior? ๐Ÿค” + description: Enter the expected behavior of bug + placeholder: Please include a summary, also include relevant motivation and context. + value: "Description" + validations: + required: true + - type: textarea + id: instructions + attributes: + label: Provide step by step information reproduce the bug ๐Ÿ“„ + description: Enter the description on how you plan to find the bug's solution + placeholder: Please include a summary, also include relevant motivation and context. + value: "Description" + validations: + required: true + - type: dropdown + id: contribution + attributes: + label: Select program in which you are contributing + multiple: true + options: + - GSSoC24 + - Other + - type: checkboxes + id: terms + attributes: + label: Code of Conduct + description: By submitting this issue, you agree to follow our [CODE OF CONDUCT](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/CODE_OF_CONDUCT.md) + options: + - label: I follow [CONTRIBUTING GUIDELINE](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/Contributor.md) of this project. + required: true diff --git a/.github/ISSUE_TEMPLATE/documentation.md b/.github/ISSUE_TEMPLATE/documentation.md deleted file mode 100644 index 80a27672..00000000 --- a/.github/ISSUE_TEMPLATE/documentation.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -name: Documentation Issue -about: Report an issue with the project documentation -title: "[Documentation] :" -labels: Easy, IWOC2024 -assignees: '' - ---- - -## About Documentation - -## Description - -## Affected Documentation Section - -## Expected Documentation - -## Severity -- [ ] Low -- [ ] Medium -- [ ] High -- [ ] Critical - - -## Connect Us On social media - -- [ ] Star the repositry -- [ ] GitHub -- [ ] LinkedIn -- [ ] YouTube -- [ ] Discord - -### Thank you for raising issue in GameSpher 3.0 diff --git a/.github/ISSUE_TEMPLATE/documentation_bug.yml b/.github/ISSUE_TEMPLATE/documentation_bug.yml new file mode 100644 index 00000000..68d7f99e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/documentation_bug.yml @@ -0,0 +1,43 @@ +name: ๐Ÿ“š Documentation or README.md issue report +description: Report an issue in the project's documentation or README.md file. +title: "[Documentation Bug]: " + +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out this documentation bug report! + - type: textarea + id: documentation-bug-description + attributes: + label: Describe the bug โœ๏ธ + description: Enter a brief description about the documentation bug report + placeholder: Please include a summary, also include relevant motivation and context. + value: "Describe your bug here" + validations: + required: true + - type: textarea + id: instructions + attributes: + label: Provide step by step information reproduce the bug ๐Ÿ“„ + description: Enter the description on how you plan to find the bug's solution + placeholder: Please include a summary, also include relevant motivation and context. + value: "Description" + validations: + required: true + - type: dropdown + id: contribution + attributes: + label: Select program in which you are contributing + multiple: true + options: + - GSSoC24 + - Other + - type: checkboxes + id: terms + attributes: + label: Code of Conduct + description: By submitting this issue, you agree to follow our [CODE OF CONDUCT](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/CODE_OF_CONDUCT.md) + options: + - label: I follow [CONTRIBUTING GUIDELINE](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/Contributor.md) of this project. + required: true diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index 0f623f67..00000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -name: Feature Request -about: Suggest a new feature or enhancement for the project -title: "[Feature Request] :" -labels: IWOC2024, Medium -assignees: '' - ---- - -## About Feature - -## Description - -## Technologies Used - -## Screenshot - -## Connect Us On Social Media - -- [ ] Star the repositry -- [ ] GitHub -- [ ] LinkedIn -- [ ] YouTube -- [ ] Discord - -### Thank you for raising issue in GameSpher 3.0 diff --git a/.github/ISSUE_TEMPLATE/game_enhancement.yml b/.github/ISSUE_TEMPLATE/game_enhancement.yml new file mode 100644 index 00000000..5fe60c61 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/game_enhancement.yml @@ -0,0 +1,43 @@ +name: ๐Ÿš€Game Enhancement Request +description: Suggest your enhancement for the existing game +title: "[Enhancement]: " + +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out this enhancement request form + - type: textarea + id: bug-description + attributes: + label: Do you want to have the enhancement of existing game ? ๐Ÿ˜€ Describe yourself.. + description: Enter a brief description about the enhancement you need + placeholder: Give all the context of your enhancement as well as the existing game + value: "Game enhancement" + validations: + required: true + - type: textarea + id: behaviour + attributes: + label: Describe the solution you'd like + description: Give steps in which you will solve it + placeholder: Please include a summary, also include relevant motivation and context. + value: "Solution steps" + validations: + required: true + - type: dropdown + id: contribution + attributes: + label: Select program in which you are contributing + multiple: true + options: + - GSSoC24 + - Other + - type: checkboxes + id: terms + attributes: + label: Code of Conduct + description: By submitting this issue, you agree to follow our [CODE OF CONDUCT](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/CODE_OF_CONDUCT.md) + options: + - label: I follow [CONTRIBUTING GUIDELINE](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/Contributor.md) of this project. + required: true diff --git a/.github/ISSUE_TEMPLATE/new-game.md b/.github/ISSUE_TEMPLATE/new-game.md deleted file mode 100644 index 4d94e901..00000000 --- a/.github/ISSUE_TEMPLATE/new-game.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -name: New Game -about: Description of game -title: "[Game]: " -labels: IWOC2024, Medium -assignees: '' - ---- - -## Game Name - -## Description - - - -## Screenshot Section - - - -## Demo Video Section - - - -### Connect Us On Social Media - -- [ ] Star the repositry -- [ ] GitHub -- [ ] LinkedIn -- [ ] YouTube -- [ ] Discord - -### Thank you for raising issue in GameSpher 3.0 diff --git a/.github/ISSUE_TEMPLATE/new_game_request.yml b/.github/ISSUE_TEMPLATE/new_game_request.yml new file mode 100644 index 00000000..4007cedd --- /dev/null +++ b/.github/ISSUE_TEMPLATE/new_game_request.yml @@ -0,0 +1,43 @@ +name: ๐Ÿ†•๐ŸŽฎ new game request +description: Suggest an idea and show your creativity to add new game +title: "[New game]: " + +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out your new game issue + - type: textarea + id: new-game + attributes: + label: ๐ŸŽฎ Game Request + description: Describe the game logic and also give a brief about the features of the game + placeholder: add all necessary details required for your new game + value: "Game logic and basic description" + validations: + required: true + - type: textarea + id: features + attributes: + label: Point down the features + description: think about your the feature your game will have + placeholder: Please include a summary, also include relevant motivation and context. + value: "Game points" + validations: + required: true + - type: dropdown + id: contribution + attributes: + label: Select program in which you are contributing + multiple: true + options: + - GSSoC24 + - Other + - type: checkboxes + id: terms + attributes: + label: Code of Conduct + description: By submitting this issue, you agree to follow our [CODE OF CONDUCT](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/CODE_OF_CONDUCT.md) + options: + - label: I follow [CONTRIBUTING GUIDELINE](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/Contributor.md) of this project. + required: true diff --git a/.github/ISSUE_TEMPLATE/question_and_support.yml b/.github/ISSUE_TEMPLATE/question_and_support.yml new file mode 100644 index 00000000..7fdbebd5 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/question_and_support.yml @@ -0,0 +1,34 @@ +name: โ“ Question or Support Request +description: Questions and requests for support. +title: "[Question]: " + +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out this and letting us know your question + - type: textarea + id: description + attributes: + label: Describe your question or ask for support.โ“ + description: Enter a brief description about your question or support needed + placeholder: Please include a summary, also include relevant motivation and context. + value: "Description" + validations: + required: true + - type: dropdown + id: contribution + attributes: + label: Select program in which you are contributing + multiple: true + options: + - GSSoC24 + - Other + - type: checkboxes + id: terms + attributes: + label: Code of Conduct + description: By submitting this issue, you agree to follow our [CODE OF CONDUCT](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/CODE_OF_CONDUCT.md) + options: + - label: I follow [CONTRIBUTING GUIDELINE](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/Contributor.md) of this project. + required: true diff --git a/.github/ISSUE_TEMPLATE/styles.yml b/.github/ISSUE_TEMPLATE/styles.yml deleted file mode 100644 index f857de7e..00000000 --- a/.github/ISSUE_TEMPLATE/styles.yml +++ /dev/null @@ -1,53 +0,0 @@ -name: Style Changing Request -description: Suggest a style designs -title: '[style]: ' -labels: ['enhancement'] -body: - - type: markdown - attributes: - value: | - Thanks for taking the time to fill out this template! - - type: textarea - id: style-idea - attributes: - label: What's the style idea? - placeholder: Add descriptions - value: 'We need to improve ' - validations: - required: true - - type: textarea - id: screenshots - attributes: - label: Add screenshots - required: true - - - label: I have read the [Contributing Guidelines](https://github.com/priyankarpal/ProjectsHut/blob/main/contributing.md) - required: true - - - label: I agree to follow this project's [Code of Conduct](https://github.com/priyankarpal/ProjectsHut/blob/main/CODE_OF_CONDUCT.md) - required: true - - - label: I'm a GSSoC'23 contributor - - - label: I want to work on this issue - description: Add screenshots to see the demo - placeholder: Add screenshots - value: 'Add screenshots' - - type: checkboxes - id: terms - attributes: - label: Code of Conduct - description: By submitting this issue, you agree to follow our Code of Conduct - options: - - label: I agree to follow this project's Code of Conduct - required: true - - - label: I have read the [Contributing Guidelines](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/Contributor.md) - required: true - - - label: I agree to follow this project's [Code of Conduct](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/CODE_OF_CONDUCT.md) - required: true - - - label: I'm a GSSoC'23 contributor - - - label: I want to work on this issue diff --git a/.github/workflows/AutoGreeting.yml b/.github/workflows/AutoGreeting.yml new file mode 100644 index 00000000..a06bdd22 --- /dev/null +++ b/.github/workflows/AutoGreeting.yml @@ -0,0 +1,25 @@ +name: Auto Greeting + +on: + issues: + types: [opened] + +permissions: + issues: write + +jobs: + greet: + runs-on: ubuntu-latest + steps: + - name: Add a greeting comment + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + const issueComment = `Hey @${context.payload.issue.user.login}! ๐Ÿ‘‹ \n\n ๐Ÿ‘‰ Thanks for opening this issue. We appreciate your contribution and will look into it as soon as possible. \n ๐Ÿ‘‰ Donโ€™t forget to star our [GameSphere](https://github.com/GameSphere-MultiPlayer/GameSphere) and Follow Us on GitHub \n ๐Ÿ‘‰ Make sure you join our [Discord](https://discord.gg/rZb46cCMmK), we have created separate channels for all projects`; + await github.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + body: issueComment + }); diff --git a/.github/workflows/assign.yml b/.github/workflows/assign.yml new file mode 100644 index 00000000..e5e3ad05 --- /dev/null +++ b/.github/workflows/assign.yml @@ -0,0 +1,72 @@ +name: Assign on Comment +on: + issue_comment: + types: + - created + +jobs: + assign: + runs-on: ubuntu-latest + + steps: + - name: Check if /assign command is present + id: check_command + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const commentBody = context.payload.comment.body; + const assignCommand = '/assign'; + const isCommandPresent = commentBody.includes(assignCommand); + console.log(`Command present: ${isCommandPresent}`); + console.log(`Comment: ${commentBody}`); + console.log(`Issue Number: ${context.payload.issue.number}`); + console.log(`Issue State: ${context.payload.issue.state}`); + console.log(`Assignees: ${context.payload.issue.assignees.map(assignee => assignee.login)}`); + console.log(`Issue URL: ${context.payload.issue.html_url}`); + console.log(`Comment URL: ${context.payload.comment.html_url}`); + console.log(`Comment Author: ${context.payload.comment.user.login}`); + console.log(`Repository: ${context.repo.owner}/${context.repo.repo}`); + console.log(`Repository URL: ${context.payload.repository.html_url}`); + console.log(`Repository Full Name: ${context.payload.repository.full_name}`); + console.log(`Repository Name: ${context.payload.repository.name}`); + console.log(`Repository Owner: ${context.payload.repository.owner.login}`); + console.log(`Repository Owner URL: ${context.payload.repository.owner.html_url}`); + console.log(`Event Name: ${context.eventName}`); + + const commentAuthor = context.payload.comment.user.login; + core.setOutput('comment_author', commentAuthor); + + const isGreetingFromOwner = commentAuthor === context.payload.repository.owner.login; + core.setOutput('is_greeting_from_owner', isGreetingFromOwner.toString()); + + const isAlreadyAssigned = context.payload.issue.assignees.length > 0; + core.setOutput('is_already_assigned', isAlreadyAssigned.toString()); + + if (isCommandPresent && isGreetingFromOwner) { + console.log('Skipping assigning issue: Greeting from repository owner.'); + console.log(`::set-output name=assign_issue::false`); + } else if (isCommandPresent && isAlreadyAssigned) { + const { owner, repo, number } = context.issue; + const assignees = context.payload.issue.assignees.map(assignee => assignee.login).join(', '); + const commentBody = `Hey @${commentAuthor} ! , This issue is already assigned to @${assignees}. ๐Ÿ’— \n You can work on other issues ๐Ÿš€ \n If there is anything wrong you can contact us on [Discord๐Ÿ•น๏ธ](https://discord.gg/fgwk4XZfxG)๐Ÿ‘€`; + await github.issues.createComment({ owner, repo, issue_number: number, body: commentBody }); + console.log(`Commented on the issue: ${commentBody}.`); + console.log(`::set-output name=assign_issue::false`); + } else if (isCommandPresent) { + console.log(`::set-output name=assign_issue::true`); + } else { + console.log(`::set-output name=assign_issue::false`); + } + + - name: Assign the issue + if: steps.check_command.outputs.assign_issue == 'true' + id: assign_issue + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { owner, repo, number } = context.issue; + const assignee = context.payload.comment.user.login; + await github.issues.addAssignees({ owner, repo, issue_number: number, assignees: [assignee] }); + console.log(`Assigned the issue to ${assignee}.`); diff --git a/.github/workflows/auto-label-issues.yml b/.github/workflows/auto-label-issues.yml new file mode 100644 index 00000000..65dbc277 --- /dev/null +++ b/.github/workflows/auto-label-issues.yml @@ -0,0 +1,22 @@ +name: Auto-label on Any Issue + +on: + issues: + types: [opened] + +jobs: + auto-label: + runs-on: ubuntu-latest + steps: + - name: Add labels to any new issue + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + const labelsToAdd = ["gssoc"]; + await github.issues.addLabels({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + labels: labelsToAdd + }); diff --git a/.github/workflows/close_invalid_issue.yml b/.github/workflows/close_invalid_issue.yml new file mode 100644 index 00000000..7d94945c --- /dev/null +++ b/.github/workflows/close_invalid_issue.yml @@ -0,0 +1,59 @@ +name: Close Issues Without Keywords +on: + issues: + types: + - opened + +jobs: + close-issue: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14' + + - name: Close issue without keywords + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const keywords = ['Documentation Bug', 'New game', 'Enhancement', 'Bug', 'Question']; + const issueTitle = context.payload.issue.title ? context.payload.issue.title.toLowerCase() : ''; + const openerUsername = context.payload.issue.user.login; + + let containsKeyword = false; + for (const keyword of keywords) { + if (issueTitle.includes(keyword.toLowerCase())) { + containsKeyword = true; + break; + } + } + + if (!containsKeyword) { + const commentBody = `Hey @${openerUsername}! ๐Ÿ™‚ \n It seems like you are not following proper guidelines !! ๐Ÿ‘€ \n Read documentation properly !!๐Ÿ™ \n If you have any queries reach out to us on [Discord](https://discord.gg/rZb46cCMmK) .`; + + // Close the issue + await github.issues.update({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + state: 'closed' + }); + + // Add comment to the issue + await github.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + body: commentBody + }); + + console.log('Closed the issue and added a comment.'); + } else { + console.log('Issue contains one of the keywords. Skipping...'); + } diff --git a/.github/workflows/close_old_issues.yml b/.github/workflows/close_old_issues.yml new file mode 100644 index 00000000..a8ad6798 --- /dev/null +++ b/.github/workflows/close_old_issues.yml @@ -0,0 +1,80 @@ +name: Close Older Issues + +on: + workflow_dispatch: + +jobs: + close-older-issues: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14' + + - name: Install dependencies + run: npm install @actions/github + + - name: Fetch opened issues + id: fetch_issues + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const oneWeekAgo = new Date(); + oneWeekAgo.setDate(oneWeekAgo.getDate() - 7); + + const { data: issues } = await github.issues.listForRepo({ + owner: context.repo.owner, + repo: context.repo.repo, + state: 'open', + sort: 'created', + direction: 'asc', + per_page: 100 + }); + + const olderIssues = issues.filter(issue => issue.pull_request === undefined && new Date(issue.created_at) < oneWeekAgo); + core.setOutput('older_issues', olderIssues.map(issue => issue.number).join(',')); + + - name: Close older issues and comment + if: steps.fetch_issues.outputs.older_issues != '' + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const olderIssueNumbers = '${{ steps.fetch_issues.outputs.older_issues }}'.split(','); + + for (const issueNumber of olderIssueNumbers) { + // Get the issue details + const { data: issue } = await github.issues.get({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: parseInt(issueNumber) + }); + + // Close the older issue + await github.issues.update({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: parseInt(issueNumber), + state: 'closed' + }); + + // Comment on the closed issue + await github.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: parseInt(issueNumber), + body: `Hello @${issue.user.login}, Time's up!โฐ \n Sorry for closing your issue! \n But it's more than a week since we haven't received anything from your side ๐Ÿ˜ข . \n Come up with new ideas, create a new issue and make sure you finish it within a week! ๐Ÿ”ฅ \n All the best! ๐Ÿš€ \n Happy Hacking! ๐Ÿ’—` + }); + + console.log(`Closed and commented on issue #${issueNumber}.`); + } + + - name: Skip if no older issues + if: steps.fetch_issues.outputs.older_issues == '' + run: echo "No older issues found. Skipping..." diff --git a/.github/workflows/greet.yml b/.github/workflows/greet.yml new file mode 100644 index 00000000..4c70220f --- /dev/null +++ b/.github/workflows/greet.yml @@ -0,0 +1,125 @@ +name: Comment and Label on Issue Opened +on: + issues: + types: + - opened + +jobs: + comment_and_label: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Add comment + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const commentAuthor = context.payload.issue.user.login; + const commentBody = `Hey @${commentAuthor} ! \n Thank you for raising an issue ๐Ÿ’— \n You can self assign the issue by commenting /assign in comment ๐Ÿ˜€ \n Make sure you follow [CODE OF CONDUCT](https://github.com/GameSphere-MultiPlayer/GameSphere/blob/main/.github/CODE_OF_CONDUCT.md) `; + const { owner, repo, number } = context.issue; + + await github.issues.createComment({ + owner: owner, + repo: repo, + issue_number: number, + body: commentBody + }); + + - name: Add label if issue body contains "GSSoC24" + id: check_label_gs_soc24 + run: | + if grep -qE "GSSoC24" <<< "${{ github.event.issue.body }}"; then + echo "::set-output name=add_label_gs_soc24::true" + else + echo "::set-output name=add_label_gs_soc24::false" + fi + + - name: Add label "GSSoC24" + if: ${{ steps.check_label_gs_soc24.outputs.add_label_gs_soc24 == 'true' }} + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { owner, repo, number } = context.issue; + + await github.issues.addLabels({ + owner: owner, + repo: repo, + issue_number: number, + labels: ["gssoc"] + }); + + - name: Add label if issue body contains "GSSoC23" + id: check_label_gs_soc23 + run: | + if grep -qE "GSSoC23" <<< "${{ github.event.issue.body }}"; then + echo "::set-output name=add_label_gs_soc23::true" + else + echo "::set-output name=add_label_gs_soc23::false" + fi + + - name: Add label "GSSoC23" + if: ${{ steps.check_label_gs_soc23.outputs.add_label_gs_soc23 == 'true' }} + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { owner, repo, number } = context.issue; + + await github.issues.addLabels({ + owner: owner, + repo: repo, + issue_number: number, + labels: ["GSSoC23"] + }); + + - name: Add label if issue body contains "hacktoberfest" + id: check_label_hacktoberfest + run: | + if grep -qE "hacktoberfest" <<< "${{ github.event.issue.body }}"; then + echo "::set-output name=add_label_hacktoberfest::true" + else + echo "::set-output name=add_label_hacktoberfest::false" + fi + + - name: Add label "hacktoberfest" + if: ${{ steps.check_label_hacktoberfest.outputs.add_label_hacktoberfest == 'true' }} + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { owner, repo, number } = context.issue; + + await github.issues.addLabels({ + owner: owner, + repo: repo, + issue_number: number, + labels: ["hacktoberfest"] + }); + + - name: Add label if issue body contains "IWOC2024" + id: check_label_iwoc + run: | + if grep -qE "IWOC2024" <<< "${{ github.event.issue.body }}"; then + echo "::set-output name=add_label_iwoc::true" + else + echo "::set-output name=add_label_iwoc::false" + fi + + - name: Add label "IWOC2024" + if: ${{ steps.check_label_iwoc.outputs.add_label_iwoc == 'true' }} + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { owner, repo, number } = context.issue; + + await github.issues.addLabels({ + owner: owner, + repo: repo, + issue_number: number, + labels: ["IWOC2024"] + }); diff --git a/.github/workflows/issue_close_greet.yml b/.github/workflows/issue_close_greet.yml new file mode 100644 index 00000000..9489218e --- /dev/null +++ b/.github/workflows/issue_close_greet.yml @@ -0,0 +1,22 @@ +name: Comment on Issue Closure +on: + issues: + types: + - closed + +jobs: + comment: + runs-on: ubuntu-latest + + steps: + - name: Comment on Issue Closure + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { owner, repo, number } = context.issue; + const author = context.payload.issue.user.login; + const commentBody = `Hey @${author} ! Thank you so much for your raising the issue๐Ÿ’— \n Itโ€™s all yours, you can come anytime again and make some contributions! ๐Ÿš€ \n Alone, we can do little, but together we can do so much! ๐Ÿ˜‡ + `; + await github.issues.createComment({ owner, repo, issue_number: number, body: commentBody }); + console.log(`Commented on the issue: ${commentBody}.`); diff --git a/.github/workflows/level_tags.yml b/.github/workflows/level_tags.yml new file mode 100644 index 00000000..95ed1971 --- /dev/null +++ b/.github/workflows/level_tags.yml @@ -0,0 +1,55 @@ +name: Add Tags to Issues +on: + issues: + types: + - opened + +jobs: + add-tags: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14' + + - name: Add tags to issues + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { issue } = context.payload; + const { owner, repo } = context.repo; + const { title, body } = issue; + + let tagsToAdd = []; + + // Check if issue text contains "Documentation Bug" + if (title && title.toLowerCase().includes('documentation bug')) { + tagsToAdd.push('Documentation Bug ๐Ÿ›'); + tagsToAdd.push('level1'); + } + + // Check if issue title contains "Enhancement" + if (title && title.toLowerCase().includes('enhancement')) { + tagsToAdd.push('Enhancement โšก๏ธ'); + tagsToAdd.push('level2'); + } + + if (tagsToAdd.length > 0) { + // Add tags to the issue + await github.issues.addLabels({ + owner: owner, + repo: repo, + issue_number: issue.number, + labels: tagsToAdd + }); + + console.log(`Added tags ${tagsToAdd.join(', ')} to issue #${issue.number}.`); + } else { + console.log('No tags to add.'); + } diff --git a/.github/workflows/new_game.yml b/.github/workflows/new_game.yml new file mode 100644 index 00000000..8a95d1b4 --- /dev/null +++ b/.github/workflows/new_game.yml @@ -0,0 +1,45 @@ +name: Add New Game Label +on: + issues: + types: + - opened + +jobs: + label: + runs-on: ubuntu-latest + + steps: + - name: Check if issue title contains "New Game" + id: check_title + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const issueTitle = context.payload.issue.title; + const isNewGame = issueTitle.includes('New game'); + console.log(`Issue title: ${issueTitle}`); + console.log(`Is New Game: ${isNewGame}`); + console.log(`Issue Number: ${context.payload.issue.number}`); + console.log(`Issue State: ${context.payload.issue.state}`); + console.log(`Issue URL: ${context.payload.issue.html_url}`); + console.log(`Repository: ${context.repo.owner}/${context.repo.repo}`); + console.log(`Repository URL: ${context.payload.repository.html_url}`); + console.log(`Repository Full Name: ${context.payload.repository.full_name}`); + console.log(`Repository Name: ${context.payload.repository.name}`); + console.log(`Repository Owner: ${context.payload.repository.owner.login}`); + console.log(`Repository Owner URL: ${context.payload.repository.owner.html_url}`); + console.log(`Event Name: ${context.eventName}`); + + core.setOutput('is_new_game', isNewGame.toString()); + + - name: Add "New Game" label + if: steps.check_title.outputs.is_new_game == 'true' + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { owner, repo, number } = context.issue; + const label = 'New Game ๐ŸŽฎ'; + const level_label='level3'; + await github.issues.addLabels({ owner, repo, issue_number: number, labels: [label,level_label] }); + console.log(`Added label "${label}" to the issue.`); diff --git a/.github/workflows/pr_check.yml b/.github/workflows/pr_check.yml new file mode 100644 index 00000000..132ef733 --- /dev/null +++ b/.github/workflows/pr_check.yml @@ -0,0 +1,216 @@ +name: Pull Request Validation + +on: + pull_request_target: + types: + - opened + - synchronize + +jobs: + pr-validation: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14' + + - name: Install dependencies + run: npm install --prefix .github octokit + + - name: Validate pull request + id: validate_pr + 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 + }); + + // Check if the PR content contains an issue reference + const hasIssueReference = /#[0-9]+/.test(pr.body); + if (!hasIssueReference) { + // Close the PR + await github.pulls.update({ + owner: repoOwner, + repo: repoName, + pull_number: prNumber, + state: 'closed' + }); + + // Comment on the closed PR + await github.issues.createComment({ + owner: repoOwner, + repo: repoName, + issue_number: prNumber, + body: `Hey @${pr.user.login},\nPlease make sure to link the relevant issue using the appropriate syntax, such as "#issueNumber" ๐Ÿ‘€. \n Follow the proper guideline and make a new PR again ๐Ÿ˜€. \n Happy Hacking ๐Ÿ’—` + }); + + console.log(`Closed and commented on pull request #${prNumber} due to missing issue reference.`); + return; // Stop further processing + } + + // Get the issue number from the PR content + const issueNumber = pr.body.match(/#([0-9]+)/)[1]; + + // Get the issue details + const { data: issue } = await github.issues.get({ + owner: repoOwner, + repo: repoName, + issue_number: issueNumber + }); + + // Check if the issue is open + if (issue.state !== 'open') { + // Close the PR + await github.pulls.update({ + owner: repoOwner, + repo: repoName, + pull_number: prNumber, + state: 'closed' + }); + + // Comment on the closed PR + await github.issues.createComment({ + owner: repoOwner, + repo: repoName, + issue_number: prNumber, + body: `Hey @${pr.user.login},\n You can't work on a closed issue ๐Ÿ‘€! \n Follow the proper guideline and make a new PR again ๐Ÿ˜€. \n Happy Hacking ๐Ÿ’—` + }); + + console.log(`Closed and commented on pull request #${prNumber} due to closed issue reference.`); + return; // Stop further processing + } + + // Check if the issue has the "level3" label + const hasLevel3Label = issue.labels.some(label => label.name.toLowerCase() === 'level3'); + if (hasLevel3Label) { + // Get the PR files + const { data: files } = await github.pulls.listFiles({ + owner: repoOwner, + repo: repoName, + pull_number: prNumber + }); + + // Check for required changes in the PR + const changes = []; + + // Check if a new folder is created inside the "Games" folder and contains a new file + const gamesFolderPath = 'Games/'; + const newFolderRegex = new RegExp(`${gamesFolderPath}([^/]+)/.*$`); + const newFolderCreated = files.some(file => newFolderRegex.test(file.filename)); + + // Check if a README.md file is added in the newly created folder + const readmeRegex = new RegExp(`${gamesFolderPath}([^/]+)/README.md$`); + const readmeAdded = files.some(file => readmeRegex.test(file.filename)); + + // Comment with the required changes, if any + if (!newFolderCreated) { + changes.push('- Please create a new folder inside the "Games" folder.'); + } + if (!readmeAdded) { + changes.push('- Please add a README.md file inside the newly created folder.'); + } + + // Check if the main README.md file is modified + const mainReadmeModified = files.some(file => file.filename === 'README.md'); + + if (!mainReadmeModified) { + changes.push('- Please modify the main README.md file.'); + } + + // Check if an image is added to the assets/images directory + const imageAdded = files.some(file => file.filename.startsWith('assets/images/')); + + if (!imageAdded) { + changes.push('- Please add an image to the assets/images directory.'); + } + + if (changes.length > 0) { + const comment = [ + `Hello @${pr.user.login},`, + `You need to make the following changes:`, + ...changes.map(change => ` ${change}`), + '', + 'Hoping that you will make those changes soon ๐Ÿš€' + ].join('\n'); + + // Comment on the pull request + await github.pulls.createReview({ + owner: repoOwner, + repo: repoName, + pull_number: prNumber, + event: 'REQUEST_CHANGES', + body: comment + }); + + // Add labels to the pull request + await github.issues.addLabels({ + owner: repoOwner, + repo: repoName, + issue_number: prNumber, + labels: ['Changes Requested โš’๏ธ', 'Pending โฑ๏ธ'] + }); + + console.log(`Commented on pull request #${prNumber} with required changes.`); + } else { + const existingLabels = pr.labels.map(label => label.name.toLowerCase()); + + if (existingLabels.includes('changes requested') || existingLabels.includes('pending')) { + // Remove the "changes requested" and "pending" labels + await github.issues.removeLabel({ + owner: repoOwner, + repo: repoName, + issue_number: prNumber, + name: 'Changes Requested โš’๏ธ' + }); + await github.issues.removeLabel({ + owner: repoOwner, + repo: repoName, + issue_number: prNumber, + name: 'Pending โฑ๏ธ' + }); + + // Approve the changes + await github.pulls.createReview({ + owner: repoOwner, + repo: repoName, + pull_number: prNumber, + event: 'APPROVE' + }); + + // Add the "under review" label + await github.issues.addLabels({ + owner: repoOwner, + repo: repoName, + issue_number: prNumber, + labels: ['Pending โฑ๏ธ'] + }); + + console.log(`Updated pull request #${prNumber} with approved changes.`); + } else { + // Add label to the pull request + await github.issues.addLabels({ + owner: repoOwner, + repo: repoName, + issue_number: prNumber, + labels: ['Pending โฑ๏ธ'] + }); + + console.log(`Pull request #${prNumber} is valid and meets the requirements.`); + } + } + } else { + console.log(`Pull request #${prNumber} does not have the "level3" label. No further validation is performed.`); + } diff --git a/.github/workflows/pr_close_greet.yml b/.github/workflows/pr_close_greet.yml new file mode 100644 index 00000000..814e727c --- /dev/null +++ b/.github/workflows/pr_close_greet.yml @@ -0,0 +1,22 @@ +name: Comment on PR Closure +on: + pull_request_target: + types: + - closed + +jobs: + comment: + runs-on: ubuntu-latest + + steps: + - name: Comment on PR Closure + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { owner, repo, number } = context.issue; + const commentAuthor = context.payload.pull_request.user.login; + const commentBody = `Thank you @${commentAuthor} , for your valuable time and contribution in our GameZone ๐Ÿ’—. \n Itโ€™s our GameZone, so Letโ€™s build this GameZone altogether !!๐Ÿค\n Hoping to see you soon with another PR again ๐Ÿ˜‡ \n Wishing you all the best for your journey into Open Source๐Ÿš€ + `; + await github.issues.createComment({ owner, repo, issue_number: number, body: commentBody }); + console.log(`Commented on the closed PR: ${commentBody}.`); diff --git a/.github/workflows/pr_greet.yml b/.github/workflows/pr_greet.yml new file mode 100644 index 00000000..eda9dc1a --- /dev/null +++ b/.github/workflows/pr_greet.yml @@ -0,0 +1,22 @@ +name: Comment on PR Creation +on: + pull_request_target: + types: + - opened + +jobs: + comment: + runs-on: ubuntu-latest + + steps: + - name: Comment on PR + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const { owner, repo, number } = context.issue; + const commentAuthor = context.payload.sender.login; + const commentBody = `Thank you @${commentAuthor} ,for creating the PR and contributing to our GameZone ๐Ÿ’— \n Review team will review the PR and will reach out to you soon! ๐Ÿ˜‡ \n Make sure that you have marked all the tasks that you are done with โœ…. \n Thank you for your patience! ๐Ÿ˜€ + `; + await github.issues.createComment({ owner, repo, issue_number: number, body: commentBody }); + console.log(`Commented on the PR: ${commentBody}.`); diff --git a/.github/workflows/prevent_multiple_issues.yml b/.github/workflows/prevent_multiple_issues.yml new file mode 100644 index 00000000..1d3ca634 --- /dev/null +++ b/.github/workflows/prevent_multiple_issues.yml @@ -0,0 +1,77 @@ +name: Close Issue if Opener has Opened Issues + +on: + issues: + types: + - opened + +jobs: + close_issue: + runs-on: ubuntu-latest + + steps: + - name: Check if opener has multiple open issues + id: check_open_issues + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const owner = context.repo.owner; + const repo = context.repo.repo; + const issueNumber = context.issue.number; + const issueOpener = context.payload.issue.user.login; + + const previousIssuesResponse = await github.request('GET /repos/{owner}/{repo}/issues', { + owner, + repo, + state: 'open', + creator: issueOpener + }); + + const previousOpenIssues = previousIssuesResponse.data.filter(issue => issue.number !== issueNumber && !issue.pull_request); + const previousOpenIssueNumbers = previousOpenIssues.map(issue => `#${issue.number}`); + const openerName = context.payload.issue.user.login; + + const closeIssue = previousOpenIssues.length > 0; + console.log(`Close issue: ${closeIssue}`); + + if (closeIssue) { + const comment = `Hey @${openerName} , You can't have another issue before completing the previous one ๐Ÿ˜€ \n you already have the following ${previousOpenIssues.length} open issues ๐Ÿ‘€ ! :\n\n${previousOpenIssueNumbers.join('\n')}`; + core.exportVariable('comment_body', comment); // Export the variable + core.setOutput('close_issue', true); + } else { + core.exportVariable('comment_body', ''); + core.setOutput('close_issue', false); + } + + - name: Close the issue and add a comment + if: always() && ${{ needs.check_open_issues.outputs.close_issue }} + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const owner = context.repo.owner; + const repo = context.repo.repo; + const issueNumber = context.issue.number; + const comment = process.env.comment_body; // Retrieve the exported variable + + if (comment.trim() === '') { + console.log('Comment body is empty. Skipping comment creation.'); + return; + } + + const closeComment = `${comment}`; + + await github.issues.createComment({ + owner, + repo, + issue_number: issueNumber, + body: closeComment + }); + + await github.issues.update({ + owner, + repo, + issue_number: issueNumber, + state: 'closed' + }); diff --git a/.github/workflows/prevent_multiple_pr.yml b/.github/workflows/prevent_multiple_pr.yml new file mode 100644 index 00000000..65e542a4 --- /dev/null +++ b/.github/workflows/prevent_multiple_pr.yml @@ -0,0 +1,77 @@ +name: Close Issue if Opener has Opened Pull Requests + +on: + pull_request_target: + types: + - opened + +jobs: + close_pull_request: + runs-on: ubuntu-latest + + steps: + - name: Check if opener has multiple open pull requests + id: check_open_pull_requests + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const owner = context.repo.owner; + const repo = context.repo.repo; + const pullRequestNumber = context.payload.pull_request.number; + const pullRequestOpener = context.payload.pull_request.user.login; + + const previousPullRequestsResponse = await github.pulls.list({ + owner, + repo, + state: 'open' + }); + + const previousOpenPullRequests = previousPullRequestsResponse.data.filter(pr => pr.user.login === pullRequestOpener && pr.number !== pullRequestNumber); + const previousOpenPullRequestNumbers = previousOpenPullRequests.map(pr => `#${pr.number}`); + const openerName = context.payload.pull_request.user.login; + + const closePullRequest = previousOpenPullRequests.length > 0; + console.log(`Close pull request: ${closePullRequest}`); + + if (closePullRequest) { + const comment = `Hey @${openerName}, you can't open another pull request before completing the previous one ๐Ÿ˜€\nYou already have the following ${previousOpenPullRequests.length} open pull request(s):\n${previousOpenPullRequestNumbers.join('\n')}`; + core.exportVariable('comment_body', comment); + core.setOutput('close_pull_request', true); + } else { + core.exportVariable('comment_body', ''); + core.setOutput('close_pull_request', false); + return; // Return and skip further steps + } + + - name: Close the pull request and add a comment + if: always() && ${{ needs.check_open_pull_requests.outputs.close_pull_request }} + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const owner = context.repo.owner; + const repo = context.repo.repo; + const pullRequestNumber = context.payload.pull_request.number; + const comment = process.env.comment_body; + + if (comment.trim() === '') { + console.log('Comment body is empty. Skipping comment creation.'); + return; + } + + const closeComment = `${comment}`; + + await github.issues.createComment({ + owner, + repo, + issue_number: pullRequestNumber, + body: closeComment + }); + + await github.pulls.update({ + owner, + repo, + pull_number: pullRequestNumber, + state: 'closed' + }); diff --git a/.github/workflows/remove_duplicate.yml b/.github/workflows/remove_duplicate.yml new file mode 100644 index 00000000..a0947dfb --- /dev/null +++ b/.github/workflows/remove_duplicate.yml @@ -0,0 +1,117 @@ +name: Prevent Duplicate Issues +on: + issues: + types: + - opened + +jobs: + prevent-duplicate-issues: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14' + + - name: Install dependencies + run: npm install --prefix .github string-similarity + + - name: Check for duplicate issue + id: check_duplicate + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const newIssueTitle = context.payload.issue.title ? context.payload.issue.title.toLowerCase() : ''; + const newIssueWords = newIssueTitle.split(' '); + + const { data: issues } = await github.issues.listForRepo({ + owner: context.repo.owner, + repo: context.repo.repo, + state: 'open', + per_page: 100 // Adjust the per_page value as per your requirements + }); + + const stringSimilarity = require('.github/node_modules/string-similarity'); + let isDuplicate = false; + let duplicateIssueNumber = null; + let similarIssueNumber = null; + + for (const issue of issues) { + if (issue.number === context.issue.number) { + continue; // Skip the current issue being checked + } + + const existingIssueTitle = issue.title ? issue.title.toLowerCase() : ''; + const existingIssueWords = existingIssueTitle.split(' '); + + let matchedWordCount = 0; + for (const word of newIssueWords) { + let maxSimilarity = 0; + for (const existingWord of existingIssueWords) { + const similarity = stringSimilarity.compareTwoStrings(word, existingWord); + if (similarity >= 0.75 && similarity > maxSimilarity) { + maxSimilarity = similarity; + } + } + if (maxSimilarity >= 0.75) { + matchedWordCount++; + } + } + + const similarityPercentage = (matchedWordCount / newIssueWords.length) * 100; + if (similarityPercentage >= 80) { + // Check if both current and similar issues have '[New Game]:' in the title + const hasNewGameTitle = newIssueTitle.includes('[new game]:'); + const hasSimilarNewGameTitle = existingIssueTitle.includes('[new game]:'); + + if (hasNewGameTitle && hasSimilarNewGameTitle) { + isDuplicate = true; + duplicateIssueNumber = issue.number; + similarIssueNumber = issue.number; + break; + } + } + } + + core.setOutput('is_duplicate', isDuplicate.toString()); + core.setOutput('duplicate_issue_number', duplicateIssueNumber ? duplicateIssueNumber.toString() : ''); + core.setOutput('similar_issue_number', similarIssueNumber ? similarIssueNumber.toString() : ''); + + - name: Close duplicate issue and comment + if: steps.check_duplicate.outputs.is_duplicate == 'true' + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + const duplicateIssueNumber = parseInt('${{ steps.check_duplicate.outputs.duplicate_issue_number }}'); + const { owner, repo } = context.repo; + + // Close the newly created duplicate issue + await github.issues.update({ + owner: owner, + repo: repo, + issue_number: context.issue.number, + state: 'closed' + }); + + // Get the issue opener's username + const openerUsername = context.payload.issue.user.login; + + // Comment on the newly created duplicate issue + await github.issues.createComment({ + owner: owner, + repo: repo, + issue_number: context.issue.number, + body: `Hey @${openerUsername}! \nWe are already having a similar game request in #${duplicateIssueNumber} ๐Ÿ‘€ \nMake sure you come up with a cool unique idea ๐Ÿ˜€ \n Waiting for your new game idea ๐Ÿ’—.` + }); + + console.log(`Closed the duplicate issue #${duplicateIssueNumber}.`); + + - name: Skip if not a duplicate issue + if: steps.check_duplicate.outputs.is_duplicate != 'true' + run: echo "Not a duplicate issue. Skipping..." diff --git a/MultiPlayer - Games/Flames_Game/Banner-image/bg.webp b/MultiPlayer - Games/Flames_Game/Banner-image/bg.webp new file mode 100644 index 00000000..68b2a186 Binary files /dev/null and b/MultiPlayer - Games/Flames_Game/Banner-image/bg.webp differ diff --git a/MultiPlayer - Games/Flames_Game/index.html b/MultiPlayer - Games/Flames_Game/index.html new file mode 100644 index 00000000..88b70fdd --- /dev/null +++ b/MultiPlayer - Games/Flames_Game/index.html @@ -0,0 +1,24 @@ + + + Flames Game Using JavaScript + + + + + +
+ +
+

FLAMES Game Using JavaScript

+

+

+ + +

+
+
+ + + + + \ No newline at end of file diff --git a/MultiPlayer - Games/Flames_Game/script.js b/MultiPlayer - Games/Flames_Game/script.js new file mode 100644 index 00000000..3420cb4c --- /dev/null +++ b/MultiPlayer - Games/Flames_Game/script.js @@ -0,0 +1,82 @@ + +function replaceAt(string, index, replace) { + return string.substring(0, index) + replace + string.substring(index + 1); + } + function flames(){ + var res=document.getElementById("output"); + var a=document.getElementById("name1").value.toLowerCase(); + var b=document.getElementById("name2").value.toLowerCase(); + if(a!=""&&b!=""){ + for (i=0;i1){ + var flames="FLAMES"; + c=0; + l=1; + for(i=0;flames.length!=1;i++){ + if(l==countLetters) + { + if(c>=flames.length) + { + c=0; + } + flames=replaceAt(flames,c,''); + l=1; + } + if(c>=flames.length) + { + c=0; + } + l++; + c++; + } + + switch(flames){ + case 'F': + flames="Friend"; + break; + case 'L': + flames="Love"; + break; + case 'A': + flames="Affection"; + break; + case 'M': + flames="Marriage"; + break; + case 'E': + flames="Enemies"; + break; + case 'S': + flames="Sibling"; + break; + } + } + if(countLetters==1){ + flames="Sibling"; + } + if(countLetters==0){ + flames="Its Same Name"; + } + res.innerHTML=""+document.getElementById("name2").value+" is Your "+flames+""; + }else{ + res.innerHTML="Please Enter Name"; + } + } \ No newline at end of file diff --git a/MultiPlayer - Games/Flames_Game/style.css b/MultiPlayer - Games/Flames_Game/style.css new file mode 100644 index 00000000..4d04df20 --- /dev/null +++ b/MultiPlayer - Games/Flames_Game/style.css @@ -0,0 +1,44 @@ +body{ + background-image: url(Banner-image/bg.webp); + background-repeat: no-repeat; + background-size: cover; +} +.container{ + + height: auto; + display: flex; + justify-content: center; + align-items: center; + border: 5px solid; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + /* background-color:#F2ACB9; */ + background-color: aliceblue; + padding: 50px; +} +input{ + border: 5px solid #D2042D; + padding: 5px; + width: 500px; + margin: 5px; +} +h3{ + margin: 10px; + font-family: cursive; + color: #D2042D; + font-size:2.5rem; +} +.btn{ + border: 5px solid black; + background-color: whitesmoke; + color: black; + font-weight: bold; +} +.btn:hover{ + border: 5px solid black; + background-color: grey; + color: black; + font-weight: bold; +} \ No newline at end of file diff --git a/MultiPlayer - Games/Pop_My_Balloon/BalloonAnimation.css b/MultiPlayer - Games/Pop_My_Balloon/BalloonAnimation.css new file mode 100644 index 00000000..b21c6c97 --- /dev/null +++ b/MultiPlayer - Games/Pop_My_Balloon/BalloonAnimation.css @@ -0,0 +1,212 @@ + + + + +body{ + font-family: 'Wendy One', sans-serif; +} + +span { + text-transform: uppercase; +} +.container { + width: 800px; + height: 420px; + padding: 10px; + margin: 0 auto; + background: whitesmoke; + position: relative; +} +.balloon { + width: 738px; + margin: 0 auto; + padding-top: 30px; + position: relative; +} +.balloon > div { + width:104px; + height:140px; + background:rgba(182, 15, 97, 0.9); + border-radius: 0; + border-radius:80% 80% 80% 80%; + margin: 0 auto; + position: absolute; + padding:10px; + box-shadow:inset 17px 7px 10px rgba(182, 15, 97, 0.9); + -webkit-transform-origin: bottom center; +} +.balloon > div:nth-child(1){ + background: rgba(182, 15, 97, 0.9); + left: 0; + box-shadow:inset 10px 10px 10px darken(rgba(182, 15, 97, 0.9), 10%); + -webkit-animation:balloon1 6s ease-in-out infinite; + -moz-animation:balloon1 6s ease-in-out infinite; + -o-animation:balloon1 6s ease-in-out infinite; + animation:balloon1 6s ease-in-out infinite; + &:before { + color: rgba(182, 15, 97, 0.9); ; + } + +} +.balloon > div:nth-child(2){ + background: rgba(242, 112, 45, 0.9); + left: 120px; + box-shadow:inset 10px 10px 10px darken(rgba(242, 112, 45, 0.9), 10%); + -webkit-animation:balloon2 6s ease-in-out infinite; + -moz-animation:balloon2 6s ease-in-out infinite; + -o-animation:balloon2 6s ease-in-out infinite; + animation:balloon2 6s ease-in-out infinite; + &:before { + color: rgba(242, 112, 45, 0.9) ; + } + +} +.balloon > div:nth-child(3){ + background: rgba(45, 181, 167, 0.9);; + left: 240px; + box-shadow:inset 10px 10px 10px darken(rgba(45, 181, 167, 0.9), 10%); + -webkit-animation:balloon4 6s ease-in-out infinite; + -moz-animation:balloon4 6s ease-in-out infinite; + -o-animation:balloon4 6s ease-in-out infinite; + animation:balloon4 6s ease-in-out infinite; + &:before { + color: rgba(45, 181, 167, 0.9); + } + +} +.balloon > div:nth-child(4){ + background: rgba(190, 61, 244, 0.9); + left: 360px; + box-shadow:inset 10px 10px 10px darken(rgba(190, 61, 244, 0.9), 10%); + -webkit-animation:balloon1 5s ease-in-out infinite; + -moz-animation:balloon1 5s ease-in-out infinite; + -o-animation:balloon1 5s ease-in-out infinite; + animation:balloon1 5s ease-in-out infinite; + &:before { + color: rgba(190, 61, 244, 0.9); + } + +} +.balloon > div:nth-child(5){ + background: rgba(180, 224, 67, 0.9); + left: 480px; + box-shadow:inset 10px 10px 10px darken(rgba(180, 224, 67, 0.9), 10%); + -webkit-animation:balloon3 5s ease-in-out infinite; + -moz-animation:balloon3 5s ease-in-out infinite; + -o-animation:balloon3 5s ease-in-out infinite; + animation:balloon3 5s ease-in-out infinite; + &:before { + color: rgba(180, 224, 67, 0.9); + } + +} +.balloon > div:nth-child(6){ + background: rgba(242, 194, 58, 0.9); + left: 600px; + box-shadow:inset 10px 10px 10px darken(rgba(242, 194, 58, 0.9), 10%); + -webkit-animation:balloon2 3s ease-in-out infinite; + -moz-animation:balloon2 3s ease-in-out infinite; + -o-animation:balloon2 3s ease-in-out infinite; + animation:balloon2 3s ease-in-out infinite; + &:before { + color: rgba(242, 194, 58, 0.9) ; + } + +} +.balloon > div:before { + color:rgba(182, 15, 97, 0.9); + position:absolute; + bottom:-11px; + left: 52px; + content:"โ–ฒ"; + font-size:1em; +} + +span { + font-size: 4.8em; + color: white; + position: relative; + top: 30px; + left: 50%; + margin-left: -27px; +} + +/*BALLOON 1 4*/ +@-webkit-keyframes balloon1 { + 0%,100%{ -webkit-transform:translateY(0) rotate(-6deg);} + 50%{ -webkit-transform:translateY(-20px) rotate(8deg); } +} +@-moz-keyframes balloon1 { + 0%,100%{ -moz-transform:translateY(0) rotate(-6deg);} + 50%{ -moz-transform:translateY(-20px) rotate(8deg); } +} +@-o-keyframes balloon1 { + 0%,100%{ -o-transform:translateY(0) rotate(-6deg);} + 50%{ -o-transform:translateY(-20px) rotate(8deg); } +} +@keyframes balloon1 { + 0%,100%{ transform:translateY(0) rotate(-6deg);} + 50%{ transform:translateY(-20px) rotate(8deg); } +} + +/* BAllOON 2 5*/ +@-webkit-keyframes balloon2 { + 0%,100%{ -webkit-transform:translateY(0) rotate(6eg);} + 50%{ -webkit-transform:translateY(-30px) rotate(-8deg); } +} +@-moz-keyframes balloon2 { + 0%,100%{ -moz-transform:translateY(0) rotate(6deg);} + 50%{ -moz-transform:translateY(-30px) rotate(-8deg); } +} +@-o-keyframes balloon2 { + 0%,100%{ -o-transform:translateY(0) rotate(6deg);} + 50%{ -o-transform:translateY(-30px) rotate(-8deg); } +} +@keyframes balloon2 { + 0%,100%{ transform:translateY(0) rotate(6deg);} + 50%{ transform:translateY(-30px) rotate(-8deg); } +} + + +/* BAllOON 0*/ +@-webkit-keyframes balloon3 { + 0%,100%{ -webkit-transform:translate(0, -10px) rotate(6eg);} + 50%{ -webkit-transform:translate(-20px, 30px) rotate(-8deg); } +} +@-moz-keyframes balloon3 { + 0%,100%{ -moz-transform:translate(0, -10px) rotate(6eg);} + 50%{ -moz-transform:translate(-20px, 30px) rotate(-8deg); } +} +@-o-keyframes balloon3 { + 0%,100%{ -o-transform:translate(0, -10px) rotate(6eg);} + 50%{ -o-transform:translate(-20px, 30px) rotate(-8deg); } +} +@keyframes balloon3 { + 0%,100%{ transform:translate(0, -10px) rotate(6eg);} + 50%{ transform:translate(-20px, 30px) rotate(-8deg); } +} + +/* BAllOON 3*/ +@-webkit-keyframes balloon4 { + 0%,100%{ -webkit-transform:translate(10px, -10px) rotate(-8eg);} + 50%{ -webkit-transform:translate(-15px, 20px) rotate(10deg); } +} +@-moz-keyframes balloon4 { + 0%,100%{ -moz-transform:translate(10px, -10px) rotate(-8eg);} + 50%{ -moz-transform:translate(-15px, 10px) rotate(10deg); } +} +@-o-keyframes balloon4 { + 0%,100%{ -o-transform:translate(10px, -10px) rotate(-8eg);} + 50%{ -o-transform:translate(-15px, 10px) rotate(10deg); } +} +@keyframes balloon4 { + 0%,100%{ transform:translate(10px, -10px) rotate(-8eg);} + 50%{ transform:translate(-15px, 10px) rotate(10deg); } +} +h1 { + position:relative; + top: 200px; + text-align: center; + color: rgba(182, 15, 97, 0.9); + font-size: 3.5em; +} diff --git a/MultiPlayer - Games/Pop_My_Balloon/BalloonText.html b/MultiPlayer - Games/Pop_My_Balloon/BalloonText.html new file mode 100644 index 00000000..11c1c9b9 --- /dev/null +++ b/MultiPlayer - Games/Pop_My_Balloon/BalloonText.html @@ -0,0 +1,12 @@ + +
+
+
P
+
O
+
P
+
P
+
O
+
P
+
+

+
diff --git a/MultiPlayer - Games/Pop_My_Balloon/README.md b/MultiPlayer - Games/Pop_My_Balloon/README.md new file mode 100644 index 00000000..1c37a1f8 --- /dev/null +++ b/MultiPlayer - Games/Pop_My_Balloon/README.md @@ -0,0 +1,44 @@ +# Pop My Balloon + +--- + +
+ +## **Description ๐Ÿ“ƒ** +- It is a multiplayer game. +- The basic premise of the game remains the same, regardless of the difficulty level or the input method. There will be a range of numbers from which players can choose a number. If the manage to guess the randomly chosen number, the balloon will pop and they lose. If they manage to avoid the lucky number, the range decreases such that their guess either becomes the new lower bound or new upper bound, and the balloon inflates just a little bit more. + + +
+ +## **Functionalities ๐ŸŽฎ** +- It is a multiplayer game. +- We have two levels: + +Easy Level: The range starts off as 0-100 and players can guess any number within the range. +Harder Level: The range starts off as 0-84, and players can only guess numbers that are either from the lower bound (LB) to LB+12 or from the upper bound (UB) to UB-12. + +- We also have two different modes: + +Text Mode: Players type their guesses manually into the guess box. +Speech Mode: Players can say their guesses and the game will try to recognize and process what they guess. + +
+ +## **How to play? ๐Ÿ•น๏ธ** + +- Player 1 has to guess any number and that has to avoid the lucky number. +- Player 2 has to do the same as Player 1. +- The goal is to complete the game without guessing the lucky number. +- Each time you guess correct the balloon blows up. +- Keep playing and try to not to guess the lucky number in order to win the game. + +
+ +## **Screenshots ๐Ÿ“ธ** + +![Screenshot](../../assets/images/Pop_My_Balloon.png) + +
+ + diff --git a/MultiPlayer - Games/Pop_My_Balloon/index.html b/MultiPlayer - Games/Pop_My_Balloon/index.html new file mode 100644 index 00000000..bc47faa7 --- /dev/null +++ b/MultiPlayer - Games/Pop_My_Balloon/index.html @@ -0,0 +1,169 @@ + + + + + + Let's Blow๐ŸŽˆ + + + + + + + + + + + + + + + + + + + + + +
+

Let's Blow๐ŸŽˆ

+ + + +
+ + +
+

Settings

+

Pick a level

+ + +

Use a mike!

+ + + + +
+ + +
+

What am I doing?

+

+ Welcome to The Blows, the game where you DON'T want to guess the lucky number! + We have two different levels for you, and Easy Level and a Harder Level. In both levels, + a random number will be chosen, and you and your friends try to not guess the number. The range of numbers + you can guess gets smaller every turn (the lowest and highest numbers you can guess are at the top of the screen), + and when that poor, unfortunate soul guesses the number the balloon pops! +

+

Easy Level

+

+ In the Easy Level, all the players can guess any number, as long as they are between the lowest and highest number. + The starting range of numbers is 1 to 100. +

+

Harder Level

+

+ In the Harder Level, you can only guess numbers that are between the lowest number and 12 plus the lowest number, or numbers + that are between the highest number and the highest number minus 12. The starting range of numbers is 1 to 84. +

+ + +
+ + +
+
+

+ Lowest: 0 + Easy + Highest: 100 +

+ +
+
+
+ +

+ +
+
+

What's your guess Player X

+ + + +
+ +
+

Are you ready Player X?

+

+ + + +
+ + + +
+ +
+ + +
+
+ +
+

How many people are playing?

+ + + +
+ +
+ + + + \ No newline at end of file diff --git a/MultiPlayer - Games/Pop_My_Balloon/script.js b/MultiPlayer - Games/Pop_My_Balloon/script.js new file mode 100644 index 00000000..0407023f --- /dev/null +++ b/MultiPlayer - Games/Pop_My_Balloon/script.js @@ -0,0 +1,475 @@ +totalNumPlayers = 1; +isEasy = true; +isHard = false; +isText = true; +isSpeech = false; + +function toggle(id1, id2) { + let x = document.getElementById(id1); + let y = document.getElementById(id2); + + x.style.display = 'block'; + y.style.display = 'none'; +} + +LB = 0; +UB = 100; +currentGuess = 0; +pop = 0; +bWidth = 120; +bHeight = 145; +sTop = 153; +sHeight = 120; + +// some transitions +$(document).ready(function () { + $("#startGame").click(function () { + $("#title").fadeOut(800); + setTimeout(function () { + resetGame(); + toggle("setup", "actualGame"); + $("#game").fadeIn(1000); + }, 1000); + + }); + + $("#showHelp").click(function () { + $("#title").fadeOut(800); + setTimeout(function () { + $("#help").fadeIn(1000); + }, 1000); + }); + + $("#gameToTitle").click(function () { + $("#game").fadeOut(800); + setTimeout(function () { + $("#title").fadeIn(1000); + }, 1000); + }); + + $("#helpToTitle").click(function () { + $("#help").fadeOut(800); + setTimeout(function () { + $("#title").fadeIn(1000); + }, 1000); + }); + + $("#helpToGame").click(function () { + resetGame(); + toggle("setup", "actualGame"); + $("#help").fadeOut(800); + setTimeout(function () { + $("#game").fadeIn(1000); + }, 1000); + }); + + $("#endGame").click(function () { + $("#game").fadeOut(800); + setTimeout(function () { + $("#title").fadeIn(1000); + }, 1000); + }); + + $("#returnToMenu").click(function () { + $("#game").fadeOut(800); + setTimeout(function () { + $("#title").fadeIn(1000); + }, 1000); + }); + + $("#playAgain").click(function () { + $("#actualGame").fadeOut(800); + setTimeout(function () { + resetGame(); + $("#setup").fadeIn(1000); + }, 1000); + }); + + $('#showSettings').click(function () { + $("#title").fadeOut(800); + setTimeout(function () { + $("#settings").fadeIn(1000); + }, 1000); + }); + + //choosing settings + $('#pickEasy').click(function () { + $('#pickEasy').css('background', 'hsl(215,50%,65%)'); + $('#pickHarder').css('background', '#eee'); + isEasy = true; + isHard = false; + }); + $('#pickHarder').click(function () { + $('#pickHarder').css('background', 'hsl(215,50%,65%)'); + $('#pickEasy').css('background', '#eee'); + isEasy = false; + isHard = true; + }); + $('#useText').click(function () { + $('#useText').css('background', 'hsl(215,50%,65%)'); + $('#useSpeech').css('background', '#eee'); + isText = true; + isSpeech = false; + }); + $('#useSpeech').click(function () { + $('#useSpeech').css('background', 'hsl(215,50%,65%)'); + $('#useText').css('background', '#eee'); + isSpeech = true; + isText = false; + }); + + $('#settingsToTitle').click(function () { + $("#settings").fadeOut(800); + setTimeout(function () { + $("#title").fadeIn(1000); + }, 1000); + }); + + $("#begin").click(function () { + totalNumPlayers = Number(document.getElementById('numPlayers').value); + + if (totalNumPlayers < 1) { + document.getElementById("askNumPlayers").innerText = "Haha, aren't you soooo funny..."; + setTimeout(function () { + document.getElementById("askNumPlayers").innerText = "How many people are playing?"; + }, 1300); + return; + } + else if (totalNumPlayers > 10) { + document.getElementById("askNumPlayers").innerText = "Hmm, that's too many people... "; + setTimeout(function () { + document.getElementById("askNumPlayers").innerText = "How many people are playing?"; + }, 1300); + return; + } + + if (isText) { + document.getElementById("textGuessing").style.display = 'block'; + document.getElementById('speechGuessing').style.display = 'none'; + } + else { + document.getElementById("textGuessing").style.display = 'none'; + document.getElementById('speechGuessing').style.display = 'block'; + } + + $("#setup").fadeOut(800); + setTimeout(function () { + $("#actualGame").fadeIn(1000); + }, 1000); + + //begin the game + if (isEasy) { + LB = 0; + UB = 100; + pop = Math.floor(Math.random() * 101); + //pop = 1; + } + else { + LB = 0; + UB = 84; + pop = Math.floor(Math.random() * 85); + //pop = 1; + } + popTheBalloon(); + }); + + // speech recognition + var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition + var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList + var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent + + var colors = ['0']; + for (var i = 1; i < 101; i++) { + colors.push(i.toString()); + } + + var grammar = '#JSGF V1.0; grammar colors; public = ' + colors.join(' | ') + ' ;' + + var recognition = new SpeechRecognition(); + var speechRecognitionList = new SpeechGrammarList(); + speechRecognitionList.addFromString(grammar, 1); + recognition.grammars = speechRecognitionList; + //recognition.continuous = false; + recognition.lang = 'en-US'; + recognition.interimResults = false; + recognition.maxAlternatives = 1; + + var bg = document.querySelector('html'); + var hints = document.querySelector('.hints'); + + function popTheBalloon() { + let i = 1; + if (isText) { + document.getElementById("playerCommand").innerText = "What's your guess Player " + i + "?"; + document.getElementById("guess").addEventListener("click", function () { + + $('#guess').prop('disabled', true); + currentGuess = Number(document.getElementById("playerGuess").value); + if (!isGuessValid(currentGuess)) { + $('#guess').prop('disabled', false); + return; + } + else { + document.getElementById("guessErr").style.display = 'none'; + } + + bWidth += 20; + bHeight += 20; + sTop += 20; + sHeight -= 5; + + $("#animateBalloon").animate({ + width: bWidth + 'px', + height: bHeight + 'px' + }, { + duration: 2000, + queue: false, + complete: function () { /* Animation complete */ } + }); + + $(".balloonString").animate({ + top: sTop + 'px', + height: sHeight + 'px' + }, { + duration: 2000, + queue: false, + complete: function () { /* Animation complete */ } + }); + + if (currentGuess === pop) { + setTimeout(function () { + //pop balloon + $('#animateBalloon').hide("explode", { pieces: 16 }, 500); + setTimeout(function () { + document.getElementById("balloon").innerText = "Player " + i + ", you lost!"; + }, 500); + + toggle("gameOver", "guessing"); + $('#guess').prop('disabled', false); + return; + }, 2000); + } + else if (currentGuess < pop) { + setTimeout(function () { + LB = currentGuess; + document.getElementById("lowest").innerText = "Lowest: " + LB; + i++; + $('#guess').prop('disabled', false); + if (i > totalNumPlayers) { + i = 1; + } + document.getElementById("playerCommand").innerText = "What's your guess Player " + i + "?"; + }, 2000); + } + else if (currentGuess > pop) { + setTimeout(function () { + UB = currentGuess; + document.getElementById("highest").innerText = "Highest: " + UB; + i++; + $('#guess').prop('disabled', false); + if (i > totalNumPlayers) { + i = 1; + } + document.getElementById("playerCommand").innerText = "What's your guess Player " + i + "?"; + }, 2000); + } + }); + } + else { + document.getElementById("playerCommand-speech").innerText = "Player " + i + ", are you ready?"; + document.getElementById("ready").addEventListener("click", function () { + document.getElementById("playerCommand-speech").innerText = "What's your guess Player " + i + "?"; + recognition.start(); + console.log('Ready to receive a number.'); + $('#ready').prop('disabled', true); + + recognition.onresult = function (event) { + + var last = event.results.length - 1; + var color = event.results[last][0].transcript; + + console.log('Result received: ' + color + '.'); + if (color === "one") { + color = 1; + } + // bg.style.backgroundColor = color; + var isValidNumber = !isNaN(color); + console.log('Valid: ' + isValidNumber); + console.log('Confidence: ' + event.results[0][0].confidence); + + if (isValidNumber) { + currentGuess = Number(color); + $('#playerGuess-speech').innerText = currentGuess; + + if (!isGuessValid(currentGuess)) { + $('#ready').prop('disabled', false); + return; + } + else { + document.getElementById("guessErr-speech").style.display = 'none'; + } + + bWidth += 20; + bHeight += 20; + sTop += 20; + sHeight -= 5; + + $("#animateBalloon").animate({ + width: bWidth + 'px', + height: bHeight + 'px' + }, { + duration: 2000, + queue: false, + complete: function () { /* Animation complete */ } + }); + + $(".balloonString").animate({ + top: sTop + 'px', + height: sHeight + 'px' + }, { + duration: 2000, + queue: false, + complete: function () { /* Animation complete */ } + }); + + if (currentGuess === pop) { + setTimeout(function () { + //pop balloon + $('#animateBalloon').hide("explode", { pieces: 16 }, 500); + setTimeout(function () { + document.getElementById("balloon").innerText = "Player " + i + ", you lost!"; + }, 500); + + toggle("gameOver", "guessing"); + $('#ready').prop('disabled', false); + return; + }, 2000); + } + else if (currentGuess < pop) { + setTimeout(function () { + LB = currentGuess; + document.getElementById("lowest").innerText = "Lowest: " + LB; + i++; + $('#ready').prop('disabled', false); + if (i > totalNumPlayers) { + i = 1; + } + document.getElementById("playerCommand-speech").innerText = "Player " + i + ", are you ready?"; + }, 2000); + } + else if (currentGuess > pop) { + setTimeout(function () { + UB = currentGuess; + document.getElementById("highest").innerText = "Highest: " + UB; + i++; + $('#ready').prop('disabled', false); + if (i > totalNumPlayers) { + i = 1; + } + document.getElementById("playerCommand").innerText = "Player " + i + ", are you ready?"; + }, 2000); + } + } + } + + recognition.onspeechend = function () { + $('#ready').prop('disabled', false); + recognition.stop(); + } + + recognition.onnomatch = function (event) { + console.log("I didn't recognise that number."); + $('playerGuess-speech').innerText = "Sorry, we couldn't understand your guess."; + $('speechErr').style.display = 'block'; + } + + recognition.onerror = function (event) { + console.log('Error occurred in recognition: ' + event.error); + $('playerGuess-speech').innerText = "Sorry, we couldn't understand your guess."; + $('speechErr').style.display = 'block'; + } + + }); + } + + } + + function isGuessValid(guess) { + if (currentGuess > UB || currentGuess < LB) { + if (isText) + { + document.getElementById("guessErr").style.display = 'block'; + } + else + { + document.getElementById("guessErr-speech").style.display = 'block'; + } + return false; + } + + if (isHard) { + if (currentGuess > LB + 12 && currentGuess < UB - 12) { + if(isText) + { + document.getElementById("guessErr").style.display = 'block'; + } + else + { + document.getElementById("guessErr-speech").style.display = 'block'; + } + return false; + } + } + return true; + } + + function resetGame() { + toggle("guessing", "gameOver"); + totalNumPlayers = 1; + document.getElementById("numPlayers").value = 1; + + LB = 0; + UB = 100; + currentGuess = 0; + document.getElementById("playerGuess").value = 0; + pop = 0; + bWidth = 120; + bHeight = 145; + sTop = 153; + sHeight = 120; + + $("#animateBalloon").animate({ + width: '120px', + height: '145px' + }, { + duration: 500, + queue: false, + complete: function () { /* Animation complete */ } + }); + + $(".balloonString").animate({ + top: '153px', + height: '120px' + }, { + duration: 500, + queue: false, + complete: function () { /* Animation complete */ } + }); + + $('#animateBalloon').show(); + + document.getElementById("lowest").innerText = "Lowest: 0"; + + document.getElementById("balloon").innerText = ""; + if (isEasy) { + document.getElementById('level').innerText = "Easy"; + document.getElementById("highest").innerText = "Highest: 100"; + } + else { + document.getElementById('level').innerText = 'Harder'; + document.getElementById("highest").innerText = "Highest: 84"; + } + } +}); + + diff --git a/MultiPlayer - Games/Pop_My_Balloon/styles.css b/MultiPlayer - Games/Pop_My_Balloon/styles.css new file mode 100644 index 00000000..fb657125 --- /dev/null +++ b/MultiPlayer - Games/Pop_My_Balloon/styles.css @@ -0,0 +1,240 @@ +/* +font-family: 'Comfortaa', cursive; +font-family: 'Lora', serif; +*/ + +body +{ + background-color: #2bbad3; +} + +#title +{ + display: block; + position: fixed; + top: 50%; + left: 50%; + margin-top: -50px; + margin-left: -200px; +} + +#game +{ + display: none; +} + +#setup +{ + position: fixed; + top: 50%; + left: 50%; + margin-top: -50px; + margin-left: -225px; +} + +#help +{ + display: none; +} + +#actualGame +{ + display: none; +} + +#guessing +{ + margin-top: 170px; +} + +#gameOver +{ + display: none; + margin-top: 70px; +} + +#guessErr +{ + display: none; +} + +#lowest +{ + font-family: 'Lora', serif; + font-size: 16px; + text-align: left; + margin: 20px; + margin-right: 25%; +} + +#highest +{ + font-family: 'Lora', serif; + font-size: 16px; + text-align: right; + margin: 20px; + margin-left: 25%; +} + +#level +{ + font-family: 'Lora', serif; + font-size: 16px; + text-align: center; +} + +#settings +{ + display: none; +} + +#settingsToTitle +{ + margin-top: 70px; +} + +#pickEasy +{ + background: hsl(215,50%,65%); +} + +#useText +{ + background: hsl(215,50%,65%); +} + +#speechErr +{ + display: none; +} + +#guessErr-speech +{ + display:none; +} + +#speechGuessing +{ + display: none; +} + +div +{ + text-align: center; +} + +h1 +{ + text-align: center; + font-family: 'Comfortaa', cursive; + margin: 15px 0; + margin-bottom: 25px; +} + +h2 +{ + text-align: center; + font-family: 'Comfortaa', cursive; + margin: 15px 0; + margin-top: 50px; +} + +h3 +{ + font-family: 'Lora', serif; + font-size: 16px; + margin-bottom: 20px; +} + +p +{ + font-family: 'Lora', serif; + font-size: 14px; + margin: 30px 20px; +} + +input +{ + border-radius: 10px; + width: 50%; + margin: 10px auto; + padding: 10px; + font-family: 'Lora', serif; + font-variant: bold; + font-size: 16px; +} + +label +{ + font-family: 'Lora', serif; + font-size: 12px; +} + +.btn +{ + font-family: 'Lora', serif; + border-radius: 10px; + width: 50%; + margin: 10px; + padding: 10px; + font-size: 16px; + border: solid black; + color: black; +} + +/* +Balloon animation +*/ +.balloon { + display:inline-block; + width:120px; + height:145px; + background:hsl(316, 96%, 45%); + border-radius:80%; + position:relative; + box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07); + margin:20px 30px; + transition:transform 0.5s ease; + z-index:10; + animation:balloons 4s ease-in-out infinite; + transform-origin:bottom center; +} + +@keyframes balloons { + 0%,100%{ transform:translateY(0) rotate(-4deg); } + 50%{ transform:translateY(-25px) rotate(4deg); } +} + + +.balloon:before { + content:"โ–ฒ"; + font-size:20px; + color:hsl(316, 96%, 45%); + display:block; + text-align:center; + width:100%; + position:absolute; + bottom:-12px; + z-index:-100; +} + +.balloonString { + display:inline-block; top:153px; + position:absolute; + height:120px; + width:1px; + margin:0 auto; + content:""; + background:rgba(0,0,0,0.2); + z-index: -200; +} + +.balloon{ + background:hsl(316, 96%, 45%); + animation-duration:3.5s; +} + +.balloon:before { + color:hsl(316, 96%, 45%); +} + diff --git a/README.md b/README.md index 430b6fc2..923ad08e 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +![image](https://camo.githubusercontent.com/baebe7bd53cddccd8bb2181cba613bca938163bb9451dea6dd3db58aa42137ba/68747470733a2f2f696d6775722e636f6d2f7775694a5871722e706e67) +------------------------------- + ![Community](https://github.com/GameSphere-MultiPlayer/Physi-c-Tech/assets/98798977/e79af9da-814e-487e-8a9a-85947384d3b2) ## Table of Contents @@ -97,6 +100,7 @@ ________________________________________________________________________________ | 41 | [Galaxy Rider](./SinglePlayer%20-%20Games/Galaxy_Rider) | | 42 | [Geek Tac Toe](./SinglePlayer%20-%20Games/GeekTacToe) | | 43 | [Guess The Number](./SinglePlayer%20-%20Games/Guess%20The%20Number) | +| 43 | [Guess The Sequence](./SinglePlayer%20-%20Games/Guess%20The%20Sequence) | | 44 | [Hangman Game](./SinglePlayer%20-%20Games/Hangman%20Game) | | 45 | [HexGL Master](./SinglePlayer%20-%20Games/HexGL-master) | | 46 | [Hover Board Effect](./SinglePlayer%20-%20Games/Hover_Board_Effect) | @@ -232,20 +236,24 @@ ________________________________________________________________________________ | 178 | [Platform Game Engine](./SinglePlayer%20-%20Games/Platform_Game_Engine) | | 179 | [Castle Escape Game](.SinglePlayer%20-%20Games/Castle_Escape_Game) | | 180 | [Shadow Poke Guessing Game](.SinglePlayer%20-%20Games/Shadow_Poke_Guessing_Game) | -| 181 | [Marvel Role Playing Game](.SinglePlayer%20-%20Games/Marvel_Role_Playing_Game) | +| 181 | [Marvel Role Playing Game](.SinglePlayer%20-%20Games/Marvel_Role_Playing_Game) | | 182 | [Animal Name Guessing Game](.SinglePlayer%20-%20Games/Animal_Name_Guessing_Game) | | 183 | [Basketball Game](.SinglePlayer%20-%20Games/Basketball_Game) | | 184 | [Ball Jumper Game](.SinglePlayer%20-%20Games/Ball_Jumper_Game) | | 185 | [Math Sprint Game](.SinglePlayer%20-%20Games/Math_Sprint_Game) | -| 186 | [Quick Type](.SinglePlayer%20-%20Games/QuickType) | -| 187 | [SIMON_GAME](.SinglePlayer%20-%20Games/SIMON_GAME) | -| 188 | [Cubula_Game](.SinglePlayer%20-%20Games/Cubula_Game) | -| 189 | [Ball_Shooting_Game](.SinglePlayer%20-%20Games/Ball_Shooting_Game) | -| 190 | [Baseball_Game](.SinglePlayer%20-%20Games/Baseball_Game) | -| 190 | [Ball_Fall_Game](.SinglePlayer%20-%20Games/Ball_Fall_Game) | - - - +| 186 | [Quick Type](.SinglePlayer%20-%20Games/QuickType) | +| 187 | [SIMON_GAME](.SinglePlayer%20-%20Games/SIMON_GAME) | +| 188 | [Cubula_Game](.SinglePlayer%20-%20Games/Cubula_Game) | +| 189 | [Ball_Shooting_Game](.SinglePlayer%20-%20Games/Ball_Shooting_Game) | +| 190 | [Baseball_Game](.SinglePlayer%20-%20Games/Baseball_Game) | +| 191 | [Hand_Cricket_Champ](./SinglePlayer%20-%20Games/Hand_Cricket_Champ) | +| 192 | [Pop My Balloon]() | +| 193 | [Doraemon Run](.SinglePlayer%20-%20Games/DoraemonRun) | +| 194 | [Earth_Guardian](./SinglePlayer%20-%20Games/Earth_Guardian) | +| 195 | [Hand_Cricket_Champ](./SinglePlayer%20-%20Games/Hand_Cricket_Champ) | +| 196 | [SnakeBites Game](./SinglePlayer%20-%20Games/SnakeBites) | +| 197 | [Flames_Game](../MultiPlayer%20-%20Games/Flames_Game) | +| 198 | [Ball_Fall_Game](.SinglePlayer%20-%20Games/Ball_Fall_Game) | diff --git a/SinglePlayer - Games/Angry Birds/Readme.md b/SinglePlayer - Games/Angry Birds/Readme.md new file mode 100644 index 00000000..dcdc0a6c --- /dev/null +++ b/SinglePlayer - Games/Angry Birds/Readme.md @@ -0,0 +1,16 @@ +# **Angry Bird game** + +--- + +
+ +## **Description ๐Ÿ“ƒ** + +In Angry Birds, players control a group of colorful birds with different abilities who are seeking revenge on a group of green pigs that have stolen their eggs. The objective of the game is to launch the birds from a slingshot and strategically destroy various structures and obstacles in order to eliminate the pigs and retrieve the stolen eggs. + +## **How to play? ๐Ÿ•น๏ธ** +- Use the mouse to launch the birds from a slingshot + +## **Screenshot +![image](https://github.com/manmita/GameSphere/blob/main/SinglePlayer%20-%20Games/Angry%20Birds/preview.png) + diff --git a/SinglePlayer - Games/Banner - image/D.png b/SinglePlayer - Games/Banner - image/D.png new file mode 100644 index 00000000..0cd5c678 Binary files /dev/null and b/SinglePlayer - Games/Banner - image/D.png differ diff --git a/SinglePlayer - Games/Banner - image/Hand_Cricket_Champ.png b/SinglePlayer - Games/Banner - image/Hand_Cricket_Champ.png new file mode 100644 index 00000000..b0b6296e Binary files /dev/null and b/SinglePlayer - Games/Banner - image/Hand_Cricket_Champ.png differ diff --git a/SinglePlayer - Games/Banner - image/Snake-game.png b/SinglePlayer - Games/Banner - image/Snake-game.png new file mode 100644 index 00000000..e93bab58 Binary files /dev/null and b/SinglePlayer - Games/Banner - image/Snake-game.png differ diff --git a/SinglePlayer - Games/Banner - image/guessthesequence.png b/SinglePlayer - Games/Banner - image/guessthesequence.png new file mode 100644 index 00000000..1631f840 Binary files /dev/null and b/SinglePlayer - Games/Banner - image/guessthesequence.png differ diff --git a/SinglePlayer - Games/Banner - image/snake.webp b/SinglePlayer - Games/Banner - image/snake.webp new file mode 100644 index 00000000..c9096568 Binary files /dev/null and b/SinglePlayer - Games/Banner - image/snake.webp differ diff --git a/SinglePlayer - Games/Banner - image/snakebite-slot-feat.webp b/SinglePlayer - Games/Banner - image/snakebite-slot-feat.webp new file mode 100644 index 00000000..c9096568 Binary files /dev/null and b/SinglePlayer - Games/Banner - image/snakebite-slot-feat.webp differ diff --git a/SinglePlayer - Games/Banner - image/snakebites.png b/SinglePlayer - Games/Banner - image/snakebites.png new file mode 100644 index 00000000..83d0692a Binary files /dev/null and b/SinglePlayer - Games/Banner - image/snakebites.png differ diff --git a/SinglePlayer - Games/DoremonRun/Doraemon run.mp4 b/SinglePlayer - Games/DoremonRun/Doraemon run.mp4 new file mode 100644 index 00000000..eabfc26f Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/Doraemon run.mp4 differ diff --git a/SinglePlayer - Games/DoremonRun/README.md b/SinglePlayer - Games/DoremonRun/README.md new file mode 100644 index 00000000..b33cc90b --- /dev/null +++ b/SinglePlayer - Games/DoremonRun/README.md @@ -0,0 +1,2 @@ +# RunDoraRun +Doraemon game diff --git a/SinglePlayer - Games/DoremonRun/Videos/Doraemon run.mp4 b/SinglePlayer - Games/DoremonRun/Videos/Doraemon run.mp4 new file mode 100644 index 00000000..eabfc26f Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/Videos/Doraemon run.mp4 differ diff --git a/SinglePlayer - Games/DoremonRun/image/D.png b/SinglePlayer - Games/DoremonRun/image/D.png new file mode 100644 index 00000000..0cd5c678 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/D.png differ diff --git a/SinglePlayer - Games/DoremonRun/image/Dora.png b/SinglePlayer - Games/DoremonRun/image/Dora.png new file mode 100644 index 00000000..311ea0e6 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/Dora.png differ diff --git a/SinglePlayer - Games/DoremonRun/image/PngItem_148881.png b/SinglePlayer - Games/DoremonRun/image/PngItem_148881.png new file mode 100644 index 00000000..6da4a949 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/PngItem_148881.png differ diff --git a/SinglePlayer - Games/DoremonRun/image/back.webp b/SinglePlayer - Games/DoremonRun/image/back.webp new file mode 100644 index 00000000..f732fdc2 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/back.webp differ diff --git a/SinglePlayer - Games/DoremonRun/image/chuaaa.mp3 b/SinglePlayer - Games/DoremonRun/image/chuaaa.mp3 new file mode 100644 index 00000000..bd678840 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/chuaaa.mp3 differ diff --git a/SinglePlayer - Games/DoremonRun/image/doracake.png b/SinglePlayer - Games/DoremonRun/image/doracake.png new file mode 100644 index 00000000..26df15e0 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/doracake.png differ diff --git a/SinglePlayer - Games/DoremonRun/image/doracake4.png b/SinglePlayer - Games/DoremonRun/image/doracake4.png new file mode 100644 index 00000000..febb6f19 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/doracake4.png differ diff --git a/SinglePlayer - Games/DoremonRun/image/food.mp3 b/SinglePlayer - Games/DoremonRun/image/food.mp3 new file mode 100644 index 00000000..076198c9 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/food.mp3 differ diff --git a/SinglePlayer - Games/DoremonRun/image/gameover.mp3 b/SinglePlayer - Games/DoremonRun/image/gameover.mp3 new file mode 100644 index 00000000..414bf651 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/gameover.mp3 differ diff --git a/SinglePlayer - Games/DoremonRun/image/grass_template2.jpg b/SinglePlayer - Games/DoremonRun/image/grass_template2.jpg new file mode 100644 index 00000000..3cb24b50 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/grass_template2.jpg differ diff --git a/SinglePlayer - Games/DoremonRun/image/move.mp3 b/SinglePlayer - Games/DoremonRun/image/move.mp3 new file mode 100644 index 00000000..4d3d245d Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/move.mp3 differ diff --git a/SinglePlayer - Games/DoremonRun/image/musicdoralarge.mp3 b/SinglePlayer - Games/DoremonRun/image/musicdoralarge.mp3 new file mode 100644 index 00000000..de88048e Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/musicdoralarge.mp3 differ diff --git a/SinglePlayer - Games/DoremonRun/image/smalldoral3.png b/SinglePlayer - Games/DoremonRun/image/smalldoral3.png new file mode 100644 index 00000000..807b19a4 Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/smalldoral3.png differ diff --git a/SinglePlayer - Games/DoremonRun/image/tasty.m4a b/SinglePlayer - Games/DoremonRun/image/tasty.m4a new file mode 100644 index 00000000..c78bd0be Binary files /dev/null and b/SinglePlayer - Games/DoremonRun/image/tasty.m4a differ diff --git a/SinglePlayer - Games/DoremonRun/index.html b/SinglePlayer - Games/DoremonRun/index.html new file mode 100644 index 00000000..712b565e --- /dev/null +++ b/SinglePlayer - Games/DoremonRun/index.html @@ -0,0 +1,21 @@ + + + + + + + fly to hell + + + +
+
+ +
+
High Score: 0
+
Score: 0
+ + + + + diff --git a/SinglePlayer - Games/DoremonRun/script.js b/SinglePlayer - Games/DoremonRun/script.js new file mode 100644 index 00000000..af5ce711 --- /dev/null +++ b/SinglePlayer - Games/DoremonRun/script.js @@ -0,0 +1,361 @@ +// initialisation +let inputDir = { x: 0, y: 0 }; +const musicSound = new Audio('image/musicdoralarge.mp3'); +const movesound = new Audio('image/move.mp3'); +const foodsound = new Audio('image/food.mp3'); +const gameover = new Audio('image/gameover.mp3'); +const chuaa = new Audio('image/chuaaa.mp3'); +const tasty = new Audio('image/tasty.m4a'); + +let score = 0; +let speed = 4.9; +let health = 5.0; +let lastPaintTime = 0.0; +let snakeArr = [{ x: 11, y: 11 }]; +food = { x: 11, y: 5 }; + +mouse1 = { x: 13, y: 8 };//immovable mouse +mouse2 = { x: 9, y: 7 }; +mouse3 = { x: 4, y: 4 }; +mouse4 = { x: 10, y: 14 }; +mouse5 = { x: 9, y: 13 }; + + + +let topp = false; +let down = false; +let left = false; +let right = false; + +let safter = 0; + +let aa = 1; +let bb = 16; +let a = 2; +b = 17; + + + + + +//my functions +function mousedead() { + + //display mouse + mouseElement = document.createElement('div'); + mouseElement.style.gridRowStart = mouse1.y; + mouseElement.style.gridColumnStart = mouse1.x; + mouseElement.classList.add('mouse'); + board.appendChild(mouseElement); + + //display mouse + mouseElement = document.createElement('div'); + mouseElement.style.gridRowStart = mouse2.y; + mouseElement.style.gridColumnStart = mouse2.x; + mouseElement.classList.add('mouse'); + board.appendChild(mouseElement); + + //display mouse + mouseElement = document.createElement('div'); + mouseElement.style.gridRowStart = mouse3.y; + mouseElement.style.gridColumnStart = mouse3.x; + mouseElement.classList.add('mouse'); + board.appendChild(mouseElement); + + //display mouse + mouseElement = document.createElement('div'); + mouseElement.style.gridRowStart = mouse4.y; + mouseElement.style.gridColumnStart = mouse4.x; + mouseElement.classList.add('mouse'); + board.appendChild(mouseElement); + + //display mouse + mouseElement = document.createElement('div'); + mouseElement.style.gridRowStart = mouse5.y; + mouseElement.style.gridColumnStart = mouse5.x; + mouseElement.classList.add('mouse'); + board.appendChild(mouseElement); + + if ((snakeArr[0].y === mouse1.y && snakeArr[0].x === mouse1.x) || (snakeArr[0].y === mouse2.y && snakeArr[0].x === mouse2.x) || (snakeArr[0].y === mouse3.y && snakeArr[0].x === mouse3.x) || snakeArr[0].y === mouse4.y && snakeArr[0].x === mouse4.x||(snakeArr[0].y === mouse5.y && snakeArr[0].x === mouse5.x)) { + health--; + chuaa.play(); + // incerease speed + if(speed<8){ + speed = speed+0.1 + } + else if(speed >= 8 && speed < 10){ + speed = speed + 0.09; + } + else if(speed >= 10 && speed < 11.6){ + speed =speed + 0.068; + } + else if(speed >= 11.6){ + speed = speed +0.032; + } + } + +} + +function healthplus(staken) { + if (staken != safter) + if (score % 8 === 0 && score != 0) { + health = health + 1; + } + else { + return; + } + safter = staken; +} + + +//functions + +// main function +function main(ctime) { + + window.requestAnimationFrame(main); + + if ((ctime - lastPaintTime) / 1000 < 1 / speed) { + return; + } + lastPaintTime = ctime; + gameEngine(); +} + +//if you bump on mouse or over the boundry +function isCollide(snake) { + + if (snake[0].x >= 18 || snake[0].x <= 0 || snake[0].y >= 18 || snake[0].y <= 0) { + return true; + } + if (health == 0) { + return true; + } +} + +// gameEngine function +function gameEngine() { + + // if collided + if (isCollide(snakeArr)) { + gameover.play(); + musicSound.pause(); + inputDir = { x: 0, y: 0 }; + alert('Game Over. Press any key to play again'); + snakeArr = [{ x: 4, y: 17 }]; + musicSound.play(); + score = 0; + scorebox.innerHTML = "Score: " + score; + health = 5; + healthbox.innerHTML = "Health: " + health; + speed = 4.5; + snakeElement.style.rotate = '360deg'; + topp = false; + down = false; + left = false; + right = false; + healthbox.style.color = 'rgb(0, 255, 0)'; + snakeElement.classList.remove('can'); + } + + + + // if dora has eaten doracake, increment score and regenerate food + if (snakeArr[0].y === food.y && snakeArr[0].x === food.x) { + foodsound.play(); + tasty.play(); + + // score + score++; + + // incerease speed + if(speed<8){ + speed = speed+0.1 + } + else if(speed >= 8 && speed < 10){ + speed = speed + 0.09; + } + else if(speed >= 10 && speed < 11.6){ + speed =speed + 0.068; + } + else if(speed >= 11.6){ + speed = speed +0.032; + } + + scorebox.innerHTML = "Score: " + score; + // hiscore + if (score > hiscore) { + hiscoreval = score; + localStorage.setItem("hiscore", JSON.stringify(hiscoreval)); + hiscorebox.innerHTML = "Hi Score: " + hiscoreval; + } + //regenfood + food = { x: Math.round(a + (bb - aa) * Math.random()), y: Math.round(aa + (bb - aa) * Math.random()) }; + + mouse1 = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + + mouse2 = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + + mouse3 = { x: Math.round(a + (b - aa) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + + mouse4 = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + + mouse5 = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + //regenmouse + + if (food.x === mouse4.x && food.y === mouse4.y) { + mouse4 = { x: (food.x + 2), y: 14 }; + } + + if (food.x === mouse3.x && food.y === mouse3.y) { + mouse3 = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + } + + if (food.x === mouse2.x && food.y === mouse2.y) { + mouse2 = { x: 10, y: (food.y+1) }; + } + + if (food.x === mouse1.x && food.y === mouse1.y) { + mouse1 = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + } + + if (food.x === mouse5.x && food.y === mouse5.y) { + mouse5 = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + } + + } + + //missing for loop for body increment + snakeArr[0].x += inputDir.x; + snakeArr[0].y += inputDir.y; + + + // clean board except doraemon + const board = document.getElementById('board'); + const children = Array.from(board.children); + + const childrenToClear = children.filter(child => child.id !== 'dora' && child.id !== 'heartid'); + + childrenToClear.forEach(child => child.remove()); + + + //display snake + snakeArr.forEach((e, index) => { + snakeElement = document.getElementById('dora'); + // console.log(snakeElement) + snakeElement.style.gridRowStart = e.y; + snakeElement.style.gridColumnStart = e.x; + }) + + + // display food + foodElement = document.createElement('div'); + foodElement.style.gridRowStart = food.y; + foodElement.style.gridColumnStart = food.x; + foodElement.classList.add('food'); + board.appendChild(foodElement); + + + + //display mouse + mousedead(); + + // rotate /////// + if (topp === true) { + snakeElement.style.rotate = '270deg'; + } + if (down === true) { + snakeElement.style.rotate = '90deg'; + } + if (left === true) { + snakeElement.style.rotate = '180deg'; + } + if (right) { + snakeElement.style.rotate = '360deg'; + } + + + // Change healthtext color + if (health === 3) { + healthbox.style.color = 'rgb(255, 150, 0)' + } + if (health <= 2) { + healthbox.style.color = 'rgb(255, 0, 0)'; + } + + + // increase health on eating per 8 doracakes + healthplus(score); + healthbox.innerHTML = "Health: " + health; + + + // increasing animation speed + if(speed>=5){ + snakeElement.style.animation= 'walky 1s steps(6) infinite'; + } + if(speed>=10){ + snakeElement.style.animation= 'walky 0.9s steps(6) infinite'; + } + + +} //End of gameEngine() + + +// main logic +let hiscore = localStorage.getItem("hiscore"); +if (hiscore === null) { + hiscoreval = 0; + localStorage.setItem("hiscore", JSON.stringify(hiscoreval)); +} +else { + hiscoreval = JSON.parse(hiscore); + hiscorebox.innerHTML = "Hi Score: " + hiscoreval; +} + +setTimeout(() => { + alert("Controls:\nUp Aroow\nDown Arrow\nLeft Arrow\nRight Arrow"); +}, 500); +window.requestAnimationFrame(main); +window.addEventListener('keydown', e => { + + topp = false; + down = false; + left = false; + right = false; + snakeElement.classList.add('can'); + inputDir = { x: 0, y: 1 } //start the game + switch (e.key) { + case "ArrowUp": + console.log("up"); + inputDir.x = 0; + inputDir.y = -1; + topp = true; + if(score>5){ + mouse5 = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + } + break; + case "ArrowDown": + console.log("down"); + inputDir.x = 0; + inputDir.y = 1; + down = true; + if(score>15){ + mouse3 = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; + } + break; + case "ArrowLeft": + console.log("left"); + inputDir.x = -1; + inputDir.y = 0; + left = true; + break; + case "ArrowRight": + console.log("right"); + inputDir.x = 1; + inputDir.y = 0; + right = true; + break; + } + musicSound.play(); +}); + diff --git a/SinglePlayer - Games/DoremonRun/styles.css b/SinglePlayer - Games/DoremonRun/styles.css new file mode 100644 index 00000000..0412a302 --- /dev/null +++ b/SinglePlayer - Games/DoremonRun/styles.css @@ -0,0 +1,117 @@ +@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap'); + +* { + padding: 0; + margin: 0; +} + +body { + background: url(image/back.webp); + /* background-color: rgba(20, 157, 163, 1); */ + /* min-height: 100vw; */ + /* background-repeat: no-repeat; */ + display: flex; + background-size: 100vw 100vh; + justify-content: center; + align-items: center; +} + +#board { + background: url(image/grass_template2.jpg); + /* background-color: rgba(0, 255, 55, 0.581); */ + width: 130vmin; + /* width: 90vmin; */ + height: 99vmin; + border: 2px solid black; + display: grid; + grid-template-rows: repeat(17, 1fr); + grid-template-columns: repeat(17, 1fr); +} + +/* doarmon + animation */ +.man { + background: url(image/smalldoral3.png); + width: 40px; + margin: auto; + height: 50px; +} + + +.can { + animation: walky 1.2s steps(6) infinite; + /* forwards 5s linear infinite; */ + transition: grid-row-start 1s ease-out, grid-column-start 1s ease-out; +} + +@keyframes walky { + 0% { + background-position: 0px; + } + + 100% { + background-position: 242px; + } +} + +@keyframes forward { + 0% { + transform: translateX(-100px); + } + + 100% { + transform: translateX(1500px); + } +} + + +/* over */ + + +.food { + background: url(image/doracake4.png); + background-repeat: no-repeat; +} + +.mouse { + background: url(image/PngItem_148881.png); + background-repeat: no-repeat; +} + + +/* score */ + +#hiscorebox { + position: absolute; + right: 90px; + top: 20px; + font-family: 'New Tegomin', serif; + background-color: rgba(3, 3, 3, 0.597); + border-radius: 5px; + padding: 3px 6px; + font-size: 20px; + color: white; +} + +#scorebox { + position: absolute; + right: 130px; + top: 63px; + font-family: 'New Tegomin', serif; + background-color: rgba(3, 3, 3, 0.597); + border-radius: 5px; + padding: 3px 6px; + font-size: 20px; + color: white; +} + +#healthbox { + position: absolute; + right: 118px; + top: 107px; + font-family: 'New Tegomin', serif; + background-color: rgba(3, 3, 3, 0.597); + border-radius: 5px; + padding: 3px 6px; + font-size: 20px; + color: rgb(26, 255, 0); +} diff --git a/SinglePlayer - Games/Earth_Guardian/README.md b/SinglePlayer - Games/Earth_Guardian/README.md new file mode 100644 index 00000000..f75ad531 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/README.md @@ -0,0 +1,44 @@ +# Earth Guardian + +# [Game Interface] + + +------------------- + +
+ +## **Description ๐Ÿ“ƒ** +-Earth Guardian is a remake of the classic Space shooter type of games, with 8-bit (pixel art) assets. This project used free assets (music and graphics) provided by [Jonathan So](https://jonathan-so.itch.io/),[KennyNL](https://kenney.nl/) and other sources, like Google images and [OpenGameArt](https://opengameart.org). This was a learning project. There will be some updates in the near future. Hope you like it, have fun! + + +## **functionalities ๐ŸŽฎ** +1. This a classic space shooter game . +2. It has a timer going on , before the timer end you have to kill more more alien ships , it will be your final score +3. You can store your timer and health by collecting the time and health. + +
+ +## **How to play? ๐Ÿ•น๏ธ** + +- Use arrow keys to move the ship ! +- Press spacebar to shoot ! +- Hold shift key to use booster! + +
+ +###### Bugs: +* Minor bug with multiple keys pressed movement (LEFT UP AND SHOOT); + +
+ +## **Screenshots ๐Ÿ“ธ** + +
+ # [Game image] + + +
+ +---------- +#### Releases: +##### v1.0.0 - May 14 2024 diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/Crimson Drive.mp3 b/SinglePlayer - Games/Earth_Guardian/assets/audio/Crimson Drive.mp3 new file mode 100644 index 00000000..144e9f5e Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/Crimson Drive.mp3 differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/Fallen in Battle.mp3 b/SinglePlayer - Games/Earth_Guardian/assets/audio/Fallen in Battle.mp3 new file mode 100644 index 00000000..ea58e892 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/Fallen in Battle.mp3 differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/Mecha Collection.mp3 b/SinglePlayer - Games/Earth_Guardian/assets/audio/Mecha Collection.mp3 new file mode 100644 index 00000000..6287f2f4 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/Mecha Collection.mp3 differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/alarm.wav b/SinglePlayer - Games/Earth_Guardian/assets/audio/alarm.wav new file mode 100644 index 00000000..5aa34218 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/alarm.wav differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_enemy.wav b/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_enemy.wav new file mode 100644 index 00000000..6a8c9464 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_enemy.wav differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_enemy.wav.meta b/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_enemy.wav.meta new file mode 100644 index 00000000..dacd3ce9 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_enemy.wav.meta @@ -0,0 +1,20 @@ +fileFormatVersion: 2 +guid: 72e76810224064300b7d32e8322a5d12 +AudioImporter: + serializedVersion: 6 + defaultSettings: + loadType: 1 + sampleRateSetting: 0 + sampleRateOverride: 0 + compressionFormat: 0 + quality: .5 + conversionMode: 0 + platformSettingOverrides: {} + forceToMono: 0 + normalize: 1 + preloadAudioData: 1 + loadInBackground: 0 + 3D: 0 + userData: + assetBundleName: + assetBundleVariant: diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_player.wav b/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_player.wav new file mode 100644 index 00000000..16ac3611 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_player.wav differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_player.wav.meta b/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_player.wav.meta new file mode 100644 index 00000000..1f2d8c56 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/assets/audio/explosion_player.wav.meta @@ -0,0 +1,20 @@ +fileFormatVersion: 2 +guid: a019ae3af8e864616b85773c509f5285 +AudioImporter: + serializedVersion: 6 + defaultSettings: + loadType: 1 + sampleRateSetting: 0 + sampleRateOverride: 0 + compressionFormat: 0 + quality: .5 + conversionMode: 0 + platformSettingOverrides: {} + forceToMono: 0 + normalize: 1 + preloadAudioData: 1 + loadInBackground: 0 + 3D: 0 + userData: + assetBundleName: + assetBundleVariant: diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/go.ogg b/SinglePlayer - Games/Earth_Guardian/assets/audio/go.ogg new file mode 100644 index 00000000..89683948 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/go.ogg differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/laser1.ogg b/SinglePlayer - Games/Earth_Guardian/assets/audio/laser1.ogg new file mode 100644 index 00000000..56ad23de Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/laser1.ogg differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/loading.wav b/SinglePlayer - Games/Earth_Guardian/assets/audio/loading.wav new file mode 100644 index 00000000..2387724f Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/loading.wav differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/menu hover.wav b/SinglePlayer - Games/Earth_Guardian/assets/audio/menu hover.wav new file mode 100644 index 00000000..9485c5bf Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/menu hover.wav differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/menu select.wav b/SinglePlayer - Games/Earth_Guardian/assets/audio/menu select.wav new file mode 100644 index 00000000..e1e74ec4 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/menu select.wav differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/music_background.wav b/SinglePlayer - Games/Earth_Guardian/assets/audio/music_background.wav new file mode 100644 index 00000000..0f66dd53 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/music_background.wav differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/music_background.wav.meta b/SinglePlayer - Games/Earth_Guardian/assets/audio/music_background.wav.meta new file mode 100644 index 00000000..55ab787d --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/assets/audio/music_background.wav.meta @@ -0,0 +1,20 @@ +fileFormatVersion: 2 +guid: 7b04c59dd84f14039b601e1abbe7b884 +AudioImporter: + serializedVersion: 6 + defaultSettings: + loadType: 1 + sampleRateSetting: 0 + sampleRateOverride: 0 + compressionFormat: 1 + quality: .5 + conversionMode: 0 + platformSettingOverrides: {} + forceToMono: 0 + normalize: 1 + preloadAudioData: 1 + loadInBackground: 0 + 3D: 0 + userData: + assetBundleName: + assetBundleVariant: diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/powerUp11.ogg b/SinglePlayer - Games/Earth_Guardian/assets/audio/powerUp11.ogg new file mode 100644 index 00000000..88f53216 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/powerUp11.ogg differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/weapon_player.wav b/SinglePlayer - Games/Earth_Guardian/assets/audio/weapon_player.wav new file mode 100644 index 00000000..3e214c36 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/audio/weapon_player.wav differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/audio/weapon_player.wav.meta b/SinglePlayer - Games/Earth_Guardian/assets/audio/weapon_player.wav.meta new file mode 100644 index 00000000..67c887a3 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/assets/audio/weapon_player.wav.meta @@ -0,0 +1,20 @@ +fileFormatVersion: 2 +guid: bf75b984df8a84987bcf3a8bf6e2862d +AudioImporter: + serializedVersion: 6 + defaultSettings: + loadType: 1 + sampleRateSetting: 0 + sampleRateOverride: 0 + compressionFormat: 0 + quality: .5 + conversionMode: 0 + platformSettingOverrides: {} + forceToMono: 0 + normalize: 1 + preloadAudioData: 1 + loadInBackground: 0 + 3D: 0 + userData: + assetBundleName: + assetBundleVariant: diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/3.png b/SinglePlayer - Games/Earth_Guardian/assets/images/3.png new file mode 100644 index 00000000..e233256a Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/3.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/Earth Guardian.png b/SinglePlayer - Games/Earth_Guardian/assets/images/Earth Guardian.png new file mode 100644 index 00000000..4be2ecf7 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/Earth Guardian.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/Earth_Guardian.png b/SinglePlayer - Games/Earth_Guardian/assets/images/Earth_Guardian.png new file mode 100644 index 00000000..10ee7ec1 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/Earth_Guardian.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/background.png b/SinglePlayer - Games/Earth_Guardian/assets/images/background.png new file mode 100644 index 00000000..25712abf Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/background.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/enemy.png b/SinglePlayer - Games/Earth_Guardian/assets/images/enemy.png new file mode 100644 index 00000000..02d4c0e7 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/enemy.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/enemyRocket.png b/SinglePlayer - Games/Earth_Guardian/assets/images/enemyRocket.png new file mode 100644 index 00000000..ccd932e5 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/enemyRocket.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/engineFire.jpg b/SinglePlayer - Games/Earth_Guardian/assets/images/engineFire.jpg new file mode 100644 index 00000000..b45a4f6d Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/engineFire.jpg differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/engineFlameBooster.png b/SinglePlayer - Games/Earth_Guardian/assets/images/engineFlameBooster.png new file mode 100644 index 00000000..9beecf8f Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/engineFlameBooster.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/engineFlameNormal.png b/SinglePlayer - Games/Earth_Guardian/assets/images/engineFlameNormal.png new file mode 100644 index 00000000..8137a8b3 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/engineFlameNormal.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/firstAid.png b/SinglePlayer - Games/Earth_Guardian/assets/images/firstAid.png new file mode 100644 index 00000000..0b484e94 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/firstAid.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/github.png b/SinglePlayer - Games/Earth_Guardian/assets/images/github.png new file mode 100644 index 00000000..9e50ad1e Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/github.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/meteorFlyby.png b/SinglePlayer - Games/Earth_Guardian/assets/images/meteorFlyby.png new file mode 100644 index 00000000..6611a868 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/meteorFlyby.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/player.png b/SinglePlayer - Games/Earth_Guardian/assets/images/player.png new file mode 100644 index 00000000..62ab271b Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/player.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/playerDown.png b/SinglePlayer - Games/Earth_Guardian/assets/images/playerDown.png new file mode 100644 index 00000000..0cd0320d Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/playerDown.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/playerRocket.png b/SinglePlayer - Games/Earth_Guardian/assets/images/playerRocket.png new file mode 100644 index 00000000..3f75474e Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/playerRocket.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/playerUp.png b/SinglePlayer - Games/Earth_Guardian/assets/images/playerUp.png new file mode 100644 index 00000000..4daaccf2 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/playerUp.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/screenshot.png b/SinglePlayer - Games/Earth_Guardian/assets/images/screenshot.png new file mode 100644 index 00000000..b6ba52eb Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/screenshot.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/shieldImage.png b/SinglePlayer - Games/Earth_Guardian/assets/images/shieldImage.png new file mode 100644 index 00000000..f5c6ce60 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/shieldImage.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/soundOff.png b/SinglePlayer - Games/Earth_Guardian/assets/images/soundOff.png new file mode 100644 index 00000000..8bc2da16 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/soundOff.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/soundOn.png b/SinglePlayer - Games/Earth_Guardian/assets/images/soundOn.png new file mode 100644 index 00000000..d76a45f2 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/soundOn.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/timer.png b/SinglePlayer - Games/Earth_Guardian/assets/images/timer.png new file mode 100644 index 00000000..abf7a310 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/timer.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/assets/images/tombstone.png b/SinglePlayer - Games/Earth_Guardian/assets/images/tombstone.png new file mode 100644 index 00000000..4f4dc3e2 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/assets/images/tombstone.png differ diff --git a/SinglePlayer - Games/Earth_Guardian/index.html b/SinglePlayer - Games/Earth_Guardian/index.html new file mode 100644 index 00000000..74a2af91 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/index.html @@ -0,0 +1,222 @@ + + + + + + + + Earth Guardian + + + + + + + + + +
+

0%

+
+
+
+ +
+

COMMANDS:

+

Use arrow keys to move the ship !

+

Press spacebar to shoot !

+

Hold shift key to use booster!

+
+
+ + +
+ + + + +
+ +
+

100%

+
+
+ + +
+ +
+

100%

+
+
+ + +
+ + +
+ + +
+

OVERHEAT:

+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+ Tombstone +

Thank you for your service.

+ + +
+

+ + +
+ + +
+

Total kills:

+

Time played multiplier:

+

Final score:

+

Current Highscore:

+
+ + +
+ + +
+

GAME PAUSED

+ + + +
+ + +
+

SETTINGS

+
+

VOLUME CONTROLS:

+ +
+ + +
+ +
+ + +
+
+ +
+

SHIP COMMANDS:

+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ MUTE: + +
+ + + + + +
+
+
+
+ + + + + diff --git a/SinglePlayer - Games/Earth_Guardian/package.json b/SinglePlayer - Games/Earth_Guardian/package.json new file mode 100644 index 00000000..100e136a --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/package.json @@ -0,0 +1,25 @@ +{ + "name": "earth-guardian", + "version": "1.2.0", + "description": "Remake of old popular space-shooter type of games.", + "main": "mainGlavno.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "remake", + "game", + "vanilla", + "js", + "space", + "shooter", + "8bit", + "classic" + ], + "author": "Pujan-sarkar", + "license": "ISC", + "bugs": { + "url": "https://github.com/Pujan-sarkar" + } + +} diff --git a/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.eot b/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.eot new file mode 100644 index 00000000..70508eba Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.eot differ diff --git a/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.ttf b/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.ttf new file mode 100644 index 00000000..7015564a Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.ttf differ diff --git a/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.woff b/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.woff new file mode 100644 index 00000000..b648a3ee Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.woff differ diff --git a/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.woff2 b/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.woff2 new file mode 100644 index 00000000..9fa21125 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/static/fonts/MaterialIcons-Regular.woff2 differ diff --git a/SinglePlayer - Games/Earth_Guardian/static/fonts/PressStart2P.ttf b/SinglePlayer - Games/Earth_Guardian/static/fonts/PressStart2P.ttf new file mode 100644 index 00000000..98044e93 Binary files /dev/null and b/SinglePlayer - Games/Earth_Guardian/static/fonts/PressStart2P.ttf differ diff --git a/SinglePlayer - Games/Earth_Guardian/static/js/lib/assets.js b/SinglePlayer - Games/Earth_Guardian/static/js/lib/assets.js new file mode 100644 index 00000000..d22f8efc --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/js/lib/assets.js @@ -0,0 +1,99 @@ +// Import modules +import {sfx} from "../main.js"; +import {endPath} from "./path.js"; + +// Graphical assets +export class Graphics{ + constructor() { + this.bg = new Image(); + this.ship = new Image(); + this.enemy = new Image(); + this.missile = new Image(); + this.explosion = new Image(); + this.timerImage = new Image(); + this.healthImage = new Image(); + this.shieldImage = new Image(); + this.enemyMissile = new Image(); + this.engineFlames = new Image(); + + this.bg.src = `${endPath}/assets/images/background.png`; + this.ship.src = `${endPath}/assets/images/player.png`; + this.enemy.src = `${endPath}/assets/images/enemy.png`; + this.missile.src = `${endPath}/assets/images/playerRocket.png`; + this.explosion.src = `${endPath}/assets/images/3.png`; + this.healthImage.src = `${endPath}/assets/images/firstAid.png`; + this.enemyMissile.src = `${endPath}/assets/images/enemyRocket.png`; + this.timerImage.src = `${endPath}/assets/images/timer.png`; + this.shieldImage.src = `${endPath}/assets/images/shieldImage.png`; + this.engineFlames.src = `${endPath}/assets/images/engineFlameNormal.png`; + } +} + +// Sound assets +export class Sfx { + constructor() { + this.music = new Audio(); + this.goVoice = new Audio(); + this.alarmSound = new Audio(); + this.enemyShooting = new Audio(); + this.playerShooting = new Audio(); + this.explosionSound = new Audio(); + this.restorationSound = new Audio(); + + this.playerShooting.src = `${endPath}/assets/audio/weapon_player.wav`; + this.explosionSound.src = `${endPath}/assets/audio/explosion_enemy.wav`; + this.enemyShooting.src = `${endPath}/assets/audio/laser1.ogg`; + this.music.src = `${endPath}/assets/audio/music_background.wav`; + this.restorationSound.src = `${endPath}/assets/audio/powerUp11.ogg`; + this.alarmSound.src = `${endPath}/assets/audio/alarm.wav`; + this.goVoice.src =`${endPath}/assets/audio/go.ogg`; + + this.sfxVolume = 0.3; + this.musicVolume = 0.4; + this.music.loop = true; + this.soundOff = false; + this.controllingVolume = false; + + this.playerShooting.volume = this.sfxVolume; + this.explosionSound.volume = this.sfxVolume; + this.enemyShooting.volume = this.sfxVolume; + this.music.volume = this.musicVolume; + this.restorationSound.volume = this.sfxVolume; + this.alarmSound.volume = this.sfxVolume; + this.goVoice.volume = 0.1; + + // Menu sounds + this.menuMove = new Audio(); + this.menuSelected = new Audio(); + this.menuMove.src = `${endPath}/assets/audio/menu hover.wav` + this.menuSelected.src = `${endPath}/assets/audio/menu select.wav`; + } + + // Toggle all music / sound on and off + toggleMusic() { + this.soundOff = !this.soundOff; + if(this.soundOff) { + this.sfxVolume = 0; + this.musicVolume = 0; + this.menuSelected.volume = 0; + this.menuMove.volume = 0; + } else { + this.playerShooting.volume = this.sfxVolume; + this.explosionSound.volume = this.sfxVolume; + this.enemyShooting.volume = this.sfxVolume; + this.music.volume = this.musicVolume; + this.restorationSound.volume = this.sfxVolume; + this.volume = this.sfxVolume; + this.menuSelected.volume = 1; + this.menuMove.volume = 1; + } + } + + // Play restoration sound effect when player picks up health, shield or timer. + restorationEffect() { + this.restorationSound.currentTime = 0; + this.restorationSound.play(); + } +} + +export const graphics = new Graphics(); diff --git a/SinglePlayer - Games/Earth_Guardian/static/js/lib/enemies.js b/SinglePlayer - Games/Earth_Guardian/static/js/lib/enemies.js new file mode 100644 index 00000000..3cf6d408 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/js/lib/enemies.js @@ -0,0 +1,41 @@ +// Import modules +import {game} from "./game.js"; +import {graphics, sfx} from "../main.js"; + +export class Enemies { + constructor() { + this.speed = 1; + this.spawnDistance = 1200; + this.enemiesArray = []; + this.ammo = []; + this.spawned = false; + this.shootingSpeed = 700; + this.enemiesShootingInterval; + } + + spawnEnemies() { + this.enemiesArray.push({ + x: game.cWidth, + y: Math.floor(Math.random() * ( (game.maxHeight - graphics.enemyShip.height) - game.minHeight) + game.minHeight) + }) + } + + shoot() { + if(this.spawned) { + let minShip = 0; + let maxShip = this.enemiesArray.length - 1; + let randomShip = Math.floor(Math.random() * (maxShip - minShip + 1)) + minShip; + + // Randomize + this.ammo.push({ + x: this.enemiesArray[randomShip].x - graphics.enemy.width, + y: this.enemiesArray[randomShip].y + (graphics.enemy.height / 2) + }) + + sfx.enemyShooting.currentTime = 0; + sfx.enemyShooting.play(); + } + } +} +export const enemies = new Enemies(); +enemies.enemiesShootingInterval = setInterval(enemies.shoot.bind(enemies), enemies.shootingSpeed); \ No newline at end of file diff --git a/SinglePlayer - Games/Earth_Guardian/static/js/lib/game.js b/SinglePlayer - Games/Earth_Guardian/static/js/lib/game.js new file mode 100644 index 00000000..34d95cfd --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/js/lib/game.js @@ -0,0 +1,416 @@ +// Import modules +import {player} from "./player.js"; +import {enemies} from "./enemies.js"; +import {sfx, powerups, startGame} from "../main.js"; +import {endPath} from "./path.js"; + + +export class Game { + constructor() { + // Game elements + this.canvas = document.querySelector("#canvas"); + this.displayKills = document.querySelector("#killCount"); + this.currentExp = document.querySelector("#currentExp"); + this.requiredExpText = document.querySelector("#requiredExp"); + this.levelBar = document.querySelector(".level-bar_fill"); + this.notificationText = document.querySelector(".notification"); + this.timerDisplay = document.querySelector("#timerDisplay"); + this.gameOver = document.querySelector(".game--over"); + this.ctx = this.canvas.getContext("2d"); + this.cWidth = this.canvas.width; + this.cHeight = this.canvas.height; + this.minHeight = 0; + this.maxHeight = 500; + + // On start values + this.requiredExp = 80; + this.score = 0; + this.startingTime; + this.endTime; + this.pausedTime; + this.timePassed; + this.init; + this.preGame; + this.isStarted = false; + + // Time + this.time = 30; + this.secondsLeft; + this.countdown; + this.currentTime; // Used for pausing / continuing game + + // Scores + this.highscore; + }; + + // Update kills and increase experience when player kills an enemy + updateKillcount() { + player.killCount++; + this.displayKills.textContent = player.killCount; + + player.exp += 20; + this.currentExp.textContent = player.exp; + + // When required exp is met, level up + if(player.exp === this.requiredExp) { + player.exp = 0; + this.requiredExp = this.requiredExp * 2; + this.currentExp.textContent = player.exp; + this.requiredExpText.textContent = this.requiredExp + " XP"; + player.levelUp(); + } + let levelExp = (player.exp / this.requiredExp) * 100; + this.levelBar.style.width = `${levelExp}%`; + }; + + // Increase game's difficulty as time goes by + increaseDifficulty() { + // Get how much time has passed since the game has started + this.endTime = new Date(); + this.timePassed = Math.floor((this.endTime - this.startingTime) / 1000); + + if(this.timePassed === 30) { + // Clear the interval for enemies shooting + clearInterval(enemies.enemiesShootingInterval); + + // Increase enemies shooting speed + enemies.speed = 2; + enemies.shootingSpeed = 600; + + // After speed update, enable interval again + enemies.enemiesShootingInterval = setInterval(enemies.shoot.bind(enemies), enemies.shootingSpeed); + + this.displayNotification("They are speeding up!"); + } else if (this.timePassed === 60) { + // Clear the interval for enemies shooting + clearInterval(enemies.enemiesShootingInterval); + + // Increase enemies shooting speed + enemies.speed = 4; + enemies.shootingSpeed = 400; + + // After speed update, enable interval again + enemies.enemiesShootingInterval = setInterval(enemies.shoot.bind(enemies), enemies.shootingSpeed); + + this.displayNotification("They are speeding up again!!"); + } else if (this.timePassed === 90) { + // Clear the interval for enemies shooting + clearInterval(enemies.enemiesShootingInterval); + + // Increase enemies shooting speed + enemies.speed = 8; + enemies.shootingSpeed = 300; + + // After speed update, enable interval again + enemies.enemiesShootingInterval = setInterval(enemies.shoot.bind(enemies), enemies.shootingSpeed); + this.displayNotification("Oh my god, will we make it?!"); + } else if (this.timePassed === 120) { + // Clear the interval for enemies shooting + clearInterval(enemies.enemiesShootingInterval); + + // Increase enemies shooting speed + enemies.speed = 10; + enemies.shootingSpeed = 200; + + // After speed update, enable interval again + enemies.enemiesShootingInterval = setInterval(enemies.shoot.bind(enemies), enemies.shootingSpeed); + + this.displayNotification("They are way too fast!!!"); + } + }; + + // Display notifications + displayNotification(message) { + this.notificationText.classList.add("activeNotification"); + + this.notificationText.innerHTML = `warning

${message}

`; + + // Remove the notification active class after 4 seconds + setTimeout(() => { + this.notificationText.classList.remove("activeNotification"); + }, 3000); + } + + // Game's timer + timer(secondsLeft){ + clearInterval(this.countdown); + + const now = Date.now(); + const then = now + this.time * 1000; + this.displayTimeLeft(this.time); + + this.countdown = setInterval(() =>{ + this.secondsLeft = Math.round((then - Date.now()) / 1000); + + // Show a warning for few seconds left + if(this.secondsLeft === 10) { + this.timerDisplay.classList.add("timeLow"); + this.displayNotification("You don't have much time left!"); + } else if (this.secondsLeft < 0) { + // If the timer ran out, end the game + clearInterval(this.countdown); + clearInterval(game); + this.endgame(this.secondsLeft); + return; + } + this.currentTime = this.secondsLeft; + this.time = this.currentTime; + + this.displayTimeLeft(this.secondsLeft); + }, 1000) + }; + + // Display time left + displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainder = seconds % 60; + this.timerDisplay.textContent = `${minutes}:${remainder < 10 ? 0 : ""}${remainder}`; + }; + + // Add playtime when user picks up timer + addPlaytime() { + // First remove the class before re-adding it + document.querySelector(".time").classList.remove("timeShake"); + + // Random time awarded for picking up the time renewal + let minTime = 8; + let maxTime = 12; + minTime = Math.ceil(minTime); + maxTime = Math.floor(maxTime); + let spawnTime = Math.floor(Math.random() * (maxTime - minTime + 1)) + minTime; + + this.time = this.secondsLeft + spawnTime; + this.timer(this.time); + + // Display message and add shaking to the time + document.querySelector(".time").classList.add("timeShake"); + this.timerDisplay.classList.remove("timeLow"); + this.displayNotification("Added play time!"); + }; + + // New score + newScore(finalScore) { + const inputMenu = document.querySelector(".newHighscore-input"); + const scoreText = document.querySelector("#scoreText"); + const inputField = document.querySelector("#playerName-input"); + const saveBtn = document.querySelector("#savePlayer"); + inputMenu.style.display = "flex"; + + // Display different message according to the score + if(finalScore > this.highscore) { + scoreText.innerHTML = `

NEW HIGHSCORE !!!

`; + } else { + scoreText.innerHTML = `

NOT BAD

`; + } + + // Save player's name and score to local storage + saveBtn.addEventListener("click", () => { + const value = inputField.value; + const results = { + name: value, + score: finalScore + } + let highscoresArray = JSON.parse(localStorage.getItem("highscoresList")) || []; + highscoresArray.push(results); + localStorage.setItem("highscoresList", JSON.stringify(highscoresArray)); + + // Hide the menu + inputMenu.style.display = "none"; + }) + }; + + // Get saved highscore in local storage + savedHighscore() { + this.highscore = localStorage.getItem("highscore"); + }; + + // New Highscore + newHighscore() { + const emptyWarningText = document.querySelector(".emptyWarning-text"); + + // Display notification that a new highscore was set! + emptyWarningText.textContent = "NEW HIGHSCORE !!!"; + emptyWarningText.classList.add("emptyWarning-Highscore"); + + // Remove the notification + setTimeout(() => { + emptyWarningText.classList.remove("emptyWarning-Highscore"); + }, 2000); + }; + + // Clear intervals + clearGameIntervals () { + clearInterval(enemies.enemiesShootingInterval); // Enemies module + clearInterval(player.graduallyRestoreInterval); // Player module + clearInterval(this.countdown); + clearInterval(powerups.timerInterval); + clearInterval(powerups.healthInterval); + clearInterval(powerups.shieldInterval); + + clearInterval(this.countdown); + clearInterval(player.graduallyRestoreInterval); // Player module + clearInterval(enemies.enemiesShootingInterval); // Enemies module + clearInterval(powerups.timerInterval); + clearInterval(powerups.healthInterval); + clearInterval(powerups.shieldInterval); + + } + + // End the game + endgame(secondsLeft){ + // Disable the intervals + this.clearGameIntervals(); + + // End measuring time + this.endTime = new Date(); + + // Divide the difference to get the starting time + let timeDifference = (this.endTime - this.startingTime) / 1000; + let timePlayed = Math.floor(timeDifference); + + // Multiplie the ending score by the time played divided by 100, which will result in a multiplier in the form of, for example x0.5 - x3, based on time played + let multiplier = timePlayed / 100; + this.score = player.killCount * 100; + let finalScore = this.score + (this.score * multiplier); + + // Stop movements + this.isStarted = false; + + // Disable enemies + enemies.spawned = false; + + // Destroy all powerups + powerups.healthRenew.length = 0; + powerups.shieldRenew.length = 0; + powerups.timeRenew.length = 0; + + // Game Over / Game finished menu + this.gameOver.style.display = "block"; + + // If player was killed. + if(player.hp === 0){ + displayImage.src = `${endPath}/assets/images/tombstone.png`; + message.textContent = "At least you tried..."; + } + + // If the time is up + if(secondsLeft <= 0) { + message.textContent = "Time's up !"; + } + + // Play game-ending music (currently plays ontop of the game music ?_?) + sfx.music.src = `${endPath}/assets/audio/Fallen in Battle.mp3`; + sfx.music.volume = 0.2; + sfx.music.play(); + sfx.music.loop = false; + + // Score and Highscore + document.querySelector("#totalKills").textContent = player.killCount; + document.querySelector("#multiplier").textContent = "x" + multiplier; + document.querySelector("#finalScore").textContent = finalScore; + document.querySelector("#highscore").textContent = this.highscore; + + // Display the menu with an input to enter player's name + this.newScore(finalScore); + + // If the new final score is bigger than the current highscore, save it and display notification + if(finalScore > this.highscore) { + localStorage.setItem("highscore", finalScore); + document.querySelector("#highscore").textContent = localStorage.getItem("highscore"); + this.newHighscore(); + } + }; + + // Restart game + restartGame() { + // Clear the intervals + this.clearGameIntervals(); + clearInterval(this.init); + + // Reset game parameters + this.isStarted = false; + + // Reset timer + this.timerDisplay.classList.remove("timeLow"); // In case user died while time was low. + this.timerDisplay.textContent = "0:30"; + + // Reset the colored blocks + player.blocks.forEach(block => { + block.classList.remove("greenPhase") + block.classList.remove("yellowPhase") + block.classList.remove("redPhase") + }); + + // Destroy all enemies, healths, timers, shields and reset them to 0. + enemies.enemiesArray.splice(0, enemies.enemiesArray.length); + enemies.ammo.splice(0, enemies.ammo.length); + + // Delete all existing items in the arrays + powerups.healthRenew.length = 0; + powerups.shieldRenew.length = 0; + powerups.timeRenew.length = 0; + + player.ammo.splice(0, player.ammo.length); + player.map = {}; + + // Reset the kill count text. + player.killCount = 0; + this.displayKills.textContent = player.killCount; + + // Reset pregame countdown and hide game over menu + this.preGame = 3; + this.gameOver.style.display = "none"; + this.time = 30; + + // Reset player's (ship's) parameters + player.d = ""; + player.hp = 100; + player.shield = 100; + player.overheat = 0; + player.boost = 100 + player.x = 50; + player.y = 250; + player.speed = 5; + player.increasedSpeed = 5; + player.heat = -1; + player.dynamicRestoration = 400; + player.shieldDestroyed = false; + player.exp = 0; + player.level = 1; + player.currentLevel.textContent = player.level; + + // Reset level and experience + this.requiredExp = 80; + this.requiredExpText.textContent = this.requiredExp + " XP"; + this.currentExp.textContent = player.exp; + + let levelExp = (player.exp / this.requiredExp) * 100; + this.levelBar.style.width = `${levelExp}%`; + + // Restart current time which affets difficulty + this.startingTime = new Date(); + this.increaseDifficulty(); + + // Reset enemies data + enemies.spawned = false; + enemies.speed = 1; + enemies.shootingSpeed = 700; + + // Reset health and shield text display + player.healthText.textContent = player.hp + "%"; + player.shieldText.textContent = player.shield + "%"; + + // Clear input field at game over menu + const inputField = document.querySelector("#playerName-input"); + inputField.value = ""; + + // Set restoration and enemy shooting intervals again. + player.graduallyRestoreInterval = setInterval(player.graduallyRestore.bind(player), player.dynamicRestoration); + enemies.enemiesShootingInterval = setInterval(enemies.shoot.bind(enemies), enemies.shootingSpeed); + + // Run the game again + startGame(); + } +} +export const game = new Game(); +game.savedHighscore(); diff --git a/SinglePlayer - Games/Earth_Guardian/static/js/lib/menus.js b/SinglePlayer - Games/Earth_Guardian/static/js/lib/menus.js new file mode 100644 index 00000000..426562b4 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/js/lib/menus.js @@ -0,0 +1,193 @@ +// Import Modules +import {player} from "./player.js"; +import {game} from "./game.js"; +import {sfx} from "../main.js"; + +const menu = document.querySelector(".menu"); +const pauseMenu = document.querySelector(".pause--menu"); +const gameOver = document.querySelector(".game--over"); +const exitGameBtn = document.querySelectorAll(".exitGame"); +const highscoresListMenu = document.querySelector(".highscoresList-menu"); +const highscoreList = document.querySelector("#highscoreList"); +const orderedList = document.querySelector("#theList"); +const clearListBtn = document.querySelector("#clearList"); +const closeHighscores = document.querySelector("#closeHighscores") +const shipControls = document.querySelectorAll(`.settings-menu input[type="text"]`); +const displayCommand = document.querySelectorAll(".displayCommand"); +const mainMenuButtons = document.querySelectorAll(".main-menu_buttons"); +const soundControl = document.querySelectorAll(".soundControl"); + +// About menu +const aboutMenu = document.querySelector(".aboutMenu"); +let aboutShowed = false; +function displayAbout() { + if(!aboutShowed) { + aboutMenu.style.display = "block"; + aboutShowed = !aboutShowed; + } else { + aboutMenu.style.display = "none"; + aboutShowed = !aboutShowed; + } +} + +// Highscores menu +function displayHighscores() { + highscoresListMenu.style.display = "block"; + const getHighscores = JSON.parse(localStorage.getItem("highscoresList")); + const noHighscoresNote = document.querySelector("#noHighscores"); + + if(getHighscores.length === 0) { + noHighscoresNote.style.display = "block"; + } else { + noHighscoresNote.style.display = "none"; + } + + // Sort the highscores from top to bottom + getHighscores.sort((a,b) => (a.score > b.score) ? -1 : 1); + + // Create a new list element for each highscore. + getHighscores.forEach(highscore => { + const li = document.createElement("li"); + li.classList.add("highscoreList-items"); + li.innerHTML = `${highscore.name}${highscore.score}`; + orderedList.appendChild(li); + + if(orderedList.childNodes.length > 0) { + clearListBtn.style.display = "inline-block"; + } + }) +} + +// Clear highscores list +function clearHighscores() { + localStorage.removeItem("highscoresList"); + localStorage.removeItem("highscore"); + + // While there is a first child in the ordered list, remove the first child. + while(orderedList.firstChild) { + orderedList.removeChild(orderedList.firstChild); + } +} + +// Close the highscores menu +function closeHighscoresMenu() { + highscoresListMenu.style.display = "none"; + + // While there is a first child in the ordered list, remove the first child. + while(orderedList.firstChild) { + orderedList.removeChild(orderedList.firstChild); + } +} + +// Settings menu (in-game) +const volumeControls = document.querySelectorAll(`.settings-menu input[type="range"]`); +const displayChange = document.querySelectorAll(".displayChange"); + +function controlVolume() { + if(sfx.controllingVolume) { + displayChange.forEach(change => { + if(this.name === change.id) { + change.textContent = this.value + "%"; + } + + // If input name is SFX, edit sfx, otherwise edit music's volume. + if(this.name === "sfx") { + sfx.sfxVolume = this.value / 100; + sfx.playerShooting.volume = sfx.sfxVolume; + sfx.explosionSound.volume = sfx.sfxVolume; + sfx.enemyShooting.volume = sfx.sfxVolume; + sfx.restorationSound.volume = sfx.sfxVolume; + sfx.alarmSound.volume = sfx.sfxVolume;; + } else if(this.name === "bgMusic") { + sfx.musicVolume = this.value / 100; + sfx.music.volume = sfx.musicVolume; + } + }) + } +} + +// Change ship's controls +function changeControls(e) { + e = e || event; + const key = e.key; + const code = e.code; + + if(code === "Space") { + this.value = code; + } else if (code !== key) { + this.value = key; + } + + displayCommand.forEach(command => { + // Display the command text + if(this.name === command.id) { + command.textContent = this.value || key; + } + + // Change the player's commands + if(this.name === "left") { + player.left = e.keyCode; + } else if(this.name === "up") { + player.up = e.keyCode; + } else if(this.name === "right") { + player.right = e.keyCode; + } else if(this.name === "down") { + player.down = e.keyCode; + } else if(this.name === "shooting") { + player.shooting = e.keyCode; + } else if(this.name === "useBooster") { + player.useBooster = e.keyCode; + } + }) +} + +// Hover on menues +mainMenuButtons.forEach(button => button.addEventListener("mouseover", ()=>{ + sfx.menuMove.currentTime = 0; + sfx.menuMove.play(); +})) + +// Select menues +mainMenuButtons.forEach(button => button.addEventListener("click", ()=>{ + sfx.menuSelected.currentTime = 0; + sfx.menuSelected.play(); +})) + +// Toggle sfx / music on and off. +soundControl.forEach(control => control.addEventListener("click", ()=>{ + sfx.toggleMusic(); + if(sfx.soundOff) { + control.src = `../assets/images/soundOff.png`; + } else { + control.src = `../assets/images/soundOn.png`; + } +})); + +// Volume control event listeners +volumeControls.forEach(control => control.addEventListener("mousedown",() => { + sfx.controllingVolume = true +})); +volumeControls.forEach(control => control.addEventListener("mouseup",() => { + sfx.controllingVolume = false +})); +volumeControls.forEach(control => control.addEventListener("change", controlVolume)); +volumeControls.forEach(control => control.addEventListener("mousemove", controlVolume)); + +// Menus event listeners +clearListBtn.addEventListener("click", clearHighscores); +closeHighscores.addEventListener("click", closeHighscoresMenu); +highscoreList.addEventListener("click", displayHighscores); +document.getElementById("about").addEventListener("click", displayAbout); +document.getElementById("closeAbout").addEventListener("click", displayAbout); +document.querySelector("#settings").addEventListener("click", ()=>{ + document.querySelector(".settings-menu").style.display = "flex"; +}) +document.querySelector("#goBack").addEventListener("click", ()=>{ + document.querySelector(".settings-menu").style.display = "none"; +}) + +// Ship controls event listeners +shipControls.forEach(control => control.addEventListener("keyup", changeControls)); +shipControls.forEach(control => control.addEventListener("click", function(){ + this.value = "" +})); diff --git a/SinglePlayer - Games/Earth_Guardian/static/js/lib/path.js b/SinglePlayer - Games/Earth_Guardian/static/js/lib/path.js new file mode 100644 index 00000000..086eb147 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/js/lib/path.js @@ -0,0 +1,7 @@ +// Export path to files (to solve issues with GitHub pages hosting that occur sometimes) +const fullPath = window.location.pathname; +const splitPath = fullPath.split('/'); +if (splitPath[splitPath.length - 1] == 'index.html') { + splitPath.pop(); +} +export const endPath = splitPath.length > 2 ? splitPath.join('/') : ''; \ No newline at end of file diff --git a/SinglePlayer - Games/Earth_Guardian/static/js/lib/player.js b/SinglePlayer - Games/Earth_Guardian/static/js/lib/player.js new file mode 100644 index 00000000..1f01a1ff --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/js/lib/player.js @@ -0,0 +1,371 @@ +import {game} from "./game.js"; +import {enemies} from "./enemies.js"; +import {graphics, sfx} from "../main.js"; + +const emptyWarningText = document.querySelector(".emptyWarning-text"); + +export class Player { + constructor() { + this.d = null; // Direction + this.x = 50; + this.y = 250; + this.speed = 5; + this.hp = 100; + this.shield = 100; + this.overheat = 0; + this.booster = 100; + this.missileSpeed = 15; + this.increasedSpeed = 5; // Speed increased by level up + this.heat = -1; + + this.ammo = []; + + this.speedBooster = false; + this.isOverheated = false; + this.isSpaceDown = false; + this.shieldDestroyed = false; + + + // Player related elements + this.blocks = document.querySelectorAll(".overheat-bar_block"); + this.currentLevel = document.querySelector("#currentLevel"); + this.shieldText = document.querySelector("#shieldText"); + this.healthText = document.querySelector("#healthText"); + + // Player ship interval + this.graduallyRestoreInterval; + this.dynamicRestoration = 400; + + // Player's level + this.level = 1; + this.exp = 0; + this.killCount = 0; + + // Ship's default commands + this.left = 37; + this.right = 39; + this.up = 38; + this.down = 40; + this.shooting = 32; + this.useBooster = 16; + this.map = {}; + }; + + // Level up + levelUp() { + this.level++; + this.currentLevel.textContent = this.level; + this.shieldDestroyed = false; + + // Increase the movement and missile speed on level up + this.increasedSpeed++; + this.speed = this.increasedSpeed; + this.missileSpeed += 1; + + // Dynamic restoration (cooling) of weapons + if(this.dynamicRestoration >= 150) { + // First clear the current interval for player restoration + clearInterval(player.graduallyRestoreInterval); + + // Change the interval's speed + this.dynamicRestoration -= 50; + + // After that re-add the interval with the new updated speed now + player.graduallyRestoreInterval = setInterval(player.graduallyRestore.bind(player), player.dynamicRestoration); + } + + // Restore health and shield to the ship + if(this.hp <= 60) { + this.hp += 40; + } + + if(this.shield <= 80) { + this.shield += 20; + } + this.healthText.textContent = this.hp + "%"; + this.shieldText.textContent = this.shield + "%"; + + // Small animation to notify the player he's leveled up + document.querySelector("#levelText").classList.add("levelTextActive"); + + setTimeout(() => { + document.querySelector("#levelText").classList.remove("levelTextActive"); + }, 1500); + }; + + // Player movement + playerMovement (e) { + e = e || event; + if(game.isStarted) { + this.map[e.keyCode] = e.type === "keydown"; + if(this.map[this.left] && this.map[this.up] || this.map[this.left] && this.map[this.up] && this.map[this.shooting]) { + this.d = "UP_LEFT"; + } else if (this.map[this.left] && this.map[this.down] || this.map[this.left] && this.map[this.down] && this.map[this.shooting]) { + this.d = "DOWN_LEFT"; + } else if (this.map[this.left] || this.map[this.left] && this.map[this.shooting]) { + this.d = "LEFT"; + } else if(this.map[this.right] && this.map[this.up] || this.map[this.right] && this.map[this.up] && this.map[this.shooting]) { + this.d = "UP_RIGHT"; + } else if(this.map[this.right] && this.map[this.down] || this.map[this.right] && this.map[this.down] && this.map[this.shooting]) { + this.d = "DOWN_RIGHT"; + } else if(this.map[this.right] || this.map[this.right] && this.map[this.shooting]) { + this.d = "RIGHT"; + } else if(this.map[this.down] || this.map[this.down] && this.map[this.shooting]) { + this.d = "DOWN"; + } else if(this.map[this.up] || this.map[this.up] && this.map[this.shooting]) { + this.d = "UP"; + } + + // Player uses speed booster + if(this.map[this.useBooster] && this.d === "LEFT" + || this.map[this.useBooster] && this.d === "RIGHT"){ + if(this.booster > 0 && this.booster <= 100) { + this.speedBooster = true; + this.speed += 10; + + // Empty the booster + this.booster -= 2; + } + + // Disable the booster if it reaches 0 + if(this.booster <= 0) { + this.speedBooster = false; + this.speed = this.speed; + emptyWarningText.textContent = "BOOSTER EMPTY !"; + emptyWarningText.classList.add("emptyWarning-textActive"); + + // Play alarm sound + sfx.alarmSound.currentTime = 0; + sfx.alarmSound.play(); + + // Restore the booster to max + this.restoreBooster(); + } + } + } + }; + + // Clear the ship commands when player doesn't holds a key down + clearShipCommands() { + this.speed = this.increasedSpeed; + this.isSpaceDown = false; + this.speedBooster = false; + this.d = ""; + } + + // Shoot + shoot(e) { + e = e || event; + if(game.isStarted && !this.isOverheated) { + if(this.isSpaceDown) return; // End the function if user is already holding space + + if(e.keyCode === this.shooting) { + this.isSpaceDown = true; + if(this.level < 3) { + new Ammo(0, 0); + } else if (this.level >= 3 && this.level <= 5) { + new Ammo(0, 0) + new Ammo(0, 20); + } else if (this.level >= 5 && this.level <= 7) { + new Ammo(0, 0); + new Ammo(0, 20); + new Ammo(0, -20); + } else if(this.level >= 8) { + new Ammo(0, 0); + new Ammo(0, 40); + new Ammo(0, -40); + new Ammo(15, 60); + new Ammo(15, -60); + new Ammo(30, 80); + new Ammo(30, -80); + } + sfx.playerShooting.currentTime = 0; + sfx.playerShooting.play(); + this.overheating(); + + // Prevent default action if user sets shooting to be on alt, ctrl etc. + e.preventDefault(); + } + } + }; + + // Overheating + overheating() { + this.overheat = this.overheat + 10; + + // If player.overheat meter reaches max(100), stop the ship from shooting, when it starts cooling off enable shooting. + if(this.overheat === 100) { + this.isOverheated = true; + emptyWarningText.textContent = "OVERHEATED !"; + emptyWarningText.classList.add("emptyWarning-textActive"); + + // Play alarm sound + sfx.alarmSound.currentTime = 0; + sfx.alarmSound.play(); + this.coolOut(); + } else if (this.overheat > 0 && this.overheat < 100) { + this.isOverheated = false; + this.displayOverheating(); + } + }; + + // Display overheating by painting the blocks + displayOverheating() { + if(this.heat >= -1 && this.heat <= 10) { + this.heat++; + } + + // Cycle trough the blocks and add according classes. + if(this.heat >= 0 && this.heat <= 3) { + this.blocks[this.heat].classList.add("greenPhase"); + } else if(this.heat >= 4 && this.heat <= 6) { + this.blocks[this.heat].classList.add("yellowPhase"); + } else if(this.heat >= 7 && this.heat <= 10) { + this.blocks[this.heat].classList.add("redPhase"); + } + }; + + // Gradually restore guns heat and booster + graduallyRestore() { + if(this.overheat >= 10 && this.overheat <= 90) { + this.overheat = this.overheat - 10; + + // Re-color the blocks (remove classes) + if(this.heat >= 0 && this.heat <= 3) { + this.blocks[this.heat].classList.remove("greenPhase"); + this.heat--; + } else if (this.heat >= 4 && this.heat <= 6) { + this.blocks[this.heat].classList.remove("yellowPhase"); + this.heat--; + } else if(this.heat >= 7 && this.heat <= 10) { + this.blocks[this.heat].classList.remove("redPhase"); + this.heat--; + } + } + + // Restore ship's booster + if(this.booster >= 0 && this.booster <= 98) { + this.booster = this.booster + 2; + } + }; + + // When guns overheat (reach 100), wait 2 seconds and restore to 0. + coolOut() { + setTimeout(() => { + this.overheat = 0; + this.isOverheated = false; + emptyWarningText.classList.remove("emptyWarning-textActive"); + this.blocks.forEach(block => { + block.classList.remove("greenPhase") + block.classList.remove("yellowPhase") + block.classList.remove("redPhase") + }); + this.heat = -1; + }, 2000); + }; + + // Restore the booster to max (100) after 5 seconds after it is emptied. + restoreBooster() { + setTimeout(() => { + this.booster = 100; + this.speedBooster = true; + emptyWarningText.classList.remove("emptyWarning-textActive"); + }, 5000); + }; + + // If the player is hit by the enemies + playerHit() { + // Play explosion sound + sfx.explosionSound.currentTime = 0; + sfx.explosionSound.play(); + + // Destroy the alien ammo upon hit + for(let i = 0; i < enemies.ammo.length; i++) { + let enemyRockets = enemies.ammo[i]; + let enemyRocketsIndex = enemies.ammo.indexOf(enemyRockets); + if(enemyRocketsIndex > -1) { + enemies.ammo.splice(enemyRocketsIndex, 1); + } + } + + // Decrease shield + this.decreaseShield(); + + // Decrease ship HP + this.decreaseShipHP(); + + if(this.hp === 0) { + game.endgame(); + } + }; + + // Restore the ship's HP + restoreShipHP() { + // If ship's already on max health dont do anything + if(this.hp === 100) { + this.hp = this.hp; + } else{ + // Restore ships HP and display a notification. + this.hp = this.hp + 20; + this.healthText.textContent = this.hp+"%"; + game.displayNotification("Restored health!"); + } + }; + + // Decrease the ship's HP on hit + decreaseShipHP() { + if(this.hp >= 20 && this.hp <= 100 && this.shieldDestroyed){ + this.hp = this.hp - 20; + this.healthText.textContent = this.hp+"%"; + } else if(this.hp === 0) { + game.endgame(); + } + }; + + // Restoring the ship's shield + restoreShield() { + if(this.shield === 100) { + this.shieldDestroyed = false; + this.shield = this.shield; + } else if(this.shield <= 80){ + // Enable shield on player's ship + this.shieldDestroyed = false; + + // Restore shield points and display a notification + this.shield = this.shield + 20; + this.shieldText.textContent = this.shield+"%"; + game.displayNotification("Restored shield!"); + } + }; + + // Decrease the ship's shield on hit + decreaseShield() { + // Decrease shield + if(this.shield >= 20 && this.shield <= 100) { + this.shield = this.shield - 20; + this.shieldText.textContent = this.shield+"%"; + } else if(this.shield < 20) { + // If shield is at 0 (at 20% shield gets deducted 20, so it goes straight to 0), mark it as destroyed + this.shieldDestroyed = true; + } + } +}; + +class Ammo { + constructor(ammoX, ammoY) { + player.ammo.push({ + x: player.x + graphics.ship.width + ammoX, + y: player.y + (graphics.ship.height / 2 ) + ammoY + }) + } +}; + +export const player = new Player(); + +// Set the restoration interval on load +player.graduallyRestoreInterval = setInterval(player.graduallyRestore.bind(player), player.dynamicRestoration); + +// Bind event listeners +onkeydown = onkeyup = player.playerMovement.bind(player); +document.addEventListener("keydown", player.shoot.bind(player)); +document.addEventListener("keyup", player.clearShipCommands.bind(player)); \ No newline at end of file diff --git a/SinglePlayer - Games/Earth_Guardian/static/js/lib/powerups.js b/SinglePlayer - Games/Earth_Guardian/static/js/lib/powerups.js new file mode 100644 index 00000000..df2abd32 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/js/lib/powerups.js @@ -0,0 +1,61 @@ +// Import modules +import {game} from "./game.js"; +import {graphics} from "./assets.js"; + +export class Powerups{ + constructor() { + this.healthRenew = []; + this.healthRenew[0] = { + x: game.cWidth, + y: Math.floor(Math.random() * ( (game.maxHeight - graphics.healthImage) - game.minHeight) + game.minHeight) + } + this.shieldRenew = []; + this.shieldRenew[0] = { + x: game.cWidth, + y: Math.floor(Math.random() * ( (game.maxHeight - graphics.shieldImage) - game.minHeight) + game.minHeight) + } + this.timeRenew = []; + this.timeRenew[0] = { + x: game.cWidth, + y: Math.floor(Math.random() * ( (game.maxHeight - graphics.timerImage) - game.minHeight) + game.minHeight) + } + + // Intervals + this.healthInterval = null; + this.shieldInterval = null; + this.timerInterval = null; + } + + // Spawn health restoration every 20 seconds + healthRenewFunction() { + this.healthInterval = setInterval(() => { + this.healthRenew.push({ + x: game.cWidth, + y: Math.floor(Math.random() * (game.maxHeight - graphics.healthImage.height) - game.minHeight) + game.minHeight + }) + console.log("Pushed health") + }, 20 * 1000); + } + + // Spawn shield restoration every 60 seconds + shieldRenewFunction() { + this.shieldInterval = setInterval(() => { + this.shieldRenew.push({ + x: game.cWidth, + y: Math.floor(Math.random() * (game.maxHeight - graphics.shieldImage.height) - game.minHeight) + game.minHeight + }) + console.log("Pushed shield") + }, 30 * 1000); + } + + // Spawn a timer to add more playing time every 10 to 15 seconds + timeRenewFunction() { + this.timerInterval = setInterval(() => { + this.timeRenew.push({ + x: game.cWidth, + y: Math.floor(Math.random() * (game.maxHeight - graphics.timerImage.height) - game.minHeight) + game.minHeight + }); + console.log("Pushed time") + }, 10 * 1000); + } +} \ No newline at end of file diff --git a/SinglePlayer - Games/Earth_Guardian/static/js/main.js b/SinglePlayer - Games/Earth_Guardian/static/js/main.js new file mode 100644 index 00000000..7518e52d --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/js/main.js @@ -0,0 +1,470 @@ +// Import modules +import * as menus from "./lib/menus.js"; +import {enemies} from "./lib/enemies.js"; +import {player} from "./lib/player.js"; +import {game} from "./lib/game.js"; +import {Graphics, Sfx} from "./lib/assets.js"; +import {Powerups} from "./lib/powerups.js"; +import {endPath} from "./lib/path.js"; + +// Export single instances +export const graphics = new Graphics(); +export const powerups = new Powerups(); +export const sfx = new Sfx(); + + +// Elements +const menu = document.querySelector(".menu"); +const pauseMenu = document.querySelector(".pause--menu"); +const shieldContainer = document.querySelector(".shield-container"); +const healthContainer = document.querySelector(".health-container"); +const overheatContainer = document.querySelector(".overheat-container"); + +// Load game +function loadGame() { + // Play loading music + sfx.music.src = `${endPath}/assets/audio/loading.wav`; + sfx.music.play(); + + // Hide the main menu + const mainMenu = document.querySelector(".main-menu"); + mainMenu.style.display = "none"; + + // Display loading container + const loadingContainer = document.querySelector(".loading"); + loadingContainer.style.display = "flex"; + + // Loading bar + let loadingBarPercent = 0; + const loadingBar = document.querySelector(".loading-bar_fill"); + const loadingBarText = document.querySelector(".loading-text"); + + let load = setInterval(()=>{ + if(loadingBarPercent < 100) { + loadingBarPercent++; + } + loadingBarText.textContent = loadingBarPercent+"%"; + loadingBar.style.width = `${loadingBarPercent}%`; + + if(loadingBarPercent === 100) { + setTimeout(()=> loadingContainer.style.display = "none", 500); + startGame(); + clearInterval(load); + } + }, 50) +} + +// Start the game +export function startGame() { + setTimeout(() => { + // Display the MENU/SCORE panel + menu.style.display = "flex"; + + // Pre-game countdown + const preGameCountdown = document.querySelector(".countdown"); + game.preGame = 3; + preGameCountdown.textContent = "3"; + + // Display elements + setTimeout(() => { + menu.classList.add("menuActive"); + healthContainer.style.display = "block"; + shieldContainer.style.display = "block"; + overheatContainer.style.display = "flex"; + preGameCountdown.style.display = "block"; + }, 500); + + // Pre-game countdown - 3 seconds then GO ! + const preGameCountdownInterval = setInterval(()=>{ + game.preGame--; + preGameCountdown.textContent = game.preGame; + if(game.preGame === 0) { + // Clear any existing items in the health, shield, time renew arrays + powerups.healthRenew.length = 0; + powerups.shieldRenew.length = 0; + powerups.timeRenew.length = 0; + + // Initiate functions for health, shield and time renew as the game starts + powerups.healthRenewFunction(); + powerups.shieldRenewFunction(); + powerups.timeRenewFunction(); + console.log("Pushed items") + + sfx.goVoice.play(); + preGameCountdown.textContent = "GO !"; + setTimeout(()=> preGameCountdown.style.display = "none", 250) + + // Activate enemies and ship movement. + game.isStarted = true; + + // Enemies shoot every 2 seconds + enemies.spawned = true; + + // Start the timer countdown untill boss spawns + game.timer(game.time); + + // Start measuring played time + game.startingTime = new Date(); + + clearInterval(preGameCountdownInterval); + } + }, 1000) + + // Play background music + sfx.music.src = `${endPath}/assets/audio/Mecha Collection.mp3`; + sfx.music.volume = 0.2; + sfx.music.play(); + + // Run the game + game.init = setInterval(draw, 1000 / 60); + }, 500); +} + +// Game +function draw() { + // Display the canvas and paint the background + game.canvas.style.display = "block"; + game.ctx.drawImage(graphics.bg, 0,0); + + // Check if the game started + if(game.isStarted) { + for(let i = 0; i < enemies.enemiesArray.length; i++){ + // Draw a enemy + game.ctx.drawImage(graphics.enemy, enemies.enemiesArray[i].x, enemies.enemiesArray[i].y); + + enemies.enemiesArray[i].x -= enemies.speed; + + if(enemies.enemiesArray[i].x === enemies.spawnDistance) { + enemies.enemiesArray.push({ + x: game.cWidth, + y: Math.floor(Math.random() * ( (game.maxHeight-graphics.enemy.height) - game.minHeight) + game.minHeight) + }) + } + + // If spaceship and enemy colide + if(player.x + graphics.ship.width >= enemies.enemiesArray[i].x + && player.x <= enemies.enemiesArray[i].x + graphics.enemy.width + && player.y + graphics.ship.height >= enemies.enemiesArray[i].y + && player.y <= enemies.enemiesArray[i].y + graphics.enemy.height) { + // Draw explosion at those coords. + game.ctx.drawImage(graphics.explosion, enemies.enemiesArray[i].x - graphics.enemy.width, enemies.enemiesArray[i].y - graphics.enemy.height); + + // Delete the enemy from screen. + enemies.enemiesArray.splice(i, 1); + + // Deduct shield on hit + player.decreaseShield(); + + // Deduct HP on hit. + player.decreaseShipHP(); + + // Update the kill count, thus upating the score + game.updateKillcount(); + + sfx.explosionSound.currentTime = 0; + sfx.explosionSound.play(); + + // If spaceship HP reaches 0, end game. + if(player.hp === 0) { + clearInterval(game.init); + game.endgame(); + } + } else if(enemies.enemiesArray[i].x + graphics.enemy.width < 0) { + // Remove the alien space ship from the enemies array. + enemies.enemiesArray.splice(i, 1); + } + } + + // Create a new enemy if all enemies on screen are destroyed. + if(enemies.enemiesArray.length === 0) { + enemies.enemiesArray.push({ + x: game.cWidth, + y: Math.floor(Math.random() * ( (game.maxHeight-graphics.enemy.height) - game.minHeight) + game.minHeight) + }) + } + } + + /* ============================================================================= */ + + // PLAYER ROCKETS + if(game.isStarted){ + for(let j = 0; j < player.ammo.length; j++) { + // game.ctx.drawImage(graphics.missile, player.ammo[j].x, player.ammo[j].y); + + game.ctx.fillRect(player.ammo[j].x, player.ammo[j].y, 10, 10) + game.ctx.fillStyle = "#FFD600"; + + player.ammo[j].x += player.missileSpeed; + + const hitEnemy = enemies.enemiesArray.find(e => { + return player.ammo[j].x >= e.x + && player.ammo[j].x <= e.x + graphics.enemy.width + && player.ammo[j].y >= e.y + && player.ammo[j].y <= e.y + graphics.enemy.height + }) + + // Ammo colides enemy + if (hitEnemy) { + game.ctx.drawImage(graphics.explosion, hitEnemy.x - graphics.enemy.width, hitEnemy.y - graphics.enemy.height); + + // Remove the missiles + player.ammo.splice(j, 1); + + // Remove the enemy from screen + let enemiesArrayIndex = enemies.enemiesArray.indexOf(hitEnemy); + if(enemiesArrayIndex > -1) { + enemies.enemiesArray.splice(enemiesArrayIndex, 1) + } + sfx.explosionSound.play(); + sfx.explosionSound.currentTime = 0; + + // Update the kill count, thus updating the score + game.updateKillcount(); + } else if (player.ammo[j].x > game.cWidth) { // If player's ammo goes past canvas width + player.ammo.splice(j, 1); + } + } + } + + /* ============================================================================= */ + + // HEALTH RESTORATION + for(let i = 0; i < powerups.healthRenew.length; i++) { + powerups.healthRenew[i].x -= 2; + + if(powerups.healthRenew[i].x <= 0 - graphics.healthImage.width) { + powerups.healthRenew.splice(0, 1); + } + } + + for(let i = 0; i < powerups.healthRenew.length; i++){ + game.ctx.drawImage(graphics.healthImage, powerups.healthRenew[i].x, powerups.healthRenew[i].y); + + const pickedUpHealthRenew = player.x + graphics.ship.width >= powerups.healthRenew[i].x + && player.x <= powerups.healthRenew[i].x + graphics.healthImage.width + && player.y + graphics.ship.height >= powerups.healthRenew[i].y + && player.y <= powerups.healthRenew[i].y + graphics.healthImage.height; + + // If the ship touches the health, restore the ship's HP. + if(pickedUpHealthRenew) { + // Remove the HP restore. + powerups.healthRenew.splice(i, 1) + + // Restore ship's HP. + player.restoreShipHP(); + + // Play Sound effect + sfx.restorationEffect(); + } else if(powerups.healthRenew[i].x + graphics.healthImage.width < 0 ) { + // If HP restore goes past the canvas width, remove it. + powerups.healthRenew.splice(i, 1); + } + } + + /* ============================================================================= */ + + // SHIELD RESTORATION + for(let i = 0; i < powerups.shieldRenew.length; i++) { + powerups.shieldRenew[i].x -= 2; + + if(powerups.shieldRenew[i].x <= 0 - graphics.shieldImage.width) { + powerups.shieldRenew.splice(0, 1); + } + } + + for(let i = 0; i < powerups.shieldRenew.length; i++) { + game.ctx.drawImage(graphics.shieldImage, powerups.shieldRenew[i].x, powerups.shieldRenew[i].y); + + const pickedUpShieldRenew = player.x + graphics.ship.width >= powerups.shieldRenew[i].x + && player.x <= powerups.shieldRenew[i].x + graphics.shieldImage.width + && player.y + graphics.ship.height >= powerups.shieldRenew[i].y + && player.y <= powerups.shieldRenew[i].y + graphics.shieldImage.height + + // If the ship touches the shield, renew its shield. + if(pickedUpShieldRenew) { + // Remove the shield from screen + powerups.shieldRenew.splice(i, 1); + + // Restore 50 points to the player ship shield + player.restoreShield(); + + // Play Sound effect + sfx.restorationEffect(); + } else if(powerups.shieldRenew[i].x + graphics.shieldImage.width < 0) { + // If the shield item goes off canvas, remove it + powerups.shieldRenew.splice(i, 1); + } + } + + /* ============================================================================= */ + + // ADD PLAY TIME + for(let i = 0; i < powerups.timeRenew.length; i++){ + game.ctx.drawImage(graphics.timerImage, powerups.timeRenew[i].x, powerups.timeRenew[i].y) + // If the ship touches the sand timer, add more time + + const pickedUpTimeRenew = player.x + graphics.ship.width >= powerups.timeRenew[i].x + && player.x <= powerups.timeRenew[i].x + graphics.timerImage.width + && player.y + graphics.ship.height >= powerups.timeRenew[i].y + && player.y <= powerups.timeRenew[i].y + graphics.timerImage.height + + if(pickedUpTimeRenew) { + // Remove the timer from the array + powerups.timeRenew.splice(i, 1); + + // Add time + game.addPlaytime(); + + // Play Sound effect + sfx.restorationEffect(); + } else if(powerups.timeRenew[i].x < 0) { + // If clock goes past canvas + powerups.timeRenew.splice(i, 1); + } + } + + // Start moving the timer image when theres is one + for(let i = 0; i < powerups.timeRenew.length; i++) { + powerups.timeRenew[i].x -= 2; + + // If the timer goes behind canvas screen, remove it from the array + if(powerups.timeRenew[i].x <= 0 - graphics.timerImage.width) { + powerups.timeRenew.splice(0, 1); + } + } + /* ============================================================================= */ + + // Move the ship + if(player.d === "LEFT") { + player.x -= player.speed; + } + if(player.d === "RIGHT"){ + player.x += player.speed; + } + if(player.d === "UP") { + player.y -= player.speed; + } + if(player.d === "DOWN") { + player.y += player.speed; + } + + // DIAGONAL MOVEMENT + if(player.d === "UP_LEFT") { + player.x -= player.speed; + player.y -= player.speed; + } + if(player.d === "DOWN_LEFT") { + player.x -= player.speed; + player.y += player.speed; + } + if(player.d === "UP_RIGHT") { + player.x += player.speed; + player.y -= player.speed; + } + if(player.d === "DOWN_RIGHT") { + player.x += player.speed; + player.y += player.speed; + } + + // ALIEN (ENEMY) ROCKETS + if(game.isStarted && enemies.spawned){ + for(let i = 0; i < enemies.ammo.length;i++) { + game.ctx.drawImage(graphics.enemyMissile, enemies.ammo[i].x, enemies.ammo[i].y); + enemies.ammo[i].x -= 15; + + const hitEnemyAmmo = enemies.ammo[i].x >= player.x + && enemies.ammo[i].x <= player.x + graphics.ship.width + && enemies.ammo[i].y >= player.y + && enemies.ammo[i].y <= player.y + graphics.ship.height + && enemies.spawned; + + if(hitEnemyAmmo) { + // Draw explosion at the spot + game.ctx.drawImage(graphics.explosion, player.x, player.y); + + // Run function when player's ship is hit. + player.playerHit(); + } else if(enemies.ammo[i].x < 0) { // If the alien rocket goes behind player's ship + enemies.ammo.splice(i, 1); + } + } + } + + // If spaceship hits the boundry, remove the direction or teleport him top-bottom / bottom-top + if(player.x <= 0) { + player.x += player.speed; + } else if (player.x >= 1300 - graphics.ship.width) { + player.x -= player.speed; + } else if (player.y <= -40) { + player.y = 520 - player.speed; + } else if (player.y >= 520) { + player.y = -30 + player.speed; + } + + // Draw the ship + game.ctx.drawImage(graphics.ship, player.x, player.y); + + // Check how much time has passed and increase difficulty accordingly. + game.increaseDifficulty(); +} + +// Pause game +function pauseGame(){ + // Display the menu + pauseMenu.style.display = "flex"; + + // Clear the intervals + clearInterval(game.init); + clearInterval(enemies.enemiesShootingInterval); + clearInterval(player.graduallyRestoreInterval); + clearInterval(game.countdown); + + // Stop enemies and ship from moving + game.isStarted = false; + + // Enemies shoot every 2 seconds + enemies.spawned = false; + + // Divide the difference to get milliseconds. + game.pausedTime = (new Date() - game.startingTime) / 1000; + Math.floor(game.pausedTime); +} + +// Continue game +function continueGame(){ + // Hide the menu + pauseMenu.style.display = "none"; + + // Run the interval + game.init = setInterval(draw, 1000 / 60); + enemies.enemiesShootingInterval = setInterval(enemies.shoot.bind(enemies), enemies.shootingSpeed); + player.graduallyRestoreInterval = setInterval(player.graduallyRestore.bind(player), player.dynamicRestoration); + game.timer(game.currentTime); + + // Enable enemies and ship movement + game.isStarted = true; + + // Enemies shoot every 2 seconds + enemies.spawned = true; + + // Continue measuring time after game was paused + game.pausedTime *= 1000; +} + +// Exit game +const exitGame = document.querySelectorAll(".exitGame"); +exitGame.forEach(exit => exit.addEventListener("click", ()=> location.reload())); + +// Event listeners +document.querySelector("#startGame").addEventListener("click", loadGame); +document.querySelector("#pauseGame").addEventListener("click", pauseGame); +document.querySelector("#continueGame").addEventListener("click", continueGame); +document.querySelector("#restartGame").addEventListener("click", game.restartGame.bind(game)); + +// Pause game on ESCAPE and if clicked outside of canvas +window.addEventListener("keydown", e => { + if(e.keyCode === 27 && game.isStarted) pauseGame(); +}) +window.addEventListener("click", e => { + if(e.target.id !== "canvas" && e.target.id !== "continueGame" && game.isStarted) pauseGame(); +}) \ No newline at end of file diff --git a/SinglePlayer - Games/Earth_Guardian/static/styles/animations.css b/SinglePlayer - Games/Earth_Guardian/static/styles/animations.css new file mode 100644 index 00000000..923428c1 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/styles/animations.css @@ -0,0 +1,105 @@ +@keyframes buttonsAnimation{ + 0% { transform: translateY(0); } + 100% { transform: translateY(-5px); } +} +@keyframes overheatAnimation{ + 0%{ + color: #f5f5f5; + text-shadow: 4px 4px #860905; + transform: translate(-50%, -50%) scale(1); + } + 50%{ + color: #b30d07; + text-shadow: 4px 4px #f5f5f5; + transform: translate(-50%, -50%) scale(1.1); + } + 100%{ + color: #f5f5f5; + text-shadow: 4px 4px #860905; + transform: translate(-50%, -50%) scale(1); + } +} + +@keyframes highscoreAnimation{ + 0%{ + transform: scale(1); + } + 20%{ + transform: scale(1.1); + } + 40%{ + transform: scale(1); + } + 60%{ + transform: scale(1.1); + } + 80%{ + transform: scale(1); + } + 100%{ + transform: scale(1); + } +} + +@keyframes pauseTitle{ + 0%{ + color: #f5f5f5; + } + 50%{ + color: #b30d07; + } + 100%{ + color: #f5f5f5; + } +} +@keyframes shake{ + 10%, 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, 50%, 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, 60% { + transform: translate3d(4px, 0, 0); + } +} +@keyframes notification{ + 0%{ + transform: translateY(100px) + } + 50%{ + transform: translateY(30px) + } + 100%{ + transform: translateY(100px); + } +} + +@keyframes notifyLevelUp{ + 0%{ + color: #f5f5f5; + transform: scale(1) + } + 25%{ + color: #FFD600; + transform: scale(1.05) + } + 50%{ + color: #f5f5f5; + transform: scale(0.95); + } + 75%{ + color: #FFD600; + transform: scale(1.05); + } + 100%{ + color: #f5f5f5; + transform: scale(1); + } +} \ No newline at end of file diff --git a/SinglePlayer - Games/Earth_Guardian/static/styles/fonts.css b/SinglePlayer - Games/Earth_Guardian/static/styles/fonts.css new file mode 100644 index 00000000..39228d7d --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/styles/fonts.css @@ -0,0 +1,42 @@ +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url("../fonts/MaterialIcons-Regular.eot"); /* For IE6-8 */ + src: local('Material Icons'), + local('MaterialIcons-Regular'), + url("../fonts/MaterialIcons-Regular.woff2") format('woff2'), + url("../fonts/MaterialIcons-Regular.woff") format('woff'), + url("../fonts/MaterialIcons-Regular.ttf") format('truetype'); +} +@font-face { + font-family: "Press Start 2P"; + src: url("../fonts/PressStart2P.ttf"); +} + + +/* MATERIAL DESIGN ICONS CSS */ +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} \ No newline at end of file diff --git a/SinglePlayer - Games/Earth_Guardian/static/styles/main.css b/SinglePlayer - Games/Earth_Guardian/static/styles/main.css new file mode 100644 index 00000000..f645bf97 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/styles/main.css @@ -0,0 +1,990 @@ +body { + background-color: #000; + 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; +} + +body button { + outline: none; +} + +.main-menu { + 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; + 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; +} + +.main-menu .title * { + margin: 15px 0; +} + +.main-menu .title h1 { + text-align: center; + font-family: "Press Start 2P"; + font-size: 50px; + color: #f5f5f5; + letter-spacing: 1px; + 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"; + border: none; + background: none; + color: #f5f5f5; + letter-spacing: 1px; + 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"; + font-size: 8px; + color: #f5f5f5; + justify-self: flex-end; +} + +@media (min-width: 1920px) { + .main-menu .title #copyright { + font-size: 14px; + } +} + +.main-menu .title .soundControl { + cursor: pointer; +} + +.aboutMenu { + display: none; + padding: 15px; + width: 450px; + height: auto; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + color: #f5f5f5; + background-color: #000016; + z-index: 3; + border: 1px solid #dddddd30; + 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; +} + +.highscoresList-menu { + display: none; + width: 400px; + height: auto; + padding: 20px; + border: 1px solid #f5f5f535; + 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%); + 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; + 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; +} + +.loading { + position: absolute; + top: 50%; + left: 50%; + -webkit-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; + 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; + text-align: center; + 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; + } +} + +.container { + 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; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + overflow: hidden; +} + +.container canvas { + display: none; + border: 2px solid #dddddd10; + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.container .containerText { + width: 60px; + height: 12px; + padding: 5px; + border: 2px solid #860905; + 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; + position: absolute; + bottom: 7px; + left: 15px; + z-index: -1; + font-size: 12px; + font-family: "Press Start 2P"; +} + +.container .health-container { + display: none; + position: absolute; + bottom: 5px; + left: 5px; + z-index: 3; +} + +.container .health-container img { + z-index: 2; +} + +.container .shield-container { + display: none; + position: absolute; + bottom: 5px; + 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; + z-index: 3; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.container .emptyWarning-text { + display: none; + font-family: "Press Start 2P"; + font-size: 22px; + letter-spacing: 3px; + color: #f5f5f5; + text-shadow: 4px 4px #860905; + position: absolute; + top: 50%; + left: 50%; + -webkit-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; +} + +.container .emptyWarning-highscore { + display: block; + -webkit-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; + position: absolute; + left: 50%; + bottom: 5px; + -webkit-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); + 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; +} + +.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; + position: absolute; + top: 20px; + left: 50%; + -webkit-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; +} + +.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; +} + +.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; + font-size: 14px; +} + +.menu .level-container .levelTextActive { + -webkit-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; + 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; + background-color: #b30d07; +} + +.menuActive { + opacity: 1; +} + +.overheat-container { + display: none; + padding: 5px; + position: absolute; + left: 16%; + bottom: 3px; + -webkit-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; + transition: 0.5s ease; +} + +.overheat-container p { + text-align: center; + font-family: "Press Start 2P"; + font-size: 12px; + 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; +} + +.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; + background-color: #b30d07; +} + +.game--over { + display: none; + width: 420px; + height: auto; + padding: 20px; + background-color: #000016; + text-align: center; + color: #f5f5f5; + font-family: "Press Start 2P"; + font-size: 12px; + border: 1px solid #f5f5f535; + position: absolute; + top: 50%; + left: 50%; + -webkit-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; + z-index: 3; +} + +.game--over .newHighscore-input * { + margin: 5px 0; +} + +.game--over .newHighscore-input input { + background-color: #010120; + border: 1px solid #f5f5f535; + 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; +} + +.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; + padding: 5px 10px; + background: none; + border: none; + color: #f5f5f5; + font-family: "Press Start 2P"; + font-size: 18px; + cursor: pointer; + border-radius: 1px; +} + +.game--over .gameOverBtn:hover { + text-shadow: 3px 3px #a10909; +} + +.pause--menu { + display: none; + width: 250px; + height: 180px; + padding: 10px; + background-color: #000016; + 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; + position: absolute; + top: 50%; + left: 50%; + -webkit-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; +} + +.pause--menu p { + margin: 10px 0; + cursor: pointer; +} + +.pause--menu p:hover { + color: gold; + text-shadow: 2px 2px #a10909; +} + +.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; + width: 350px; + height: 400px; + background-color: #000016; + border: 1px solid #f5f5f535; + padding: 15px; + z-index: 10; + font-family: "Press Start 2P"; + font-size: 12px; + position: absolute; + left: 50%; + top: 50%; + -webkit-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; +} + +.settings-menu h3 { + color: #f5f5f5; +} + +.settings-menu button { + background: none; + border: none; + font-size: 14px; + font-family: "Press Start 2P"; + 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; + 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; + width: 320px; +} + +.settings-menu .directionControl * { + margin: 5px 0; +} + +.settings-menu input { + width: 100px; + cursor: pointer; + margin: 2px 0; +} + +.settings-menu input[type="text"] { + width: 100px; + cursor: text; + background: none; + border: none; + border-bottom: 1px solid #f5f5f5; + font-family: "Press Start 2P"; + color: #f5f5f5; + 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 { + 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; + 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 diff --git a/SinglePlayer - Games/Earth_Guardian/static/styles/main.css.map b/SinglePlayer - Games/Earth_Guardian/static/styles/main.css.map new file mode 100644 index 00000000..14ae75ee --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/styles/main.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "main.scss" + ], + "names": [], + "file": "main.css" +} \ No newline at end of file diff --git a/SinglePlayer - Games/Earth_Guardian/static/styles/main.scss b/SinglePlayer - Games/Earth_Guardian/static/styles/main.scss new file mode 100644 index 00000000..3031bc29 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/styles/main.scss @@ -0,0 +1,901 @@ +$colors: ( + primary: #000, + menues: #000016, + textColors: #f5f5f5, + highlighted: gold, +); + +// Variables +$spacing: 1px; // Letter spacing +$center: translate(-50%, -50%); +$mainFont: "Press Start 2P"; + +// Function +@function color($colorName) { + @return map-get($colors, $colorName); +} + +// Mixin - used for media queries +$desktopBigger: 1920px; + +@mixin desktopBigger { + @media (min-width: #{$desktopBigger}) { + @content; + }; +} + +body{ + background-color: color(primary); + overflow: hidden; + color: color(textColors); + + .mainMenu-fade{ + opacity: 0; + } + + .main-menu_buttons:hover{ + animation: buttonsAnimation 0.5s ease forwards infinite; + } + + button { + outline: none; + } +} + +// Main menu +.main-menu{ + width: 100%; + height: 100vh; + position: relative; + display: flex; + justify-content: center; + align-items: center; + transition: 2.5s ease; + z-index: 3; + opacity: 1; + overflow: hidden; + + .title{ + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + *{ // All items + margin: 15px 0; + } + h1{ + text-align: center; + font-family: $mainFont; + font-size: 50px; + color: color(textColors); + letter-spacing: $spacing; + margin: 0 auto; + margin-bottom: 40px; + + @include desktopBigger { + font-size: 70px; + } + } + .mainButtons{ + font-size: 14px; + font-family: $mainFont; + border: none; + background: none; + color: #f5f5f5; + letter-spacing: $spacing; + cursor: pointer; + z-index: 3; + outline: none; + transition: 0.3s ease; + + @include desktopBigger { + font-size: 18px; + } + } + .mainButtons:hover{ + color: color(highlighted); + } + #copyright{ + margin-top: 80px; + font-family: $mainFont; + font-size: 8px; + color: color(textColors); + justify-self: flex-end; + + @include desktopBigger { + font-size: 14px; + } + } + .soundControl{ + cursor: pointer; + } + } +} + +.aboutMenu{ + display: none; + padding: 15px; + width: 450px; + height: auto; + + position: absolute; + top: 50%; + left: 50%; + transform: $center; + + color: color(textColors); + background-color: color(menues); + z-index: 3; + border: 1px solid #dddddd30; + + text-align: center; + font-family: $mainFont; + font-size: 12px; + letter-spacing: 2px; + line-height: 15px; + + @include desktopBigger { + width: 600px; + line-height: 20px; + } + + h3{ + color: color(highlighted); + font-size: 20px; + } + + p{ + padding: 25px; + + @include desktopBigger { + font-size: 18px; + } + } + + a{ + color: color(highlighted); + text-decoration: none; + } +} + +.highscoresList-menu{ + display: none; + width: 400px; + height: auto; + padding: 20px; + border: 1px solid #f5f5f535; + + font-family: $mainFont; + color: color(textColors); + background-color: color(menues); + + position: absolute; + top: 50%; + left: 50%; + transform: $center; + + z-index: 3; + + h3{ + font-size: 20px; + letter-spacing: 2px; + color: color(highlighted); + margin-bottom: 20px; + } + + #theName{ + color: color(highlighted); + } + + p{ + font-size: 12px; + margin: 10px 0; + } + + .highscoreList-items{ + width: 100%; + padding: 0 5px; + + display: flex; + justify-content: space-between; + align-items: center; + + font-size: 12px; + list-style-type: none; + + * { + margin: 3px 0; + } + } + + #clearList { + display: none; + } + + #clearList:hover{ + color: #bd0e08; + } +} + +// LOADING MENU +.loading { + position: absolute; + top: 50%; + left: 50%; + transform: $center; + + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 3; + + font-family: $mainFont; + + .loading-text{ + font-size: 12px; + color: color(textColors); + margin-bottom: 10px; + + @include desktopBigger { + font-size: 18px; + } + } + + .loading-bar{ + width: 200px; + height: 20px; + border: 1px solid grey; + + .loading-bar_fill { + width: 0%; + height: 100%; + background-color: #f5f5f5; + } + } + + .info{ + margin: 30px 0px; + + h2 { + margin: 10px 0; + + font-size: 16px; + text-align: center; + + color: color(highlighted); + letter-spacing: 2px; + + @include desktopBigger { + font-size: 22px; + letter-spacing: 3px; + } + } + + p { + color: color(textColors); + font-size: 10px; + margin: 5px 0; + + @include desktopBigger { + font-size: 18px; + } + } + } +} + +// CONTAINER +.container { + width: 1280px; + height: 500px; + position: relative; + + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + + position: absolute; + top: 50%; + left: 50%; + transform: $center; + overflow: hidden; + + canvas { + display: none; + border: 2px solid #dddddd10; + + position: absolute; + left: 50%; + top: 50%; + transform: $center; + } + + // Health / shield status + .containerText{ + width: 60px; + height: 12px; + padding: 5px; + + border: 2px solid #860905; + border-radius: 25px; + + background-color: PeachPuff; + color: #111; + + display: flex; + justify-content: flex-end; + align-items: center; + position: absolute; + bottom: 7px; + left: 15px; + z-index: -1; + + font-size: 12px; + font-family: $mainFont; + } + + .health-container { + display: none; + position: absolute; + bottom: 5px; + left: 5px; + z-index: 3; + + img{ + z-index: 2; + } + } + + .shield-container{ + display: none; + position: absolute; + bottom: 5px; + left: 90px; + z-index: 3; + + img { + z-index: 2; + } + } + + .countdown { + display: none; + font-family: $mainFont; + font-size: 30px; + color: color(textColors); + text-shadow: 3px 3px rgb(168, 33, 33); + z-index: 3; + position: absolute; + top: 50%; + left: 50%; + transform: $center; + } + + .emptyWarning-text{ + display: none; + + font-family: $mainFont; + font-size: 22px; + letter-spacing: 3px; + + color: color(textColors); + text-shadow: 4px 4px #860905; + position: absolute; + top: 50%; + left: 50%; + transform: $center; + z-index: 3; + } + + .emptyWarning-textActive{ + display: block; + animation: overheatAnimation 0.6s ease forwards infinite; + } + + .emptyWarning-highscore{ + display: block; + animation: highscoreAnimation 1.25s ease forwards infinite; + } + + .notificationsContainer{ + display: flex; + justify-content: center; + align-items: center; + + position: absolute; + left: 50%; + bottom: 5px; + transform: $center; + + .notification { + padding: 5px; + width: 300px; + height: 40px; + + display: flex; + justify-content: center; + align-items: center; + + transform: translateY(100px); + + font-size: 12px; + font-family: $mainFont; + + i { + color: #e1302a; + } + + p { + margin-left: 5px; + color: color(textColors); + } + + .health { + color: color(textColors); + } + + .shield { + color: #1aeb71; + } + + .timer { + color: gold; + } + } + .activeNotification { + animation: notification 3s ease forwards; + } + } +} + +// GAME MENU (MENU, KILLS, TIMER, LEVEL) +.menu { + display: none; + width: 1250px; + opacity: 0; + + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + top:20px; + left: 50%; + transform: $center; + + z-index: 3; + transition: 0.75s ease; + + color: color(textColors); + font-family: $mainFont; + + #pauseGame { + cursor: pointer; + } + + .time { + width: 150px; + display: flex; + justify-content: center; + align-items: center; + * { + margin: 0 3px; + } + + i { + font-size: 30px; + } + + #timerDisplay { + font-size: 17px; + letter-spacing: 2px; + color: color(highlighted); + font-family: $mainFont; + } + + #timerDisplay.timeLow{ + color: #b30d07; + font-size: 22px; + } + } + + .timeShake{ + animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; + } + + .level-container{ + width: 350px; + padding: 3px; + + display: flex; + justify-content: space-between; + align-items: center; + + font-size: 14px; + + .levelTextActive { + animation: notifyLevelUp 0.5s ease forwards infinite; + } + .level-bar { + width: 200px; + height: 25px; + + display: flex; + justify-content: center; + align-items: center; + + border: 2px solid #f5f5f520; + border-radius: 3px; + + position: relative; + overflow: hidden; + + p { + color: #f5f5f5; + z-index: 9999; + } + + .level-bar_fill{ + position: absolute; + top: 0; + left: 0; + + width: 0%; + height: 100%; + + transition: 0.3s ease; + + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + + background-color: #b30d07; + } + } + } +} + +.menuActive{ + opacity: 1; +} + +// OVERHEAT BAR +.overheat-container{ + display: none; + padding: 5px; + + position: absolute; + left: 16%; + bottom: 3px; + transform: translate(-16%); + + background-color: rgba(0,0,0,0.95); + z-index: 3; + + flex-direction: column; + justify-content: center; + align-items: center; + + transition: 0.5s ease; + + p { + text-align: center; + font-family: $mainFont; + font-size: 12px; + letter-spacing: 2px; + color: goldenrod; + } + + .overheat-bar{ + width: 140px; + height: 25px; + + display: flex; + justify-content: center; + align-items: center; + + * { + margin: 0px 2px; + } + + .overheat-bar_block:nth-child(1) { + margin-left: -5px; + } + + .overheat-bar_block{ + width: 10px; + height: 20px; + background-color: #fff; + } + + // BLOCKS PHASES + .greenPhase{ + width: 10px; + height: 20px; + background-color: #2ECC40; + } + .yellowPhase{ + width: 10px; + height: 20px; + background-color: #FFDC00; + } + .redPhase{ + width: 10px; + height: 20px; + background-color: #b30d07; + } + } +} + +// GAME OVER MENU +.game--over{ + display: none; + width: 420px; + height: auto; + padding: 20px; + background-color: #000016; + + text-align: center; + color: color(textColors); + font-family: $mainFont; + font-size: 12px; + + border: 1px solid #f5f5f535; + position: absolute; + top: 50%; + left: 50%; + transform: $center; + + z-index: 3; + + #message{ + margin: 10px 0; + font-family: $mainFont; + font-size: 12px; + } + + .newHighscore-input{ + width: 340px; + height: auto; + padding: 15px; + margin: 0 auto; + + display: none; + justify-content: center; + align-items: center; + flex-direction: column; + + z-index: 3; + + * { + margin: 5px 0; + } + + input { + background-color: #010120; + border: 1px solid #f5f5f535; + padding: 5px; + + color: color(textColors); + font-family: $mainFont; + font-size: 10px; + + outline: none; + } + + #scoreText{ + font-size: 12px; + } + } + + .newHighscore-notification{ + color: #f5f5f5; + text-shadow: 4px 4px #860905; + animation: highscoreAnimation 1.25s ease forwards infinite; + } + + .scores{ + margin-top: 5px; + text-align: left; + + span { + color: color(highlighted); + font-size: 15px; + } + + * { + margin: 10px 0; + } + + #finalScore, #highscore{ + color: color(highlighted); + } + } + + .gameOverBtn{ + display: inline-block; + margin-top: 10px; + padding: 5px 10px; + + background: none; + border: none; + + color: color(textColors); + font-family: $mainFont; + font-size: 18px; + + + cursor: pointer; + border-radius: 1px; + } + + .gameOverBtn:hover{ + text-shadow: 3px 3px rgb(161, 9, 9); + } +} + +// PAUSE MENU +.pause--menu{ + display: none; + width: 250px; + height: 180px; + padding: 10px; + background-color: color(menues); + + color: color(textColors); + text-align: center; + font-family: $mainFont; + + flex-direction: column; + justify-content: center; + align-items: center; + + border: 2px solid #dddddd30; + + position: absolute; + top: 50%; + left: 50%; + transform: $center; + z-index: 9; + + h3{ + font-size: 19px; + margin: 20px 0; + animation: pauseTitle 0.8s ease infinite forwards; + } + + p { + margin: 10px 0; + cursor: pointer; + } + p:hover { + color: color(highlighted); + text-shadow: 2px 2px rgb(161, 9, 9); + } +} + +// SETTINGS MENU +.settings-menu{ + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + + width: 350px; + height: 400px; + background-color: color(menues); + border: 1px solid #f5f5f535; + padding: 15px; + + z-index: 10; + + color: color(highligh); + font-family: $mainFont; + font-size: 12px; + + position: absolute; + left: 50%; + top: 50%; + transform: $center; + + h2 { + font-size: 22px; + margin-bottom: 10px; + color: color(highlighted); + letter-spacing: 3px; + animation: settingsText 1s ease forwards infinite; + } + + h3 { + color: color(textColors); + } + + button { + background: none; + border: none; + + font-size: 14px; + font-family: $mainFont; + color: color(textColors); + + cursor: pointer; + margin-top: 10px; + transition: 0.35s ease; + } + + button:hover{ + color: color(highlighted); + text-shadow: 2px 2px #860905 + } + + .settings-music, .settings-sfx{ + display: flex; + justify-content: space-between; + align-items: center; + width: 320px; + } + + * { + margin: 5px 0; + } + + .directionControl { + display: flex; + justify-content: space-between; + align-items: center; + width: 320px; + + * { + margin: 5px 0; + } + } + + input{ + width: 100px; + cursor: pointer; + margin: 2px 0; + } + + input[type="text"] { + width: 100px; + cursor: text; + background: none; + border: none; + border-bottom: 1px solid #f5f5f5; + + font-family: $mainFont; + color: color(textColors); + text-align: right; + font-size: 10px; + + outline: none; + + transition: 0.3s ease; + opacity: 0.2; + } + + input[type="text"]:focus { + opacity: 1; + border-bottom: 2px solid color(highlighted); + padding: 5px; + } + + .muteContainer { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 20px; + margin-left: 5px; + font-size: 14px; + color: color(highlighted); + + img { + cursor: pointer; + } + } +} \ No newline at end of file diff --git a/SinglePlayer - Games/Earth_Guardian/static/styles/style.css b/SinglePlayer - Games/Earth_Guardian/static/styles/style.css new file mode 100644 index 00000000..f9de58a0 --- /dev/null +++ b/SinglePlayer - Games/Earth_Guardian/static/styles/style.css @@ -0,0 +1,795 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + background-color: #000; + overflow: hidden; +} +button{ + outline: none; +} +/* MAIN MENU */ +.main-menu{ + width: 100%; + height: 100vh; + position: relative; + overflow: hidden; + opacity: 1; + transition: 2.5s ease; + z-index: 9; + display: flex; + justify-content: center; + align-items: center; +} +.mainMenuFade{ + opacity: 0; +} +.main-menu_buttons:hover{ + animation: buttonsAnimation 0.3s ease forwards infinite alternate; +} + +.title { + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.title > *{ + margin: 15px 0; +} +.title h1{ + text-align: center; + font-family: "Press Start 2P"; + font-size: 50px; + color: #f5f5f5; + letter-spacing: 1px; + margin: 0 auto; + margin-bottom: 40px; +} +.mainButtons{ + border: none; + background: none; + font-size: 14px; + font-family: "Press Start 2P"; + color: #f5f5f5; + letter-spacing: 1px; + cursor: pointer; + transition: 0.3s ease; + z-index: 9; + outline: none; +} +.mainButtons:hover{ + color: gold; +} +#copyright{ + font-family: "Press Start 2P"; + font-size: 8px; + color: #f5f5f5; + justify-self: flex-end; + margin-top: 80px; +} +.soundControl{ + cursor: pointer; +} + + + +.loading{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 999; +} + +.loading-text{ + font-family: "Press Start 2P"; + font-size: 12px; + color: #f5f5f5; + margin-bottom: 10px; +} +.loading-bar{ + width: 200px; + height: 20px; + border: 1px solid grey; +} +.loading-bar_fill{ + width: 5%; + height: 100%; + background-color: #f5f5f5; +} +.loading .info{ + margin: 30px 0; +} +.loading .info h2{ + color: #f5f5f5; + font-family: "Press Start 2P"; + font-size: 16px; + margin: 10px 0; + text-align: center; + color: gold; + letter-spacing: 2px; +} +.loading .info p{ + color: #f5f5f5; + font-family: "Press Start 2P"; + font-size: 10px; + margin: 5px 0; +} +.aboutMenu{ + display: none; + padding: 15px; + width: 450px; + height: auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #000; + z-index: 999; + border: 1px solid #dddddd30; + color: #f5f5f5; + font-family: "Press Start 2P"; + font-size: 12px; + letter-spacing: 2px; + text-align: center; + line-height: 15px; +} +.aboutMenu h3{ + color: gold; + font-size: 20px; +} +.aboutMenu p { + padding: 25px; +} +.aboutMenu a { + color: gold; + text-decoration: none; +} +.highscoresList-menu { + display: none; + color: #f5f5f5; + width: 400px; + height: auto; + padding: 20px; + border: 1px solid #f5f5f535; + background-color: #000016; + z-index: 9; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: "Press Start 2P"; +} +.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; +} +.highscoreList-items { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + list-style-type: none; + font-size: 12px; + +} +.highscoreList-items > * { + margin: 3px 0; +} + +.closeMenu{ + background: none; + border: none; + color: #f5f5f5; + font-family: "Press Start 2P"; + cursor: pointer; +} +.closeMenu:hover{ + color: gold; +} +#clearList{ + display: none; +} +#clearList:hover{ + color: #bd0e08; +} + +/*////////////////////////////////////////////*/ + +/* GAME MENU */ +.menu{ + display: none; + opacity: 0; + width: 1250px; + color: #f5f5f5; + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + top:10px; + left: 50%; + transform: translate(-50%); + z-index: 99; + transition: 0.75s ease; + font-family: "Press Start 2P"; +} +#openMenu{ + cursor: pointer; +} +.menuActive{ + opacity: 1; +} +.menu .level-container{ + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + padding: 3px; + width: 350px; +} +.level-bar{ + width: 200px; + height: 25px; + display: flex; + justify-content: center; + align-items: center; + border: 2px solid #f5f5f520; + border-radius: 20px; + position: relative; + overflow: hidden; +} +.level-bar p{ + color: #f5f5f5; + z-index: 9999; +} +.level-bar_fill{ + position: absolute; + top: 0; + left: 0; + width: 0%; + height: 100%; + transition: 0.3s ease; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + background-color: #b30d07; +} +.container .health-container{ + display: none; + position: absolute; + bottom: 5px; + left: 5px; + z-index: 999; +} +.container .health-container img{ + z-index: 2; +} +.containerText{ + width: 70px; + height: 23px; + border: 2px solid #860905; + border-radius: 25px; + background-color: PeachPuff ; + color: #111; + padding: 5px; + display: flex; + justify-content: flex-end; + align-items: center; + position: absolute; + bottom: 7px; + left: 15px; + z-index: -1; + font-size: 12px; + font-family: "Press Start 2P"; +} +.container .shield-container{ + display: none; + position: absolute; + bottom: 5px; + left: 90px; + z-index: 999; +} +.shield-decreased { + color: #860905; +} +.score{ + text-align: center; +} +.emptyWarning-text{ + display: none; + font-family: "Press Start 2P"; + font-size: 22px; + letter-spacing: 3px; + color: #f5f5f5; + text-shadow: 4px 4px #860905; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 999; +} +.emptyWarning-textActive{ + display: block; + animation: overheatAnimation 0.6s ease forwards infinite; +} + + +.countdown { + display: none; + font-family: "Press Start 2P"; + font-size: 30px; + color: #f5f5f5; + text-shadow: 3px 3px rgba(168, 33, 33); + z-index: 999; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +canvas{ + display: none; + border: 2px solid #dddddd10; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.overheat-container{ + display: none; + position: absolute; + left: 16%; + bottom: 3px; + transform: translate(-16%); + background-color: rgba(0,0,0,0.95); + padding: 5px; + z-index: 999; + transition: 0.5s ease; + flex-direction: column; + justify-content: center; + align-items: center; +} +.overheat-container p { + text-transform: uppercase; + text-align: center; + font-family: "Press Start 2P"; + font-size: 12px; + letter-spacing: 2px; + color: goldenrod; +} +.overheat-bar{ + width: 140px; + height: 25px; + display: flex; + justify-content: center; + align-items: center; +} +.overheat-bar > * { + margin: 0px 2px; +} +.overheat-bar_block:nth-child(1) { + margin-left: -5px; +} +.overheat-bar_block{ + width: 10px; + height: 20px; + background-color: #fff; +} +.greenPhase{ + width: 10px; + height: 20px; + background-color: #2ECC40; +} +.yellowPhase{ + width: 10px; + height: 20px; + background-color: #FFDC00; +} +.redPhase{ + width: 10px; + height: 20px; + background-color: #b30d07; +} + +/* GAME OVER MENU */ +.game--over{ + display: none; + text-align: center; + background-color: #000016; + color: #f5f5f5; + font-family: "Press Start 2P"; + font-size: 12px; + width: 420px; + height: auto; + padding: 20px; + border: 1px solid #f5f5f535; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 999; +} +.game--over .newHighscore-input{ + width: 340px; + height: auto; + padding: 15px; + margin: 0 auto; + display: none; + justify-content: center; + align-items: center; + flex-direction: column; + z-index: 9999; +} +.game--over .newHighscore-input > * { + margin: 5px 0; +} +.game--over .newHighscore-input input{ + background-color: #010120; + border: 1px solid #f5f5f535; + padding: 5px; + color: #f5f5f5; + outline: none; + + font-family: "Press Start 2P"; + font-size: 10px; +} +.game--over .newHighscore-input .newHighscore-notification{ + color: #f5f5f5; + text-shadow: 4px 4px #860905; + animation: highscoreAnimation 1.25s ease forwards infinite; +} +.game--over .newHighscore-input #scoreText{ + font-size: 12px; +} +.game--over .scores{ + margin-top: 5px; + text-align: left; +} +.game--over .scores span { + color: gold; + font-size: 15px; +} +.scores > * { + margin: 10px 0; +} +.gameOverBtn{ + display: inline-block; + margin-top: 10px; + background: none; + border: none; + color: #f5f5f5; + font-family: "Press Start 2P"; + font-size: 18px; + padding: 5px 10px; + cursor: pointer; + border-radius: 1px; +} +.gameOverBtn:hover{ + text-shadow: 3px 3px rgb(161, 9, 9); +} + +#message{ + margin: 10px 0; + font-family: "Press Start 2P"; + font-size: 12px; +} +#finalScore, #highscore{ + color: gold; +} + +.bars{ + display: flex; + align-items: center; +} +.hp-bars{ + width: 100px; + height: 20px; + border: 1px solid #dddddd30; + border-radius: 5px; +} +.shipShield{ + width: 100px; + height: 20px; + border: 1px solid #dddddd30; + border-radius: 5px;; +} + +.gunOverheat{ + width: 100px; + height: 20px; + border: 1px solid #dddddd30; + border-radius: 5px; +} +.speedBooster{ + width: 100px; + height: 20px; + border: 1px solid #dddddd30; + border-radius: 5px; +} +.speedBooster-fill{ + width: 100%; + height: 100%; + background-color: gold; + transition: 0.5s ease; + border-radius: 5px; +} +.ship-hpFill{ + width: 100%; + height: 100%; + background-color: #e1302a; + transition: 0.5s ease; + border-radius: 5px; +} +.shipShield-fill{ + width: 100%; + height: 100%; + background-color: #1aeb71; + transition: 0.5s ease; + border-radius: 5px; +} +.gunOverheat-fill{ + width: 0%; + height: 100%; + border-radius: 5px; + background-color: rgb(168, 33, 33); + transition: 0.5s ease; +} +/* PAUSE MENU */ +.pause--menu{ + display: none; + width: 250px; + height: 180px; + padding: 10px; + background-color: #000016; + color: #f5f5f5; + text-align: center; + flex-direction: column; + justify-content: center; + align-items: center; + border: 2px solid #dddddd30; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 9; +} +.pause--menu h3{ + font-family: "Press Start 2P"; + font-size: 19px; + margin: 20px 0; + animation: pauseTitle 0.8s ease infinite forwards; +} + +.pause--menu p{ + margin: 10px 0; + cursor: pointer; + font-family: "Press Start 2P"; +} +.pause--menu p:hover{ + color: gold; + text-shadow: 2px 2px rgb(161, 9, 9); +} + +/* SETTINGS MENU */ +.settings-menu{ + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + width: 350px; + height: 370px; + background-color: #000016; + border: 1px solid #f5f5f535; + padding: 15px; + z-index: 9999999; + color: gold; + font-family: "Press Start 2P"; + font-size: 12px; + + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.settings-menu h2{ + font-size: 22px; + margin-bottom: 10px; + color: gold; + letter-spacing: 3px; + animation: settingsText 1s ease forwards infinite; +} +.settings-menu h3{ + color: #f5f5f5; +} +.settings-menu button{ + background: none; + border: none; + font-size: 14px; + font-family: "Press Start 2P"; + color: #f5f5f5; + cursor: pointer; + margin-top: 10px; + transition: 0.35s ease; +} +.settings-menu button:hover{ + color: gold; + text-shadow: 2px 2px #860905 +} +.settings-menu .settings-music, .settings-menu .settings-sfx{ + display: flex; + justify-content: space-between; + align-items: center; + width: 320px; +} +.settings-menu > * { + margin: 10px 0; +} +.settings-menu .directionControl { + display: flex; + 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"] { + width: 100px; + cursor: text; + background: none; + border: none; + border-bottom: 1px solid #f5f5f5; + font-family: "Press Start 2P"; + color: #f5f5f5; + text-align: right; + outline: none; + transition: 0.3s ease; + opacity: 0.2; + font-size: 10px; +} +.settings-menu input[type="text"]:focus { + opacity: 1; + border-bottom: 2px solid gold; + padding: 5px; +} + +.controlsInfoActive{ + opacity: 0; +} +.container{ + width: 1280px; + height: 500px; + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + overflow: hidden; +} +.notificationsContainer{ + /* width: 100%; */ + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 50%; + bottom: 5px; + transform: translate(-50%, 5px); +} +.notification{ + display: flex; + justify-content: center; + align-items: center; + padding: 5px; + width: 300px; + height: 40px; + transform: translateY(100px); + font-size: 12px; + font-family: "Press Start 2P"; +} +.activeNotification{ + animation: notification 4s ease forwards; +} +.notification i { + color: #e1302a +} +.notification p { + margin-left: 5px; + color: #f5f5f5; +} +/* shield notification */ +.notification .shield { + color: #1aeb71; +} +/* health restore notification */ +.notification .health { + color: #f5f5f5; +} +/* added playime notification */ +.notification .timer{ + color: gold; +} +.time{ + width: 150px; + display: flex; + justify-content: center; + align-items: center; +} +.timeShake{ + animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; +} + + +.time > * { + margin: 0 3px; +} +.time i { + font-size: 30px; +} +#timerDisplay{ + font-size: 17px; + letter-spacing: 2px; + color: gold; + font-family: "Press Start 2P"; +} +#timerDisplay.timeLow{ + color: #b30d07; + font-size: 22px; +} + +@media (min-width: 1920px) { + #title { + font-size: 40px; + } + #startGame, #about{ + font-size: 22px; + } + #copyright{ + font-size: 16px; + } + .aboutMenu{ + width: 600px; + line-height: 20px; + } + .aboutMenu p{ + font-size: 18px; + } + .loading .info h2{ + font-size: 22px; + letter-spacing: 3px; + } + .loading .loading-text { + font-size: 18px; + } + .loading .info p { + font-size: 18px; + } +} \ No newline at end of file diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png new file mode 100644 index 00000000..e66aee40 Binary files /dev/null and b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png new file mode 100644 index 00000000..491ee83c Binary files /dev/null and b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png b/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png new file mode 100644 index 00000000..18ca4803 Binary files /dev/null and b/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/index.html b/SinglePlayer - Games/Flappy_Bird_Game/index.html new file mode 100644 index 00000000..ba4d0812 --- /dev/null +++ b/SinglePlayer - Games/Flappy_Bird_Game/index.html @@ -0,0 +1,24 @@ + + + + + + + + Flappy Bird Game + + + + +
+ bird-img +
+ Enter To Start Game

ArrowUp to Control

+
+
+ + +
+ + + \ No newline at end of file diff --git a/SinglePlayer - Games/Flappy_Bird_Game/script.js b/SinglePlayer - Games/Flappy_Bird_Game/script.js new file mode 100644 index 00000000..a70fdcc2 --- /dev/null +++ b/SinglePlayer - Games/Flappy_Bird_Game/script.js @@ -0,0 +1,121 @@ +let move_speed = 3, grativy = 0.5; +let bird = document.querySelector('.bird'); +let img = document.getElementById('bird-1'); +let bird_props = bird.getBoundingClientRect(); +let background = document.querySelector('.background').getBoundingClientRect(); + +let score_val = document.querySelector('.score_val'); +let message = document.querySelector('.message'); +let score_title = document.querySelector('.score_title'); + +let game_state = 'Start'; +img.style.display = 'none'; +message.classList.add('messageStyle'); + +document.addEventListener('keydown', (e) => { + + if(e.key == 'Enter' && game_state != 'Play'){ + document.querySelectorAll('.pipe_sprite').forEach((e) => { + e.remove(); + }); + img.style.display = 'block'; + bird.style.top = '100vh'; + game_state = 'Play'; + message.innerHTML = ''; + score_title.innerHTML = 'Score : '; + score_val.innerHTML = '0'; + message.classList.remove('messageStyle'); + play(); + } +}); + +function play(){ + function move(){ + if(game_state != 'Play') return; + + let pipe_sprite = document.querySelectorAll('.pipe_sprite'); + pipe_sprite.forEach((element) => { + let pipe_sprite_props = element.getBoundingClientRect(); + bird_props = bird.getBoundingClientRect(); + + if(pipe_sprite_props.right <= 0){ + element.remove(); + }else{ + if(bird_props.left < pipe_sprite_props.left + pipe_sprite_props.width && bird_props.left + bird_props.width > pipe_sprite_props.left && bird_props.top < pipe_sprite_props.top + pipe_sprite_props.height && bird_props.top + bird_props.height > pipe_sprite_props.top){ + game_state = 'End'; + message.innerHTML = 'Game Over'.fontcolor('red') + '
Press Enter To Restart'; + message.classList.add('messageStyle'); + img.style.display = 'none'; + return; + }else{ + if(pipe_sprite_props.right < bird_props.left && pipe_sprite_props.right + move_speed >= bird_props.left && element.increase_score == '1'){ + score_val.innerHTML =+ score_val.innerHTML + 1; + } + element.style.left = pipe_sprite_props.left - move_speed + 'px'; + } + } + }); + requestAnimationFrame(move); + } + requestAnimationFrame(move); + + let bird_dy = 0; + function apply_gravity(){ + if(game_state != 'Play') return; + bird_dy = bird_dy + grativy; + document.addEventListener('keydown', (e) => { + if(e.key == 'ArrowUp' || e.key == ' '){ + img.src = 'images/Bird-II.png'; + bird_dy = -7.6; + } + }); + + document.addEventListener('keyup', (e) => { + if(e.key == 'ArrowUp' || e.key == ' '){ + img.src = 'images/Bird-I.png'; + } + }); + + if(bird_props.top <= 0 || bird_props.bottom >= background.bottom){ + game_state = 'End'; + message.style.left = '28vw'; + window.location.reload(); + message.classList.remove('messageStyle'); + return; + } + bird.style.top = bird_props.top + bird_dy + 'px'; + bird_props = bird.getBoundingClientRect(); + requestAnimationFrame(apply_gravity); + } + requestAnimationFrame(apply_gravity); + + let pipe_seperation = 0; + + let pipe_gap = 40; + + function create_pipe(){ + if(game_state != 'Play') return; + + if(pipe_seperation > 115){ + pipe_seperation = 0; + + let pipe_posi = Math.floor(Math.random() * 43) + 8; + let pipe_sprite_inv = document.createElement('div'); + pipe_sprite_inv.className = 'pipe_sprite'; + pipe_sprite_inv.style.top = pipe_posi - 70 + 'vh'; + pipe_sprite_inv.style.left = '100vw'; + + document.body.appendChild(pipe_sprite_inv); + let pipe_sprite = document.createElement('div'); + pipe_sprite.className = 'pipe_sprite'; + pipe_sprite.style.top = pipe_posi + pipe_gap + 'vh'; + pipe_sprite.style.left = '100vw'; + pipe_sprite.increase_score = '1'; + + document.body.appendChild(pipe_sprite); + } + pipe_seperation++; + requestAnimationFrame(create_pipe); + } + requestAnimationFrame(create_pipe); +} \ No newline at end of file diff --git a/SinglePlayer - Games/Flappy_Bird_Game/style.css b/SinglePlayer - Games/Flappy_Bird_Game/style.css new file mode 100644 index 00000000..c3d260ba --- /dev/null +++ b/SinglePlayer - Games/Flappy_Bird_Game/style.css @@ -0,0 +1,87 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} +body{ + height: 700px; + width: 700px +} +.background { + height: 100vh; + width: 100vw; + background: url('images/background-img.png') no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +.bird { + height: 100px; + width: 130px; + position: fixed; + top: 40vh; + left: 30vw; + z-index: 100; +} +.pipe_sprite { + position: fixed; + top: 40vh; + left: 100vw; + height: 70vh; + width: 6vw; + background:radial-gradient(rgb(177, 140, 5) 50%, rgb(210, 165, 4)); + border: 3px solid black; +} +.message { + position: absolute; + z-index: 10; + color: black; + top: 50%; + left: 50%; + font-size: 5em; + transform: translate(-50%, -50%); + text-align: center; +} +.messageStyle{ + background: white; + padding: 30px; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + border-radius: 4.5%; +} +.score { + position: fixed; + z-index: 10; + height: 10vh; + font-size: 10vh; + font-weight: 100; + color: white; + -webkit-text-stroke-width: 2px; + -webkit-text-stroke-color: black; + top: 0; + left: 0; + margin: 10px; + font-family: Arial, Helvetica, sans-serif; +} +.score_val { + color: gold; + font-weight: bold; +} +@media only screen and (max-width: 1080px) { + .message{ + font-size: 50px; + top: 50%; + white-space: nowrap; + } + .score{ + font-size: 8vh; + } + .bird{ + width: 120px; + height: 90px; + } + .pipe_sprite{ + width: 14vw; + } +} \ No newline at end of file diff --git a/SinglePlayer - Games/General Knowledge Quiz/bg.jpg b/SinglePlayer - Games/General Knowledge Quiz/bg.jpg new file mode 100644 index 00000000..1684897a Binary files /dev/null and b/SinglePlayer - Games/General Knowledge Quiz/bg.jpg differ diff --git a/SinglePlayer - Games/General Knowledge Quiz/index.html b/SinglePlayer - Games/General Knowledge Quiz/index.html new file mode 100644 index 00000000..574c120c --- /dev/null +++ b/SinglePlayer - Games/General Knowledge Quiz/index.html @@ -0,0 +1,77 @@ + + + + + + Quiz + + + + + + +
+ + +
+
+
Awesome Quiz Application
+
+
Time Left
+
15
+
+
+
+ +
+
+ What does HTML stand for? +
+
+ +
+
+ + +
+
+ +
+ +
+
+ + +
+
+ +
+
You've completed the Quiz!
+
+ +
+
+ + +
+
+ + + + + \ No newline at end of file diff --git a/SinglePlayer - Games/General Knowledge Quiz/js/questions.js b/SinglePlayer - Games/General Knowledge Quiz/js/questions.js new file mode 100644 index 00000000..69e461cb --- /dev/null +++ b/SinglePlayer - Games/General Knowledge Quiz/js/questions.js @@ -0,0 +1,59 @@ +//creating an array and passing the number, questions, and answers + +let questions = [ + { + numb: 1, + question: "What does HTML stand for?", + answer: "Hyper Text Markup Language", + options: [ + "Hyper Text Preprocessor", + "Hyper Text Markup Language", + "Hyper Text Multiple Language", + "Hyper Tool Multi Language" + ] + }, + { + numb: 2, + question: "What does CSS stand for?", + answer: "Cascading Style Sheet", + options: [ + "Commomn Style Sheet", + "Colorful Style Sheet", + "Computer Style Sheet", + "Cascading Style Sheet" + ] + }, + { + numb: 3, + question: "What does PHP stand for?", + answer: "Hypertext Preprocessor", + options: [ + "Hypertext Preprocessor", + "Hypertext Programming", + "Hypertext Preprogramming", + "Hometext Preprocessor" + ] + }, + { + numb: 4, + question: "What does SQL stand for?", + answer: "Structured Query Language", + options: [ + "Stylish Question Language", + "Stylesheet Query Language", + "Statement Question Language", + "Structured Query Language" + ] + }, + { + numb: 5, + question: "What does XML stand for?", + answer: "eXtensible Markup Language", + options: [ + "eXtensible Markup Language", + "eXecutable Multiple Language", + "eXtra Multi-Program Language", + "eXamine Multiple Language" + ] + }, +]; \ No newline at end of file diff --git a/SinglePlayer - Games/General Knowledge Quiz/js/script.js b/SinglePlayer - Games/General Knowledge Quiz/js/script.js new file mode 100644 index 00000000..3dc1a659 --- /dev/null +++ b/SinglePlayer - Games/General Knowledge Quiz/js/script.js @@ -0,0 +1,206 @@ +//getting all required elements +const start_btn = document.querySelector(".start_btn button"); +const quiz_box = document.querySelector(".quiz_box"); +const timeCount = quiz_box.querySelector(".timer .time_sec"); +const timeLine = quiz_box.querySelector("header .time_line"); +const timeOff = quiz_box.querySelector("header .time_text"); + +const option_list = document.querySelector(".option_list"); + + + +//If Start Quiz button clicked +start_btn.onclick = () => { + quiz_box.classList.add("activeQuiz"); //show the quiz now + showQuestions(0); + queCounter(1); + startTimer(15); + startTimerLine(0); +} + +let que_count = 0; +let que_numb = 1; +let counter; +let counterLine; +let timeValue = 15; +let widthValue = 0; +let userScore = 0; + + +const next_btn = quiz_box.querySelector(".next_btn"); +const result_box = document.querySelector(".result_box"); +const restart_quiz = result_box.querySelector(".buttons .restart"); +const quit_quiz = result_box.querySelector(".buttons .quit"); + +restart_quiz.onclick = () => { + quiz_box.classList.add("activeQuiz"); //show the quiz now + result_box.classList.remove("activeResult"); + let que_count = 0; + let que_numb = 1; + let timeValue = 15; + let widthValue = 0; + let userScore = 0; + showQuestions(que_count); + queCounter(que_numb); + clearInterval(counter); + startTimer(timeValue); + clearInterval(counterLine); + startTimerLine(widthValue); + next_btn.style.display = "none"; + timeOff.textContent = "Time Left"; +} + + + +quit_quiz.onclick = () => { + window.location.reload(); +} + +//If Next button clicked +next_btn.onclick = () => { + if(que_count < questions.length - 1){ + que_count++; + que_numb++; + showQuestions(que_count); + queCounter(que_numb); + clearInterval(counter); + startTimer(timeValue); + clearInterval(counterLine); + startTimerLine(widthValue); + next_btn.style.display = "none"; + timeOff.textContent = "Time Left"; + } + else{ + clearInterval(counter); + clearInterval(counterLine); + console.log("Questions completed"); + showResultBox(); + } +} + +//getting questions and options from array +function showQuestions(index) { + const que_text = document.querySelector(".que_text"); + let que_tag = '' + questions[index].numb + ". " + questions[index].question + ''; + let option_tag = '
' + questions[index].options[0] + '
' + + '
' + questions[index].options[1] + '
' + + '
' + questions[index].options[2] + '
' + + '
' + questions[index].options[3] + '
'; + que_text.innerHTML = que_tag; + option_list.innerHTML = option_tag; + + const option = option_list.querySelectorAll(".option"); + for (let i = 0; i < option.length; i++) { + option[i].setAttribute("onclick", "optionSelected(this)"); + } +} + +let tickIcon = '
'; +let crossIcon = '
'; + + +function optionSelected(answer){ + clearInterval(counter); + clearInterval(counterLine); + let userAns = answer.textContent; + let correctAns = questions[que_count].answer; + let allOptions = option_list.children.length; + if(userAns == correctAns){ + userScore += 1; + console.log(userScore); + answer.classList.add("correct"); + console.log("Answer is Correct"); + answer.insertAdjacentHTML("beforeend", tickIcon); + } + else{ + answer.classList.add("incorrect"); + console.log("Answer is Wrong"); + answer.insertAdjacentHTML("beforeend", crossIcon); + + + //if answers is incorrect then autometically selected the correct ans + for (let i = 0; i < allOptions; i++) { + if (option_list.children[i].textContent == correctAns){ + option_list.children[i].setAttribute("class", "option correct"); + option_list.children[i].insertAdjacentHTML("beforeend", tickIcon); + + } + } + } + + //once user selected disabled all options + for (let i = 0; i < allOptions; i++){ + option_list.children[i].classList.add("disabled"); + } + next_btn.style.display = "block"; +} + +function showResultBox(){ + quiz_box.classList.remove("activeQuiz"); //hide the quiz now + result_box.classList.add("activeResult"); //show the result now + const scoreText = result_box.querySelector(".score_text"); + if (userScore > 3){ + let scoreTag = 'and congrats! You got

'+ userScore +'

out of

'+ questions.length +'

'; + scoreText.innerHTML = scoreTag; + } + else if (userScore > 1){ + let scoreTag = 'and nice, You got

'+ userScore +'

out of

'+ questions.length +'

'; + scoreText.innerHTML = scoreTag; + } + else{ + let scoreTag = 'and sorry, You got only

'+ userScore +'

out of

'+ questions.length +'

'; + scoreText.innerHTML = scoreTag; + } +} + +function startTimer(time){ + counter = setInterval(timer, 1000); + function timer(){ + timeCount.textContent = time; + time--; + if(time < 9){ + let addZero =timeCount.textContent; + timeCount.textContent = "0" + addZero; + } + if(time < 0){ + clearInterval(counter); + timeCount.textContent = "00"; + timeOff.textContent = "Time Off"; + + let correctAns = questions[que_count].answer; + let allOptions = option_list.children.length; + + for (let i = 0; i < allOptions; i++) { + if (option_list.children[i].textContent == correctAns){ + option_list.children[i].setAttribute("class", "option correct"); + option_list.children[i].insertAdjacentHTML("beforeend", tickIcon); + + } + } + for (let i = 0; i < allOptions; i++){ + option_list.children[i].classList.add("disabled"); + } + next_btn.style.display = "block"; + } + } +} + +function startTimerLine(time){ + counterLine = setInterval(timer, 29); + function timer(){ + time += 1; + timeLine.style.width = time +"px"; + if(time > 549){ + clearInterval(counterLine); + } + } +} + + + + +function queCounter(index) { + const bottom_ques_counter = quiz_box.querySelector(".total_que"); + let totalQuesCountTag = '

'+ index +'

of

'+ questions.length +'

Questions
'; + bottom_ques_counter.innerHTML = totalQuesCountTag; +} diff --git a/SinglePlayer - Games/General Knowledge Quiz/style.css b/SinglePlayer - Games/General Knowledge Quiz/style.css new file mode 100644 index 00000000..e1e7c6e8 --- /dev/null +++ b/SinglePlayer - Games/General Knowledge Quiz/style.css @@ -0,0 +1,305 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins',sans-serif; +} + +body{ + background-image: url(./bg.jpg); +} + +.start_btn, .quiz_box, .result_box{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.2), + 0px 6px 20px 0 rgba(0, 0, 0, 0.19); + transition: all 0.3s ease; +} + +.quiz_box.activeQuiz, +.result_box.activeResult{ + + z-index: 5; + opacity: 1; + pointer-events: auto; + transform: translate(-50%, -50%) scale(1); +} + +.start_btn button{ + font-size: 25px; + font-weight: 500; + color: #d6bf6a; + padding: 15px 30px; + outline: none; + border: none; + border-radius: 10px; + background: #fff; + cursor: pointer; +} + +.quiz_box{ + width: 550px; + background: #fff; + border-radius: 5px; + opacity: 0; + pointer-events: none; + transform: translate(-50%, -50%) scale(0.9); +} + +.quiz_box header{ + position: relative; + z-index: 99; + height: 70px; + padding: 0 30px; + background: #fff; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 5px 5px 0 0; + box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.1); +} + +.quiz_box header .title{ + font-size: 20px; + font-weight: 600; +} + +.quiz_box header .timer{ + display: flex; + align-items: center; + justify-content: space-between; + width: 145px; + height: 45px; + background: #decc8c; + border: 1px solid #ffe893; + border-radius: 5px; + padding: 0 8px; +} + +.quiz_box header .timer .time_text{ + font-weight: 400; + font-size: 17px; + user-select: none; +} + +.quiz_box header .timer .time_sec{ + font-size: 18px; + font-weight: 500; + background: #343a40; + height: 30px; + width: 45px; + color: #fff; + text-align: center; + line-height: 30px; + border-radius: 5px; + border: 1px solid #343a40; + user-select: none; +} + +.quiz_box header .time_line{ + position: absolute; + bottom: 0px; + height: 3px; + left: 0px; + background: #d6bf6a; +} + +.quiz_box section{ + padding: 25px 30px 20px 30px; + background: #fff; +} + +.quiz_box section .que_text{ + font-size: 25px; + font-weight: 600; +} + +.quiz_box section .option_list{ + padding: 20px 0; + display: block; +} + +section .option_list .option{ + background: #f8f6f0; + border: 1px solid #c2ad5f; + border-radius: 5px; + padding: 8px 15px; + margin-bottom: 15px; + font-size: 17px; + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + transition: all 0.3s ease; +} + +section .option_list .option:hover{ + color: #fff; + background: #dccd97; + border-color: #cbb97a; +} + +.option_list .option:last-child{ + margin-bottom: 0px; +} + +.option_list .option .icon{ + height: 26px; + width: 26px; + border: 2px solid transparent; + border-radius: 50%; + text-align: center; + font-size: 13px; + line-height: 24px; + pointer-events: none; +} + +.option_list .option .icon.tick{ + color: #23903c; + border-color: #23903c; + background: #d4edda; +} + +.option_list .option .icon.cross{ + color: #a42834; + border-color: #a42834; + background: #f8d7da; +} + +.option_list .option.correct{ + color: #155724; + border-color: #c3e6cb; + background: #d4edda; +} + +.option_list .option.incorrect{ + color: #721c24; + border-color: #f5c6cb; + background: #f8d7da; +} + +.option_list .option.disabled{ + pointer-events: none; +} + +.quiz_box footer{ + height: 60px; + width: 100%; + padding: 0 30px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.quiz_box footer .total_que span{ + display: flex; + user-select: none; +} + +footer .total_que span p{ + font-weight: 500; + padding: 0 5px; +} + +.total_que span p:first-child{ + padding-left: 0px; +} + +footer .next_btn{ + display: none; + height: 40px; + padding: 0 13px; + font-size: 18px; + font-weight: 400; + border: none; + outline: none; + color: #fff; + background: #d6bf6a; + border-radius: 5px; + border: 1px solid #d6bf6a; + cursor: pointer; + transition: all 0.3s ease; +} + +footer .next_btn:hover{ + background: #bfa64c; +} + +.result_box{ + background: #fff; + width: 450px; + padding: 25px 30px; + border-radius: 5px; + display: flex; + text-align: center; + align-items: center; + flex-direction: column; + justify-content: space-between; + opacity: 0; + pointer-events: none; + transform: translate(-50%, -50%) scale(0.9); +} + +.result_box .icon{ + font-size: 100px; + color: #d6bf6a; + margin-bottom: 10px; +} + +.result_box .complete_text{ + font-size: 20px; + font-weight: 500; +} + +.result_box .score_text span{ + display: flex; + margin: 10px 0; + font-size: 18px; + font-weight: 500; +} + +.score_text span p{ + font-weight: 600; + padding: 0 4px; +} + +.result_box .buttons{ + display: flex; + margin: 20px 0; +} + +.result_box .buttons button{ + margin: 0 10px; + height: 40px; + padding: 0 20px; + border: none; + outline: none; + font-size: 18px; + font-weight: 500; + border-radius: 5px; + border: 1px solid #d6bf6a; + cursor: pointer; + transition: all 0.3s ease; +} + +.buttons button.restart{ + color: #fff; + background: #d6bf6a; +} + +.buttons button.restart:hover{ + background: #bfa64c; +} + +.buttons button.quit{ + color: #d6bf6a; +} + +.buttons button.quit:hover{ + color: #fff; + background: #d6bf6a; +} \ No newline at end of file diff --git a/SinglePlayer - Games/Guess The Sequence/index.html b/SinglePlayer - Games/Guess The Sequence/index.html new file mode 100644 index 00000000..19364e2e --- /dev/null +++ b/SinglePlayer - Games/Guess The Sequence/index.html @@ -0,0 +1,52 @@ + + + + + + Guess the Sequence + + + + +

Guess the sequence

+ +
+
+
+
+
+
+
+ +
+ +
+
+
+ + +
+
+
+

Congratulations, you won!

+ +
+
+ + + \ No newline at end of file diff --git a/SinglePlayer - Games/Guess The Sequence/script.js b/SinglePlayer - Games/Guess The Sequence/script.js new file mode 100644 index 00000000..ad74d75f --- /dev/null +++ b/SinglePlayer - Games/Guess The Sequence/script.js @@ -0,0 +1,218 @@ +const colors = ['#F44336','#4CAF50','#03A9F4','#FFEB3B',"#673AB7","#795548","#FF5722","#212121"] +let sequence = [] +let numberOfColors=0 +let sequenceSize =0 +let maxAttemps=0 +let currentAttemp = 0 +let currentGuess = [] +let currentGuessDots=[] +let currentGuessIndex=0 + +let confettiInterval + +function GenerateSequence() +{ + for(let i = 0;i element ==currentGuess[i]).length + if(correctColorPosition.filter(element => element ==currentGuess[i]).length < numberOfColorInSequence) + { + let k = 0 + for(let j=0;j { + showConfetti(); + }, 400); + } +} + +const showConfetti = () => { + + const confettiContainer = document.querySelector('#confetti-container'); + const confetti = document.createElement('div'); + confetti.textContent = '๐ŸŽ‰'; + confetti.classList.add('confetti'); + confetti.style.left = Math.random() * innerWidth + 'px'; + confettiContainer.appendChild(confetti); + setTimeout(() => { + confetti.remove(); + }, 5000); + }; + +function newGame() +{ + document.getElementById("confetti-container").style.visibility = "hidden" + document.getElementById("menu").style.visibility = "hidden" + sequence = [] + difficultySelect = document.getElementById("difficulty").options; + difficultyValue = difficultySelect[difficultySelect.selectedIndex].value + if(difficultyValue === "Easy") + { + numberOfColors = 4 + sequenceSize = 3 + maxAttemps = 6 + } + else if(difficultyValue === "Medium") + { + numberOfColors = 5 + sequenceSize = 4 + maxAttemps = 6 + } + else if(difficultyValue === "Hard") + { + numberOfColors = 6 + sequenceSize = 5 + maxAttemps = 6 + } + currentAttemp = 0 + currentGuess = [] + currentGuessDots=[] + currentGuessIndex=0 + const colorsContainer = document.getElementById("colors") + while (colorsContainer.firstChild) colorsContainer.removeChild(colorsContainer.firstChild); + const guessesContainer = document.getElementById("guesses") + while (guessesContainer.firstChild) guessesContainer.removeChild(guessesContainer.firstChild); + const resultsContainer = document.getElementById("results") + while (resultsContainer.firstChild) resultsContainer.removeChild(resultsContainer.firstChild); + + document.getElementById("attempsLeft").innerText="Attempts left: " + (maxAttemps - currentAttemp).toString() + + GenerateSequence() + createGuessColors(); + createGuessSequence() +} + +function wonButton() +{ + clearInterval(confettiInterval) + showMenu() +} + +function showMenu() +{ + document.getElementById("confetti-container").style.visibility = "hidden" + document.getElementById("menu").style.visibility = "visible" +} + + +window.onload = function(){ + showMenu() + +} \ No newline at end of file diff --git a/SinglePlayer - Games/Guess The Sequence/styles.css b/SinglePlayer - Games/Guess The Sequence/styles.css new file mode 100644 index 00000000..0d6cbd4c --- /dev/null +++ b/SinglePlayer - Games/Guess The Sequence/styles.css @@ -0,0 +1,155 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto; + height: 100vh; + background-color: #37474F; + box-sizing: content-box; + overflow: hidden; + padding: 0; + font-family: Verdana, Geneva, Tahoma, sans-serif; + } + + +.dot { + height: 50px; + width: 50px; + background-color: #313b4b; + border-radius: 100%; + display: inline-block; + outline: solid 5px #757575; + margin: 10px; + + } + +#game{ + width: 1000px; + height: 600px; + display: flex; + flex-direction: row; + } + +#guesses +{ + width: 500px; + display:block; +} + +.guess + { + width:100; + height: 100; + justify-content: center; + align-items: center; + text-align:center; + display:flex; + } + +#colors + { + width:40; + justify-content:left; + text-align:center; + align-items: center; + display: flex; + flex-direction: column; + } + +#results +{ + width: 500px; + display:block; +} + +.result +{ + width:100; + height: 100; + justify-content: center; + align-items: center; + text-align:center; + display:flex; +} + +#check +{ + width: 1000px; + display:flex; + padding: 0.5%; + align-items: center; + text-align: center; + justify-content: center; +} + +#confetti-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} + +#menu { + position: absolute; + top: 0; + left: 0; + width: 100%; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + height: 100vh; +} + +.card { + background-color: #90A4AE; + max-width: 700px; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + padding: 2rem; +} + +.card p { + font-size: 1.2rem; + text-align: center; + margin: 0; + padding: 10px; +} + +.confetti { + position: absolute; + top: 0; + font-size: 1.6rem; + animation: confetti-fall linear 5s infinite; +} + +@keyframes confetti-fall { + 0% { + transform: translateY(-100%) rotate(0); + } + 100% { + transform: translateY(100vh) rotate(180deg); + } +} + +.button +{ + position: relative; + overflow: hidden; + color: #fff; + background-color: #01579B; + padding: 0.5rem 1rem; + font-family: 'Roboto', sans-serif; + font-size: 1.0rem; + outline: 0; + border: 0; + margin: 10px; + border-radius: 0.20rem; + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); + cursor: pointer; +} \ No newline at end of file diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/fistL.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/fistL.png new file mode 100644 index 00000000..4a1c9426 Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/fistL.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/fistR.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/fistR.png new file mode 100644 index 00000000..c30a5f61 Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/fistR.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/fiveL.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/fiveL.png new file mode 100644 index 00000000..95eea6b8 Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/fiveL.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/fiveR.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/fiveR.png new file mode 100644 index 00000000..746dec51 Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/fiveR.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/fourL.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/fourL.png new file mode 100644 index 00000000..0431126c Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/fourL.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/fourR.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/fourR.png new file mode 100644 index 00000000..0c3e867a Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/fourR.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/oneL.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/oneL.png new file mode 100644 index 00000000..2d4a881e Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/oneL.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/oneR.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/oneR.png new file mode 100644 index 00000000..a7b8ad01 Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/oneR.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/sixL.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/sixL.png new file mode 100644 index 00000000..a2ddd096 Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/sixL.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/sixR.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/sixR.png new file mode 100644 index 00000000..afc86c84 Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/sixR.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/threeL.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/threeL.png new file mode 100644 index 00000000..5b7f1e53 Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/threeL.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/threeR.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/threeR.png new file mode 100644 index 00000000..72e32b40 Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/threeR.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/twoL.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/twoL.png new file mode 100644 index 00000000..f0d0c9cd Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/twoL.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/images/twoR.png b/SinglePlayer - Games/Hand_Cricket_Champ/images/twoR.png new file mode 100644 index 00000000..d36d078b Binary files /dev/null and b/SinglePlayer - Games/Hand_Cricket_Champ/images/twoR.png differ diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/index.html b/SinglePlayer - Games/Hand_Cricket_Champ/index.html new file mode 100644 index 00000000..69ac18f5 --- /dev/null +++ b/SinglePlayer - Games/Hand_Cricket_Champ/index.html @@ -0,0 +1,134 @@ + + + + + + Hand Cricket Champ + + + + + +
+
+

Hand Cricket Champ

+

+ Welcome to Hand Cricket Champ, where every flick counts towards your victory! Play against the computer and test your skills in this thrilling game of strategy and precision. Aim for the highest scores with each flick of your finger. Experience the excitement of cricket at your fingertips in Finger Flick Cricket. +

+
+ +
+ + +
+
+
+ +
+
+ +
How to Play Hand Cricket
+
Objective:
+
Score more runs than the computer or dismiss the computer player.
+ +
Player:
+
You will play against the computer.
+ +
Instructions:
+
1. Batting:
+
Choose a number between 1 and 6.The computer will do same.If your numbers match, you're out. Otherwise, your runs are added to your total score.There is no limit to the number of balls (guesses) per inning. + +
2. Bowling (Computer's turn):
+
The computer tries to guess your chosen number. If the computer guesses correctly, you're out. Otherwise, your runs are added to your total score.
+ +
3. Switch Roles:
+
After each inning (when you get out or score runs), the computer bats and you bowl.
+ +
4. Scoring:
+
Runs are based on the numbers chosen by you and the computer.If you're out, no runs are scored for that inning.
+ +
5. Winner:
+
The player with the highest total score wins.
+ +
+ +
+
+ + +
+ +

H

+
+ + +
+
+
+ +
+
+
+

Congratulations!

+

You Won the Toss

+
+
+

What would you like to do?

+ + +
+
+
+ + +
+
+ +

Player

+

0

+
+ +

Computer

+

0

+
+
+ +
+ + + + + Let's
Start +
+ + + +
+ +
+ + + + + + +
+
+
+ + +
+
+

Congratulations!

+

You Won!!

+
+ +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/script.js b/SinglePlayer - Games/Hand_Cricket_Champ/script.js new file mode 100644 index 00000000..b1ede0f9 --- /dev/null +++ b/SinglePlayer - Games/Hand_Cricket_Champ/script.js @@ -0,0 +1,454 @@ +const run_1 = document.getElementById("run_1"); +const run_2 = document.getElementById("run_2"); +const run_3 = document.getElementById("run_3"); +const run_4 = document.getElementById("run_4"); +const run_5 = document.getElementById("run_5"); +const run_6 = document.getElementById("run_6"); + +document.getElementById("Instructions").style.display = "none"; +document.getElementById("toss").style.display = "none"; +document.getElementById("toss-res").style.display = "none"; +document.getElementById("game").style.display = "none"; +document.getElementById("results").style.display = "none"; + + +var comp_toss_win_choice = -1; + +function tossStart() { + document.getElementById("landing").style.display = "none"; + document.getElementById("toss").style.display = "flex"; +} + +function flipCoin(userChoice) { + var randomValue = Math.random(); + const coin = document.getElementById('coin'); + if (randomValue >= 0.5) { + coin.style.transform = 'rotateX(720deg)'; + document.getElementById("res").innerHTML = "H"; + } else { + coin.style.transform = 'rotateX(-720deg)'; + document.getElementById("res").innerHTML = "T"; + } + + setTimeout(() => { + if ((userChoice === 'Heads' && randomValue >= 0.5) || (userChoice === 'Tails' && randomValue < 0.5)) { + setTimeout(() => { + document.getElementById("toss").style.display = "none"; + document.getElementById("toss-res").style.display = "flex"; + }, 1500); + } else { + document.getElementById("toss-res-text").innerHTML = "

Oh!

You Lost the Toss

"; + + comp_toss_win_choice = Math.random(); + if (comp_toss_win_choice >= 0.5) { + document.getElementById("toss-choice-cont").innerHTML = "

Computer Has decided to Bat First

"; + } else { + document.getElementById("toss-choice-cont").innerHTML = "

Computer Has decided to Bowl First

"; + } + + setTimeout(() => { + document.getElementById("toss").style.display = "none"; + document.getElementById("toss-res").style.display = "flex"; + + setTimeout(() => { + gameStart(); + }, 1000); + + }, 1500); + } + }, 500); +} + +var scoreC = 0; // Score of comp +var scoreP = 0; // Score of Player +var flag = 1; // Indicator of Batsmen + +// Game +var sC = 0, SP = 0; +// Deciding Who Bats First + +function gameStart(UserInput = comp_toss_win_choice) { + if (UserInput === 2 || UserInput < 0.5) { // Player Bats first + bat_first(); + } + else if (UserInput === 3 || UserInput > 0.5) { // Player Bowls first + bowl_first(); + } + + document.getElementById("toss-res").style.display = "none"; + document.getElementById("game").style.display = "flex"; +} + +function showResult(){ + if (scoreC > scoreP) { + document.getElementById("out-title").innerHTML = "

Nice Try

But You Lost!

"; + document.getElementById("game").style.display = "none"; + document.getElementById("results").style.display = "flex"; + } + else if (scoreC === scoreP) { + document.getElementById("out-title").innerHTML = "

You played Well!

Game's Draw

"; + document.getElementById("game").style.display = "none"; + document.getElementById("results").style.display = "flex"; + } + else if (scoreC < scoreP) { + document.getElementById("game").style.display = "none"; + document.getElementById("results").style.display = "flex"; + } +} + +// Player Bats First... +function bat_first() { + run_1.addEventListener('click', function () { + if (flag === 1) plyBatFirst(1); + else if (flag === 2) plyBowlSecond(1); + else if(flag === 3) showResult(); + }) + run_2.addEventListener('click', function () { + if (flag === 1) plyBatFirst(2); + else if (flag === 2) plyBowlSecond(2); + else if(flag === 3) showResult(); + }) + run_3.addEventListener('click', function () { + if (flag === 1) plyBatFirst(3); + else if (flag === 2) plyBowlSecond(3); + else if(flag === 3) showResult(); + }) + run_4.addEventListener('click', function () { + if (flag === 1) plyBatFirst(4); + else if (flag === 2) plyBowlSecond(4); + else if(flag === 3) showResult(); + }) + run_5.addEventListener('click', function () { + if (flag === 1) plyBatFirst(5); + else if (flag === 2) plyBowlSecond(5); + else if(flag === 3) showResult(); + }) + run_6.addEventListener('click', function () { + if (flag === 1) plyBatFirst(6); + else if (flag === 2) plyBowlSecond(6); + else if(flag === 3) showResult(); + }) +} + +function plyBatFirst(plyChoice) { + const randomChoice = Math.round(Math.random() * 5 + 1); + // image generation + switch (randomChoice) { + case 1: + document.getElementsByClassName("comp-i")[0].innerHTML = 'ONE'; + break; + + case 2: + document.getElementsByClassName("comp-i")[0].innerHTML = 'TWO'; + break; + + case 3: + document.getElementsByClassName("comp-i")[0].innerHTML = 'THREE'; + break; + + case 4: + document.getElementsByClassName("comp-i")[0].innerHTML = 'FOUR'; + break; + + case 5: + document.getElementsByClassName("comp-i")[0].innerHTML = 'FIVE'; + break; + + case 6: + document.getElementsByClassName("comp-i")[0].innerHTML = 'SIX'; + break; + } + // image generation + switch (plyChoice) { + case 1: + document.getElementsByClassName("ply-i")[0].innerHTML = 'ONE'; + break; + + case 2: + document.getElementsByClassName("ply-i")[0].innerHTML = 'TWO'; + break; + + case 3: + document.getElementsByClassName("ply-i")[0].innerHTML = 'THREE'; + break; + + case 4: + document.getElementsByClassName("ply-i")[0].innerHTML = 'FOUR'; + break; + + case 5: + document.getElementsByClassName("ply-i")[0].innerHTML = 'FIVE'; + break; + + case 6: + document.getElementsByClassName("ply-i")[0].innerHTML = 'SIX'; + break; + } + + if (randomChoice === plyChoice) { + document.getElementsByClassName("status")[0].innerHTML = 'OUT'; + document.getElementById("Scr-P").innerHTML = scoreP; + SP = scoreP; + flag = 2; + } + else { + document.getElementsByClassName("status")[0].innerHTML = plyChoice; + scoreP += plyChoice; + document.getElementById("Scr-P").innerHTML = scoreP + '*'; + } +} + +function plyBowlSecond(plyChoice) { + const randomChoice = Math.round(Math.random() * 5 + 1); + // image generation + switch (randomChoice) { + case 1: + document.getElementsByClassName("comp-i")[0].innerHTML = 'ONE'; + break; + + case 2: + document.getElementsByClassName("comp-i")[0].innerHTML = 'TWO'; + break; + + case 3: + document.getElementsByClassName("comp-i")[0].innerHTML = 'THREE'; + break; + + case 4: + document.getElementsByClassName("comp-i")[0].innerHTML = 'FOUR'; + break; + + case 5: + document.getElementsByClassName("comp-i")[0].innerHTML = 'FIVE'; + break; + + case 6: + document.getElementsByClassName("comp-i")[0].innerHTML = 'SIX'; + break; + } + // image generation + switch (plyChoice) { + case 1: + document.getElementsByClassName("ply-i")[0].innerHTML = 'ONE'; + break; + + case 2: + document.getElementsByClassName("ply-i")[0].innerHTML = 'TWO'; + break; + + case 3: + document.getElementsByClassName("ply-i")[0].innerHTML = 'THREE'; + break; + + case 4: + document.getElementsByClassName("ply-i")[0].innerHTML = 'FOUR'; + break; + + case 5: + document.getElementsByClassName("ply-i")[0].innerHTML = 'FIVE'; + break; + + case 6: + document.getElementsByClassName("ply-i")[0].innerHTML = 'SIX'; + break; + } + + if (randomChoice === plyChoice) { + document.getElementsByClassName("status")[0].innerHTML = 'OUT'; + document.getElementById("Scr-C").innerHTML = scoreC; + sC = scoreC; + flag = 3; + } + else { + document.getElementsByClassName("status")[0].innerHTML = randomChoice; + scoreC += randomChoice; + document.getElementById("Scr-C").innerHTML = scoreC + '*'; + if(scoreC > scoreP) flag = 3; + } +} + + +// Player Bowls First... +function bowl_first() { + run_1.addEventListener('click', function () { + if (flag === 1) plyBowlFirst(1); + else if (flag === 2) plyBatSecond(1); + else if(flag === 3) showResult(); + }) + run_2.addEventListener('click', function () { + if (flag === 1) plyBowlFirst(2); + else if (flag === 2) plyBatSecond(2); + else if(flag === 3) showResult(); + }) + run_3.addEventListener('click', function () { + if (flag === 1) plyBowlFirst(3); + else if (flag === 2) plyBatSecond(3); + else if(flag === 3) showResult(); + }) + run_4.addEventListener('click', function () { + if (flag === 1) plyBowlFirst(4); + else if (flag === 2) plyBatSecond(4); + else if(flag === 3) showResult(); + }) + run_5.addEventListener('click', function () { + if (flag === 1) plyBowlFirst(5); + else if (flag === 2) plyBatSecond(5); + else if(flag === 3) showResult(); + }) + run_6.addEventListener('click', function () { + if (flag === 1) plyBowlFirst(6); + else if (flag === 2) plyBatSecond(6); + else if(flag === 3) showResult(); + }) +} + +function plyBowlFirst(plyChoice) { + const randomChoice = Math.round(Math.random() * 5 + 1); + // image generation + switch (randomChoice) { + case 1: + document.getElementsByClassName("comp-i")[0].innerHTML = 'ONE'; + break; + + case 2: + document.getElementsByClassName("comp-i")[0].innerHTML = 'TWO'; + break; + + case 3: + document.getElementsByClassName("comp-i")[0].innerHTML = 'THREE'; + break; + + case 4: + document.getElementsByClassName("comp-i")[0].innerHTML = 'FOUR'; + break; + + case 5: + document.getElementsByClassName("comp-i")[0].innerHTML = 'FIVE'; + break; + + case 6: + document.getElementsByClassName("comp-i")[0].innerHTML = 'SIX'; + break; + } + // image generation + switch (plyChoice) { + case 1: + document.getElementsByClassName("ply-i")[0].innerHTML = 'ONE'; + break; + + case 2: + document.getElementsByClassName("ply-i")[0].innerHTML = 'TWO'; + break; + + case 3: + document.getElementsByClassName("ply-i")[0].innerHTML = 'THREE'; + break; + + case 4: + document.getElementsByClassName("ply-i")[0].innerHTML = 'FOUR'; + break; + + case 5: + document.getElementsByClassName("ply-i")[0].innerHTML = 'FIVE'; + break; + + case 6: + document.getElementsByClassName("ply-i")[0].innerHTML = 'SIX'; + break; + } + + if (randomChoice === plyChoice) { + document.getElementsByClassName("status")[0].innerHTML = 'OUT'; + document.getElementById("Scr-C").innerHTML = scoreC; + sC = scoreC; + flag = 2; + } + + else { + document.getElementsByClassName("status")[0].innerHTML = randomChoice; + scoreC += randomChoice; + document.getElementById("Scr-C").innerHTML = scoreC + '*'; + } +} + +function plyBatSecond(plyChoice) { + const randomChoice = Math.round(Math.random() * 5 + 1); + // image generation + switch (randomChoice) { + case 1: + document.getElementsByClassName("comp-i")[0].innerHTML = 'ONE'; + break; + + case 2: + document.getElementsByClassName("comp-i")[0].innerHTML = 'TWO'; + break; + + case 3: + document.getElementsByClassName("comp-i")[0].innerHTML = 'THREE'; + break; + + case 4: + document.getElementsByClassName("comp-i")[0].innerHTML = 'FOUR'; + break; + + case 5: + document.getElementsByClassName("comp-i")[0].innerHTML = 'FIVE'; + break; + + case 6: + document.getElementsByClassName("comp-i")[0].innerHTML = 'SIX'; + break; + } + // image generation + switch (plyChoice) { + case 1: + document.getElementsByClassName("ply-i")[0].innerHTML = 'ONE'; + break; + + case 2: + document.getElementsByClassName("ply-i")[0].innerHTML = 'TWO'; + break; + + case 3: + document.getElementsByClassName("ply-i")[0].innerHTML = 'THREE'; + break; + + case 4: + document.getElementsByClassName("ply-i")[0].innerHTML = 'FOUR'; + break; + + case 5: + document.getElementsByClassName("ply-i")[0].innerHTML = 'FIVE'; + break; + + case 6: + document.getElementsByClassName("ply-i")[0].innerHTML = 'SIX'; + break; + } + + if (randomChoice === plyChoice) { + document.getElementsByClassName("status")[0].innerHTML = 'OUT'; + document.getElementById("Scr-P").innerHTML = scoreP; + SP = scoreP; + flag = 3; + } + else { + document.getElementsByClassName("status")[0].innerHTML = plyChoice; + scoreP += plyChoice; + document.getElementById("Scr-P").innerHTML = scoreP + '*'; + if (scoreP > scoreC) { + flag = 3; + } + } +} + + +// Add event listener to the Play Again button +const playAgainBtn = document.querySelector('#playAgain .btn'); +playAgainBtn.addEventListener('click', playAgain); + +// Function to reset the game and show the landing page +function playAgain() { + // Reset game variables to initial values + location.reload(); +} diff --git a/SinglePlayer - Games/Hand_Cricket_Champ/style.css b/SinglePlayer - Games/Hand_Cricket_Champ/style.css new file mode 100644 index 00000000..4c00baad --- /dev/null +++ b/SinglePlayer - Games/Hand_Cricket_Champ/style.css @@ -0,0 +1,426 @@ +/* landing Page */ + + +@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap'); + +*{ +margin: 0; +padding: 0; + +font-family: 'dosis'; +font-weight: 700; +} + +@media screen and (max-width: 750px){ + /*Instructions*/ + #Instructions .inst-container{ + height: 80%; + + background-color: white; + + border-radius: 70px; + + max-width: 800px; + margin: 0px 0px; + padding: 0px; + line-height: 23px !important; + } + + #Instructions .inst-container .heading { + font-size: 15px; + font-weight: bold; + margin-bottom: 0px; + } + #Instructions .inst-container .sub-heading { + font-size: 12px; + font-weight: bold; + margin-top: 0px; + margin-bottom: 0px; + } + #Instructions .inst-container .instruction { + margin-left: 0px; + font-size: 10px; + } + + /* Toss */ + #toss .coin-container #buttons{ + display: flex; + flex-direction: column; + gap: 10px; + + align-items: center; + } + + /* Game */ + #game .game-cont .score-cont{ + width: 90%; + padding: 0px 5px; + } + + #game .game-cont .score-cont .score{ + width: 125px; + height: 60%; + + font-size: 12px; + + } + + + /* game{ + height: 100vh; + width: 100vw; + background-color: rgba(14, 9, 41, 0.899); + + display: flex; + justify-content: center; + align-items: center; + } */ + + /* .game-cont{ + height: 80%; + width: 80%; + + border: 0px; + border-radius: 50px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: white; + } */ + + #game .game-cont .graphic-cont{ + justify-content: space-evenly; + } + + #game .game-cont .status{ + height: 100%; + width: 15%; + font-weight: 800; + font-size: 32px; + + text-align: center; + } + + #game .game-cont .image img{ + width: 90%; + } + + #game .choice-cont{ + width: 90%; + + border: 0px; + border-radius: 40px; + + background-color: rgba(14, 9, 41, 0.899); + } + + #game .choice-cont .choice{ + height: 35px; + width: 35px; + + font-size: 30px; + font-weight: 800; + } + +} + +/* Landing Page */ + +#landing{ +height: 100vh; +width: 100vw; + +display: flex; +justify-content: center; +align-items: center; + +background-color: rgba(14, 9, 41, 0.899); +} + +#landing .cont{ +border: 0px; +border-radius: 70px; +width: 60%; +height: 80%; + +display: flex; +flex-direction: column; +align-items: center; +justify-content: center; + +gap: 40px; +padding: 40px; +text-align: center; + +background-color: white; +} + +.cont .title{ +display: flex; +flex-direction: column; +gap: 40px; +} + +/* Button design */ + +.btn{ +width: 150px; +height: 50px; + +border: 0px; +border-radius: 50px; +margin: 0 10px 10px 10px; + +background-color: rgba(14, 9, 41, 0.899); +color: rgb(255, 255, 255); +font-size: large; + +transition: all 0.3s ease; +} + +.btn:hover{ +width: 160px; +height: 60px; + +background-color: rgba(29, 22, 69, 0.723); +font-size: 24px; +} + +.btn a{ +text-decoration: none; +color: white; +font-weight: bolder; +color: white; + +} + +/* Instructions */ + +#Instructions{ + height: 100vh; + width: 100vw; + + display: flex; + justify-content: center; + align-items: center; + + background-color: rgba(14, 9, 41, 0.899); +} + +#Instructions .inst-container{ + height: 80%; + + background-color: white; + + border-radius: 70px; + + max-width: 800px; + margin: 0 auto; + padding: 20px; + line-height: 28px; +} + +.heading { + font-size: 24px; + font-weight: bold; + margin-bottom: 10px; +} +.sub-heading { + font-size: 18px; + font-weight: bold; + margin-top: 10px; + margin-bottom: 5px; +} +.instruction { + margin-left: 20px; +} + +/* Toss */ + +toss{ +display: flex; +justify-content: center; +align-items: center; +height: 100vh; +width: 100vw; +background-color: rgba(14, 9, 41, 0.899); +} + +.coin-container { +position: relative; + +background-color: white; +border: 0px; +border-radius: 70px; +width: 60%; +height: 80%; + +display: flex; +flex-direction: column; +gap: 20px; +justify-content: center; +align-items: center; +} + +.coin { +width: 100px; +height: 100px; +background-color: #ffd700; /* gold color */ +border-radius: 50%; +box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); +transform-style: preserve-3d; +transition: transform 0.5s ease-in-out; + +display: flex; +justify-content: center; +align-items: center; +color: aliceblue; +} + +#res{ +font-size: 48px; +} + +#toss-res{ + height: 100vh; + width: 100vw; + + background-color: rgba(14, 9, 41, 0.899); + display: flex; + align-items: center; + justify-content: center; +} + +.toss-res-cont{ + height: 80%; + width: 60%; + border: 0px; + border-radius: 70px; + + align-content: center; + text-align: center; + line-height:60px; + background-color: white; +} + +/* Game */ + +game{ + height: 100vh; + width: 100vw; + background-color: rgba(14, 9, 41, 0.899); + + display: flex; + justify-content: center; + align-items: center; +} + +.game-cont{ + height: 80%; + width: 80%; + + border: 0px; + border-radius: 50px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: white; +} + +.game-cont .score-cont{ + height: 20%; + width: 80%; + + border: 0px; + border-radius: 50px; + + display: flex; + align-items: center; + justify-content: space-around; + + background-color: rgba(14, 9, 41, 0.899); +} + +.score-cont .score{ + height: 60%; + width: 150px; + background-color: aquamarine; + + border-radius: 20px; + + text-align: center; +} + +.graphic-cont{ + height: 50%; + width: 100%; + + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.status{ + height: 100%; + width: 20%; + font-weight: 900; + font-size: 48px; + + text-align: center; +} + +.image img{ + width: 100%; +} + +.choice-cont{ + height: 20%; + width: 80%; + + border: 0px; + border-radius: 50px; + + display: flex; + justify-content: space-evenly; + align-items: center; + + background-color: rgba(14, 9, 41, 0.899); +} + +.choice{ + height: 50px; + width: 50px; + + border: 0px; + border-radius: 50%; + + background-color: white; + + text-align: center; + color: red; + font-size: 38px; + font-weight: 900; +} + + +/* Results */ + +.out-cont{ + width: 100vw; + height: 100vh; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + + gap: 20px; +} + diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/README.md b/SinglePlayer - Games/Hangman Game play/Hangman Game/README.md new file mode 100644 index 00000000..f1db34b5 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/README.md @@ -0,0 +1,18 @@ +# guess-the-number-game +In this Hangman Game will guess the answer of given riddle in order to choose correct option and this game 6 chances to guess the letter +## Instructions +### Game Objective: + +- The computer will provide riddle and give 6 chance to guess the letter that present in answer. +- Your goal is to guess this answer letter within 6 attempts. +### How to Play: + +- The game will prompt you to enter your guess. +- After each guess, if letter correct then it will show on the frontend page and if it is not correct then the image will added with hangman image . +### Game Rules: + +- You have 6 attempts to guess the correct letter. +- The game will provide feedback after each letter to guide you towards the correct answer. +- If you guess the number within 6 attempts, you win. Otherwise, you lose the game. +### Screenshots: + \ No newline at end of file diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-0.svg b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-0.svg new file mode 100644 index 00000000..4413c372 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-0.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-1.svg b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-1.svg new file mode 100644 index 00000000..700cf117 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-2.svg b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-2.svg new file mode 100644 index 00000000..780d93b5 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-3.svg b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-3.svg new file mode 100644 index 00000000..f51cf848 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-3.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-4.svg b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-4.svg new file mode 100644 index 00000000..1cc6ccfc --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-4.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-5.svg b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-5.svg new file mode 100644 index 00000000..96158f99 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-5.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-6.svg b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-6.svg new file mode 100644 index 00000000..57d57212 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/hangman-6.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/images/lost.gif b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/lost.gif new file mode 100644 index 00000000..b29d9f12 Binary files /dev/null and b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/lost.gif differ diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/images/victory.gif b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/victory.gif new file mode 100644 index 00000000..e78a3475 Binary files /dev/null and b/SinglePlayer - Games/Hangman Game play/Hangman Game/images/victory.gif differ diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/index.html b/SinglePlayer - Games/Hangman Game play/Hangman Game/index.html new file mode 100644 index 00000000..c40df394 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/index.html @@ -0,0 +1,36 @@ + + + + + + Hangman Game using JavaScript by Damini Chachane + + + + + +
+
+ gif +

Game Over!

+

The correct word was: rainbow

+ +
+
+ +
+
+ hangman-img +

Hangman Game

+
+
+
    +

    Hint:

    +

    Incorrect guesses:

    +
    +
    +
    + + + + \ No newline at end of file diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/screenshot.webp b/SinglePlayer - Games/Hangman Game play/Hangman Game/screenshot.webp new file mode 100644 index 00000000..9b8427e6 Binary files /dev/null and b/SinglePlayer - Games/Hangman Game play/Hangman Game/screenshot.webp differ diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/script.js b/SinglePlayer - Games/Hangman Game play/Hangman Game/script.js new file mode 100644 index 00000000..9a90a26f --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/script.js @@ -0,0 +1,77 @@ +const wordDisplay = document.querySelector(".word-display"); +const guessesText = document.querySelector(".guesses-text b"); +const keyboardDiv = document.querySelector(".keyboard"); +const hangmanImage = document.querySelector(".hangman-box img"); +const gameModal = document.querySelector(".game-modal"); +const playAgainBtn = gameModal.querySelector("button"); +const themeToggle = document.getElementById('theme-toggle'); +const body = document.body; + + + +// Initializing game variables +let currentWord, correctLetters, wrongGuessCount; +const maxGuesses = 6; + +const resetGame = () => { + // Ressetting game variables and UI elements + correctLetters = []; + wrongGuessCount = 0; + hangmanImage.src = "images/hangman-0.svg"; + guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`; + wordDisplay.innerHTML = currentWord.split("").map(() => `
  • `).join(""); + keyboardDiv.querySelectorAll("button").forEach(btn => btn.disabled = false); + gameModal.classList.remove("show"); +} + +const getRandomWord = () => { + // Selecting a random word and hint from the wordList + const { word, hint } = wordList[Math.floor(Math.random() * wordList.length)]; + currentWord = word; // Making currentWord as random word + document.querySelector(".hint-text b").innerText = hint; + resetGame(); +} + +const gameOver = (isVictory) => { + // After game complete.. showing modal with relevant details + const modalText = isVictory ? `You found the word:` : 'The correct word was:'; + gameModal.querySelector("img").src = `images/${isVictory ? 'victory' : 'lost'}.gif`; + gameModal.querySelector("h4").innerText = isVictory ? 'Congrats!' : 'Game Over!'; + gameModal.querySelector("p").innerHTML = `${modalText} ${currentWord}`; + gameModal.classList.add("show"); +} + +const initGame = (button, clickedLetter) => { + // Checking if clickedLetter is exist on the currentWord + if(currentWord.includes(clickedLetter)) { + // Showing all correct letters on the word display + [...currentWord].forEach((letter, index) => { + if(letter === clickedLetter) { + correctLetters.push(letter); + wordDisplay.querySelectorAll("li")[index].innerText = letter; + wordDisplay.querySelectorAll("li")[index].classList.add("guessed"); + } + }); + } else { + // If clicked letter doesn't exist then update the wrongGuessCount and hangman image + wrongGuessCount++; + hangmanImage.src = `images/hangman-${wrongGuessCount}.svg`; + } + button.disabled = true; // Disabling the clicked button so user can't click again + guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`; + + // Calling gameOver function if any of these condition meets + if(wrongGuessCount === maxGuesses) return gameOver(false); + if(correctLetters.length === currentWord.length) return gameOver(true); +} + +// Creating keyboard buttons and adding event listeners +for (let i = 97; i <= 122; i++) { + const button = document.createElement("button"); + button.innerText = String.fromCharCode(i); + keyboardDiv.appendChild(button); + button.addEventListener("click", (e) => initGame(e.target, String.fromCharCode(i))); +} + +getRandomWord(); +playAgainBtn.addEventListener("click", getRandomWord); \ No newline at end of file diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/style.css b/SinglePlayer - Games/Hangman Game play/Hangman Game/style.css new file mode 100644 index 00000000..c69bfb07 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/style.css @@ -0,0 +1,188 @@ +/* Importing Google font - Open Sans */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Open Sans", sans-serif; +} +body { + display: flex; + padding: 0 10px; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #73566a; +} +.container { + display: flex; + width: 850px; + gap: 70px; + padding: 60px 40px; + background: white; + border-radius: 10px; + align-items: flex-end; + justify-content: space-between; + box-shadow: 0 10px 20px rgba(0,0,0,0.9); +} +.hangman-box img { + user-select: none; + max-width: 270px; +} +.hangman-box h1 { + font-size: 1.45rem; + text-align: center; + margin-top: 20px; + text-transform: uppercase; + color: black; +} +.game-box .word-display { + gap: 10px; + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} +.word-display .letter { + width: 28px; + font-size: 2rem; + text-align: center; + font-weight: 600; + margin-bottom: 40px; + text-transform: uppercase; + border-bottom: 3px solid black; +} +.word-display .letter.guessed { + margin: -40px 0 35px; + border-color: transparent; +} +.game-box h4 { + text-align: center; + font-size: 1.1rem; + font-weight: 500; + margin-bottom: 15px; +} +.game-box h4 b { + font-weight: 600; +} +.game-box .guesses-text b { + color: #ff0000; +} +.game-box .keyboard { + display: flex; + gap: 5px; + flex-wrap: wrap; + margin-top: 40px; + justify-content: center; +} +:where(.game-modal, .keyboard) button { + color: #fff; + border: none; + outline: none; + cursor: pointer; + font-size: 1rem; + font-weight: 600; + border-radius: 4px; + text-transform: uppercase; + background: #67078d; +} +.keyboard button { + padding: 7px; + width: calc(100% / 9 - 5px); +} +.keyboard button[disabled] { + pointer-events: none; + opacity: 0.6; +} +:where(.game-modal, .keyboard) button:hover { + background: #491549; +} +.game-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + pointer-events: none; + background: rgba(0,0,0,0.6); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + padding: 0 10px; + transition: opacity 0.4s ease; +} +.game-modal.show { + opacity: 1; + pointer-events: auto; + transition: opacity 0.4s 0.4s ease; +} +.game-modal .content { + padding: 30px; + max-width: 420px; + width: 100%; + border-radius: 10px; + background: #fff; + text-align: center; + box-shadow: 0 10px 20px rgba(0,0,0,0.1); +} +.game-modal img { + max-width: 130px; + margin-bottom: 20px; +} +.game-modal img[src="images/victory.gif"] { + margin-left: -10px; +} +.game-modal h4 { + font-size: 1.53rem; +} +.game-modal p { + font-size: 1.15rem; + margin: 15px 0 30px; + font-weight: 500; +} +.game-modal p b { + color: #5E63BA; + font-weight: 600; +} +.game-modal button { + padding: 12px 23px; +} + +@media (max-width: 782px) { + .container { + flex-direction: column; + padding: 30px 15px; + align-items: center; + } + .hangman-box img { + max-width: 200px; + } + .hangman-box h1 { + display: none; + } + .game-box h4 { + font-size: 1rem; + } + .word-display .letter { + margin-bottom: 35px; + font-size: 1.7rem; + } + .word-display .letter.guessed { + margin: -35px 0 25px; + } + .game-modal img { + max-width: 120px; + } + .game-modal h4 { + font-size: 1.45rem; + } + .game-modal p { + font-size: 1.1rem; + } + .game-modal button { + padding: 10px 18px; + } +} \ No newline at end of file diff --git a/SinglePlayer - Games/Hangman Game play/Hangman Game/word-list.js b/SinglePlayer - Games/Hangman Game play/Hangman Game/word-list.js new file mode 100644 index 00000000..415f5601 --- /dev/null +++ b/SinglePlayer - Games/Hangman Game play/Hangman Game/word-list.js @@ -0,0 +1,262 @@ +const wordList = [ + { + word: "guitar", + hint: "A musical instrument with strings." + }, + { + word: "oxygen", + hint: "What gas is essential for most living organisms to breathe?" + }, + { + word: "elephant", + hint: "What is the largest land animal on Earth?" + }, + { + word: "apple", + hint: "What fruit is commonly associated with Newton's discovery of gravity?" + }, + { + word: "astronomy", + hint: "The scientific study of celestial objects and phenomena." + }, + { + word: "football", + hint: "A popular sport played with a spherical ball." + }, + { + word: "chocolate", + hint: "A sweet treat made from cocoa beans." + }, + { + word: "france", + hint:"European country is known for its iconic Eiffel Tower and Louvre Museum?" + }, + { + word: "saturn", + hint: " What is the sixth planet from the Sun in our solar system?" + }, + { + word: "pizza", + hint: "A savory dish consisting of a round, flattened base with toppings." + }, + { + word: "australia", + hint: "Which country is both a continent and an island?" + }, + { + word: "camera", + hint: "A device used to capture and record images or videos." + }, + { + word: "diamond", + hint: "A precious gemstone known for its brilliance and hardness." + }, + { + word: "mathematics", + hint: "What subject involves the study of numbers, quantities, shapes, and patterns?" + }, + { + word: "science", + hint: "The systematic study of the structure and behavior of the physical and natural world." + }, + { + word: "tokyo", + hint: "What is the capital city of Japan?" + }, + { + word: "mammal", + hint: "What type of creature is a dolphin?" + }, + { + word: "coffee", + hint: "A popular caffeinated beverage made from roasted coffee beans." + }, + { + word: "dance", + hint: "A rhythmic movement of the body often performed to music." + }, + { + word: "galaxy", + hint: "A vast system of stars, gas, and dust held together by gravity." + }, + { + word: "Everest", + hint: " What is the tallest mountain in the world?" + }, + { + word: "volcano", + hint: "A mountain or hill with a vent through which lava, rock fragments, hot vapor, and gas are ejected." + }, + { + word: "novel", + hint: "A long work of fiction, typically with a complex plot and characters." + }, + { + word: "pound", + hint: "What is the currency of the United Kingdom?" + }, + { + word: "Shakespeare", + hint: "Who wrote the play Romeo and Juliet ?" + }, + { + word: "iron", + hint: "What is the chemical element with the symbol Fe ?" + }, + { + word: "ballet", + hint: "A classical dance form characterized by precise and graceful movements." + }, + { + word: "astronaut", + hint: "A person trained to travel and work in space." + }, + { + word: "waterfall", + hint: "A cascade of water falling from a height." + }, + { + word: "technology", + hint: "The application of scientific knowledge for practical purposes." + }, + { + word: "rainbow", + hint: "A meteorological phenomenon that is caused by reflection, refraction, and dispersion of light." + }, + { + word: "universe", + hint: "All existing matter, space, and time as a whole." + }, + { + word: "piano", + hint: "A musical instrument played by pressing keys that cause hammers to strike strings." + }, + { + word: "vacation", + hint: "A period of time devoted to pleasure, rest, or relaxation." + }, + { + word: "rainforest", + hint: "A dense forest characterized by high rainfall and biodiversity." + }, + { + word: "theater", + hint: "A building or outdoor area in which plays, movies, or other performances are staged." + }, + { + word: "telephone", + hint: "A device used to transmit sound over long distances." + }, + { + word: "language", + hint: "A system of communication consisting of words, gestures, and syntax." + }, + { + word: "desert", + hint: "A barren or arid land with little or no precipitation." + }, + { + word: "sunflower", + hint: "A tall plant with a large yellow flower head." + }, + { + word: "fantasy", + hint: "A genre of imaginative fiction involving magic and supernatural elements." + }, + { + word: "telescope", + hint: "An optical instrument used to view distant objects in space." + }, + { + word: "breeze", + hint: "A gentle wind." + }, + { + word: "oasis", + hint: "A fertile spot in a desert where water is found." + }, + { + word: "photography", + hint: "The art, process, or practice of creating images by recording light or other electromagnetic radiation." + }, + { + word: "safari", + hint: "An expedition or journey, typically to observe wildlife in their natural habitat." + }, + { + word: "planet", + hint: "A celestial body that orbits a star and does not produce light of its own." + }, + { + word: "river", + hint: "A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." + }, + { + word: "tropical", + hint: "Relating to or situated in the region between the Tropic of Cancer and the Tropic of Capricorn." + }, + { + word: "mysterious", + hint: "Difficult or impossible to understand, explain, or identify." + }, + { + word: "enigma", + hint: "Something that is mysterious, puzzling, or difficult to understand." + }, + { + word: "paradox", + hint: "A statement or situation that contradicts itself or defies intuition." + }, + { + word: "puzzle", + hint: "A game, toy, or problem designed to test ingenuity or knowledge." + }, + { + word: "whisper", + hint: "To speak very softly or quietly, often in a secretive manner." + }, + { + word: "shadow", + hint: "A dark area or shape produced by an object blocking the light." + }, + { + word: "secret", + hint: "Something kept hidden or unknown to others." + }, + { + word: "curiosity", + hint: "A strong desire to know or learn something." + }, + { + word: "unpredictable", + hint: "Not able to be foreseen or known beforehand; uncertain." + }, + { + word: "obfuscate", + hint: "To confuse or bewilder someone; to make something unclear or difficult to understand." + }, + { + word: "unveil", + hint: "To make known or reveal something previously secret or unknown." + }, + { + word: "illusion", + hint: "A false perception or belief; a deceptive appearance or impression." + }, + { + word: "moonlight", + hint: "The light from the moon." + }, + { + word: "vibrant", + hint: "Full of energy, brightness, and life." + }, + { + word: "nostalgia", + hint: "A sentimental longing or wistful affection for the past." + }, + { + word: "brilliant", + hint: "Exceptionally clever, talented, or impressive." + }, +]; \ No newline at end of file diff --git a/SinglePlayer - Games/SnakeBites/README.md b/SinglePlayer - Games/SnakeBites/README.md new file mode 100644 index 00000000..d522933d --- /dev/null +++ b/SinglePlayer - Games/SnakeBites/README.md @@ -0,0 +1,42 @@ +# **SnakeBites Game** + +--- + +
    + +## **Description ๐Ÿ“ƒ** +- This project is built on a basic web tech stacks such as HTML, CSS and Javascript. +- This game is just for fun. + +## **functionalities ๐ŸŽฎ** +- This game is a single player game. +- Using Up, Down, Left and Right Arrows, move the snake. +- By eating food, score will increase. +- High score will be updated when current score will be more than the high score. + +## ** Additional Features ** +- Displaying the current score and high score of the player. +- Implementing a graphical user interface (GUI) for a more interactive experience. +- Adding background sound and moving snake and eating food sounds. + +
    + +## **How to play? ๐Ÿ•น๏ธ** +- This is a single player game. +- Using Up, Down, Left and Right Arrows, move the snake in such a way it does not touch the boundaries and also not the snake body. +- If head of the snake smash into their body and the boundaries, will result into **"GAME OVER"** +- By eating the food, score will increase. + +
    + +## **Screenshots ๐Ÿ“ธ** + +
    + +![image](../SnakeBites/images/Snake-game.png) + +
    + +## **Working video ๐Ÿ“น** + + diff --git a/SinglePlayer - Games/SnakeBites/Snake_Bites.css b/SinglePlayer - Games/SnakeBites/Snake_Bites.css new file mode 100644 index 00000000..7e50f649 --- /dev/null +++ b/SinglePlayer - Games/SnakeBites/Snake_Bites.css @@ -0,0 +1,111 @@ +:root{ + --background: #d9d9d9; + --color: #ffc300; + --accent: #000814; + --shade: #001d3d; +} +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + text-align: center; + font-family: 'Lato', sans-serif; +} +body{ + background-color:#fdf0d5; +} +.body{ + display: flex; + justify-content: center; + align-items: center; +} +img{ + position: fixed; + bottom: 0; + right: 0; + height:300px; + object-fit: cover; +} +h1{ + position: absolute; + top: 15px; + left: 20px; + font-size: 50px; + font-family: 'Rubik', sans-serif; + color: var(--accent); +} +#scoreBox{ + position: absolute; + top: 80px; + left: 20px; + font-size: 20px; +} +#hiscoreBox{ + position: absolute; + top: 80px; + left: 200px; + font-size: 20px; +} +#board{ + background: linear-gradient(var(--accent), #669bbc); + width: 90vmin; + height: 92vmin; + margin-top: 25px; + box-shadow: 0px 0px 10px 2px rgb(25, 26, 27) ; + display:grid; + grid-template-rows: repeat(18, 1fr); + grid-template-columns: repeat(18, 1fr); +} +.head{ + background: linear-gradient(#780000, #c1121f); + box-shadow: 0px 0px 5px 2px rgb(25, 26, 27) ; + border: 0.25vmin solid black; + border-radius: 9px; + transform:scale(1.02); + +} +.snake{ + background-color: #c1121f; + box-shadow: 0px 0px 5px 2px rgb(25, 26, 27) ; + border-radius: 12px; +} +.food{ + background: linear-gradient(#ee9b00, #e9d8a6); + border: 0.5vmin solid #e76f51; + border-radius: 8px; +} +.back{ + all: unset; + position:fixed; + top:25px; + right:30px; + background-color: var(--accent); + color: var(--color); + padding: 15px; + border-radius: 1rem; +} + +@media screen and (max-width:1000px) { + .body{ + flex-direction: column; + margin: 8% 0; + } + img{ + display: none; + } + h1{ + position: relative; + text-align: center; + } + #scoreBox{ + left: 5px; + } + #hiscoreBox{ + left:100px; + } + .back{ + top:70px; + right:25px; + font-size: 10px; + } +} \ No newline at end of file diff --git a/SinglePlayer - Games/SnakeBites/Snake_Bites.html b/SinglePlayer - Games/SnakeBites/Snake_Bites.html new file mode 100644 index 00000000..832b9f6d --- /dev/null +++ b/SinglePlayer - Games/SnakeBites/Snake_Bites.html @@ -0,0 +1,31 @@ + + + + + + + + + + + + + Snake-Bites + + + +
    +

    Snake Bites

    + + +
    +
    Score: 0
    +
    High Score: 0
    +
    +
    +
    + + + + + \ No newline at end of file diff --git a/SinglePlayer - Games/SnakeBites/Snake_Bites.js b/SinglePlayer - Games/SnakeBites/Snake_Bites.js new file mode 100644 index 00000000..c715b0bf --- /dev/null +++ b/SinglePlayer - Games/SnakeBites/Snake_Bites.js @@ -0,0 +1,141 @@ +// Game Constants & Variables +let inputDir = {x: 0, y: 0}; +const foodSound = new Audio('food.mp3'); +const gameOverSound = new Audio('gameover.mp3'); +const moveSound = new Audio('move.mp3'); +const musicSound = new Audio('music.mp3'); +let speed = prompt("Enter speed of the Snake you want: (5: easy, 10: medium, >15: hard)"); +let score = 0; +let lastPaintTime = 0; +let snakeArr = [ + {x: 13, y: 15} +]; + +food = {x: 6, y: 7}; + +// Game Functions +function main(ctime) { + window.requestAnimationFrame(main); + if((ctime - lastPaintTime)/1000 < 1/speed){ + return; + } + musicSound.play(); + lastPaintTime = ctime; + gameEngine(); +} + +function isCollide(snake) { + // If you bump into yourself + for (let i = 1; i < snakeArr.length; i++) { + if(snake[i].x === snake[0].x && snake[i].y === snake[0].y){ + return true; + } + } + // If you bump into the wall + if(snake[0].x >= 18 || snake[0].x <=0 || snake[0].y >= 18 || snake[0].y <=0){ + return true; + } + + return false; +} + +function gameEngine(){ + // Part 1: Updating the snake array & Food + if(isCollide(snakeArr)){ + gameOverSound.play(); + musicSound.pause(); + inputDir = {x: 0, y: 0}; + alert("Game Over. Press any key to play again!"); + snakeArr = [{x: 13, y: 15}]; + score = 0; + } + + // If you have eaten the food, increment the score and regenerate the food + if(snakeArr[0].y === food.y && snakeArr[0].x ===food.x){ + foodSound.play(); + score += 1; + if(score>hiscoreval){ + hiscoreval = score; + localStorage.setItem("hiscore", JSON.stringify(hiscoreval)); + hiscoreBox.innerHTML = "HiScore: " + hiscoreval; + } + scoreBox.innerHTML = "Score: " + score; + snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y}); + let a = 2; + let b = 16; + food = {x: Math.round(a + (b-a)* Math.random()), y: Math.round(a + (b-a)* Math.random())} + } + + // Moving the snake + for (let i = snakeArr.length - 2; i>=0; i--) { + snakeArr[i+1] = {...snakeArr[i]}; + } + + snakeArr[0].x += inputDir.x; + snakeArr[0].y += inputDir.y; + + // Part 2: Display the snake and Food + // Display the snake + board.innerHTML = ""; + snakeArr.forEach((e, index)=>{ + snakeElement = document.createElement('div'); + snakeElement.style.gridRowStart = e.y; + snakeElement.style.gridColumnStart = e.x; + + if(index === 0){ + snakeElement.classList.add('head'); + } + else{ + snakeElement.classList.add('snake'); + } + board.appendChild(snakeElement); + }); + // Display the food + foodElement = document.createElement('div'); + foodElement.style.gridRowStart = food.y; + foodElement.style.gridColumnStart = food.x; + foodElement.classList.add('food') + board.appendChild(foodElement); +} + +// Main logic starts here +musicSound.play(); +let hiscore = localStorage.getItem("hiscore"); +if(hiscore === null){ + hiscoreval = 0; + localStorage.setItem("hiscore", JSON.stringify(hiscoreval)) +} +else{ + hiscoreval = JSON.parse(hiscore); + hiscoreBox.innerHTML = "HiScore: " + hiscore; +} + +window.requestAnimationFrame(main); +window.addEventListener('keydown', e =>{ + inputDir = {x: 0, y: 1} // Start the game + moveSound.play(); + switch (e.key) { + case "ArrowUp": + inputDir.x = 0; + inputDir.y = -1; + break; + + case "ArrowDown": + inputDir.x = 0; + inputDir.y = 1; + break; + + case "ArrowLeft": + inputDir.x = -1; + inputDir.y = 0; + break; + + case "ArrowRight": + inputDir.x = 1; + inputDir.y = 0; + break; + default: + break; + } + +}); \ No newline at end of file diff --git a/SinglePlayer - Games/SnakeBites/food.mp3 b/SinglePlayer - Games/SnakeBites/food.mp3 new file mode 100644 index 00000000..076198c9 Binary files /dev/null and b/SinglePlayer - Games/SnakeBites/food.mp3 differ diff --git a/SinglePlayer - Games/SnakeBites/gameover.mp3 b/SinglePlayer - Games/SnakeBites/gameover.mp3 new file mode 100644 index 00000000..414bf651 Binary files /dev/null and b/SinglePlayer - Games/SnakeBites/gameover.mp3 differ diff --git a/SinglePlayer - Games/SnakeBites/images/Snake-game.png b/SinglePlayer - Games/SnakeBites/images/Snake-game.png new file mode 100644 index 00000000..e93bab58 Binary files /dev/null and b/SinglePlayer - Games/SnakeBites/images/Snake-game.png differ diff --git a/SinglePlayer - Games/SnakeBites/images/logo.jpeg b/SinglePlayer - Games/SnakeBites/images/logo.jpeg new file mode 100644 index 00000000..3b86b8c0 Binary files /dev/null and b/SinglePlayer - Games/SnakeBites/images/logo.jpeg differ diff --git a/SinglePlayer - Games/SnakeBites/images/snake.gif b/SinglePlayer - Games/SnakeBites/images/snake.gif new file mode 100644 index 00000000..44d0e7b9 Binary files /dev/null and b/SinglePlayer - Games/SnakeBites/images/snake.gif differ diff --git a/SinglePlayer - Games/SnakeBites/move.mp3 b/SinglePlayer - Games/SnakeBites/move.mp3 new file mode 100644 index 00000000..4d3d245d Binary files /dev/null and b/SinglePlayer - Games/SnakeBites/move.mp3 differ diff --git a/SinglePlayer - Games/SnakeBites/music.mp3 b/SinglePlayer - Games/SnakeBites/music.mp3 new file mode 100644 index 00000000..f1507af3 Binary files /dev/null and b/SinglePlayer - Games/SnakeBites/music.mp3 differ diff --git a/SinglePlayer - Games/SnakeBites/snakebites.mp4 b/SinglePlayer - Games/SnakeBites/snakebites.mp4 new file mode 100644 index 00000000..4432a24f Binary files /dev/null and b/SinglePlayer - Games/SnakeBites/snakebites.mp4 differ diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/Readme.md b/SinglePlayer - Games/Touch-No-Fire-Game/Readme.md new file mode 100644 index 00000000..a7673c02 --- /dev/null +++ b/SinglePlayer - Games/Touch-No-Fire-Game/Readme.md @@ -0,0 +1,33 @@ +# **Touch-No-Fire-Game** +Enjoy The Game!!! +
    + +## **Description ๐Ÿ“ƒ** +- This is a Normal crossword game that we can play in virtually and blow I have print some tips for the beginners as well! +- The project will contain HTML, CSS and JavaScript files. The HTML file adds structure to the game followed by styling using CSS. JavaScript adds functionality to the game. + +## **How to play? ๐Ÿ•น๏ธ** +- Controls : + - Game Rules! + - Eat the food to gain score + - Do not touch the fire + - The fire multiplies once with even scores + - If you stay idle, the fire won't do anything + - Do not touch the moving fire + - Please play using arrow keys! + + +
    + +## **Screenshots ๐Ÿ“ธ** + +
    + + + + +
    + + +## **Working video ๐Ÿ“น** +https://github.com/GameSphere-MultiPlayer/GameSphere/assets/154777864/a88f676a-69c8-4cc9-b6e6-98e5fca1aa59 \ No newline at end of file diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/index.html b/SinglePlayer - Games/Touch-No-Fire-Game/index.html new file mode 100644 index 00000000..b9c61d7c --- /dev/null +++ b/SinglePlayer - Games/Touch-No-Fire-Game/index.html @@ -0,0 +1,31 @@ + + + + + + Move Element + + + + +
    +
    +

    😋

    +
    +
    🍔
    +
    🔥
    +
    +
    +



    + Game Rules!
    + * Eat the food to gain score
    + * Do not touch the fire
    + * The fire multiplies once with even scores
    + * If you stay idle, the fire won't do anything
    + * Do not touch the moving fire
    + * Please play using arrow keys
    +

    +
    + + + diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/script.js b/SinglePlayer - Games/Touch-No-Fire-Game/script.js new file mode 100644 index 00000000..e551b3ff --- /dev/null +++ b/SinglePlayer - Games/Touch-No-Fire-Game/script.js @@ -0,0 +1,169 @@ +const container = document.getElementById("container"); +const move = document.getElementById("mover"); +const maxWidth = container.clientWidth - move.clientWidth; +const maxHeight = container.clientHeight - move.clientHeight; + +let enemies = document.querySelectorAll(".enemy"); + +let x = Math.random() * maxWidth; +let y = Math.random() * maxHeight; +let a; +let b; +let count = -1; +const h3 = document.getElementById("h3"); +let gameActive = true; + +const initialEnemy = document.querySelector(".enemy"); +let initialEnemyRect = initialEnemy.getBoundingClientRect(); +let initialEnemyX = Math.random() * (maxWidth - initialEnemyRect.width); +let initialEnemyY = Math.random() * (maxHeight - initialEnemyRect.height); +initialEnemy.style.left = `${initialEnemyX}px`; +initialEnemy.style.top = `${initialEnemyY}px`; + +document.addEventListener("keydown", (event) => { + if (!gameActive) return; + const para = document.getElementById("para"); + event.preventDefault(); + + if (event.key === "ArrowUp") { + h3.innerHTML = "😁"; + y = Math.max(y - 10, 0); + } else if (event.key === "ArrowDown") { + h3.innerHTML = "😁"; + y = Math.min(y + 10, maxHeight); + } else if (event.key === "ArrowLeft") { + h3.innerHTML = "😁"; + x = Math.max(x - 10, 0); + } else if (event.key === "ArrowRight") { + h3.innerHTML = "😁"; + x = Math.min(x + 10, maxWidth); + } else { + para.innerHTML = "error"; + return; + } + + if (isOverlapping()) { + foodfun(); + } + if (die()) { + end(); + } + + move.style.left = `${x}px`; + move.style.top = `${y}px`; +}); + +document.addEventListener("keyup", (event) => { + h3.innerHTML = "😃"; + keyIsPressed = false; +}); + +function isOverlapping() { + if (!gameActive) return; + const moverRect = move.getBoundingClientRect(); + const foodRect = food.getBoundingClientRect(); + return ( + moverRect.left < foodRect.right && + moverRect.right > foodRect.left && + moverRect.top < foodRect.bottom && + moverRect.bottom > foodRect.top + ); +} + +const food = document.getElementById("food"); +const foodfun = function () { + if (!gameActive) return; +a = Math.floor(Math.random() * (maxWidth - food.clientWidth)); +b = Math.floor(Math.random() * (maxHeight - food.clientHeight)); + + +a = Math.max(a, 0); +b = Math.max(b, 0); +a = Math.min(a, maxWidth - food.clientWidth); +b = Math.min(b, maxHeight - food.clientHeight); + +food.style.transform = `translate(${a}px, ${b}px)`; +count++; +h3.innerHTML = "😋"; +console.log("your score is " + count); + +if (count % 2 === 0) { + const newEnemy = document.createElement("div"); + newEnemy.className = "enemy"; + + container.appendChild(newEnemy); + newEnemy.innerHTML = '🔥'; + enemies = document.querySelectorAll(".enemy"); + + let newEnemyRect = newEnemy.getBoundingClientRect(); + let newEnemyX = Math.random() * (maxWidth - newEnemyRect.width); + let newEnemyY = Math.random() * (maxHeight - newEnemyRect.height); + newEnemy.style.left = `${newEnemyX}px`; + newEnemy.style.top = `${newEnemyY}px`; +} +}; +if (!gameActive) foodfun(); + + +function die() { + if (!gameActive) return; + const moverRect = move.getBoundingClientRect(); + + for (const enemy of enemies) { + const enemyRect = enemy.getBoundingClientRect(); + if ( + moverRect.left < enemyRect.right && + moverRect.right > enemyRect.left && + moverRect.top < enemyRect.bottom && + moverRect.bottom > enemyRect.top + ) { + return true; + } + } + + return false; +} + +function end() { +console.log("game over"); +gameActive = false; +container.style.display = 'flex'; +container.style.flexDirection = 'column'; +container.style.alignItems = 'center'; +container.style.justifyContent = 'center'; + +const gameOverText = document.createElement('span'); +gameOverText.style.fontWeight = 'bold'; +gameOverText.textContent = 'Game Over'; +container.appendChild(gameOverText); + +const scoreText = document.createElement('span'); +scoreText.style.fontWeight = 'bold'; +scoreText.textContent = 'Your Score: ' + count; +container.appendChild(scoreText); + +const replayButton = document.createElement('button'); +replayButton.style.fontWeight = 'bold'; +replayButton.textContent = 'Replay'; +replayButton.addEventListener('click', () => { + location.reload(); +}); +container.appendChild(replayButton); + + +} + + + +function enemyMove() { + if (!gameActive) return; + for (const enemy of enemies) { + let m = Math.ceil(Math.random() * maxWidth); + let n = Math.ceil(Math.random() * maxHeight); + enemy.style.left = `${m}px`; + enemy.style.top = `${n}px`; + } +} + + +setInterval(enemyMove, 2000); diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/style.css b/SinglePlayer - Games/Touch-No-Fire-Game/style.css new file mode 100644 index 00000000..add48945 --- /dev/null +++ b/SinglePlayer - Games/Touch-No-Fire-Game/style.css @@ -0,0 +1,60 @@ +/* styles.css */ + +#head { + font-size: 2em; + font-weight: bold; + text-align: center; + margin-bottom: 20px; + } + + #container { + width: 50%; + height: 50vh; + border: 3px solid black; + position: relative; + } + + #mover { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + margin: 0px; + } + + #h3 { + font-size: 2em; + position: absolute; + margin: 0px; + } + + #food { + font-size: 2em; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + } + + .enemy { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + transition: 2s linear; + } + + body { + background-color: blanchedalmond; + display: flex; + align-items: center; + flex-direction: column; + height: 100%; + justify-content: center; + } + + #paragraph { + font-size: 1.2em; + text-align: center; + margin-top: 20px; + } diff --git a/SinglePlayer - Games/rock-paper-scissor/paper.png b/SinglePlayer - Games/rock-paper-scissor/paper.png new file mode 100644 index 00000000..fcc66033 Binary files /dev/null and b/SinglePlayer - Games/rock-paper-scissor/paper.png differ diff --git a/SinglePlayer - Games/rock-paper-scissor/rock.png b/SinglePlayer - Games/rock-paper-scissor/rock.png new file mode 100644 index 00000000..9bd0b7ae Binary files /dev/null and b/SinglePlayer - Games/rock-paper-scissor/rock.png differ diff --git a/SinglePlayer - Games/rock-paper-scissor/rps.css b/SinglePlayer - Games/rock-paper-scissor/rps.css new file mode 100644 index 00000000..d34442da --- /dev/null +++ b/SinglePlayer - Games/rock-paper-scissor/rps.css @@ -0,0 +1,54 @@ +* { + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; + text-align: center; +} +h1 { + background-color: #081b31; + padding-top: 1rem; + text-align: center; + height: 5rem; +} +.choices { + display: flex; + justify-content: center; + align-items: center; +} +.choice img:hover { + cursor: pointer; + border: 0.5rem #081b31 solid; +} +.choice img { + margin-left: 1rem; + margin-right: 1rem; + height: 120px; + width: 120px; + object-fit: cover; + border-radius: 50%; +} +.score-board{ + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + margin-top: 4rem; +} +.score-board p{ + margin-left: 2rem; + margin-right: 2rem; +} +#user-score,#comp-score{ + font-size: 3rem; +} +.msg-container{ + margin-top: 2rem; +} +#msg{ + font-size: 1.5rem; + display: inline; + background-color: #081b31; + color: #fff; + padding: 1rem; + border-radius: 5rem; +} \ No newline at end of file diff --git a/SinglePlayer - Games/rock-paper-scissor/rps.html b/SinglePlayer - Games/rock-paper-scissor/rps.html new file mode 100644 index 00000000..5d6b0956 --- /dev/null +++ b/SinglePlayer - Games/rock-paper-scissor/rps.html @@ -0,0 +1,39 @@ + + + + + + Rock paper scissors + + + + + + +

    Rock Paper Scissors

    +
    +
    + rock +
    +
    + paper +
    +
    + scissors +
    +
    +
    +
    +

    0

    +

    You

    +
    +
    +

    0

    +

    Computer

    +
    +
    +
    +

    Play your move

    +
    + + diff --git a/SinglePlayer - Games/rock-paper-scissor/rps.js b/SinglePlayer - Games/rock-paper-scissor/rps.js new file mode 100644 index 00000000..e29e8742 --- /dev/null +++ b/SinglePlayer - Games/rock-paper-scissor/rps.js @@ -0,0 +1,92 @@ +let userScore = 0; +let compScore = 0; + +let msg=document.querySelector("#msg"); +let user=document.querySelector("#user-score"); +let comp=document.querySelector("#comp-score"); + +const genComputerChoice =() =>{ + const options = ["rock","paper","scissors"]; + const randIdx = Math.floor(Math.random()*3); + return options[randIdx]; +} + +const drawGame = () =>{ + console.log("The game was a draw"); +} +const playGame = (userChoice) =>{ + console.log("user choice = ",userChoice); + const compChoice = genComputerChoice(); + console.log("computer choice = ",compChoice); + if(userChoice===compChoice){ + drawGame(); + msg.innerHTML="The game was a draw"; + } + else{ + let userWin=true; + if(userChoice==="rock"){ + userWin = compChoice === "paper" ? false : true; + console.log(userWin); + if(userWin===false){ + compScore++; + msg.innerHTML="Better luck next time!"; + msg.style.backgroundColor = "red"; + user.innerHTML=userScore; + comp.innerHTML=compScore; + } + else{ + userScore++; + msg.innerHTML="Yayy! You won"; + msg.style.backgroundColor = "green"; + user.innerHTML=userScore; + comp.innerHTML=compScore; + } + } + else if(userChoice==="paper"){ + userWin = compChoice === "rock" ? true : false; + console.log(userWin); + if(userWin===false){ + compScore++; + msg.innerHTML="Better luck next time!"; + msg.style.backgroundColor = "red"; + user.innerHTML=userScore; + comp.innerHTML=compScore; + } + else{ + userScore++; + msg.innerHTML="Yayy! You won"; + msg.style.backgroundColor = "green"; + user.innerHTML=userScore; + comp.innerHTML=compScore; + } + } + else{ + userWin = compChoice === "paper" ? true : false; + console.log(userWin); + if(userWin===false){ + compScore++; + msg.innerHTML="Better luck next time!"; + msg.style.backgroundColor = "red"; + user.innerHTML=userScore; + comp.innerHTML=compScore; + } + else{ + userScore++; + msg.innerHTML="Yayy! You won"; + msg.style.backgroundColor = "green"; + user.innerHTML=userScore; + comp.innerHTML=compScore; + } + } + } +} + +const choices = document.querySelectorAll(".choice"); +choices.forEach((choice)=>{ + console.log(choice); + choice.addEventListener("click", ()=>{ + const userChoice=choice.getAttribute("id"); + console.log("choice was clicked ",userChoice); + playGame(userChoice); + }) +}) \ No newline at end of file diff --git a/SinglePlayer - Games/rock-paper-scissor/scissors.png b/SinglePlayer - Games/rock-paper-scissor/scissors.png new file mode 100644 index 00000000..c9dcbb6c Binary files /dev/null and b/SinglePlayer - Games/rock-paper-scissor/scissors.png differ diff --git a/SinglePlayer - Games/simon-says/script.js b/SinglePlayer - Games/simon-says/script.js index 7c21822b..786005d4 100644 --- a/SinglePlayer - Games/simon-says/script.js +++ b/SinglePlayer - Games/simon-says/script.js @@ -117,6 +117,7 @@ class Simon { this.errorSound.play(); this.display.startButton.disabled = false; this.blockedButtons = true; + round.innerHTML=`You Lost.
    Your score : ${this.round}`; } @@ -126,7 +127,7 @@ class Simon { this.buttons.forEach(element =>{ element.classList.add('winner'); }); - this.updateRound('you win ๐Ÿ†'); + round.innerHTML=`You Win ๐Ÿ†
    Your score : ${this.round}`; } } diff --git a/SinglePlayer - Games/simon-says/styles.css b/SinglePlayer - Games/simon-says/styles.css index 9e35834f..6a8bb6f9 100644 --- a/SinglePlayer - Games/simon-says/styles.css +++ b/SinglePlayer - Games/simon-says/styles.css @@ -15,6 +15,12 @@ margin-top: 50px; padding: 10px; border-radius: 5px; + width:500px; +} + +#round{ + position:relative; + left:100px; } .buttonContainer { @@ -22,6 +28,7 @@ grid-gap: 10px; grid-template-columns: auto auto; transform: rotate(45deg); + margin-left:25%; } .square { diff --git a/SinglePlayer - Games/word_guessing_game/index.html b/SinglePlayer - Games/word_guessing_game/index.html new file mode 100644 index 00000000..f5cd18f0 --- /dev/null +++ b/SinglePlayer - Games/word_guessing_game/index.html @@ -0,0 +1,24 @@ + + + + + + Word Guessing Game + + + +
    +
    +

    Word Guessing Game

    +
    +

    Enter a letter:

    + + + +

    +

    +
    Attempts left:
    +
    + + + diff --git a/SinglePlayer - Games/word_guessing_game/script.js b/SinglePlayer - Games/word_guessing_game/script.js new file mode 100644 index 00000000..66917a81 --- /dev/null +++ b/SinglePlayer - Games/word_guessing_game/script.js @@ -0,0 +1,101 @@ +document.addEventListener("DOMContentLoaded", function() { + const words = [ + { word: "javascript", hint: "I am a programming language commonly used for web development." }, + { word: "programming", hint: "I involve writing instructions for computers to execute." }, + { word: "html", hint: "I am the standard markup language for creating web pages." }, + { word: "css", hint: "I am used for styling web pages and making them look attractive." }, + { word: "developer", hint: "I am someone who creates software applications or websites." }, + { word: "coding", hint: "I am the process of writing instructions for a computer to execute." }, + { word: "algorithm", hint: "I am a set of rules or steps for solving a problem." }, + { word: "function", hint: "I am a block of reusable code that performs a specific task." }, + { word: "variable", hint: "I am a container for storing data values." }, + { word: "loop", hint: "I am a programming construct used to repeat a block of code." } + ]; + + let randomWord; + let guessedLetters = []; + let remainingAttempts; + + function initGame() { + // Select a random word from the words array + const randomIndex = Math.floor(Math.random() * words.length); + randomWord = words[randomIndex].word; + const hint = words[randomIndex].hint; + + // Display placeholders for each letter in the word + const wordContainer = document.getElementById("word-container"); + wordContainer.innerHTML = ""; + for (let i = 0; i < randomWord.length; i++) { + const letterContainer = document.createElement("span"); + letterContainer.textContent = "_"; + letterContainer.className = "letter"; + wordContainer.appendChild(letterContainer); + } + + // Reset guessed letters and remaining attempts + guessedLetters = []; + remainingAttempts = 6; + document.getElementById("hint").textContent = hint; + document.getElementById("attempts-left").textContent = remainingAttempts; + document.getElementById("result").textContent = ""; + } + + function checkLetter(letter) { + if (guessedLetters.includes(letter)) { + return; // Already guessed this letter + } + + guessedLetters.push(letter); + + const wordContainer = document.getElementById("word-container"); + let correctGuess = false; + + // Check if the letter exists in the word + for (let i = 0; i < randomWord.length; i++) { + if (randomWord[i] === letter) { + wordContainer.children[i].textContent = letter; + correctGuess = true; + } + } + + // Update remaining attempts and check for win or loss + if (!correctGuess) { + remainingAttempts--; + updateResult(); + } else { + if (wordContainer.textContent === randomWord) { + document.getElementById("result").textContent = "Congratulations! You guessed the word."; + } + } + + document.getElementById("attempts-left").textContent = remainingAttempts; + } + + function updateResult() { + if (remainingAttempts === 0) { + document.getElementById("result").textContent = "Sorry, you've run out of attempts. The word was: " + randomWord + "."; + } + } + + // Initialize the game when the page loads + initGame(); + + // Event listener for the guess button + document.getElementById("guess-button").addEventListener("click", function() { + const letterInput = document.getElementById("letter-input").value.trim().toLowerCase(); + + if (letterInput.length !== 1 || !/^[a-z]+$/.test(letterInput)) { + alert("Please enter a single letter from A to Z."); + return; + } + + checkLetter(letterInput); + document.getElementById("letter-input").value = ""; + }); + + // Event listener for the hint button + document.getElementById("hint-button").addEventListener("click", function() { + const hintContainer = document.getElementById("hint"); + hintContainer.style.display = "block"; + }); +}); diff --git a/SinglePlayer - Games/word_guessing_game/styles.css b/SinglePlayer - Games/word_guessing_game/styles.css new file mode 100644 index 00000000..14aca7a6 --- /dev/null +++ b/SinglePlayer - Games/word_guessing_game/styles.css @@ -0,0 +1,124 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + overflow: hidden; +} + +.background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to right, #ff2e63, #ff9a2e, #ffcb2e, #76ff2e, #2effff); + background-size: 1000% 1000%; + animation: gradientAnimation 10s ease infinite; +} + +@keyframes gradientAnimation { + 0% {background-position: 0% 50%;} + 50% {background-position: 100% 50%;} + 100% {background-position: 0% 50%;} +} + +#game-container { + position: relative; + z-index: 1; + max-width: 400px; + text-align: center; + padding: 20px; + background-color: rgba(255, 255, 255, 0.8); /* Add transparency for better contrast */ + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1 { + color: #333; + margin-bottom: 20px; +} + +#word-container { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; + font-size: 24px; +} + +.letter { + width: 30px; + height: 30px; + background-color: #ccc; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + margin: 0 5px; +} + +#letter-input { + padding: 10px; + margin-bottom: 10px; + width: calc(100% - 40px); + border: 1px solid #ccc; + border-radius: 5px; +} + +#guess-button, #hint-button { + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + background-color: #007bff; + color: #fff; + transition: background-color 0.3s; +} + +#guess-button:hover, #hint-button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 20px; + font-weight: bold; + color: #333; +} + +#attempts { + font-size: 18px; + margin-top: 20px; +} + +#hint { + display: none; + margin-top: 20px; + color: #333; +} + +.show-hint { + display: block; +} +#game-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1; + max-width: 400px; + text-align: center; + padding: 20px; + background-color: rgba(255, 255, 255, 0.8); /* Add transparency for better contrast */ + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +#hint { + display: none; + margin-top: 20px; + color: #333; +} + +.show-hint { + display: block; +} diff --git a/additionalpage/contact.html b/additionalpage/contact.html index bc6c82cb..249884ad 100644 --- a/additionalpage/contact.html +++ b/additionalpage/contact.html @@ -21,7 +21,7 @@ - + contact @@ -77,30 +77,49 @@

    Contact Us

    + +
    Have You Any Questions?
    +

    Contact us at ...

    - -

    Call Us

    -

    xxxxxxxxxxx

    + + + Discord +
    - -

    Office

    -

    xxxxxxxxxxx

    + + + + Linkedin + +
    - -

    Email

    -

    xxxxxxxxxxx

    + + + + + Github + +
    - -

    Website

    -

    xxxxxxxxxxx

    + + + Facebook + + + +
    @@ -109,12 +128,17 @@

    Send Us An Email

    - - +
    + + +
    +
    - - +
    + + +
    @@ -127,20 +151,25 @@

    Send Us An Email

    -
    - - - +
    +
    + + + +
    +
    -
    - - - -
    - -
    @@ -159,10 +188,10 @@

    Send Us An Email

    diff --git a/additionalpage/game.html b/additionalpage/game.html index 879d7d22..5e7e5291 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -190,6 +190,60 @@

    2048 Games

    + + + + +
    +
    + +
    + 45 + +
    +
    +
    + +
    +
    +

    DoraemonRun

    +

    Doraemon Run is an adventurous maze-navigation game where players guide Doraemon through obstacles, collect cakes, and avoid traps while managing score and health to prevent game over. + +

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    28.05.2023

    +
    +
    +

    Updated:  

    +

    Action | Desktop

    +
    +
    +
    + Play Now +
    +
    +
    +
    + + @@ -604,6 +658,59 @@

    Anti Virus

    + + + + + + +
    +
    + +
    + 45 + +
    +
    +
    + +
    +
    +

    SnakeBites

    +

    Snakebites is an exciting, fast-paced arcade game where players navigate a growing snake to consume food while avoiding obstacles. Test your reflexes and strategy as you aim for high scores and unlock new levels.

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    28.05.2023

    +
    +
    +

    Updated:  

    +

    Action | Desktop

    +
    +
    +
    + Play Now +
    +
    +
    +
    + @@ -2553,6 +2660,58 @@

    Guess The Number

    + + + + + +
    +
    + +
    + 41 + +
    +
    +
    + +
    +
    +

    Guess The Number

    +

    Attempt to logically guess the a random secret sequence of colours

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    27.05.2024

    +
    +
    +

    Updated:  

    +

    Puzzle | Desktop

    +
    +
    +
    + Play Now +
    +
    +
    +
    + @@ -5087,6 +5246,59 @@

    Tetris

    + + + + +
    +
    + +
    + 241 + +
    +
    +
    + +
    +
    +

    Rock paper scissors

    +

    Experience the timeless puzzle sensation of "rock papaer scissors"

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    07.12.2015

    +
    +
    +

    Updated:  

    +

    Action | Desktop

    +
    +
    +
    + play now +
    +
    +
    +
    + + + @@ -7178,6 +7390,60 @@

    Baseball_Game

    + +
    +
    + + +
    + 45 + +
    +
    +
    + + +
    +
    +

    Ball_Shooting_Game

    +

    Ball_Shooting_Game

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    20.06.2023

    +
    +
    +

    Updated:  

    +

    Action | Desktop

    +
    +
    +
    + Play Now +
    +
    +
    +
    + + + @@ -8854,6 +9120,58 @@

    Shadow_Poke_Guessing_Game

    +
    +
    + + +
    + 45 + +
    +
    +
    + + +
    +
    +

    Hand_Cricket_Champ

    +

    Cricket at your Fingertips!

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    21.05.2024

    +
    +
    +

    Updated:  

    +

    Casual | Desktop/Mobile

    +
    +
    +
    + Play Now +
    +
    +
    +
    + + @@ -8911,7 +9229,58 @@

    Castle_Escape_Game

    + + + + +
    +
    + +
    + 41 + +
    +
    +
    + +
    +
    +

    Flappy Bird Game

    +

    Flappy Bird is an endless game that involves a bird that the player can control. The player has to save the bird from colliding with the hurdles like pipes. Each time the bird passes through the pipes, the score gets incremented by one...

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    21.05.2024

    +
    +
    +

    Updated:  

    +

    Action | Desktop

    +
    +
    +
    + Play Now +
    +
    +
    +
    + @@ -9258,6 +9627,59 @@

    2048 Games

    + + + + + +
    +
    + +
    + 41 + +
    +
    +
    + +
    +
    +

    General Knowledge Quiz

    +

    Are you ready to put your programming knowledge to the test? Whether you're a seasoned developer or just starting your coding journey, a General Knowledge Quiz for programmers can be both fun and educational.

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    22.05.2024

    +
    +
    +

    Updated:  

    +

    Action | Desktop

    +
    +
    +
    + Play Now +
    +
    +
    +
    + + @@ -9311,6 +9733,54 @@

    Angry Birds

    + + + + + + + +
    +
    + +
    + 41 + +
    +
    +
    +
    +
    +

    Pop My Balloon

    +

    -Earth Guardian is a remake of the classic Space shooter type of games, with 8-bit (pixel art) assets. This project used free assets (music and graphics) provided by [Jonathan So](https://jonathan-so.itch.io/),[KennyNL](https://kenney.nl/) and other sources, like Google images and [OpenGameArt](https://opengameart.org). This was a learning project. There will be some updates in the near future. Hope you like it, have fun! +

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    14.05.2024

    +
    +
    +

    Updated:  

    +

    Action | Desktop

    +
    +
    +
    + Play Now +
    +
    +
    +
    + diff --git a/additionalpage/multiplayer.html b/additionalpage/multiplayer.html index 19c37868..6d9df2bc 100644 --- a/additionalpage/multiplayer.html +++ b/additionalpage/multiplayer.html @@ -186,6 +186,101 @@

    Guess Flag

    + +
    +
    + +
    + 41 + +
    +
    +
    +
    +
    +

    Pop My Balloon

    +

    Pop My Balloon is a game in which you have to guess a number avoiding the lucky number otherwise the balloon will pop.

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    18.05.2024

    +
    +
    +

    Updated:  

    +

    Action | Desktop

    +
    +
    +
    + Play Now +
    +
    +
    +
    + + + +
    +
    + + +
    + 45 + +
    +
    +
    + + +
    +
    +

    Flames-Game

    +

    FLAMES is a fun game to predict relationships by using the initials of two people's names to determine if they will be Friends, Lovers, Affectionate, Married, Enemies, or Siblings

    +
    +
    + + + + + +
    +
    +
    +
    +
    +

    Release Date:  

    +

    25.05.2024

    +
    +
    +

    Updated:  

    +

    Action | Desktop

    +
    +
    +
    + Play Now +
    +
    +
    +
    + + diff --git a/assets/images/Earth_Guardian.png b/assets/images/Earth_Guardian.png new file mode 100644 index 00000000..10ee7ec1 Binary files /dev/null and b/assets/images/Earth_Guardian.png differ diff --git a/assets/images/Flames-Game.png b/assets/images/Flames-Game.png new file mode 100644 index 00000000..a1805c59 Binary files /dev/null and b/assets/images/Flames-Game.png differ diff --git a/assets/images/GKQuiz.png b/assets/images/GKQuiz.png new file mode 100644 index 00000000..6e273952 Binary files /dev/null and b/assets/images/GKQuiz.png differ diff --git a/assets/images/Pop_My_Balloon.png b/assets/images/Pop_My_Balloon.png new file mode 100644 index 00000000..f69862c8 Binary files /dev/null and b/assets/images/Pop_My_Balloon.png differ diff --git a/assets/images/Snake-game.png b/assets/images/Snake-game.png new file mode 100644 index 00000000..e93bab58 Binary files /dev/null and b/assets/images/Snake-game.png differ diff --git a/assets/images/flappy.png b/assets/images/flappy.png new file mode 100644 index 00000000..0b38128c Binary files /dev/null and b/assets/images/flappy.png differ diff --git a/assets/images/people-playing-paper-rock-scissors-royalty-free-illustration-1583269312.jpg b/assets/images/people-playing-paper-rock-scissors-royalty-free-illustration-1583269312.jpg new file mode 100644 index 00000000..fbd396ce Binary files /dev/null and b/assets/images/people-playing-paper-rock-scissors-royalty-free-illustration-1583269312.jpg differ diff --git a/dist/color-theme.css b/dist/color-theme.css index 94c7e007..6525d75f 100644 --- a/dist/color-theme.css +++ b/dist/color-theme.css @@ -1,116 +1,106 @@ +.display { + display: none; +} +.theam-div { + display: flex; + position: fixed; + justify-content: center; + /* align-items: center; */ + top: 65px; + right: 10px; + padding: 10px; + gap: 10px; + transition: all 0.4s ease; + color: black; +} -.display{ - display: none; - } - - .theam-div{ - display: flex; - position: fixed; - justify-content: center; - /* align-items: center; */ - top: 50px; - right: 10px; - padding: 10px; - gap: 10px; - transition: all 0.4s ease; - color: black; - } - - - .button-part{ - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - margin-right: 10px; - /* padding: 10px; +.button-part { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-right: 5px; + /* padding: 10px; background-color: var(--bg-black-1000); border-radius: 5px; */ - } - - .button-part i{ - cursor: pointer; - - color: black - /* margin-bottom: 10px; */ - } - - - .dark-light{ - background-color: white; - - width: 30px; - height: 30px; - display: flex; - justify-content: center; - align-items: center; - - text-align: center; - border-radius: 50%; - /* margin-top: 5px; */ - cursor: pointer; - - } - .setting{ - - background-color: white; - - width: 30px; - height: 30px; - display: flex; - justify-content: center; - align-items: center; - - text-align: center; - border-radius: 50%; - margin-top: -38px; - cursor: pointer; - } - - .theams{ - padding: 10px; - background-color: white; - border-radius: 5px; - } - .theme-buttons{ - display: flex; - - } - - .theme-buttons div{ - width: 25px; - height: 25px; - /* border: 2px solid var(--bg-black-1200); */ - border-radius: 50%; - margin-right: 5px; - margin-top: 5px; - cursor: pointer; - - } - - .red{ - background-color:#E90064; - } - - .blue{ - background-color: rgb(0 159 157 ); - } - - - .pink{ - background-color: #FF55BB; - } - - .green{ - background-color: #127C56; - } - - .purple{ - background-color: #B799FF; - } - - .open{ - transform: translateX(190px); - - } \ No newline at end of file +} + +.button-part i { + cursor: pointer; + + color: black; + /* margin-bottom: 10px; */ +} + +.dark-light { + background-color: white; + + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + + text-align: center; + border-radius: 50%; + /* margin-top: 5px; */ + cursor: pointer; +} +.setting { + background-color: white; + + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + + text-align: center; + border-radius: 50%; + margin-top: -38px; + cursor: pointer; +} + +.theams { + padding: 10px; + background-color: white; + border-radius: 5px; +} +.theme-buttons { + display: flex; +} + +.theme-buttons div { + width: 25px; + height: 25px; + /* border: 2px solid var(--bg-black-1200); */ + border-radius: 50%; + margin-right: 5px; + margin-top: 5px; + cursor: pointer; +} + +.red { + background-color: #e90064; +} + +.blue { + background-color: rgb(0 159 157); +} + +.pink { + background-color: #ff55bb; +} + +.green { + background-color: #127c56; +} + +.purple { + background-color: #b799ff; +} + +.open { + transform: translateX(190px); +} diff --git a/dist/contact.css b/dist/contact.css index 77fafe96..65b0145f 100644 --- a/dist/contact.css +++ b/dist/contact.css @@ -10,6 +10,31 @@ justify-content: center; align-items: center; } +.inputDiv{ + position: relative; +} +.inDiv{ + position: relative; +} +.icon1{ + position: absolute; + top:calc(15%); + left:1.8%; +} +.icon2{ + position: absolute; + top:calc(15%); + left:2.0%; + +} +.icon3{ + position: absolute; + top:calc(18%); + left:1.6%; +} +.contact-form input{ + border:2px solid var(--main-color); +} .main-div{ width: 100%; /* background-color: rgb(16 14 43 );; */ @@ -67,16 +92,24 @@ color: var(--main-color); } -.icon-div h3{ +.icon-div a{ color: white; font-weight: bold; + margin-top: 5px; margin: 10px; } +.icon-div a:hover{ + color: cyan; + font-weight: 400; +} .icon-div p{ color: rgb(224, 224, 224); } - +.color{ + margin-top: 20px; + font-size: 1.2vw; +} .form-above-heading{ color: var(--main-color); text-align: center; diff --git a/index.html b/index.html index 83d1759b..74075019 100644 --- a/index.html +++ b/index.html @@ -60,10 +60,11 @@ + -
    +