├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ └── proposal.md ├── config.yml └── workflows │ ├── config.yml │ └── issue-labeler.yml ├── .gitignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── index.html ├── package.json ├── pages ├── 2048game.html ├── Car_game.html ├── Fall_game.html ├── Guess_the_number.html ├── candycrush.html ├── connect-four-game.html ├── dino.html ├── doodlejump.html ├── dot-and-boxes.html ├── flappy_bird.html ├── flips-me.html ├── hangman.html ├── memory-game.html ├── pacman.html ├── pingpong.html ├── randomJoke.html ├── reaction.html ├── rock-paper-scissor.html ├── simon_game.html ├── snakegame.html ├── space_shooter.html ├── tetris.html ├── tic-tac-toe.html ├── tictactoe.html ├── wall-breaker.html └── whack-a-mole.html └── static ├── css ├── 2048game.css ├── Fall_game.css ├── candycrush.css ├── car_game.css ├── connect-four.css ├── dino.css ├── doodlejump.css ├── flappy_bird.css ├── flip-me.css ├── flips-me.css ├── guess_the_number.css ├── hangman.css ├── memory-game.css ├── pacman.css ├── pingpong.css ├── randomJoke.css ├── reaction.css ├── simon.css ├── snake.css ├── space_shooter.css ├── style.css ├── tetris.css ├── tic-tac-toe.css ├── wall-breaker.css └── whack-a-mole.css ├── images ├── 2048game │ └── 2048game.png ├── Fall_game │ ├── background.png │ ├── brick.jpg │ └── pic.jpg ├── Guess the Number │ └── guess the number.png ├── Js-gamesCollage.png ├── PacMan │ ├── Pacman_HD.png │ └── background.jpg ├── Simon-Game │ └── Simon_game.png ├── Snakegame │ └── bg.jpg ├── WallBreaker │ └── WallBreaker.png ├── candycrush │ ├── background.jpg │ ├── blue-candy.png │ ├── green-candy.png │ ├── logo.png │ ├── orange-candy.png │ ├── purple-candy.png │ ├── red-candy.png │ └── yellow-candy.png ├── car_game │ ├── car1.png │ ├── car2.png │ └── car_game.png ├── connect-four │ └── connect-four.png ├── dino │ ├── bg.png │ ├── dino.png │ ├── dinogame.png │ └── dragon.png ├── doodlejump │ ├── background.png │ ├── doodlejump.png │ ├── doodler-guy.png │ ├── platform.png │ └── playButton.png ├── dot-and-boxes │ ├── Dots_boxes.png │ └── fav.png ├── favicon.png ├── flappy_bird │ ├── bg.png │ ├── bird.png │ ├── enter.png │ ├── fg.png │ ├── flappy_bird.PNG │ ├── pipeNorth.png │ └── pipeSouth.png ├── flip-me.JPG ├── flips-me │ └── flip.jpg ├── hangman │ ├── Web view.PNG │ ├── hangman.png │ └── mobile view.PNG ├── memory-game │ ├── Gifs │ │ ├── 0.gif │ │ ├── 1.gif │ │ ├── 2.gif │ │ ├── 3.gif │ │ ├── 4.gif │ │ ├── 5.gif │ │ ├── 6.gif │ │ ├── Background.jpg │ │ ├── card.PNG │ │ └── game.svg │ └── display-img.jpg ├── pingpong │ ├── pingpong.jpg │ └── tabletennis.jpg ├── randomJoke.jfif ├── reaction.PNG ├── rock-paper-scissor │ ├── 1.png │ ├── 2.png │ └── 3.png ├── space_shooter │ ├── background_ssg.png │ ├── bullet_ssg.png │ ├── enemy_ssg.png │ ├── poster_ssg.png │ └── spaceship_ssg.png ├── tetris │ └── tetris.png ├── tic-tac-toe │ ├── background.png │ ├── logo.png │ └── tictactoe.PNG └── whack-a-mole │ ├── hammer.png │ └── mole.png ├── js ├── 2048game.js ├── Fall_game.js ├── candycrush.js ├── car_game.js ├── connect-four.js ├── dino.js ├── doodlejump.js ├── dot-and-boxes.js ├── flappy_bird.js ├── flip-me.js ├── flips-me.js ├── game.js ├── guess_the_number.js ├── hangman.js ├── main.js ├── memory-game.js ├── pacman.js ├── pingpong.js ├── randomJoke.js ├── reaction.js ├── rock-paper-scissor.js ├── snake.js ├── space_shooter.js ├── tetris.js ├── tetrominoes.js ├── tic-tac-toe.js ├── wall-breaker.js └── whack-a-mole.js └── music ├── PacMan └── ready.mp3 ├── Simon-Game ├── blue.mp3 ├── green.mp3 ├── red.mp3 ├── wrong.mp3 └── yellow.mp3 ├── Snakegame ├── food.mp3 ├── gameover.mp3 ├── move.mp3 └── music.mp3 ├── connect-four ├── click.mp3 ├── lost.wav └── win.wav ├── hangman ├── click.mp3 ├── lost.wav └── win.wav ├── pingpong ├── hit.mp3 ├── score.mp3 └── wall.mp3 ├── tic-tac-toe ├── click.mp3 └── win.wav └── wallbreaker ├── gameover.mp3 └── move.mp3 /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/proposal.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Proposal 3 | about: Propose a non-trivial change 4 | labels: 'proposal' 5 | --- 6 | 7 | ## Proposal 8 | 9 | (A clear and concise description of what the proposal is.) 10 | -------------------------------------------------------------------------------- /.github/config.yml: -------------------------------------------------------------------------------- 1 | # Configuration for request-info - https://github.com/behaviorbot/request-info 2 | 3 | # *OPTIONAL* Comment to reply with 4 | # Can be either a string : 5 | requestInfoReplyComment: 6 | - We would appreciate it if you could provide us with more info about this issue/pr 7 | - Ah no! young blade! That was a trifle short! 8 | - Tell me more ! 9 | - I am sure you can be more effusive 10 | 11 | 12 | # *OPTIONAL* default titles to check against for lack of descriptiveness 13 | # MUST BE ALL LOWERCASE 14 | requestInfoDefaultTitles: 15 | - update readme.md 16 | - updates 17 | 18 | # *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given 19 | requestInfoLabelToAdd: needs-more-info 20 | 21 | # *OPTIONAL* Require Pull Requests to contain more information than what is provided in the PR template 22 | # Will fail if the pull request's body is equal to the provided template 23 | checkPullRequestTemplate: true 24 | 25 | # *OPTIONAL* Only warn about insufficient information on these events type 26 | # Keys must be lowercase. Valid values are 'issue' and 'pullRequest' 27 | requestInfoOn: 28 | pullRequest: true 29 | 30 | # *OPTIONAL* Add a list of people whose Issues/PRs will not be commented on 31 | # keys must be GitHub usernames 32 | requestInfoUserstoExclude: 33 | - geekymeeky 34 | -------------------------------------------------------------------------------- /.github/workflows/config.yml: -------------------------------------------------------------------------------- 1 | name: Greetings 2 | 3 | on: [issues, pull_request_target] 4 | 5 | jobs: 6 | greeting: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/first-interaction@v1 10 | with: 11 | repo-token: ${{ secrets.GITHUB_TOKEN }} 12 | issue-message: ' Hello there!👋 Welcome to the project!🚀⚡ 13 | Thank you and congrats🎉 for opening your very first issue in this project. 14 | Please adhere to our [Code of Conduct](https://github.com/geekymeeky/JS-games/blob/main/CODE_OF_CONDUCT.md). 15 | Please make sure not to start working on the issue, unless you get assigned to it.😄' 16 | pr-message: 'Congratulations!! for making your first PR at JS-games, our mentors will review it soon. 🙌🏻' 17 | -------------------------------------------------------------------------------- /.github/workflows/issue-labeler.yml: -------------------------------------------------------------------------------- 1 | name: issue-labeler 2 | 3 | on: 4 | issues: 5 | types: [opened] 6 | 7 | jobs: 8 | automate-issues-labels: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: initial labeling 12 | uses: andymckay/labeler@master 13 | with: 14 | remove-labels: 'DCP21' 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | gupta.srijan94@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | This documentation contains a set of guidelines to help you during the contribution process. 4 | We are happy to welcome all the contributions from anyone willing to improve/add new scripts to this project. Thank you for helping out and remember, 5 | **no contribution is too small.** 6 | 7 | # Submitting Contributions👩‍💻👨‍💻 8 | Below you will find the process and workflow used to review and merge your changes. 9 | ## Step 1 : Find an issue 10 | - Take a look at the Existing Issues or create your **own** Issues! 11 | - Wait for the Issue to be assigned to you after which you can start working on it. 12 | - Note : Every change in this project should/must have an associated issue. 13 | 14 | ## Step 2 : Fork the Project 15 | - Fork this Repository. This will create a Local Copy of this Repository on your Github Profile. Keep a reference to the original project in `upstream` remote. 16 | ``` 17 | $ git clone https://github.com//JS-games 18 | $ cd JS-games 19 | $ git remote add upstream https://github.com/geekymeeky/JS-games 20 | ``` 21 | 22 | - If you have already forked the project, update your copy before working. 23 | ``` 24 | $ git remote update 25 | $ git checkout 26 | $ git rebase upstream/ 27 | ``` 28 | ## Step 3 : Branch 29 | Create a new branch. Use its name to identify the issue your addressing. 30 | ``` 31 | # It will create a new branch with name Branch_Name and switch to that branch 32 | $ git checkout -b branch_name 33 | ``` 34 | ## Step 4 : Work on the issue assigned 35 | - Work on the issue(s) assigned to you. 36 | - Add all the files/folders needed. 37 | - After you've made changes or made your contribution to the project add changes to the branch you've just created by: 38 | ``` 39 | # To add all new files to branch Branch_Name 40 | $ git add . 41 | ``` 42 | ## Step 5 : Commit 43 | - To commit give a descriptive message for the convenience of reveiwer by: 44 | ``` 45 | # This message get associated with all files you have changed 46 | $ git commit -m 'message 47 | ``` 48 | - **NOTE**: A PR should have only one commit. Multiple commits should be squashed. 49 | ## Step 6 : Work Remotely 50 | - Now you are ready to your work to the remote repository. 51 | - When your work is ready and complies with the project conventions, upload your changes to your fork: 52 | 53 | ``` 54 | # To push your work to your remote repository 55 | $ git push -u origin Branch_Name 56 | ``` 57 | 58 | ## Step 7 : Pull Request 59 | - Go to your repository in browser and click on compare and pull requests. Then add a title and description to your pull request that explains your contribution. 60 | 61 | - Voila! Your Pull Request has been submitted and will be reviewed by the moderators and merged.🥳 62 | 63 | ## Need more help?🤔 64 | You can refer to the following articles on basics of Git and Github and also contact the Project Mentors, in case you are stuck: 65 | - [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) 66 | - [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-an-issue-or-pull-request) 67 | - [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github) 68 | - [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6) 69 | - [Learn GitHub from Scratch](https://lab.github.com/githubtraining/introduction-to-github) 70 | 71 | 72 | ## Tip from us😇 73 | It always takes time to understand and learn. So, do not worry at all. We know **you have got this**!💪 74 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Srijan Kumar Gupta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![JS-games](https://socialify.git.ci/geekymeeky/JS-games/image?description=1&forks=1&issues=1&language=1&owner=1&pattern=Circuit%20Board&pulls=1&stargazers=1&theme=Light) 2 | 3 |

Introduction🤩

4 | 5 |

JS-games is an exciting web application that keeps you updated on Javascript-based fun games, lightens up your mood by letting you enjoy the addictive games, and provides an amazing visualization.

6 | 7 |

Features✨

8 |
    9 |
  • User-Friendly Interface
    • 10 |
  • Efficient and time-saving
    • 11 |
  • Minimal requirements needed
    • 12 |
  • Accessible from anywhere and anytime
    • 13 |
  • Eligible for all age groups
    • 14 |
15 | 16 |

Workflow📌

17 | 18 |

The JS games keep you updated about computer games and are an interesting way for everyone to showcase their skills in building games.There are various games available in https://geekymeeky.github.io/JS-games/. The most amazing feature is that the games available are very easy to play with just a simple click. You can view different types of games on the webpage and play them as many times as you want.

19 | 20 |

How it helps the community🌼

21 |
    22 |
  • It includes Javascript games which will help to lighten up the mood.
    • 23 |
  • It creates an interesting platform to learn and use Javascript in a fun way.
    • 24 |
  • It provides an interactive interface for everyone.
    • 25 |
26 | 27 |

Software Used💻

28 |
    29 |
  • HTML
    • 30 |
  • CSS
    • 31 |
  • Javascript
    • 32 |
33 |

Screenshots📸

34 | collage preview 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsgames", 3 | "version": "1.0.0", 4 | "description": "a collection of js games", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "npm run lite", 8 | "lite": "lite-server", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "author": "Srijan Gupta", 12 | "license": "ISC", 13 | "dependencies": { 14 | "bootstrap": "^4.6.0", 15 | "font-awesome": "^4.7.0", 16 | "jquery": "^3.5.1", 17 | "popper.js": "^1.16.1" 18 | }, 19 | "devDependencies": { 20 | "lite-server": "^2.6.1" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /pages/2048game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 2048-GAME 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 |
17 |

2048 GAME

18 |

"Play using WASD keys"

19 |
20 |
21 |
22 |

Scoreboard:

23 |

24 |

Score: 0

25 |

High Score: 0

26 | 29 |
30 | 31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /pages/Car_game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Car Game 10 | 11 | 12 | 13 | 14 | 15 | 16 | 37 |
Start Game
38 |
39 | /MPH | 40 | Score : | 41 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /pages/Fall_game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fall in Game 8 | 9 | 13 | 14 | 15 |

Fall In Game

16 | 17 |

Press left & right keys to move

18 |
19 |
20 | 21 |
22 |
23 |

Score : 24 | 25 |

26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /pages/Guess_the_number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Guess The Number 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Back to Home Page 18 | 19 |
20 |

Guess The Number

21 |

We have Selected a Number between 1 and 100

22 |

Lets see If you can guess it....

23 | 24 | 25 |
26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /pages/candycrush.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Candy Crush 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 |
19 | 20 | 21 |
22 |

Candy Crush

23 |
24 |

score

25 |

26 |
27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /pages/dino.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Dino Game 10 | 11 | 12 |
13 | 14 |
Dino Game
15 |
16 |
Your Score: 0
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /pages/doodlejump.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Doodle Jump 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 |
18 |
19 |
20 |
21 |

DOODLE JUMP GAME

22 |

"Play using WASD keys"

23 | 24 |
25 | 26 |
27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /pages/dot-and-boxes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dots and Boxes 8 | 9 | 33 | 34 | 35 |
36 |

Home

 37 |

38 | Dot and Boxes
39 | (Player and Computer) 40 |

41 |
42 | 43 |
44 |

45 | Developed by 46 | Sumit Vajarinkar 47 |

48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /pages/flappy_bird.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flappy Bird 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 56 | 57 |
58 | 59 |

60 |

Press Enter Key to help the bird fly

61 |
62 |
63 |
64 |
65 | 66 |
67 |
68 |
69 | 70 |
71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /pages/flips-me.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flip-me Game 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

17 | Back to Home 18 |
19 |
20 |

Flip-me Game

21 |
22 | 23 |
24 |
    25 |
    • 26 |
    • 27 |
    • 28 |
29 | 30 | 0 Move(s) 31 | 32 |
33 |
34 | 35 |
36 | 37 |
38 |
39 | 40 |
    41 |
  • 42 | 43 |
    • 44 |
  • 45 | 46 |
    • 47 |
  • 48 | 49 |
    • 50 |
  • 51 | 52 |
    • 53 |
  • 54 | 55 |
    • 56 |
  • 57 | 58 |
    • 59 |
  • 60 | 61 |
    • 62 |
  • 63 | 64 |
    • 65 |
  • 66 | 67 |
    • 68 |
  • 69 | 70 |
    • 71 |
  • 72 | 73 |
    • 74 |
  • 75 | 76 |
    • 77 |
  • 78 | 79 |
    • 80 |
  • 81 | 82 |
    • 83 |
  • 84 | 85 |
    • 86 |
  • 87 | 88 |
    • 89 |
90 | 91 |
92 |
93 |

Congratulations 🎉

94 | × 95 |
96 | Congratulations you're a winner 🎉🎉 97 |
98 |
99 |

You made moves

100 |

in

101 |

Rating:

102 |
103 | 106 |
107 |
108 | 109 |
110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /pages/hangman.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hangman 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 |
22 |
23 |
24 |

Hangman

25 |

Use the alphabet below to guess the word, or click hint to get a clue

26 |
27 |
28 | 29 |
30 |
31 |

The Chosen Category Is:

32 |

33 |
34 |
35 |
36 |

37 |
38 | 39 | This Text will show if the Browser does NOT support HTML5 Canvas tag 40 |
41 |
42 |
43 |
Hint
44 |
45 |
46 |

47 |
48 |
49 |
Play Again
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |

© 2021 Pranjay-Poddar

61 | 64 | 67 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /pages/memory-game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Memory Game 8 | 9 | 10 | 11 | 12 |

MemoryGame

13 |

14 |

15 |
16 | 17 | gif1 18 | Memory Card 19 |
20 |
21 | gif2 22 | Memory Card 23 |
24 |
25 | gif3 26 | Memory Card 27 |
28 |
29 | gif4 30 | Memory Card 31 |
32 |
33 | gif5 34 | Memory Card 35 |
36 |
37 | gif6 38 | Memory Card 39 |
40 |
41 | gif1 42 | Memory Card 43 |
44 |
45 | gif2 46 | Memory Card 47 |
48 |
49 | gif3 50 | Memory Card 51 |
52 |
53 | gif4 54 | Memory Card 55 |
56 |
57 | gif5 58 | Memory Card 59 |
60 |
61 | gif6 62 | Memory Card 63 |
64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /pages/pacman.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pac-Man 8 | 12 | 13 | 14 | 15 | 16 | 17 |

Pac-Man Game

18 |
19 | 20 |
21 |
22 |
23 |

Score : 0

24 | 27 | 28 | -------------------------------------------------------------------------------- /pages/randomJoke.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Random Joke Generator 11 | 12 | 13 | 14 | 15 | 16 | 17 | Back to Home Page 18 |
19 |

Random Joke Generator

20 | 21 |
random joke
22 | 23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /pages/reaction.html: -------------------------------------------------------------------------------- 1 | Reaction Time 2 | 3 | 4 | 5 |
6 |

Reaction Time Game

7 |
8 | 9 |

Test your speed..

10 |

Click on the shapes as soon as possible!

11 | 12 |

13 | 14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /pages/rock-paper-scissor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JS Games- Rock Paper Scissor 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 37 |
38 |
39 |
40 |

Rock Paper Scissor

41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | image 50 |
51 |
52 |
53 |
54 | image 56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | 66 |
67 |
68 |
69 |
70 |
71 |

Your score:

72 |
73 |
74 |

Computer score:

75 |
76 |
77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /pages/simon_game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SIMON 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 37 |

Press A Key to Start

38 |
39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 | 47 |
48 |
49 | 50 |
51 | 52 |
53 | 54 |
55 |
56 | 57 |
58 | 59 |
60 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /pages/snakegame.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Snake Game 8 | 9 | 10 | 11 | 12 | 13 | 14 | 32 |
33 |
34 |
Score: 0
35 |
HiScore: 0
36 |
37 |
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /pages/space_shooter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Space Shooter Game 4 | 5 | 6 | 7 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /pages/tetris.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tetris Game 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 |

Tetris Game

14 |
15 |

Instructions:

16 |
17 |
18 |
    19 |

    To change tetrominoes, press up key.

    20 |

    To move to left, press left key.

    21 |

    To move to right, press right key.

    22 |

    To move to down, press down key.

    23 |

    You can check how many lines you have completed in the top.

    24 |

    If you run out of moves, the game will be ended.

    25 |
26 |
27 | Lines: 0 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /pages/tic-tac-toe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 3D-Tic Tac Toe 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 |
20 |
21 |
22 |

3D-TIC-TAC-TOE

23 |
24 |
25 |
26 |
27 |
28 | Player X 29 |
30 |
31 |
32 |
33 |
34 | 35 |
36 |
37 |
38 | 41 | 44 |
45 |

© 2021 Pranjay-Poddar

46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /pages/tictactoe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JS Games- Tic Tac Toe 9 | 10 | 11 | 12 | 13 | 14 | 32 |
33 |
34 |
35 |

Tic Tac Toe

36 |
37 |
38 |
39 | 40 |
41 | 42 |

Game starts by just Tap on 43 | box

First Player starts as 44 | Player X And Second 45 | Player as Player 0 46 |

47 | 48 |
49 | 50 | 52 | 53 | 55 | 56 | 58 |

59 | 60 | 62 | 63 | 65 | 66 | 68 |

69 | 70 | 72 | 73 | 75 | 76 | 78 | 79 | 80 |


81 | 82 | 85 | 86 |

87 | 88 |

89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /pages/wall-breaker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Wall Breaker 11 | 12 | 13 | 14 |

Wall Breaker!

15 | 16 | 17 | 18 |
19 |

How to Play:

20 |

21 | Use your right and left keys to move the paddle to bounce the ball up 22 | and break the blocks. 23 |

24 |

If you miss the ball, your score and the blocks will reset.

25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /pages/whack-a-mole.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 17 | 18 | 19 | 20 | Whack-A-Mole 21 | 22 | 23 | 60 |
61 |
62 |

Whack a Mole game

63 |
64 |
Points: 0
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | 80 | 81 |
82 |
83 | 88 |
89 |
90 | 91 | 96 | 101 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /static/css/2048game.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Roboto', sans-serif; 3 | background-color: #FBAB7E; 4 | background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); 5 | 6 | } 7 | .title{ 8 | font-size: 50px; 9 | text-align: center; 10 | font-family: 'Otomanopee One', sans-serif; 11 | color:#242B2E; 12 | 13 | } 14 | 15 | #meta { 16 | float: center; 17 | width: 400px; 18 | height: 400px; 19 | font-size: 30px; 20 | text-align: center; 21 | font-family: 'Roboto', sans-serif; 22 | color: #242B2E; 23 | } 24 | 25 | button { 26 | background-color: white; 27 | padding: 10px; 28 | font-size: 25px; 29 | color: #242B2E; 30 | margin-bottom: 30px; 31 | } 32 | 33 | button:hover { 34 | background-color: darkred; 35 | color: white; 36 | } 37 | 38 | #grid { 39 | display: flex; 40 | flex-wrap: wrap; 41 | width: 400px; 42 | height: 400px; 43 | background-color: lightpink; 44 | float: left; 45 | margin: 50px; 46 | } 47 | 48 | #grid div { 49 | width: 100px; 50 | height: 100px; 51 | background-color: darkred; 52 | font-size: 60px; 53 | text-align: center; 54 | line-height: 100px; 55 | } 56 | 57 | .grid-container { 58 | display: grid; 59 | grid-template-columns: 1fr 1fr; 60 | grid-gap: 20px; 61 | } -------------------------------------------------------------------------------- /static/css/Fall_game.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | background-color: darkseagreen; 5 | } 6 | 7 | h3{ 8 | margin-left:50px; 9 | margin-bottom: 10px; 10 | } 11 | 12 | p{ 13 | margin-left:50px; 14 | } 15 | 16 | h2{ 17 | margin-top: 30px; 18 | text-align: center; 19 | } 20 | button{ 21 | width: 120px; 22 | height: 40px; 23 | font-size: 18px; 24 | margin-left: 50px; 25 | border: 2px solid black; 26 | margin-bottom: 30px; 27 | } 28 | 29 | button:hover{ 30 | box-shadow: 0 0 5px #FFFF00, 31 | 0 0 20px rgb(255 255 0 / 0.8), 32 | 0 0 35px rgb(255 255 0 / 0.7), 33 | 0 0 50px rgb(255 255 0 / 0.6); 34 | border-color: #fff; 35 | } 36 | #game{ 37 | width: 400px; 38 | height: 500px; 39 | border: 5px solid black; 40 | margin-left: 550px; 41 | background-image: url(../images/Fall_game/background.png); 42 | } 43 | 44 | #character{ 45 | width: 20px; 46 | height: 20px; 47 | border-radius: 50%; 48 | background-color: deeppink; 49 | position: relative; 50 | top: 200px; 51 | left: 150px; 52 | /*To make sure ball is always on top*/ 53 | z-index: 1000000; 54 | box-shadow: 0 0 5px #FFFF00, 55 | 0 0 20px rgb(255 255 0 / 0.8), 56 | 0 0 35px rgb(255 255 0 / 0.7), 57 | 0 0 50px rgb(255 255 0 / 0.6); 58 | border-color: #fff; 59 | } 60 | 61 | .block{ 62 | width: 400px; 63 | height: 20px; 64 | background-image: url(../images/Fall_game/brick.jpg); 65 | position: relative; 66 | margin-top: -20px; 67 | top: 100px; 68 | } 69 | .hole{ 70 | width: 40px; 71 | height: 20px; 72 | background-image: url(../images/Fall_game/background.png); 73 | margin-top: -20px; 74 | top: 100px; 75 | position: relative; /*Imp for the hole to move*/ 76 | } -------------------------------------------------------------------------------- /static/css/candycrush.css: -------------------------------------------------------------------------------- 1 | html { 2 | 3 | background: no-repeat center fixed; 4 | background-size: cover; 5 | } 6 | .parent 7 | { 8 | display:flex; 9 | height: 100vh; 10 | justify-content: space-around; 11 | 12 | } 13 | .navbar 14 | { 15 | grid-area: navbar; 16 | margin: 20px; 17 | } 18 | .navbar a { 19 | background-color: #dce471; 20 | padding: 10px; 21 | border-radius: 6px; 22 | text-decoration: none; 23 | font-weight: 700; 24 | box-shadow: 2 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; 25 | 26 | font-family: 'Montserrat', cursive; ; 27 | color: #4c19c2 !important; 28 | } 29 | .grid { 30 | /* align-self: center; */ 31 | /* grid-area: grid; */ 32 | height:fit-content; 33 | width:fit-content; 34 | display: grid; 35 | grid-template-columns: repeat(8,65px); 36 | grid-template-rows: repeat(8,65px); 37 | background-color: rgba(109, 127, 151, 0.5); 38 | padding:5px; 39 | border-radius: 10px; 40 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; 41 | color: #85796b; 42 | } 43 | .candy 44 | { 45 | /* grid-area: candy; */ 46 | /* text-align: left; */ 47 | color: #4c19c2; 48 | font-weight: 700; 49 | font-size: 2.5rem; 50 | font-family: 'Montserrat', cursive; 51 | padding-right: 50px; 52 | } 53 | .score-board { 54 | /* grid-area: score; */ 55 | background-color: #dce471 ; 56 | border-radius: 10px; 57 | width:fit-content; 58 | height: fit-content; 59 | align-self: flex-start; 60 | /*justify-self: center; */ 61 | padding-left: 30px; 62 | padding-right: 30px; 63 | display: flex; 64 | /* flex-direction: column; */ 65 | justify-content: space-between; 66 | align-items: center; 67 | text-align: center; 68 | font-size: 1.25em; 69 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; 70 | color: #4c19c2; 71 | } 72 | .score-board h2{ 73 | font-size: 2rem; 74 | 75 | } 76 | 77 | @media only screen and (max-width: 600px ) 78 | { 79 | .parent 80 | { 81 | display: flex; 82 | flex-direction: column; 83 | align-content: space-between; 84 | } 85 | 86 | } 87 | -------------------------------------------------------------------------------- /static/css/car_game.css: -------------------------------------------------------------------------------- 1 | #container{ 2 | position: relative; 3 | height: 600px; 4 | width: 800px; 5 | margin-left: auto; 6 | margin-right: auto; 7 | background-color: rgb(145, 69, 7); 8 | overflow: hidden;/******************************/ 9 | /*left: %;*/ 10 | } 11 | .dashboard{ 12 | background-color: black; 13 | color:white; 14 | font-size: 1.5em; 15 | text-align: center; 16 | padding: 15px; 17 | } 18 | .btnStart{ 19 | position: absolute; 20 | top: 550px; 21 | left: 20px; 22 | width: 200px; 23 | z-index: 200; 24 | border: 1px solid red; 25 | padding: 1em; 26 | border-radius: 25px; 27 | background-color: coral; 28 | color: aliceblue; 29 | text-align: center; 30 | /*left: 50%;*/ 31 | } 32 | .road{ 33 | position: absolute; 34 | height: 60px; 35 | width: 250px; 36 | top: 0; 37 | 38 | left: 200px; 39 | text-align: center; 40 | color: aliceblue; 41 | background-color: #444444; 42 | border-radius: 5px; 43 | } 44 | 45 | .road:before{ 46 | content:"||"; 47 | vertical-align: top; 48 | color:white; 49 | width: 1px; 50 | height: 10px; 51 | line-height: 30px; 52 | left: 50%; 53 | 54 | position: absolute; 55 | } 56 | 57 | .baddy{ 58 | position: absolute; 59 | height: 80px; 60 | width: 40px; 61 | top: 0px; 62 | left: 0px; 63 | border-radius: 5px; 64 | background-image: url(../images/car_game/car2.png); 65 | background-size: cover; 66 | z-index: 99; 67 | text-align: center; 68 | } 69 | .playerCar{ 70 | position: absolute; 71 | height: 80px; 72 | width: 40px; 73 | bottom: 60px; 74 | left: 250px; 75 | border-radius: 5px; 76 | background-image: url(../images/car_game/car1.png); 77 | background-size: cover; 78 | z-index: 100; 79 | } 80 | -------------------------------------------------------------------------------- /static/css/dino.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | overflow: hidden; 7 | } 8 | .gameContainer{ 9 | background-image:url('../images/dino/bg.png'); 10 | background-repeat: no-repeat; 11 | background-size: 100vw 100vh; 12 | width: 100%; 13 | height: 100vh; 14 | } 15 | .dino{ 16 | background-image:url('../images/dino/dino.png') ; 17 | background-repeat: no-repeat; 18 | background-size: cover; 19 | width: 233px; 20 | height: 114px; 21 | position: absolute; 22 | bottom: 0; 23 | left: 52px; 24 | } 25 | .obstacle{ 26 | background-image: url('../images/dino/dragon.png'); 27 | background-size: cover; 28 | width: 184px; 29 | height: 123px; 30 | position: absolute; 31 | bottom: 0; 32 | left:44vw; 33 | 34 | 35 | } 36 | .animateDino{ 37 | animation: dino .6s linear; 38 | } 39 | 40 | .obstacleAni{ 41 | animation: obstacleAni 2s linear infinite; 42 | } 43 | .gameOver{ 44 | position: relative; 45 | top: 63px; 46 | font-size: 53px; 47 | text-align: center; 48 | font-family: sans-serif; 49 | } 50 | 51 | #scoreCont{ 52 | font-weight: bold; 53 | position: absolute; 54 | right:45px; 55 | top: 31px; 56 | border: 2px solid black; 57 | padding: 10px; 58 | font-family: sans-serif; 59 | border-radius: 15px; 60 | } 61 | #home{ 62 | font-weight: bold; 63 | position: absolute; 64 | left:45px; 65 | top: 31px; 66 | 67 | border: none; 68 | padding: 10px; 69 | font-family: sans-serif; 70 | border-radius: 15px; 71 | font-size: 28px; 72 | background-color: bisque; 73 | } 74 | #home a{ 75 | text-decoration: none; 76 | } 77 | #home:hover{ 78 | background-color: rgb(240, 165, 73) ; 79 | } 80 | @keyframes dino { 81 | 0%{ 82 | bottom: 0; 83 | } 84 | 50%{ 85 | /* bottom: 422px; */ 86 | bottom: 100vh; 87 | } 88 | 100%{ 89 | bottom: 0; 90 | 91 | } 92 | } 93 | @keyframes obstacleAni { 94 | 0%{ 95 | left:100vw; 96 | } 97 | 100%{ 98 | left:-10vw; 99 | } 100 | 101 | } -------------------------------------------------------------------------------- /static/css/doodlejump.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Roboto', sans-serif; 3 | background-color: #F4D03F; 4 | background-image: linear-gradient(0deg, #F4D03F 0%, #16A085 100%); 5 | } 6 | 7 | .grid { 8 | width: 400px; 9 | height: 600px; 10 | background-image: url('../images/doodlejump/background.png'); 11 | position: relative; 12 | margin-left: 60px; 13 | margin-top: 60px; 14 | font-size: 80px; 15 | color: white; 16 | text-align: center; 17 | } 18 | 19 | .doodler { 20 | width: 87px; 21 | height: 85px; 22 | background-image: url('../images/doodlejump/doodler-guy.png'); 23 | position: absolute; 24 | } 25 | 26 | .platform { 27 | width: 85px; 28 | height: 15px; 29 | background-image: url('../images/doodlejump/platform.png'); 30 | position: absolute; 31 | } 32 | 33 | .rbtn{ 34 | 35 | display: block; 36 | font-size: 25px; 37 | color: #242B2E; 38 | margin-left: 120px; 39 | margin-top: 60px; 40 | text-align: center; 41 | } 42 | 43 | .rbtn:hover { 44 | background-color: darkred; 45 | color: white; 46 | } 47 | 48 | .grid-container { 49 | display: grid; 50 | grid-template-columns: 1fr 1fr; 51 | grid-gap: 20px; 52 | } 53 | 54 | .title{ 55 | font-size: 45px; 56 | text-align: center; 57 | font-family: 'Otomanopee One', sans-serif; 58 | color:#242B2E; 59 | 60 | } 61 | 62 | #play { 63 | padding: 10px; 64 | font-size: 25px; 65 | color: #242B2E; 66 | margin-bottom: 30px; 67 | margin-top:130px; 68 | text-align: center; 69 | } 70 | 71 | #play:hover { 72 | background-color: darkred; 73 | color: white; 74 | } 75 | 76 | #homebtn { 77 | line-height: 40px; 78 | background-color: cornsilk; 79 | color: white; 80 | width: 140px; 81 | font-size: 15px; 82 | font-family: tahoma; 83 | margin-top: 2px; 84 | margin-right: 2px; 85 | position:absolute; 86 | top:0; 87 | right:0; 88 | } -------------------------------------------------------------------------------- /static/css/flappy_bird.css: -------------------------------------------------------------------------------- 1 | .back-option{ 2 | float: left;; 3 | } 4 | 5 | #home{ 6 | margin: 30px; 7 | height: 48px; 8 | width: 150px; 9 | background-color: chartreuse; 10 | border: 2px solid black; 11 | } 12 | 13 | #home:hover{ 14 | background-color: goldenrod; 15 | } 16 | 17 | #home h3{ 18 | font-size: 15px; 19 | } 20 | 21 | p{ 22 | margin: 30px; 23 | font-size: 20px; 24 | } 25 | 26 | .game{ 27 | margin-left: 500px; 28 | width: 500px; 29 | height: 730px; 30 | position: absolute; 31 | } 32 | .sky{ 33 | width: 500px; 34 | height: 580px; 35 | position: absolute; 36 | background-image: url(../images/flappy_bird/bg.png); 37 | } 38 | .ground{ 39 | top: 580px; 40 | width: 500px; 41 | height: 150px; 42 | background-image: url(../images/flappy_bird/fg.png); 43 | position: absolute; 44 | /*Putting the pipe below ground. z-index makes it appear closer to us*/ 45 | z-index: +1; 46 | } 47 | .bird{ 48 | width: 60px; 49 | height: 50px; 50 | position: absolute; 51 | background-image: url(../images/flappy_bird/bird.png); 52 | } 53 | 54 | .obstacle{ 55 | width: 60px; 56 | height: 300px; 57 | background-image: url(../images/flappy_bird/pipeNorth.png); 58 | position: absolute; 59 | } 60 | 61 | .topObstacle{ 62 | width: 60px; 63 | height: 300px; 64 | background-image: url(../images/flappy_bird/pipeSouth.png); 65 | position: absolute; 66 | transform: rotate(180deg); 67 | } -------------------------------------------------------------------------------- /static/css/flip-me.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: inherit; 9 | } 10 | 11 | html, 12 | body { 13 | width: 100%; 14 | height: 100%; 15 | margin: 0; 16 | padding: 0; 17 | } 18 | 19 | body { 20 | background: #ffffff; 21 | font-family: 'Bree Serif', serif; 22 | font-size: 16px; 23 | } 24 | 25 | .container { 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | flex-direction: column; 30 | } 31 | 32 | h1 { 33 | font-family: 'Bree Serif', serif; 34 | 35 | } 36 | 37 | 38 | /* 39 | * Styles for the deck of cards 40 | */ 41 | 42 | 43 | .deck { 44 | width: 85%; 45 | background: #716F71; 46 | padding: 1rem; 47 | border-radius: 4px; 48 | box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5); 49 | display: flex; 50 | flex-wrap: wrap; 51 | justify-content: space-around; 52 | align-items: center; 53 | margin: 0 0 3em; 54 | } 55 | 56 | .deck .card { 57 | height: 2.5rem; 58 | width: 2.5rem; 59 | margin: 0.2rem 0.2rem; 60 | background: #141214;; 61 | font-size: 0; 62 | color: #ffffff; 63 | border-radius: 5px; 64 | cursor: pointer; 65 | display: flex; 66 | justify-content: center; 67 | align-items: center; 68 | box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5); 69 | } 70 | 71 | .deck .card.open { 72 | transform: rotateY(0); 73 | background: #02b3e4; 74 | cursor: default; 75 | animation-name: flipInY; 76 | -webkit-backface-visibility: visible !important; 77 | backface-visibility: visible !important; 78 | animation-duration: .75s; 79 | } 80 | 81 | .deck .card.show { 82 | font-size: 33px; 83 | } 84 | 85 | .deck .card.match { 86 | cursor: default; 87 | background: #E5F720; 88 | font-size: 33px; 89 | animation-name: rubberBand; 90 | -webkit-backface-visibility: visible !important; 91 | backface-visibility: visible !important; 92 | animation-duration: .75s; 93 | } 94 | 95 | .deck .card.unmatched { 96 | animation-name: pulse; 97 | -webkit-backface-visibility: visible !important; 98 | backface-visibility: visible !important; 99 | animation-duration: .75s; 100 | background: #e2043b; 101 | } 102 | 103 | .deck .card.disabled { 104 | pointer-events: none; 105 | opacity: 0.9; 106 | } 107 | 108 | 109 | /* 110 | * Styles for the Score Panel 111 | */ 112 | 113 | 114 | .score-panel { 115 | text-align: left; 116 | margin-bottom: 10px; 117 | } 118 | 119 | .score-panel .stars { 120 | margin: 0; 121 | padding: 0; 122 | display: inline-block; 123 | margin: 0 5px 0 0; 124 | } 125 | 126 | .score-panel .stars li { 127 | list-style: none; 128 | display: inline-block; 129 | } 130 | 131 | .score-panel .restart { 132 | float: right; 133 | cursor: pointer; 134 | } 135 | 136 | .fa-star { 137 | color: #FFD700; 138 | } 139 | 140 | .timer { 141 | display: inline-block; 142 | margin: 0 1rem; 143 | } 144 | 145 | 146 | /* 147 | * Styles for congratulations modal 148 | */ 149 | 150 | 151 | .overlay { 152 | position: fixed; 153 | top: 0; 154 | bottom: 0; 155 | left: 0; 156 | right: 0; 157 | background: rgba(0, 0, 0, 0.7); 158 | transition: opacity 500ms; 159 | visibility: hidden; 160 | opacity: 0; 161 | } 162 | 163 | .overlay:target { 164 | visibility: visible; 165 | opacity: 1; 166 | } 167 | 168 | .popup { 169 | margin: 70px auto; 170 | padding: 20px; 171 | background: #ffffff; 172 | border-radius: 5px; 173 | width: 85%; 174 | position: relative; 175 | transition: all 5s ease-in-out; 176 | font-family: 'Bree Serif', serif; 177 | } 178 | 179 | .popup h2 { 180 | margin-top: 0; 181 | color: #333; 182 | font-family: Tahoma, Arial, sans-serif; 183 | } 184 | 185 | .popup .close { 186 | position: absolute; 187 | top: 20px; 188 | right: 30px; 189 | transition: all 200ms; 190 | font-size: 30px; 191 | font-weight: bold; 192 | text-decoration: none; 193 | color: #333; 194 | } 195 | 196 | .popup .close:hover { 197 | color: #E5F720; 198 | } 199 | 200 | .popup .content-1, 201 | .content-2 { 202 | max-height: 30%; 203 | overflow: auto; 204 | text-align: center; 205 | } 206 | 207 | .show { 208 | visibility: visible !important; 209 | opacity: 100 !important; 210 | } 211 | 212 | #starRating li { 213 | display: inline-block; 214 | } 215 | 216 | #play-again { 217 | background-color: #141214; 218 | padding: 0.7rem 1rem; 219 | font-size: 1.1rem; 220 | display: block; 221 | margin: 0 auto; 222 | width: 50%; 223 | font-family: 'Bree Serif', serif; 224 | color: #ffffff; 225 | border-radius: 5px; 226 | } 227 | 228 | /* animations */ 229 | @keyframes flipInY { 230 | from { 231 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 232 | animation-timing-function: ease-in; 233 | opacity: 0; 234 | } 235 | 236 | 40% { 237 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 238 | animation-timing-function: ease-in; 239 | } 240 | 241 | 60% { 242 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 243 | opacity: 1; 244 | } 245 | 246 | 80% { 247 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 248 | } 249 | 250 | to { 251 | transform: perspective(400px); 252 | } 253 | } 254 | 255 | @keyframes rubberBand { 256 | from { 257 | transform: scale3d(1, 1, 1); 258 | } 259 | 260 | 30% { 261 | transform: scale3d(1.25, 0.75, 1); 262 | } 263 | 264 | 40% { 265 | transform: scale3d(0.75, 1.25, 1); 266 | } 267 | 268 | 50% { 269 | transform: scale3d(1.15, 0.85, 1); 270 | } 271 | 272 | 65% { 273 | transform: scale3d(.95, 1.05, 1); 274 | } 275 | 276 | 75% { 277 | transform: scale3d(1.05, .95, 1); 278 | } 279 | 280 | to { 281 | transform: scale3d(1, 1, 1); 282 | } 283 | } 284 | 285 | @keyframes pulse { 286 | from { 287 | transform: scale3d(1, 1, 1); 288 | } 289 | 290 | 50% { 291 | transform: scale3d(1.2, 1.2, 1.2); 292 | } 293 | 294 | to { 295 | transform: scale3d(1, 1, 1); 296 | } 297 | } 298 | 299 | 300 | /****** Media queries 301 | ***************************/ 302 | 303 | 304 | @media (max-width: 320px) { 305 | .deck { 306 | width: 85%; 307 | } 308 | 309 | .deck .card { 310 | height: 4.7rem; 311 | width: 4.7rem; 312 | } 313 | } 314 | 315 | 316 | /* For Tablets and larger screens 317 | ****************/ 318 | 319 | @media (min-width: 768px) { 320 | .container { 321 | font-size: 22px; 322 | } 323 | 324 | .deck { 325 | width: 660px; 326 | height: 680px; 327 | } 328 | 329 | .deck .card { 330 | height: 125px; 331 | width: 125px; 332 | } 333 | 334 | .popup { 335 | width: 60%; 336 | } 337 | } 338 | .button { 339 | display: inline-block; 340 | padding: 10px 20px; 341 | text-align: center; 342 | text-decoration: none; 343 | color: #ffffff; 344 | background-color: #7aa8b7; 345 | border-radius: 6px; 346 | outline: none;} 347 | -------------------------------------------------------------------------------- /static/css/flips-me.css: -------------------------------------------------------------------------------- 1 | ::selection{background:none} 2 | ::-moz-selection{background:none} 3 | ::-webkit-selection{background:none} 4 | html{height:100vh;background:#4ecdc4;background:linear-gradient(90deg,#4ecdc4,#556270)} 5 | body{background-color:#fff;height:90%;width:90%;margin:auto;padding:20px} 6 | body,html{display:flex;justify-content:center;align-items:center} 7 | button{border:none;padding:5px 10px;border-radius:10px} 8 | #app{width:100%;height:100%} 9 | #app #opt-area{padding:20px} 10 | #app #opt-area,#app #stopwatch-area{text-align:center} 11 | #app div.card{background:beige;border:1px solid #000;display:flex;justify-content:center;align-items:center;font-size:56px;color:#fff;border-radius:10px} 12 | #app [data-color=red]{background-color:red!important} 13 | #app [data-color=black]{background-color:#000!important} 14 | #app #cards-area[data-level=easy]{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:20px;width:50%;margin:0 auto} 15 | #app #cards-area[data-level=easy] .card{height:170px;width:120px} 16 | #app #cards-area[data-level=medium]{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:15px;width:60%;margin:0 auto} 17 | #app #cards-area[data-level=medium] .card{height:120px} 18 | #app #cards-area[data-level=hard]{display:grid;grid-template-columns:repeat(9,1fr);grid-gap:5px;width:70%;margin:0 auto} 19 | #app #cards-area[data-level=hard] .card{height:88px} 20 | #home{ 21 | font-weight: bold; 22 | position: absolute; 23 | right:50px; 24 | top: 31px; 25 | float: right; 26 | border: none; 27 | padding: 10px; 28 | font-family: sans-serif; 29 | border-radius: 15px; 30 | font-size: 28px; 31 | background-color: skyblue; 32 | } 33 | #home a{ 34 | text-decoration: none; 35 | } 36 | #home:hover{ 37 | background-color:skyblue ; 38 | } -------------------------------------------------------------------------------- /static/css/guess_the_number.css: -------------------------------------------------------------------------------- 1 | .main-heading{ 2 | font-family: 'Press Start 2P', cursive; 3 | font-size:48px 4 | } 5 | body{ 6 | margin-top: 5%; 7 | font-family: 'Orbitron', sans-serif; 8 | background-color: black; 9 | color:white; 10 | } 11 | .container{ 12 | text-align: center; 13 | margin:10%; 14 | } 15 | .text{ 16 | font-size: 24px; 17 | margin:5%; 18 | } 19 | #num{ 20 | font-size: 50px; 21 | width:200px; 22 | height: 100px; 23 | } 24 | 25 | #submit-btn,#home-back-btn{ 26 | border-radius: 16px; 27 | font-size: 18px; 28 | font-family: 'Orbitron', sans-serif; 29 | padding:1%; 30 | color:white; 31 | box-shadow: 4px 8px 4px 1px rgba(255,255,255,0.5); 32 | margin-top:10%; 33 | background-color: black; 34 | text-decoration: none; 35 | border:2px solid white; 36 | } 37 | #submit-btn:focus, #home-back-btn:focus{ 38 | box-shadow: inset 4px 8px 4px 1px rgba(255,255,255,0.5); 39 | } 40 | -------------------------------------------------------------------------------- /static/css/hangman.css: -------------------------------------------------------------------------------- 1 | /* Variabes */ 2 | 3 | 4 | /* Mixin's */ 5 | 6 | 7 | /* scrollbar start */ 8 | 9 | ::-webkit-scrollbar { 10 | width: 5px; 11 | border-radius: 50%; 12 | } 13 | 14 | 15 | /* Track */ 16 | 17 | ::-webkit-scrollbar-track { 18 | background: black; 19 | } 20 | 21 | 22 | /* Handle */ 23 | 24 | ::-webkit-scrollbar-thumb { 25 | background: rgb(255, 158, 47); 26 | } 27 | 28 | 29 | /* Handle on hover */ 30 | 31 | ::-webkit-scrollbar-thumb:hover { 32 | background: rgb(255, 140, 8); 33 | } 34 | 35 | 36 | /* scrollbar end */ 37 | 38 | .grow { 39 | transition: all 0.3s ease-in-out; 40 | } 41 | 42 | .grow:hover { 43 | transform: scale(1.1); 44 | } 45 | 46 | .navbar { 47 | position: absolute; 48 | } 49 | 50 | .navbar a { 51 | background-color: rgb(255, 140, 8); 52 | padding: 10px; 53 | border-radius: 6px; 54 | text-decoration: none; 55 | color: white !important; 56 | } 57 | 58 | body { 59 | background: #ececec; 60 | font-family: 'Roboto', sans-serif; 61 | color: black; 62 | height: 100vh; 63 | text-align: center; 64 | font-size: 12px; 65 | } 66 | 67 | .badge1 { 68 | font-size: 1.5em; 69 | background-color: rgb(255, 158, 47); 70 | border-radius: 25px; 71 | padding: 0 5px 0 5px; 72 | } 73 | 74 | .badge2 { 75 | font-size: 1.5em; 76 | color: white; 77 | text-transform: uppercase; 78 | background-color: #170a46; 79 | } 80 | 81 | .badge4 { 82 | font-size: 1.5em; 83 | color: black; 84 | text-transform: uppercase; 85 | display: inline-block; 86 | } 87 | 88 | #alert1 { 89 | z-index: 10; 90 | } 91 | 92 | .badge3 { 93 | font-size: 1.5em; 94 | color: black; 95 | background-color: rgb(255, 158, 47); 96 | width: 10em; 97 | border-radius: 25px; 98 | } 99 | 100 | #clue { 101 | display: none; 102 | font-size: 1.5em; 103 | color: black; 104 | background-color: rgb(255, 158, 47); 105 | width: 10em; 106 | text-transform: uppercase; 107 | border-radius: 5px; 108 | } 109 | 110 | #hold { 111 | font-size: 220%; 112 | } 113 | 114 | .wrappper { 115 | width: 100%; 116 | margin: 0 auto; 117 | } 118 | 119 | #hint { 120 | background-color: #170a46; 121 | width: 120px; 122 | color: white; 123 | } 124 | 125 | #hint:hover { 126 | background-color: brown; 127 | border: black solid 2px; 128 | } 129 | 130 | #reset { 131 | background-color: #170a46; 132 | width: 120px; 133 | color: white; 134 | } 135 | 136 | #reset:hover { 137 | background-color: rgb(83, 175, 74); 138 | border: black solid 2px; 139 | } 140 | 141 | #catagoryName { 142 | color: white; 143 | font-weight: 800; 144 | } 145 | 146 | .wrappper:after { 147 | content: ""; 148 | display: table; 149 | clear: both; 150 | } 151 | 152 | canvas { 153 | color: white; 154 | border: black solid 2px; 155 | padding: 15px; 156 | background-color: white; 157 | } 158 | 159 | h1, 160 | h2, 161 | h3 { 162 | font-family: 'Roboto', sans-serif; 163 | font-weight: 100; 164 | text-transform: uppercase; 165 | margin: 3px 0; 166 | } 167 | 168 | h1 { 169 | font-size: 3em; 170 | } 171 | 172 | h2 { 173 | font-size: 1.6em; 174 | } 175 | 176 | p { 177 | font-size: 1.6em; 178 | } 179 | 180 | #alphabet { 181 | margin: 10px auto; 182 | padding: 0; 183 | max-width: 650px; 184 | } 185 | 186 | #alphabet:after { 187 | content: ""; 188 | display: inline-block; 189 | clear: both; 190 | } 191 | 192 | #alphabet li { 193 | float: left; 194 | margin: 0 10px 10px 0; 195 | list-style: none; 196 | width: 40px; 197 | height: 40px; 198 | padding-top: 5px; 199 | background: #170a46; 200 | color: white; 201 | font-size: 18px; 202 | transition: all 0.3s ease-in-out; 203 | cursor: pointer; 204 | -moz-border-radius: 5px; 205 | -webkit-border-radius: 5px; 206 | border-radius: 5px; 207 | -khtml-border-radius: 5px; 208 | border: solid 1px #fff; 209 | border-radius: 10px; 210 | } 211 | 212 | .rights { 213 | font-size: 100%; 214 | } 215 | 216 | #alphabet li:hover { 217 | background: #fc8f2a; 218 | border: solid 1px black; 219 | color: black; 220 | transform: scale(1.1); 221 | } 222 | 223 | #my-word { 224 | margin: 0; 225 | display: block; 226 | padding: 0; 227 | display: block; 228 | } 229 | 230 | #my-word li { 231 | position: relative; 232 | list-style: none; 233 | margin: 0; 234 | display: inline-block; 235 | padding: 0 10px; 236 | font-size: 1.6em; 237 | } 238 | 239 | .active { 240 | opacity: 0.4; 241 | filter: alpha(opacity=40); 242 | transition: all 1s ease-in; 243 | -moz-transition: all 0.3s ease-in-out; 244 | -webkit-transition: all 0.3s ease-in-out; 245 | cursor: default; 246 | } 247 | 248 | .active:hover { 249 | transition: all 1s ease-in; 250 | -moz-transition: all 0.3s ease-in-out; 251 | -webkit-transition: all 0.3s ease-in-out; 252 | opacity: 0.4; 253 | filter: alpha(opacity=40); 254 | transition: all 1s ease-in; 255 | -moz-transition: all 0.3s ease-in-out; 256 | -webkit-transition: all 0.3s ease-in-out; 257 | } 258 | 259 | #mylives { 260 | font-size: 1.6em; 261 | text-align: center; 262 | display: block; 263 | } 264 | 265 | @media (max-width: 767px) { 266 | #alphabet { 267 | padding: 0; 268 | } 269 | #my-word li { 270 | position: relative; 271 | list-style: none; 272 | margin: 0; 273 | display: inline-block; 274 | padding: 0 10px; 275 | font-size: 1.2em; 276 | } 277 | #hint { 278 | background-color: #170a46; 279 | width: 90px; 280 | font-size: 100%; 281 | color: white; 282 | } 283 | #reset { 284 | background-color: #170a46; 285 | width: 90px; 286 | font-size: 100%; 287 | color: white; 288 | } 289 | } 290 | 291 | @media (max-width: 500px) { 292 | #alphabet { 293 | padding: 0; 294 | } 295 | .badge1 { 296 | font-size: 1.2em; 297 | border-radius: 5px; 298 | } 299 | .badge2 { 300 | font-size: 1.3em; 301 | color: white; 302 | } 303 | .badge3 { 304 | font-size: 1em; 305 | color: black; 306 | background-color: rgb(255, 158, 47); 307 | width: 10em; 308 | border-radius: 25px; 309 | } 310 | canvas { 311 | color: white; 312 | border: black solid 2px; 313 | padding: 15px; 314 | background-color: white; 315 | } 316 | } -------------------------------------------------------------------------------- /static/css/memory-game.css: -------------------------------------------------------------------------------- 1 | * { 2 | /*Adding a reset to all items*/ 3 | padding: 0%; 4 | margin: 0%; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | height: 100vh; 10 | background-image: url("../images/memory-game/Gifs/Background.jpg"); 11 | } 12 | .memory-game { 13 | width: 680px; 14 | height: 640px; 15 | /*this bring the game in center of page*/ 16 | margin: auto; 17 | display: flex; 18 | flex-wrap: wrap; 19 | perspective: 1000px; 20 | } 21 | 22 | .memory-game img { 23 | object-fit: cover; 24 | } 25 | 26 | .memory-card { 27 | width: calc(25% - 10px); 28 | /*calc remove the margin area form the width*/ 29 | height: calc(33.33% - 10px); 30 | /*calc remove the margin area form the height*/ 31 | position: relative; 32 | margin: 5px; 33 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 34 | /*For the image to comeback to its original shape after it shrinked on clicking*/ 35 | transform: scale(1); 36 | transform-style: preserve-3d; 37 | transition: transform 0.5s; 38 | } 39 | 40 | .memory-card.flip { 41 | transform: rotateY(180deg); 42 | } 43 | 44 | .memory-card:active { 45 | /*Image shrinks to its 80%*/ 46 | transform: scale(0.75); 47 | /*Then comes back to its original shape after 2secs of shrinking*/ 48 | transition: transform.2s; 49 | } 50 | 51 | .front-face, 52 | .back-face { 53 | width: 185px; 54 | height: 200px; 55 | padding: 27px; 56 | position: absolute; /*One image on top of the other*/ 57 | border-radius: 5px; 58 | /*To make the front-face image visible*/ 59 | backface-visibility: hidden; 60 | } 61 | 62 | .front-face { 63 | transform: rotateY(180deg); 64 | } 65 | -------------------------------------------------------------------------------- /static/css/pacman.css: -------------------------------------------------------------------------------- 1 | .back-option{ 2 | float: left;; 3 | } 4 | 5 | #home{ 6 | height: 48px; 7 | width: 150px; 8 | background-color: chartreuse; 9 | border: 2px solid black; 10 | } 11 | 12 | #home:hover{ 13 | background-color: goldenrod; 14 | } 15 | 16 | #home h3{ 17 | font-size: 15px; 18 | } 19 | 20 | .game{ 21 | margin-top: 40px; 22 | margin-left: 500px; 23 | display: flex; 24 | flex-wrap: wrap; 25 | width: 560px; /*coz total 28 blocks each of 20px width*/ 26 | height: 560px; /*coz total 28 blocks each of 20px height*/ 27 | border: 5px solid black; 28 | } 29 | 30 | .game div{ 31 | width: 20px; 32 | height: 20px; 33 | } 34 | 35 | .food{ 36 | background-color: green; 37 | box-sizing: border-box; 38 | transform: scale(0.5); 39 | } 40 | 41 | .wall{ 42 | background-color: palegreen; 43 | } 44 | 45 | .energy{ 46 | background-color: blue; 47 | border-radius: 50%; 48 | } 49 | 50 | .pac-man{ 51 | background-image: url(../images/PacMan/Pacman_HD.png); 52 | } 53 | 54 | audio{ 55 | display: none; 56 | } 57 | 58 | .blinky{ 59 | background-color: red; 60 | } 61 | 62 | .pinky{ 63 | background-color: palevioletred; 64 | } 65 | 66 | .inky{ 67 | background-color: purple; 68 | } 69 | 70 | .clyde{ 71 | background-color: chartreuse; 72 | } 73 | 74 | .scared-ghost { 75 | background-color: aquamarine; 76 | } -------------------------------------------------------------------------------- /static/css/pingpong.css: -------------------------------------------------------------------------------- 1 | *{ 2 | /*Adding a reset to all items*/ 3 | padding: 0%; 4 | margin: 0%; 5 | box-sizing: border-box; 6 | } 7 | 8 | body{ 9 | height: 100vh; 10 | background-image:url("../images/pingpong/tabletennis.jpg"); 11 | } 12 | .banner{ 13 | font-size: 25px; 14 | font-style: italic; 15 | } 16 | #pingpong{ 17 | position: absolute; 18 | top: 20%; 19 | left: 50%; 20 | margin-right: -50%; 21 | transform: translate(-50%); 22 | } 23 | #btn_1 { 24 | background-color: #4CAF50; /* Green */ 25 | border: none; 26 | color: white; 27 | padding: 15px 32px; 28 | text-align: center; 29 | text-decoration: none; 30 | display: inline-block; 31 | font-size: 16px; 32 | } 33 | #btn_1:hover{ 34 | background: red; 35 | } 36 | -------------------------------------------------------------------------------- /static/css/randomJoke.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@500&family=Roboto:wght@100&display=swap" rel="stylesheet'); 2 | * { 3 | box-sizing: border-box; 4 | } 5 | body { 6 | background-color: #66a5ad; 7 | font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 8 | "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | margin: 0; 14 | } 15 | #home-back-button { 16 | background-color: #003b46; 17 | box-shadow: 0 10px 20px #c4dfe6; 18 | border-radius: 10px; 19 | color: white; 20 | padding: 15px 32px; 21 | text-align: center; 22 | text-decoration: none; 23 | display: inline-block; 24 | font-size: 16px; 25 | font-weight: bold; 26 | position: relative; 27 | top: -40%; 28 | left: -40%; 29 | } 30 | .container { 31 | margin: 0; 32 | position: absolute; 33 | background-color: #07575b; 34 | color: #c4dfe6; 35 | border-radius: 10px; 36 | padding: 40px 30px; 37 | width: 700px; 38 | height: 420px; 39 | align-items: center; 40 | justify-items: center; 41 | text-align: center; 42 | box-shadow: 0 10px 20px #c4dfe6; 43 | top: 50%; 44 | left: 50%; 45 | margin-right: -50%; 46 | transform: translate(-50%, -50%); 47 | } 48 | h2 { 49 | font-size: 2em; 50 | margin: 0; 51 | font-weight: bold; 52 | opacity: 0.9; 53 | padding: 20px 30px; 54 | } 55 | #joke { 56 | position: absolute; 57 | left: 7%; 58 | top: 20%; 59 | font-size: 30px; 60 | line-height: 40px; 61 | margin: 50px 0; 62 | max-width: 600px; 63 | } 64 | .btn { 65 | position: absolute; 66 | left: 40%; 67 | bottom: 0; 68 | margin-bottom: 15px; 69 | background-color: white; 70 | color: #003b46; 71 | border: 0; 72 | border-radius: 10px; 73 | padding: 10px 30px; 74 | font-weight: bold; 75 | cursor: pointer; 76 | } 77 | #new_joke { 78 | font-size: 20px; 79 | } 80 | .btn:active { 81 | transform: scale(0.9); 82 | } 83 | .btn:focus { 84 | outline: 0; 85 | } 86 | -------------------------------------------------------------------------------- /static/css/reaction.css: -------------------------------------------------------------------------------- 1 | 2 | #box{ 3 | height:200; 4 | width:250; 5 | background-color:pink; 6 | position:relative; 7 | left:300px; 8 | top:200px; 9 | 10 | } 11 | 12 | body{ 13 | background-color: rgb(247, 247, 232); 14 | } 15 | 16 | #click{ 17 | text-align: center; 18 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 19 | } 20 | 21 | h1{ 22 | text-align: center; color: white; 23 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 24 | font-size: 40px; 25 | } 26 | 27 | p{ 28 | font-size: 20px;text-align: center; 29 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 30 | } 31 | 32 | .p1{ 33 | padding-top: 20px; 34 | text-align: center; 35 | font-size: 25px; 36 | 37 | } 38 | 39 | .d1{ 40 | background-color: rgb(68, 22, 32); 41 | height: 100px; 42 | width: 300px; 43 | margin: auto; 44 | } -------------------------------------------------------------------------------- /static/css/simon.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #06284d; 4 | COLOR: white; 5 | } 6 | span{ 7 | color:white; 8 | } 9 | 10 | 11 | #level-title { 12 | font-family: 'Press Start 2P', cursive; 13 | font-size: 3rem; 14 | margin: 5%; 15 | color: #FEF2BF; 16 | } 17 | 18 | .container { 19 | display: block; 20 | width: 50%; 21 | margin: auto; 22 | 23 | } 24 | 25 | .btn { 26 | margin: 25px; 27 | display: inline-block; 28 | height: 200px; 29 | width: 200px; 30 | border: 10px solid black; 31 | border-radius: 20%; 32 | } 33 | 34 | .game-over { 35 | background-color: red; 36 | opacity: 0.8; 37 | } 38 | 39 | .red { 40 | background-color: red; 41 | } 42 | 43 | .green { 44 | background-color: green; 45 | } 46 | 47 | .blue { 48 | background-color: blue; 49 | } 50 | 51 | .yellow { 52 | background-color: yellow; 53 | } 54 | 55 | .pressed { 56 | box-shadow: 0 0 20px white; 57 | background-color: grey; 58 | } 59 | -------------------------------------------------------------------------------- /static/css/snake.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap'); 2 | *{ 3 | padding: 0; 4 | margin: 0; 5 | } 6 | #board{ 7 | background: linear-gradient(294deg, rgb(229, 238, 149) 0%, rgb(142, 241, 154) 78%); 8 | width: 90vmin; 9 | height: 85vmin; 10 | border: 1px solid black; 11 | border-radius: 0.5rem; 12 | display: grid; 13 | grid-template-columns: repeat(20, 1fr); 14 | grid-template-rows: repeat(20, 1fr); 15 | } 16 | .head{ 17 | background: linear-gradient(rgb(240, 124, 124), rgb(228, 228, 129)); 18 | border: 2px solid rgb(34, 4, 34); 19 | transform: scale(1.02); 20 | border-radius: 9px; 21 | } 22 | .food{ 23 | background: linear-gradient(red, purple); 24 | border: .25vmin solid black; 25 | border-radius: 8px; 26 | } 27 | .snake{ 28 | background-color: rgb(9, 0, 128); 29 | border: .25vmin solid white; 30 | border-radius: 12px; 31 | } 32 | #hiscoreBox{ 33 | position: absolute; 34 | top: 100px; 35 | right: 140px; 36 | font-size: 39px; 37 | font-weight: bold; 38 | font-family: 'New Tegomin', serif; 39 | } 40 | #scoreBox{ 41 | position: absolute; 42 | top: 60px; 43 | right: 200px; 44 | font-size: 39px; 45 | font-weight: bold; 46 | font-family: 'New Tegomin', serif; 47 | } 48 | .snakeboard{ 49 | background: url('../images/Snakegame/bg.jpg') no-repeat; 50 | min-height: 100vh; 51 | background-size: 110vw 100vh; 52 | display: flex; 53 | align-items: center; 54 | justify-content: center; 55 | } 56 | .top{ 57 | height: 10%; 58 | font-size: medium; 59 | } 60 | .top-bar{ 61 | font-size: 20px; 62 | } -------------------------------------------------------------------------------- /static/css/space_shooter.css: -------------------------------------------------------------------------------- 1 | #mycanvas{ 2 | border: 5px solid white; 3 | background : url("../images/space_shooter/background_ssg.png"); 4 | animation: animatedBackground 20s linear infinite; 5 | background-repeat: repeat-y; 6 | } 7 | 8 | @keyframes animatedBackground{ 9 | from{ 10 | background-position: 0 0; 11 | } 12 | to{ 13 | background-position: 0 2000px; 14 | } 15 | } 16 | 17 | html{ 18 | background-color:black; 19 | } 20 | 21 | canvas{ 22 | display:block; 23 | margin:30px 0; 24 | float: right; 25 | margin-right: 400px; 26 | } 27 | 28 | .ssg{ 29 | border-radius: 5px; 30 | font-size: 20px; 31 | font-weight: bold; 32 | float: left; 33 | margin: 100px 100px; 34 | padding: 15px 30px; 35 | } -------------------------------------------------------------------------------- /static/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap"); 2 | 3 | html[data-theme="light"] { 4 | --col-icon: black; 5 | --col-bd-radius: rgb(2, 2, 2); 6 | --col-box-shadow: #000000 2px 2px 4px, #4d4d4d -2px -2px 4px; 7 | --col-box-shadow-hover: inset #8a7373 2px 2px 4px, inset #4d4d4d -2px -2px 4px; 8 | --col-bd-icon: transparent; 9 | --bg-icon: #fff; 10 | --bg1-color: #fff; 11 | --shadow-col: rgba(0, 0, 0, 0.3); 12 | } 13 | 14 | .image { 15 | width: 60px; 16 | height: 59px; 17 | } 18 | 19 | .image:hover { 20 | transform: scale(1.2); 21 | transition: 0.5s all ease-in-out; 22 | } 23 | 24 | .nav-link { 25 | font-size: 18px; 26 | width: 100%; 27 | color: #8a7373; 28 | margin-right: 20%; 29 | padding-right: 20%; 30 | } 31 | 32 | .nav-item:hover { 33 | transform: scale(1.2); 34 | transition: 0.5s all ease-in-out; 35 | text-transform: uppercase; 36 | font-weight: bold; 37 | } 38 | 39 | .navbar-brand { 40 | font-family: "Zen Tokyo Zoo", cursive; 41 | font-size: 30px; 42 | text-transform: uppercase; 43 | } 44 | 45 | .navbar-brand:hover { 46 | transform: scale(1.2); 47 | transition: 0.5s all ease-in-out; 48 | font-family: "Zen Tokyo Zoo", cursive; 49 | padding-left: 9px; 50 | } 51 | 52 | html[data-theme="dark"] { 53 | --col-icon: white; 54 | --col-bd-radius: black; 55 | --col-bd-icon: transparent; 56 | --col-box-shadow: 5px 5px 10px rgba(22, 21, 21, 0.7), 57 | -5px -5px 10px rgba(255, 255, 255, 0.1); 58 | --col-box-shadow-hover: inset rgba(255, 255, 255, 1) 2px 2px 4px, 59 | inset rgba(255, 255, 255, 0.5) -2px -2px 4px; 60 | --col-white: #fff; 61 | } 62 | 63 | .dark_toggler { 64 | -webkit-appearance: none; 65 | position: relative; 66 | cursor: pointer; 67 | width: 60px; 68 | height: 40px; 69 | background-image: url(https://i.postimg.cc/857jHw2q/Screenshot-2020-04-16-at-1-07-06-PM.png); 70 | background-size: cover; 71 | border-radius: 50px; 72 | outline: none; 73 | transition: background-image 0.9s; 74 | box-shadow: 0px 2px 5px 1px gray; 75 | background-color: white; 76 | } 77 | 78 | .dark_toggler:before { 79 | content: ""; 80 | position: absolute; 81 | top: 10; 82 | right: 5; 83 | left: 5; 84 | height: 20px; 85 | width: 20px; 86 | background-color: white; 87 | border-radius: 50px; 88 | transition: all 0.9s; 89 | background-color: #f7ca33; 90 | } 91 | 92 | .dark_toggler:checked { 93 | background-image: url(https://i.postimg.cc/Hn0nstVK/Screenshot-2020-04-16-at-1-07-19-PM.png); 94 | transition: background-image 0.9s; 95 | background-color: #2b2a2a; 96 | } 97 | 98 | .dark_toggler:checked:before { 99 | transform: translate(150%); 100 | transition: all 0.9s; 101 | background-color: #ecf0f3; 102 | } 103 | /* end of dark mode toggle switch button */ 104 | 105 | html { 106 | background-color: #f6f6f6; 107 | transition: background-color 0.3s; 108 | } 109 | 110 | html[light-mode="dark"] { 111 | background-color: #141516; 112 | color: #ced4e2; 113 | } 114 | 115 | .dark-theme { 116 | background-color: #2b2a2a; 117 | transition: background-color 0.3s; 118 | } 119 | 120 | .dark-theme .jumbotron { 121 | background-color: #2b2a2a; 122 | transition: background-color 0.3s; 123 | } 124 | 125 | .dark-theme .mt-3 { 126 | color: white; 127 | } 128 | 129 | .dark-theme .navbar-nav .nav-link, 130 | .dark-theme .navbar-nav .nav-link:hover, 131 | .dark-theme .navbar-brand, 132 | .dark-theme .navbar-brand:hover { 133 | color: white; 134 | } 135 | 136 | .dark-theme .display-4 { 137 | color: white; 138 | } 139 | .nav-link { 140 | margin-left: 30px; 141 | margin-right: 30px; 142 | } 143 | 144 | .display-4 { 145 | font-size: 30px; 146 | } 147 | 148 | .game div:hover { 149 | transform: scale(1.1); 150 | transition: 1s; 151 | } 152 | 153 | .img { 154 | box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19); 155 | } 156 | 157 | #b1, 158 | #b2, 159 | #b3, 160 | #b4, 161 | #b5, 162 | #b6, 163 | #b7, 164 | #b8, 165 | #b9 { 166 | width: 80px; 167 | height: 52px; 168 | margin: auto; 169 | border: 1px solid gray; 170 | border-radius: 10px; 171 | font-size: 30px; 172 | text-align: center; 173 | } 174 | 175 | #but { 176 | box-sizing: border-box; 177 | width: 95px; 178 | height: 40px; 179 | border: 1px solid rgb(0, 0, 0); 180 | margin: auto; 181 | border-radius: 4px; 182 | font-family: Verdana, Geneva, Tahoma, sans-serif; 183 | background-color: dodgerblue; 184 | color: white; 185 | font-size: 20px; 186 | cursor: pointer; 187 | } 188 | 189 | #but:hover { 190 | background-color: crimson; 191 | } 192 | 193 | #print { 194 | font-family: Verdana, Geneva, Tahoma, sans-serif; 195 | color: crimson; 196 | font-size: 25px; 197 | font-weight: bold; 198 | } 199 | 200 | #main { 201 | text-align: center; 202 | } 203 | 204 | #ins { 205 | font-family: Verdana, Geneva, Tahoma, sans-serif; 206 | color: dodgerblue; 207 | font-size: 20px; 208 | } 209 | 210 | canvas { 211 | width: 100%; 212 | height: auto; 213 | } 214 | 215 | .game img{ 216 | 217 | object-fit: contain; object-position: left bottom; 218 | align-self: center; 219 | } 220 | 221 | /* .img-desc { 222 | text-align: center; 223 | } */ 224 | -------------------------------------------------------------------------------- /static/css/tetris.css: -------------------------------------------------------------------------------- 1 | html { 2 | background: #f337f7; 3 | } 4 | h1 { 5 | font-family: Georgia, "Times New Roman", Times, serif; 6 | font-style: italic; 7 | text-align: center; 8 | } 9 | button { 10 | background-color: #f337f7; 11 | border-radius: 3px; 12 | padding: 1em; 13 | cursor: pointer; 14 | } 15 | button:hover { 16 | background-color: white; 17 | } 18 | a { 19 | text-decoration: none; 20 | } 21 | #board { 22 | margin: 0 auto; 23 | display: block; 24 | border: 2px solid black; 25 | border-bottom: 10px solid green; 26 | background: white; 27 | } 28 | #lines { 29 | display: block; 30 | width: 240px; 31 | margin: 0 auto; 32 | margin-top: 2em; 33 | color: #444; 34 | font-size: 1.5em; 35 | text-align: center; 36 | } 37 | .instruction-heading { 38 | position: absolute; 39 | margin-left: 11em; 40 | margin-top: 9em; 41 | } 42 | .instructions { 43 | position: absolute; 44 | margin-top: 11em; 45 | font-style: italic; 46 | text-align: center; 47 | } 48 | -------------------------------------------------------------------------------- /static/css/tic-tac-toe.css: -------------------------------------------------------------------------------- 1 | /* scrollbar start */ 2 | 3 | ::-webkit-scrollbar { 4 | width: 5px; 5 | border-radius: 50%; 6 | } 7 | 8 | /* Track */ 9 | 10 | ::-webkit-scrollbar-track { 11 | background: black; 12 | } 13 | 14 | /* Handle */ 15 | 16 | ::-webkit-scrollbar-thumb { 17 | background: rgb(47, 120, 255); 18 | } 19 | 20 | /* Handle on hover */ 21 | 22 | ::-webkit-scrollbar-thumb:hover { 23 | background: rgb(53, 0, 199); 24 | } 25 | 26 | /* scrollbar end */ 27 | 28 | .grow { 29 | transition: all 0.3s ease-in-out; 30 | } 31 | 32 | .grow:hover { 33 | transform: scale(1.1); 34 | } 35 | 36 | .navbar { 37 | position: absolute; 38 | } 39 | 40 | .navbar a { 41 | background-color: #301097; 42 | padding: 10px; 43 | border-radius: 6px; 44 | text-decoration: none; 45 | color: white !important; 46 | } 47 | 48 | body { 49 | height: 100vh; 50 | background-color: #ececec; 51 | font-family: Georgia, 'Times New Roman', Times, serif; 52 | background-image: url('../images/tic-tac-toe/background.png'); 53 | background-size: cover; 54 | position: absolute; 55 | top: 0px; 56 | right: 0px; 57 | bottom: 0px; 58 | left: 0px; 59 | } 60 | 61 | .head { 62 | padding: 5px 10px; 63 | margin-top: 2vh; 64 | background-color: #ececec; 65 | } 66 | 67 | table { 68 | border-collapse: collapse; 69 | } 70 | 71 | td { 72 | background-color: #0a0322; 73 | border: 3px solid white; 74 | font-size: 80px; 75 | color: #ffffff; 76 | border-radius: 10px 10px 10px 10px; 77 | transition: all 0.3s ease-in-out; 78 | } 79 | 80 | td:hover { 81 | transform: scale(1.1); 82 | background-color: #301097; 83 | } 84 | 85 | #turn { 86 | padding: 10px; 87 | margin: 5px; 88 | font-size: 1.3em; 89 | } 90 | 91 | #tictactoe { 92 | margin: 5vh 0px; 93 | } 94 | 95 | .rights { 96 | color: black; 97 | padding: 5px; 98 | font-size: 0.9em; 99 | background-color: #ececec; 100 | } 101 | -------------------------------------------------------------------------------- /static/css/wall-breaker.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | background-color: rgb(226, 163, 108); 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | min-height: 100vh; 13 | margin: 0; 14 | } 15 | h1 { 16 | font-size: 45px; 17 | color: rgb(0, 0, 0); 18 | } 19 | canvas { 20 | /* background: ; */ 21 | background-color: peachpuff; 22 | border: 23px solid rgb(229, 207, 186); 23 | display: block; 24 | border-radius: 40px; 25 | box-shadow: 5px 5px 10px 15px rgb(114, 98, 84); 26 | } 27 | .btn { 28 | cursor: pointer; 29 | border: 0; 30 | padding: 10px 20px; 31 | background: #000; 32 | color: #fff; 33 | border-radius: 5px; 34 | } 35 | .btn:focus { 36 | outline: 0; 37 | } 38 | .btn:hover { 39 | background-color: #222; 40 | } 41 | .btn:active { 42 | transform: scale(0.98); 43 | } 44 | 45 | .rulesbtn { 46 | position: absolute; 47 | top: 30px; 48 | left: 30px; 49 | } 50 | .rules { 51 | position: absolute; 52 | top: 0%; 53 | left: 0; 54 | background: rgb(145, 133, 108); 55 | color: #fff; 56 | min-height: 100vh; 57 | width: 400px; 58 | padding: 20px; 59 | font-size: 20px; 60 | line-height: 1.5; 61 | transform: translateX(-400px); 62 | transition: transform 1s ease-in-out; 63 | } 64 | .rules.show { 65 | transform: translateX(0); 66 | } 67 | a { 68 | text-decoration: none; 69 | color: white; 70 | } 71 | -------------------------------------------------------------------------------- /static/css/whack-a-mole.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | cursor: none; /*to dissapear the cursor arrow*/ 7 | } 8 | #whack-board { 9 | color: white; /*text color*/ 10 | background-color: darkgreen; /*aligning everything to horizontal center*/ 11 | justify-self: center; 12 | } 13 | .heading { 14 | font-size: 40px; 15 | text-align: center; 16 | padding: 40px; 17 | } 18 | .score { 19 | font-size: 20px; 20 | text-align: center; 21 | padding: 20px; 22 | } 23 | #hole-section { 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | } 28 | .holes { 29 | display: grid; 30 | grid-template-columns: repeat(3, 1fr); /*3 columns each equal in length*/ 31 | grid-gap: 50px; 32 | justify-items: center; 33 | } 34 | .hole { 35 | position: relative; 36 | height: 100px; 37 | width: 100px; 38 | border-radius: 50%; 39 | background-color: black; 40 | overflow: hidden; /*so that img does not come little bit also, outside of the hole*/ 41 | } 42 | .mole { 43 | position: absolute; 44 | z-index: 1; /*so that it sets on top of the hole*/ 45 | height: 80px; 46 | bottom: 0; 47 | transform: translateX(10%); /*to horizontally align img*/ 48 | animation: peep 0.3s linear; 49 | pointer-events: none; /*so that it isn't clickable*/ 50 | } 51 | @keyframes peep { 52 | /*peep is the animation we declared for moles*/ 53 | from { 54 | bottom: -60px; /*height is 60px, so -60px*/ 55 | } 56 | to { 57 | bottom: 0; 58 | } 59 | } 60 | @keyframes hit { 61 | /*when to hit the mole the banner will bend a bit*/ 62 | from { 63 | transform: rotate(0deg); 64 | } 65 | to { 66 | transform: rotate(-30deg); 67 | } 68 | } 69 | .buttons { 70 | text-align: center; 71 | margin-top: 30px; 72 | } 73 | .buttons button { 74 | padding: 15px 45px; 75 | border: 5px solid black; 76 | border-radius: 5px; 77 | } 78 | button.stop { 79 | display: none; 80 | } 81 | .cursor img { 82 | position: absolute; 83 | z-index: 2; 84 | transform: translate( 85 | -10px, 86 | -40px 87 | ); /*coz we want the cursor arrow to be exactly with the img*/ 88 | pointer-events: none; /*to make the img with cursor clickable*/ 89 | } 90 | -------------------------------------------------------------------------------- /static/images/2048game/2048game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/2048game/2048game.png -------------------------------------------------------------------------------- /static/images/Fall_game/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/Fall_game/background.png -------------------------------------------------------------------------------- /static/images/Fall_game/brick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/Fall_game/brick.jpg -------------------------------------------------------------------------------- /static/images/Fall_game/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/Fall_game/pic.jpg -------------------------------------------------------------------------------- /static/images/Guess the Number/guess the number.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/Guess the Number/guess the number.png -------------------------------------------------------------------------------- /static/images/Js-gamesCollage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/Js-gamesCollage.png -------------------------------------------------------------------------------- /static/images/PacMan/Pacman_HD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/PacMan/Pacman_HD.png -------------------------------------------------------------------------------- /static/images/PacMan/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/PacMan/background.jpg -------------------------------------------------------------------------------- /static/images/Simon-Game/Simon_game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/Simon-Game/Simon_game.png -------------------------------------------------------------------------------- /static/images/Snakegame/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/Snakegame/bg.jpg -------------------------------------------------------------------------------- /static/images/WallBreaker/WallBreaker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/WallBreaker/WallBreaker.png -------------------------------------------------------------------------------- /static/images/candycrush/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/candycrush/background.jpg -------------------------------------------------------------------------------- /static/images/candycrush/blue-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/candycrush/blue-candy.png -------------------------------------------------------------------------------- /static/images/candycrush/green-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/candycrush/green-candy.png -------------------------------------------------------------------------------- /static/images/candycrush/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/candycrush/logo.png -------------------------------------------------------------------------------- /static/images/candycrush/orange-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/candycrush/orange-candy.png -------------------------------------------------------------------------------- /static/images/candycrush/purple-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/candycrush/purple-candy.png -------------------------------------------------------------------------------- /static/images/candycrush/red-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/candycrush/red-candy.png -------------------------------------------------------------------------------- /static/images/candycrush/yellow-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/candycrush/yellow-candy.png -------------------------------------------------------------------------------- /static/images/car_game/car1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/car_game/car1.png -------------------------------------------------------------------------------- /static/images/car_game/car2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/car_game/car2.png -------------------------------------------------------------------------------- /static/images/car_game/car_game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/car_game/car_game.png -------------------------------------------------------------------------------- /static/images/connect-four/connect-four.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/connect-four/connect-four.png -------------------------------------------------------------------------------- /static/images/dino/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/dino/bg.png -------------------------------------------------------------------------------- /static/images/dino/dino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/dino/dino.png -------------------------------------------------------------------------------- /static/images/dino/dinogame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/dino/dinogame.png -------------------------------------------------------------------------------- /static/images/dino/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/dino/dragon.png -------------------------------------------------------------------------------- /static/images/doodlejump/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/doodlejump/background.png -------------------------------------------------------------------------------- /static/images/doodlejump/doodlejump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/doodlejump/doodlejump.png -------------------------------------------------------------------------------- /static/images/doodlejump/doodler-guy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/doodlejump/doodler-guy.png -------------------------------------------------------------------------------- /static/images/doodlejump/platform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/doodlejump/platform.png -------------------------------------------------------------------------------- /static/images/doodlejump/playButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/doodlejump/playButton.png -------------------------------------------------------------------------------- /static/images/dot-and-boxes/Dots_boxes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/dot-and-boxes/Dots_boxes.png -------------------------------------------------------------------------------- /static/images/dot-and-boxes/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/dot-and-boxes/fav.png -------------------------------------------------------------------------------- /static/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/favicon.png -------------------------------------------------------------------------------- /static/images/flappy_bird/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/flappy_bird/bg.png -------------------------------------------------------------------------------- /static/images/flappy_bird/bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/flappy_bird/bird.png -------------------------------------------------------------------------------- /static/images/flappy_bird/enter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/flappy_bird/enter.png -------------------------------------------------------------------------------- /static/images/flappy_bird/fg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/flappy_bird/fg.png -------------------------------------------------------------------------------- /static/images/flappy_bird/flappy_bird.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/flappy_bird/flappy_bird.PNG -------------------------------------------------------------------------------- /static/images/flappy_bird/pipeNorth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/flappy_bird/pipeNorth.png -------------------------------------------------------------------------------- /static/images/flappy_bird/pipeSouth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/flappy_bird/pipeSouth.png -------------------------------------------------------------------------------- /static/images/flip-me.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/flip-me.JPG -------------------------------------------------------------------------------- /static/images/flips-me/flip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/flips-me/flip.jpg -------------------------------------------------------------------------------- /static/images/hangman/Web view.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/hangman/Web view.PNG -------------------------------------------------------------------------------- /static/images/hangman/hangman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/hangman/hangman.png -------------------------------------------------------------------------------- /static/images/hangman/mobile view.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/hangman/mobile view.PNG -------------------------------------------------------------------------------- /static/images/memory-game/Gifs/0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/Gifs/0.gif -------------------------------------------------------------------------------- /static/images/memory-game/Gifs/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/Gifs/1.gif -------------------------------------------------------------------------------- /static/images/memory-game/Gifs/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/Gifs/2.gif -------------------------------------------------------------------------------- /static/images/memory-game/Gifs/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/Gifs/3.gif -------------------------------------------------------------------------------- /static/images/memory-game/Gifs/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/Gifs/4.gif -------------------------------------------------------------------------------- /static/images/memory-game/Gifs/5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/Gifs/5.gif -------------------------------------------------------------------------------- /static/images/memory-game/Gifs/6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/Gifs/6.gif -------------------------------------------------------------------------------- /static/images/memory-game/Gifs/Background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/Gifs/Background.jpg -------------------------------------------------------------------------------- /static/images/memory-game/Gifs/card.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/Gifs/card.PNG -------------------------------------------------------------------------------- /static/images/memory-game/display-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/memory-game/display-img.jpg -------------------------------------------------------------------------------- /static/images/pingpong/pingpong.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/pingpong/pingpong.jpg -------------------------------------------------------------------------------- /static/images/pingpong/tabletennis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/pingpong/tabletennis.jpg -------------------------------------------------------------------------------- /static/images/randomJoke.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/randomJoke.jfif -------------------------------------------------------------------------------- /static/images/reaction.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/reaction.PNG -------------------------------------------------------------------------------- /static/images/rock-paper-scissor/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/rock-paper-scissor/1.png -------------------------------------------------------------------------------- /static/images/rock-paper-scissor/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/rock-paper-scissor/2.png -------------------------------------------------------------------------------- /static/images/rock-paper-scissor/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/rock-paper-scissor/3.png -------------------------------------------------------------------------------- /static/images/space_shooter/background_ssg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/space_shooter/background_ssg.png -------------------------------------------------------------------------------- /static/images/space_shooter/bullet_ssg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/space_shooter/bullet_ssg.png -------------------------------------------------------------------------------- /static/images/space_shooter/enemy_ssg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/space_shooter/enemy_ssg.png -------------------------------------------------------------------------------- /static/images/space_shooter/poster_ssg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/space_shooter/poster_ssg.png -------------------------------------------------------------------------------- /static/images/space_shooter/spaceship_ssg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/space_shooter/spaceship_ssg.png -------------------------------------------------------------------------------- /static/images/tetris/tetris.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/tetris/tetris.png -------------------------------------------------------------------------------- /static/images/tic-tac-toe/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/tic-tac-toe/background.png -------------------------------------------------------------------------------- /static/images/tic-tac-toe/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/tic-tac-toe/logo.png -------------------------------------------------------------------------------- /static/images/tic-tac-toe/tictactoe.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/tic-tac-toe/tictactoe.PNG -------------------------------------------------------------------------------- /static/images/whack-a-mole/hammer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/whack-a-mole/hammer.png -------------------------------------------------------------------------------- /static/images/whack-a-mole/mole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/images/whack-a-mole/mole.png -------------------------------------------------------------------------------- /static/js/Fall_game.js: -------------------------------------------------------------------------------- 1 | var character = document.getElementById("character"); 2 | var game = document.getElementById("game"); 3 | var interval; 4 | var both = 0; 5 | var counter = 0; 6 | var currentBlocks = []; 7 | 8 | /* To move the ball left */ 9 | function moveleft(){ 10 | var left = 11 | parseInt(window.getComputedStyle(character).getPropertyValue("left")); 12 | /* setting a new left position */ 13 | if(left>0){/* so that ball don't pass the left side of grid*/ 14 | character.style.left = left - 2 + "px"; 15 | } 16 | } 17 | 18 | /* To move the ball right */ 19 | function moveright(){ 20 | var left = 21 | parseInt(window.getComputedStyle(character).getPropertyValue("left")); 22 | /* setting a new right position */ 23 | if(left<380){/* so that ball don't pass the right side of grid*/ 24 | character.style.left = left + 2 + "px" 25 | } 26 | } 27 | 28 | document.addEventListener("keydown", event =>{ 29 | if(both === 0){ 30 | both++ ; 31 | if(event.key === "ArrowLeft"){ 32 | interval = setInterval(moveleft, 1); 33 | } 34 | if(event.key === "ArrowRight"){ 35 | interval = setInterval(moveright, 1); 36 | } 37 | } 38 | }); 39 | 40 | document.addEventListener("keyup", event =>{ 41 | clearInterval(interval); 42 | both = 0; 43 | }); 44 | 45 | var blocks = setInterval(function(){ 46 | document.getElementById("score").innerHTML = counter-5 47 | /*To keep track of last created block and hole*/ 48 | var blockLast = document.getElementById("block"+(counter-1)); 49 | var holeLast = document.getElementById("hole"+(counter-1)); 50 | 51 | if(counter>0){ 52 | var blockLastTop = parseInt(window.getComputedStyle(blockLast).getPropertyValue("top")); 53 | var holeLastTop = parseInt(window.getComputedStyle(holeLast).getPropertyValue("top")); 54 | } 55 | /*we add block and holes only if condn satisfies*/ 56 | if(blockLastTop<400 || counter==0){ 57 | /* Creating two elements*/ 58 | var block = document.createElement("div"); 59 | var hole = document.createElement("div"); 60 | /* adding class to style them */ 61 | block.setAttribute("class","block"); 62 | hole.setAttribute("class","hole"); 63 | /* adding id to acess them using js */ 64 | block.setAttribute("id","block"+counter); 65 | hole.setAttribute("id","hole"+counter); 66 | 67 | block.style.top = blockLastTop + 100 + "px"; 68 | hole.style.top = holeLastTop + 100 + "px"; 69 | 70 | var random = Math.floor(Math.random() * 360); 71 | hole.style.left = random + "px"; 72 | game.appendChild(block); 73 | game.appendChild(hole); 74 | currentBlocks.push(counter); 75 | counter++; 76 | } 77 | var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top")); 78 | var characterLeft = parseInt(window.getComputedStyle(character).getPropertyValue("left")); 79 | var drop = 0; 80 | /*If ball goes above the page => game over*/ 81 | if(characterTop <= 0){ 82 | alert("Game over. Score: "+(counter-7)); 83 | clearInterval(blocks); 84 | location.reload(); 85 | } 86 | for(i=0;i characterTop){ 100 | drop++; /*If character is on top of a block*/ 101 | if(iholeLeft <= characterLeft && iholeLeft+20 >= characterLeft){ 102 | drop = 0; /* If you're currently over a hole */ 103 | } 104 | } 105 | } 106 | if(drop==0){ 107 | if(characterTop < 480){ 108 | character.style.top = characterTop + 2 + "px"; /*Make ball drop*/ 109 | } 110 | }else{ 111 | character.style.top = characterTop - 0.5 + "px";/*Make ball go up */ 112 | } 113 | },1); -------------------------------------------------------------------------------- /static/js/connect-four.js: -------------------------------------------------------------------------------- 1 | // DOM Variables 2 | 3 | var buttons = document.getElementsByClassName("btn"); 4 | var reset = document.getElementById("reset-btn"); 5 | var playerType = document.getElementById("player-type"); 6 | var click = document.getElementById("click"); 7 | var win = document.getElementById("win"); 8 | var lost = document.getElementById("lost"); 9 | // Game Flow Variables 10 | 11 | var playerNumber = 1; // Initially player - 1 gets to start his/her turn 12 | 13 | var filledGrid = []; // Player board 14 | 15 | var filledCells = 0; // No. of cells that has been filled 16 | 17 | for (var i = 0; i < 6; i++) { 18 | 19 | var arr = [-1, -1, -1, -1, -1, -1, -1]; // Board is initialised with -1 20 | filledGrid.push(arr); 21 | 22 | } 23 | 24 | // Click Sound 25 | function clicksound() { 26 | click.play(); 27 | } 28 | 29 | // Event Listener for Buttons 30 | 31 | reset.addEventListener("click", function() { 32 | 33 | resetBoard(); 34 | 35 | }); 36 | 37 | for (var i = 0; i < buttons.length; i++) { 38 | 39 | // Handing the Event when button was clicked 40 | 41 | buttons[i].addEventListener("click", function() { 42 | 43 | // Make move and disable the button to avoid furthur clicking it again 44 | 45 | var buttonNo = this.classList[1]; 46 | makeMove(this, buttonNo.slice(4)); 47 | 48 | }); 49 | 50 | } 51 | 52 | 53 | // Function to Make Move on the passed button and disable it 54 | function makeMove(button, buttonNo) { 55 | 56 | var row = buttonNo % 7 === 0 ? Math.floor(buttonNo / 7) - 1 : Math.floor(buttonNo / 7); 57 | var col = buttonNo % 7 === 0 ? 6 : (buttonNo % 7) - 1; 58 | 59 | if (playerNumber === 1) { 60 | 61 | button.classList.add("btn-player-1"); 62 | 63 | 64 | filledGrid[row][col] = 1; 65 | filledCells++; 66 | 67 | 68 | if (playerWon(row, col, 1) === true) { 69 | 70 | 71 | 72 | 73 | 74 | win.play(); 75 | swal({ 76 | title: "GREEN WINS", 77 | text: "Press Ok To Play Again", 78 | icon: "success", 79 | buttons: true, 80 | Mode: true, 81 | }) 82 | .then((willDelete) => { 83 | if (willDelete) { 84 | resetBoard(); 85 | } 86 | }); 87 | } 88 | 89 | // Update the player 90 | playerNumber = 2; 91 | playerType.textContent = "Player - 2"; 92 | 93 | } else { 94 | 95 | button.classList.add("btn-player-2"); 96 | 97 | 98 | filledGrid[row][col] = 2; 99 | filledCells++; 100 | 101 | if (playerWon(row, col, 2) === true) { 102 | win.play(); 103 | swal({ 104 | title: "RED WINS", 105 | text: "Press Ok To Play Again", 106 | icon: "success", 107 | buttons: true, 108 | Mode: true, 109 | }) 110 | .then((willDelete) => { 111 | if (willDelete) { 112 | resetBoard(); 113 | } 114 | }); 115 | } 116 | 117 | // Update the player 118 | playerNumber = 1; 119 | playerType.textContent = "Player - 1"; 120 | 121 | } 122 | 123 | // If all the cells has been filled 124 | 125 | if (filledCells === 42) { 126 | lost.play(); 127 | swal({ 128 | title: "Draw", 129 | text: "Press Ok To Play Again", 130 | icon: "error", 131 | buttons: true, 132 | dangerMode: true, 133 | }) 134 | .then((willDelete) => { 135 | if (willDelete) { 136 | resetBoard(); 137 | } 138 | }); 139 | return; 140 | } 141 | 142 | // Disable the button is the move is made 143 | setTimeout(function() { 144 | button.disabled = true; 145 | }, 10); 146 | 147 | } 148 | 149 | function playerWon(row, col, player) { 150 | 151 | var count = 0; 152 | 153 | // Check for columns 154 | 155 | for (var i = 0; i < 7; i++) { 156 | if (filledGrid[row][i] === player) { 157 | count++; 158 | if (count === 4) return true; 159 | } else { 160 | count = 0; 161 | } 162 | 163 | } 164 | 165 | count = 0; 166 | 167 | // Check for Rows 168 | 169 | for (var i = 0; i < 6; i++) { 170 | if (filledGrid[i][col] === player) { 171 | count++; 172 | if (count === 4) return true; 173 | } else { 174 | count = 0; 175 | } 176 | } 177 | 178 | 179 | count = 0; 180 | 181 | // Check for primary diagonal 182 | 183 | if (row >= col) { 184 | 185 | var i = row - col; 186 | var j = 0; 187 | 188 | for (; i <= 5; i++, j++) { 189 | if (filledGrid[i][j] === player) { 190 | count++; 191 | if (count == 4) return true; 192 | } else { 193 | count = 0; 194 | } 195 | } 196 | } else { 197 | 198 | var i = 0; 199 | var j = col - row; 200 | 201 | for (; j <= 6; i++, j++) { 202 | if (filledGrid[i][j] === player) { 203 | count++; 204 | if (count == 4) return true; 205 | } else { 206 | count = 0; 207 | } 208 | } 209 | 210 | } 211 | 212 | count = 0; 213 | 214 | // Check for secondary diagonal 215 | 216 | if (row + col <= 5) { 217 | 218 | var i = row + col; 219 | var j = 0; 220 | 221 | for (; i >= 0 && j <= row + col; i--, j++) { 222 | if (filledGrid[i][j] === player) { 223 | count++; 224 | if (count == 4) return true; 225 | } else { 226 | count = 0; 227 | } 228 | } 229 | 230 | } else { 231 | 232 | var i = 5; 233 | var j = row + col - 5; 234 | 235 | for (; j <= 6; j++, i--) { 236 | if (filledGrid[i][j] === player) { 237 | count++; 238 | if (count == 4) return true; 239 | } else { 240 | count = 0; 241 | } 242 | } 243 | 244 | } 245 | return false; 246 | 247 | } 248 | 249 | // Function to reset the Board completely 250 | function resetBoard() { 251 | 252 | // Remove all the disabled buttons and the styles 253 | 254 | for (var i = 0; i < buttons.length; i++) { 255 | buttons[i].disabled = false; 256 | buttons[i].classList.remove("btn-player-1"); 257 | buttons[i].classList.remove("btn-player-2"); 258 | } 259 | 260 | 261 | // Player Number is changed to 1 262 | 263 | playerNumber = 1; 264 | playerType.textContent = "Player - 1"; 265 | 266 | 267 | // Filled Cells is changed to 0 268 | 269 | filledCells = 0; 270 | 271 | 272 | // Filling the Board with -1 273 | 274 | for (var i = 0; i < 6; i++) { 275 | for (var j = 0; j < 7; j++) { 276 | filledGrid[i][j] = -1; 277 | } 278 | } 279 | 280 | } -------------------------------------------------------------------------------- /static/js/dino.js: -------------------------------------------------------------------------------- 1 | score=0; 2 | cross=true; 3 | document.onkeydown=function(e){ 4 | if(e.keyCode==38){ 5 | dino=document.querySelector('.dino'); 6 | dino.classList.add('animateDino'); 7 | setTimeout(() => { 8 | dino.classList.remove('animateDino') 9 | }, 700); 10 | } 11 | if(e.keyCode==39){ 12 | dino=document.querySelector('.dino'); 13 | dinoX=parseInt(window.getComputedStyle(dino,null).getPropertyValue('left')); 14 | dino.style.left=dinoX+112+"px" 15 | } 16 | if(e.keyCode==37){ 17 | dino=document.querySelector('.dino'); 18 | dinoX=parseInt(window.getComputedStyle(dino,null).getPropertyValue('left')); 19 | dino.style.left=(dinoX-112)+"px" 20 | } 21 | 22 | } 23 | 24 | setInterval(() => { 25 | dino=document.querySelector('.dino'); 26 | gameOver=document.querySelector('.gameOver'); 27 | obstacle=document.querySelector('.obstacle'); 28 | dx=parseInt(window.getComputedStyle(dino,null).getPropertyValue('left')); 29 | dy=parseInt(window.getComputedStyle(dino,null).getPropertyValue('top')); 30 | ox=parseInt(window.getComputedStyle(obstacle,null).getPropertyValue('left')); 31 | oy=parseInt(window.getComputedStyle(obstacle,null).getPropertyValue('top')); 32 | offsetX=Math.abs(dx-ox); 33 | offsetY=Math.abs(dy-oy); 34 | if(offsetX<73 && offsetY<52){ 35 | gameOver.innerHTML="Game Over-Reload to Start Again"; 36 | obstacle.classList.remove('obstacleAni') 37 | score--; 38 | updateScore(score); 39 | }else if(offsetX<145 && cross){ 40 | score+=1; 41 | updateScore(score); 42 | cross=false; 43 | setTimeout(() => { 44 | cross=true 45 | }, 500); 46 | setTimeout(() => { 47 | aniDir=parseFloat(window.getComputedStyle(obstacle,null).getPropertyValue('animation-duration')); 48 | if(aniDir>1.60) 49 | newDir=aniDir-0.03; 50 | console.log(newDir); 51 | obstacle.style.animationDuration=newDir+'s'; 52 | }, 500); 53 | 54 | } 55 | 56 | }, 10); 57 | 58 | function updateScore(score){ 59 | scoreCont.innerHTML="Your Score: " + score 60 | } -------------------------------------------------------------------------------- /static/js/doodlejump.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | const grid = document.querySelector('.grid') 3 | const doodler = document.createElement('div') 4 | let isGameOver = false 5 | let speed = 3 6 | let platformCount = 5 7 | let platforms = [] 8 | let score = 0 9 | let doodlerLeftSpace = 50 10 | let startPoint = 150 11 | let doodlerBottomSpace = startPoint 12 | const gravity = 0.9 13 | let upTimerId 14 | let downTimerId 15 | let isJumping = true 16 | let isGoingLeft = false 17 | let isGoingRight = false 18 | let leftTimerId 19 | let rightTimerId 20 | 21 | class Platform { 22 | constructor(newPlatBottom) { 23 | this.left = Math.random() * 315 24 | this.bottom = newPlatBottom 25 | this.visual = document.createElement('div') 26 | 27 | const visual = this.visual 28 | visual.classList.add('platform') 29 | visual.style.left = this.left + 'px' 30 | visual.style.bottom = this.bottom + 'px' 31 | grid.appendChild(visual) 32 | } 33 | } 34 | 35 | 36 | function createPlatforms() { 37 | for(let i =0; i < platformCount; i++) { 38 | let platGap = 600 / platformCount 39 | let newPlatBottom = 100 + i * platGap 40 | let newPlatform = new Platform (newPlatBottom) 41 | platforms.push(newPlatform) 42 | console.log(platforms) 43 | } 44 | } 45 | 46 | function movePlatforms() { 47 | if (doodlerBottomSpace > 200) { 48 | platforms.forEach(platform => { 49 | platform.bottom -= 4 50 | let visual = platform.visual 51 | visual.style.bottom = platform.bottom + 'px' 52 | 53 | if(platform.bottom < 10) { 54 | let firstPlatform = platforms[0].visual 55 | firstPlatform.classList.remove('platform') 56 | platforms.shift() 57 | console.log(platforms) 58 | score++ 59 | var newPlatform = new Platform(600) 60 | platforms.push(newPlatform) 61 | } 62 | }) 63 | } 64 | 65 | } 66 | 67 | function createDoodler() { 68 | grid.appendChild(doodler) 69 | doodler.classList.add('doodler') 70 | doodlerLeftSpace = platforms[0].left 71 | doodler.style.left = doodlerLeftSpace + 'px' 72 | doodler.style.bottom = doodlerBottomSpace + 'px' 73 | } 74 | 75 | function fall() { 76 | isJumping = false 77 | clearInterval(upTimerId) 78 | downTimerId = setInterval(function () { 79 | doodlerBottomSpace -= 5 80 | doodler.style.bottom = doodlerBottomSpace + 'px' 81 | if (doodlerBottomSpace <= 0) { 82 | gameOver() 83 | } 84 | platforms.forEach(platform => { 85 | if ( 86 | (doodlerBottomSpace >= platform.bottom) && 87 | (doodlerBottomSpace <= (platform.bottom + 15)) && 88 | ((doodlerLeftSpace + 60) >= platform.left) && 89 | (doodlerLeftSpace <= (platform.left + 85)) && 90 | !isJumping 91 | ) { 92 | console.log('tick') 93 | startPoint = doodlerBottomSpace 94 | jump() 95 | console.log('start', startPoint) 96 | isJumping = true 97 | } 98 | }) 99 | 100 | },20) 101 | } 102 | 103 | function jump() { 104 | clearInterval(downTimerId) 105 | isJumping = true 106 | upTimerId = setInterval(function () { 107 | console.log(startPoint) 108 | console.log('1', doodlerBottomSpace) 109 | doodlerBottomSpace += 20 110 | doodler.style.bottom = doodlerBottomSpace + 'px' 111 | console.log('2',doodlerBottomSpace) 112 | console.log('s',startPoint) 113 | if (doodlerBottomSpace > (startPoint + 200)) { 114 | fall() 115 | isJumping = false 116 | } 117 | },30) 118 | } 119 | 120 | function moveLeft() { 121 | if (isGoingRight) { 122 | clearInterval(rightTimerId) 123 | isGoingRight = false 124 | } 125 | isGoingLeft = true 126 | leftTimerId = setInterval(function () { 127 | if (doodlerLeftSpace >= 0) { 128 | console.log('going left') 129 | doodlerLeftSpace -=5 130 | doodler.style.left = doodlerLeftSpace + 'px' 131 | } else moveRight() 132 | },20) 133 | } 134 | 135 | function moveRight() { 136 | if (isGoingLeft) { 137 | clearInterval(leftTimerId) 138 | isGoingLeft = false 139 | } 140 | isGoingRight = true 141 | rightTimerId = setInterval(function () { 142 | //changed to 313 to fit doodle image 143 | if (doodlerLeftSpace <= 313) { 144 | console.log('going right') 145 | doodlerLeftSpace +=5 146 | doodler.style.left = doodlerLeftSpace + 'px' 147 | } else moveLeft() 148 | },20) 149 | } 150 | 151 | function moveStraight() { 152 | isGoingLeft = false 153 | isGoingRight = false 154 | clearInterval(leftTimerId) 155 | clearInterval(rightTimerId) 156 | } 157 | 158 | //assigning functions to keyCodes 159 | function control(e) { 160 | doodler.style.bottom = doodlerBottomSpace + 'px' 161 | if(e.keyCode === 65) { 162 | moveLeft() 163 | } else if (e.keyCode === 68) { 164 | moveRight() 165 | } else if (e.keyCode === 87) { 166 | moveStraight() 167 | } 168 | } 169 | 170 | 171 | 172 | 173 | 174 | function gameOver() { 175 | isGameOver = true 176 | while (grid.firstChild) { 177 | console.log('remove') 178 | grid.removeChild(grid.firstChild) 179 | } 180 | 181 | grid.innerHTML = "Your Score:"+ score 182 | 183 | const rbtn = document.createElement("button") 184 | rbtn.classList.add('rbtn') 185 | rbtn.innerText = "Restart Game" 186 | rbtn.style.textAlign = 'center' 187 | rbtn.addEventListener('click',()=>location.reload()) 188 | grid.appendChild(rbtn) 189 | clearInterval(upTimerId) 190 | clearInterval(downTimerId) 191 | clearInterval(leftTimerId) 192 | clearInterval(rightTimerId) 193 | } 194 | 195 | const button = document.getElementById('play'); 196 | var btn = document.getElementById('play'); 197 | button.addEventListener('click', start); 198 | 199 | function start() { 200 | if (!isGameOver) { 201 | btn.remove(); 202 | createPlatforms() 203 | createDoodler() 204 | setInterval(movePlatforms,30) 205 | jump(startPoint) 206 | document.addEventListener('keyup', control) 207 | } 208 | } 209 | 210 | 211 | }) -------------------------------------------------------------------------------- /static/js/flappy_bird.js: -------------------------------------------------------------------------------- 1 | /* We wait for all our html to load before reading our js */ 2 | document.addEventListener('DOMContentLoaded', () => { 3 | const bird = document.querySelector('.bird') 4 | const game = document.querySelector('.game') 5 | 6 | // Moving bird to bottomish center of sky 7 | let birdLeft = 220 8 | let birdBottom = 100 9 | let gravity = 2 10 | let gap = 450 11 | let isgameover = false 12 | var score = 0 13 | 14 | function startGame(){ 15 | document.getElementById("score").innerHTML = "Your Score = "+score.toFixed(0) 16 | birdBottom -= gravity 17 | // Bird distance form top = 220px 18 | bird.style.bottom = birdBottom + 'px' 19 | // Bird distance form left = 100px 20 | bird.style.left = birdLeft + 'px' 21 | 22 | } 23 | let gameTime = setInterval(startGame,20) 24 | 25 | function control(e){ 26 | if(e.keyCode === 13){ 27 | jump() 28 | } 29 | } 30 | function jump(){ 31 | // To prevent bird going pass the top most 32 | if (birdBottom<500){ birdBottom += 50} 33 | 34 | bird.style.bottom = birdBottom + 'px' 35 | console.log(birdBottom) 36 | } 37 | document.addEventListener('keyup',control) 38 | 39 | 40 | function pillars(){ 41 | let obstacleLeft = 500 42 | // Making the obstacle of random height 43 | let randomHeight = Math.random() * 60 // Random ni. generated from 1 to 60(here) 44 | let obstacleBottom = randomHeight 45 | 46 | // Creating element div called obstacle in js 47 | const obstacle = document.createElement('div') 48 | obstacle.classList.add('obstacle') 49 | // Creating element div called topObstacle in js 50 | const topObstacle = document.createElement('div') 51 | topObstacle.classList.add('topObstacle') 52 | // Putting this newly created div inside game div 53 | if (!isgameover){ 54 | game.appendChild(obstacle) 55 | game.appendChild(topObstacle) 56 | 57 | } 58 | obstacle.style.left = obstacleLeft + 'px' 59 | obstacle.style.bottom = obstacleBottom + 'px' 60 | 61 | topObstacle.style.left = obstacleLeft + 'px' 62 | topObstacle.style.bottom = obstacleBottom + gap + 'px' 63 | 64 | // To move the pillar form right to left 65 | function moveObstacle(){ 66 | obstacleLeft -= 2 67 | score += 0.1 68 | obstacle.style.left = obstacleLeft + 'px' 69 | topObstacle.style.left = obstacleLeft + 'px' 70 | 71 | // If pillar pass the left most i.e '0', it is removed 72 | if(obstacleLeft === -50){ 73 | clearInterval(time) // We stop the time interval 74 | game.removeChild(obstacle) 75 | game.removeChild(topObstacle) 76 | } 77 | // If bird reaches the bottom of sky grid 78 | if( obstacleLeft>200 && obstacleLeft<280 && birdLeft === 220 && (birdBottomobstacleBottom + gap -200 )|| birdBottom === 0){ 80 | score = 0 81 | gameOver() 82 | // We also stop the pillar at the time form moving 83 | clearInterval(time) 84 | } 85 | } 86 | // New pillar generated, each after 3 sec of diff sizes 87 | if(!isgameover){setTimeout(pillars,3000)} 88 | let time = setInterval(moveObstacle,20) 89 | } 90 | pillars() 91 | 92 | function gameOver(){ 93 | clearInterval(gameTime) // We stop the Interval for game 94 | if(confirm("Oopss! game over, Press enter to try again")){ 95 | location.reload(); 96 | } 97 | isgameover = true 98 | document.removeEventListener('keyup',control) 99 | } 100 | 101 | }) -------------------------------------------------------------------------------- /static/js/flip-me.js: -------------------------------------------------------------------------------- 1 | // cards array holds all cards 2 | let card = document.getElementsByClassName("card"); 3 | let cards = [...card] 4 | 5 | // deck of all cards in game 6 | const deck = document.getElementById("card-deck"); 7 | 8 | // declaring move variable 9 | let moves = 0; 10 | let counter = document.querySelector(".moves"); 11 | 12 | // declare variables for star icons 13 | const stars = document.querySelectorAll(".fa-star"); 14 | 15 | // declaring variable of matchedCards 16 | let matchedCard = document.getElementsByClassName("match"); 17 | 18 | // stars list 19 | let starsList = document.querySelectorAll(".stars li"); 20 | 21 | // close icon in modal 22 | let closeicon = document.querySelector(".close"); 23 | 24 | // declare modal 25 | let modal = document.getElementById("popup1") 26 | 27 | // array for opened cards 28 | var openedCards = []; 29 | 30 | 31 | // @description shuffles cards 32 | // @param {array} 33 | // @returns shuffledarray 34 | function shuffle(array) { 35 | var currentIndex = array.length, temporaryValue, randomIndex; 36 | 37 | while (currentIndex !== 0) { 38 | randomIndex = Math.floor(Math.random() * currentIndex); 39 | currentIndex -= 1; 40 | temporaryValue = array[currentIndex]; 41 | array[currentIndex] = array[randomIndex]; 42 | array[randomIndex] = temporaryValue; 43 | } 44 | 45 | return array; 46 | }; 47 | 48 | 49 | // @description shuffles cards when page is refreshed / loads 50 | document.body.onload = startGame(); 51 | 52 | 53 | // @description function to start a new play 54 | function startGame(){ 55 | // shuffle deck 56 | cards = shuffle(cards); 57 | // remove all exisiting classes from each card 58 | for (var i = 0; i < cards.length; i++){ 59 | deck.innerHTML = ""; 60 | [].forEach.call(cards, function(item) { 61 | deck.appendChild(item); 62 | }); 63 | cards[i].classList.remove("show", "open", "match", "disabled"); 64 | } 65 | // reset moves 66 | moves = 0; 67 | counter.innerHTML = moves; 68 | // reset rating 69 | for (var i= 0; i < stars.length; i++){ 70 | stars[i].style.color = "#FFD700"; 71 | stars[i].style.visibility = "visible"; 72 | } 73 | //reset timer 74 | second = 0; 75 | minute = 0; 76 | hour = 0; 77 | var timer = document.querySelector(".timer"); 78 | timer.innerHTML = "0 mins 0 secs"; 79 | clearInterval(interval); 80 | } 81 | 82 | 83 | // @description toggles open and show class to display cards 84 | var displayCard = function (){ 85 | this.classList.toggle("open"); 86 | this.classList.toggle("show"); 87 | this.classList.toggle("disabled"); 88 | }; 89 | 90 | 91 | // @description add opened cards to OpenedCards list and check if cards are match or not 92 | function cardOpen() { 93 | openedCards.push(this); 94 | var len = openedCards.length; 95 | if(len === 2){ 96 | moveCounter(); 97 | if(openedCards[0].type === openedCards[1].type){ 98 | matched(); 99 | } else { 100 | unmatched(); 101 | } 102 | } 103 | }; 104 | 105 | 106 | // @description when cards match 107 | function matched(){ 108 | openedCards[0].classList.add("match", "disabled"); 109 | openedCards[1].classList.add("match", "disabled"); 110 | openedCards[0].classList.remove("show", "open", "no-event"); 111 | openedCards[1].classList.remove("show", "open", "no-event"); 112 | openedCards = []; 113 | } 114 | 115 | 116 | // description when cards don't match 117 | function unmatched(){ 118 | openedCards[0].classList.add("unmatched"); 119 | openedCards[1].classList.add("unmatched"); 120 | disable(); 121 | setTimeout(function(){ 122 | openedCards[0].classList.remove("show", "open", "no-event","unmatched"); 123 | openedCards[1].classList.remove("show", "open", "no-event","unmatched"); 124 | enable(); 125 | openedCards = []; 126 | },1100); 127 | } 128 | 129 | 130 | // @description disable cards temporarily 131 | function disable(){ 132 | Array.prototype.filter.call(cards, function(card){ 133 | card.classList.add('disabled'); 134 | }); 135 | } 136 | 137 | 138 | // @description enable cards and disable matched cards 139 | function enable(){ 140 | Array.prototype.filter.call(cards, function(card){ 141 | card.classList.remove('disabled'); 142 | for(var i = 0; i < matchedCard.length; i++){ 143 | matchedCard[i].classList.add("disabled"); 144 | } 145 | }); 146 | } 147 | 148 | 149 | // @description count player's moves 150 | function moveCounter(){ 151 | moves++; 152 | counter.innerHTML = moves; 153 | //start timer on first click 154 | if(moves == 1){ 155 | second = 0; 156 | minute = 0; 157 | hour = 0; 158 | startTimer(); 159 | } 160 | // setting rates based on moves 161 | if (moves > 8 && moves < 12){ 162 | for( i= 0; i < 3; i++){ 163 | if(i > 1){ 164 | stars[i].style.visibility = "collapse"; 165 | } 166 | } 167 | } 168 | else if (moves > 13){ 169 | for( i= 0; i < 3; i++){ 170 | if(i > 0){ 171 | stars[i].style.visibility = "collapse"; 172 | } 173 | } 174 | } 175 | } 176 | 177 | 178 | // @description game timer 179 | var second = 0, minute = 0; hour = 0; 180 | var timer = document.querySelector(".timer"); 181 | var interval; 182 | function startTimer(){ 183 | interval = setInterval(function(){ 184 | timer.innerHTML = minute+"mins "+second+"secs"; 185 | second++; 186 | if(second == 60){ 187 | minute++; 188 | second=0; 189 | } 190 | if(minute == 60){ 191 | hour++; 192 | minute = 0; 193 | } 194 | },1000); 195 | } 196 | 197 | 198 | // @description congratulations when all cards match, show modal and moves, time and rating 199 | function congratulations(){ 200 | if (matchedCard.length == 16){ 201 | clearInterval(interval); 202 | finalTime = timer.innerHTML; 203 | 204 | // show congratulations modal 205 | modal.classList.add("show"); 206 | 207 | // declare star rating variable 208 | var starRating = document.querySelector(".stars").innerHTML; 209 | 210 | //showing move, rating, time on modal 211 | document.getElementById("finalMove").innerHTML = moves; 212 | document.getElementById("starRating").innerHTML = starRating; 213 | document.getElementById("totalTime").innerHTML = finalTime; 214 | 215 | //closeicon on modal 216 | closeModal(); 217 | }; 218 | } 219 | 220 | 221 | // @description close icon on modal 222 | function closeModal(){ 223 | closeicon.addEventListener("click", function(e){ 224 | modal.classList.remove("show"); 225 | startGame(); 226 | }); 227 | } 228 | 229 | 230 | // @desciption for user to play Again 231 | function playAgain(){ 232 | modal.classList.remove("show"); 233 | startGame(); 234 | } 235 | 236 | 237 | // loop to add event listeners to each card 238 | for (var i = 0; i < cards.length; i++){ 239 | card = cards[i]; 240 | card.addEventListener("click", displayCard); 241 | card.addEventListener("click", cardOpen); 242 | card.addEventListener("click",congratulations); 243 | }; 244 | -------------------------------------------------------------------------------- /static/js/game.js: -------------------------------------------------------------------------------- 1 | 2 | var buttonColours = ["red", "blue", "green", "yellow"]; 3 | 4 | var gamePattern = []; 5 | var userClickedPattern = []; 6 | 7 | var started = false; 8 | var level = 0; 9 | 10 | $(document).keypress(function() { 11 | if (!started) { 12 | $("#level-title").text("Level " + level); 13 | nextSequence(); 14 | started = true; 15 | } 16 | }); 17 | 18 | $(".btn").click(function() { 19 | 20 | var userChosenColour = $(this).attr("id"); 21 | userClickedPattern.push(userChosenColour); 22 | 23 | playSound(userChosenColour); 24 | animatePress(userChosenColour); 25 | 26 | checkAnswer(userClickedPattern.length-1); 27 | }); 28 | 29 | function checkAnswer(currentLevel) { 30 | 31 | if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) { 32 | if (userClickedPattern.length === gamePattern.length){ 33 | setTimeout(function () { 34 | nextSequence(); 35 | }, 1000); 36 | } 37 | } else { 38 | playSound("wrong"); 39 | $("body").addClass("game-over"); 40 | $("#level-title").text("Game Over, Press Any Key to Restart"); 41 | 42 | setTimeout(function () { 43 | $("body").removeClass("game-over"); 44 | }, 200); 45 | 46 | startOver(); 47 | } 48 | } 49 | 50 | 51 | function nextSequence() { 52 | userClickedPattern = []; 53 | level++; 54 | $("#level-title").text("Level " + level); 55 | var randomNumber = Math.floor(Math.random() * 4); 56 | var randomChosenColour = buttonColours[randomNumber]; 57 | gamePattern.push(randomChosenColour); 58 | 59 | $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100); 60 | playSound(randomChosenColour); 61 | } 62 | 63 | function animatePress(currentColor) { 64 | $("#" + currentColor).addClass("pressed"); 65 | setTimeout(function () { 66 | $("#" + currentColor).removeClass("pressed"); 67 | }, 100); 68 | } 69 | 70 | function playSound(name) { 71 | var audio = new Audio("./static/music/Simon-Game/" + name + ".mp3"); 72 | audio.play(); 73 | } 74 | 75 | function startOver() { 76 | level = 0; 77 | gamePattern = []; 78 | started = false; 79 | } 80 | -------------------------------------------------------------------------------- /static/js/guess_the_number.js: -------------------------------------------------------------------------------- 1 | var ran_num=Math.floor(Math.random()*100)+1 2 | var lives=1; 3 | 4 | document.getElementById('submit-btn').onclick=function(){ 5 | var guessed_num=document.getElementById('num').value; 6 | 7 | if(ran_num==guessed_num){ 8 | alert("Hurray You Guessed it Right!! in "+lives+" guesses"); 9 | } 10 | else if(ran_num>guessed_num){ 11 | lives++; 12 | alert("Sorry!! Your Guess was too low :( Try Again!!"); 13 | } 14 | else if(ran_num card.addEventListener('click', flipCard)); -------------------------------------------------------------------------------- /static/js/randomJoke.js: -------------------------------------------------------------------------------- 1 | const jokeEl = document.getElementById('joke'); 2 | const get_joke = document.getElementById('new_joke'); 3 | new_joke.addEventListener('click',another_joke); 4 | another_joke(); 5 | async function another_joke(){ 6 | // call api 7 | const jokesRes = await fetch('https://icanhazdadjoke.com/',{ 8 | headers:{ 9 | 'Accept': 'application/json' 10 | } 11 | }); 12 | const joke = await jokesRes.json() 13 | console.log(joke) 14 | jokeEl.innerHTML= joke.joke; 15 | // another new joke 16 | } 17 | 18 | -------------------------------------------------------------------------------- /static/js/reaction.js: -------------------------------------------------------------------------------- 1 | 2 | var start; 3 | var clicked; 4 | window.onload=appear; 5 | 6 | function disappear(){ 7 | document.getElementById("box").style.display="none"; 8 | clicked=Date.now(); 9 | var reaction=(clicked-start)/1000; 10 | document.getElementById("click").innerHTML="Your Reaction Time: " + reaction + " seconds!"; 11 | var randomDelay=((Math.random()*4))*1000; 12 | setTimeout(appear,randomDelay); 13 | 14 | } 15 | 16 | 17 | function appear(){ 18 | 19 | var randomTop=Math.random()*300; 20 | var randomLeft=Math.random()*600; 21 | var randomRight=Math.random()*400; 22 | var randomHeight=Math.random()*200+30; 23 | var randomWidth=Math.random()*200+30; 24 | var randomColor="#"+((1<<24)*Math.random()|0).toString(16); 25 | var randomCurve=Math.random(); 26 | 27 | if (randomCurve<0.5){ 28 | document.getElementById("box").style.borderRadius="25%"; 29 | } 30 | else{ 31 | document.getElementById("box").style.borderRadius="0%"; 32 | } 33 | 34 | 35 | start=Date.now(); 36 | document.getElementById("box").style.display="block"; 37 | document.getElementById("box").style.top=randomTop; 38 | document.getElementById("box").style.left=randomLeft; 39 | document.getElementById("box").style.right=randomRight; 40 | document.getElementById("box").style.height=randomHeight; 41 | document.getElementById("box").style.width=randomWidth; 42 | document.getElementById("box").style.backgroundColor=randomColor; 43 | } -------------------------------------------------------------------------------- /static/js/rock-paper-scissor.js: -------------------------------------------------------------------------------- 1 | var compScore = 0, 2 | pScore = 0 3 | function play(pMove) { 4 | var compMove = Math.floor(Math.random() * 3) + 1 5 | document.getElementById('pImg').src = 6 | '../static/images/rock-paper-scissor/' + pMove + '.png' 7 | document.getElementById('cImg').src = 8 | '../static/images/rock-paper-scissor/' + compMove + '.png' 9 | if (pMove != compMove) { 10 | if (pMove == 1 && compMove == 3) pScore++ 11 | else if (pMove == 1 && compMove == 2) compScore++ 12 | else if (pMove == 2 && compMove == 3) compScore++ 13 | else if (pMove == 2 && compMove == 1) pScore++ 14 | else if (pMove == 3 && compMove == 2) pScore++ 15 | else if (pMove == 3 && compMove == 1) compScore++ 16 | } 17 | console.log(pScore) 18 | document.getElementById('p1Score').innerHTML = pScore.toString() 19 | document.getElementById('p2Score').innerHTML = compScore.toString() 20 | } 21 | function reset() { 22 | pScore = 0 23 | compScore = 0 24 | document.getElementById('p1Score').innerHTML = pScore.toString() 25 | document.getElementById('p2Score').innerHTML = compScore.toString() 26 | alert('Done') 27 | } 28 | -------------------------------------------------------------------------------- /static/js/snake.js: -------------------------------------------------------------------------------- 1 | // Game Constants & Variables 2 | let inputDir = {x: 0, y: 0}; 3 | const foodSound = new Audio('music/food.mp3'); 4 | const gameOverSound = new Audio('music/gameover.mp3'); 5 | const moveSound = new Audio('music/move.mp3'); 6 | const musicSound = new Audio('music/music.mp3'); 7 | let speed = 19; 8 | let score = 0; 9 | let lastPaintTime = 0; 10 | let snakeArr = [ 11 | {x: 13, y: 15} 12 | ]; 13 | 14 | food = {x: 6, y: 7}; 15 | 16 | // Game Functions 17 | function main(ctime) { 18 | window.requestAnimationFrame(main); 19 | // console.log(ctime) 20 | if((ctime - lastPaintTime)/1000 < 1/speed){ 21 | return; 22 | } 23 | lastPaintTime = ctime; 24 | gameEngine(); 25 | } 26 | 27 | function isCollide(snake) { 28 | // If you bump into yourself 29 | for (let i = 1; i < snakeArr.length; i++) { 30 | if(snake[i].x === snake[0].x && snake[i].y === snake[0].y){ 31 | return true; 32 | } 33 | } 34 | // If you bump into the wall 35 | if(snake[0].x > 19 || snake[0].x <=0 || snake[0].y > 19 || snake[0].y <=0){ 36 | return true; 37 | } 38 | 39 | return false; 40 | } 41 | 42 | function gameEngine(){ 43 | // Part 1: Updating the snake array & Food 44 | if(isCollide(snakeArr)){ 45 | inputDir = {x: 0, y: 0}; 46 | alert("Game Over. Press any key to play again!"); 47 | snakeArr = [{x: 13, y: 15}]; 48 | score = 0; 49 | } 50 | 51 | // If you have eaten the food, increment the score and regenerate the food 52 | if(snakeArr[0].y === food.y && snakeArr[0].x ===food.x){ 53 | foodSound.play(); 54 | score += 1; 55 | if(score>hiscoreval){ 56 | hiscoreval = score; 57 | localStorage.setItem("hiscore", JSON.stringify(hiscoreval)); 58 | hiscoreBox.innerHTML = "HiScore: " + hiscoreval; 59 | } 60 | scoreBox.innerHTML = "Score: " + score; 61 | snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y}); 62 | let a = 2; 63 | let b = 16; 64 | food = {x: Math.round(a + (b-a)* Math.random()), y: Math.round(a + (b-a)* Math.random())} 65 | } 66 | 67 | // Moving the snake 68 | for (let i = snakeArr.length - 2; i>=0; i--) { 69 | snakeArr[i+1] = {...snakeArr[i]}; 70 | } 71 | 72 | snakeArr[0].x += inputDir.x; 73 | snakeArr[0].y += inputDir.y; 74 | 75 | // Part 2: Display the snake and Food 76 | // Display the snake 77 | board.innerHTML = ""; 78 | snakeArr.forEach((e, index)=>{ 79 | snakeElement = document.createElement('div'); 80 | snakeElement.style.gridRowStart = e.y; 81 | snakeElement.style.gridColumnStart = e.x; 82 | 83 | if(index === 0){ 84 | snakeElement.classList.add('head'); 85 | } 86 | else{ 87 | snakeElement.classList.add('snake'); 88 | } 89 | board.appendChild(snakeElement); 90 | }); 91 | // Display the food 92 | foodElement = document.createElement('div'); 93 | foodElement.style.gridRowStart = food.y; 94 | foodElement.style.gridColumnStart = food.x; 95 | foodElement.classList.add('food') 96 | board.appendChild(foodElement); 97 | 98 | 99 | } 100 | 101 | 102 | // Main logic starts here 103 | musicSound.play(); 104 | let hiscore = localStorage.getItem("hiscore"); 105 | if(hiscore === null){ 106 | hiscoreval = 0; 107 | localStorage.setItem("hiscore", JSON.stringify(hiscoreval)) 108 | } 109 | else{ 110 | hiscoreval = JSON.parse(hiscore); 111 | hiscoreBox.innerHTML = "HiScore: " + hiscore; 112 | } 113 | 114 | window.requestAnimationFrame(main); 115 | window.addEventListener('keydown', e =>{ 116 | inputDir = {x: 0, y: 1} // Start the game 117 | moveSound.play(); 118 | switch (e.key) { 119 | case "ArrowUp": 120 | console.log("ArrowUp"); 121 | inputDir.x = 0; 122 | inputDir.y = -1; 123 | break; 124 | 125 | case "ArrowDown": 126 | console.log("ArrowDown"); 127 | inputDir.x = 0; 128 | inputDir.y = 1; 129 | break; 130 | 131 | case "ArrowLeft": 132 | console.log("ArrowLeft"); 133 | inputDir.x = -1; 134 | inputDir.y = 0; 135 | break; 136 | 137 | case "ArrowRight": 138 | console.log("ArrowRight"); 139 | inputDir.x = 1; 140 | inputDir.y = 0; 141 | break; 142 | default: 143 | break; 144 | } 145 | 146 | }); -------------------------------------------------------------------------------- /static/js/tetris.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById("board"); 2 | var ctx = canvas.getContext("2d"); 3 | var linecount = document.getElementById("lines"); 4 | var clear = window 5 | .getComputedStyle(canvas) 6 | .getPropertyValue("background-color"); 7 | var width = 10; 8 | var height = 20; 9 | var tilesz = 24; 10 | canvas.width = width * tilesz; 11 | canvas.height = height * tilesz; 12 | const hamburgerBtn = document.querySelector(".toggler"); 13 | const menu = document.querySelector(".menu"); 14 | const span = document.getElementsByClassName("close")[0]; 15 | 16 | var board = []; 17 | for (var r = 0; r < height; r++) { 18 | board[r] = []; 19 | for (var c = 0; c < width; c++) { 20 | board[r][c] = ""; 21 | } 22 | } 23 | 24 | function newPiece() { 25 | var p = pieces[parseInt(Math.random() * pieces.length, 10)]; 26 | return new Piece(p[0], p[1]); 27 | } 28 | 29 | function drawSquare(x, y) { 30 | ctx.fillRect(x * tilesz, y * tilesz, tilesz, tilesz); 31 | var ss = ctx.strokeStyle; 32 | ctx.strokeStyle = "#555"; 33 | ctx.strokeRect(x * tilesz, y * tilesz, tilesz, tilesz); 34 | ctx.strokeStyle = "#888"; 35 | ctx.strokeRect( 36 | x * tilesz + (3 * tilesz) / 8, 37 | y * tilesz + (3 * tilesz) / 8, 38 | tilesz / 4, 39 | tilesz / 4 40 | ); 41 | ctx.strokeStyle = ss; 42 | } 43 | 44 | function Piece(patterns, color) { 45 | this.pattern = patterns[0]; 46 | this.patterns = patterns; 47 | this.patterni = 0; 48 | 49 | this.color = color; 50 | 51 | this.x = width / 2 - parseInt(Math.ceil(this.pattern.length / 2), 10); 52 | this.y = -2; 53 | } 54 | 55 | Piece.prototype.rotate = function () { 56 | var nudge = 0; 57 | var nextpat = this.patterns[(this.patterni + 1) % this.patterns.length]; 58 | 59 | if (this._collides(0, 0, nextpat)) { 60 | // Check kickback 61 | nudge = this.x > width / 2 ? -1 : 1; 62 | } 63 | 64 | if (!this._collides(nudge, 0, nextpat)) { 65 | this.undraw(); 66 | this.x += nudge; 67 | this.patterni = (this.patterni + 1) % this.patterns.length; 68 | this.pattern = this.patterns[this.patterni]; 69 | this.draw(); 70 | } 71 | }; 72 | 73 | var WALL = 1; 74 | var BLOCK = 2; 75 | Piece.prototype._collides = function (dx, dy, pat) { 76 | for (var ix = 0; ix < pat.length; ix++) { 77 | for (var iy = 0; iy < pat.length; iy++) { 78 | if (!pat[ix][iy]) { 79 | continue; 80 | } 81 | 82 | var x = this.x + ix + dx; 83 | var y = this.y + iy + dy; 84 | if (y >= height || x < 0 || x >= width) { 85 | return WALL; 86 | } 87 | if (y < 0) { 88 | // Ignore negative space rows 89 | continue; 90 | } 91 | if (board[y][x] !== "") { 92 | return BLOCK; 93 | } 94 | } 95 | } 96 | 97 | return 0; 98 | }; 99 | 100 | Piece.prototype.down = function () { 101 | if (this._collides(0, 1, this.pattern)) { 102 | this.lock(); 103 | piece = newPiece(); 104 | } else { 105 | this.undraw(); 106 | this.y++; 107 | this.draw(); 108 | } 109 | }; 110 | 111 | Piece.prototype.moveRight = function () { 112 | if (!this._collides(1, 0, this.pattern)) { 113 | this.undraw(); 114 | this.x++; 115 | this.draw(); 116 | } 117 | }; 118 | 119 | Piece.prototype.moveLeft = function () { 120 | if (!this._collides(-1, 0, this.pattern)) { 121 | this.undraw(); 122 | this.x--; 123 | this.draw(); 124 | } 125 | }; 126 | 127 | var lines = 0; 128 | var done = false; 129 | Piece.prototype.lock = function () { 130 | for (var ix = 0; ix < this.pattern.length; ix++) { 131 | for (var iy = 0; iy < this.pattern.length; iy++) { 132 | if (!this.pattern[ix][iy]) { 133 | continue; 134 | } 135 | 136 | if (this.y + iy < 0) { 137 | // Game ends! 138 | alert("You're done!"); 139 | done = true; 140 | return; 141 | } 142 | board[this.y + iy][this.x + ix] = this.color; 143 | } 144 | } 145 | 146 | var nlines = 0; 147 | for (var y = 0; y < height; y++) { 148 | var line = true; 149 | for (var x = 0; x < width; x++) { 150 | line = line && board[y][x] !== ""; 151 | } 152 | if (line) { 153 | for (var y2 = y; y2 > 1; y2--) { 154 | for (var x = 0; x < width; x++) { 155 | board[y2][x] = board[y2 - 1][x]; 156 | } 157 | } 158 | for (var x = 0; x < width; x++) { 159 | board[0][x] = ""; 160 | } 161 | nlines++; 162 | } 163 | } 164 | 165 | if (nlines > 0) { 166 | lines += nlines; 167 | drawBoard(); 168 | linecount.textContent = "Lines: " + lines; 169 | } 170 | }; 171 | 172 | Piece.prototype._fill = function (color) { 173 | var fs = ctx.fillStyle; 174 | ctx.fillStyle = color; 175 | var x = this.x; 176 | var y = this.y; 177 | for (var ix = 0; ix < this.pattern.length; ix++) { 178 | for (var iy = 0; iy < this.pattern.length; iy++) { 179 | if (this.pattern[ix][iy]) { 180 | drawSquare(x + ix, y + iy); 181 | } 182 | } 183 | } 184 | ctx.fillStyle = fs; 185 | }; 186 | 187 | Piece.prototype.undraw = function (ctx) { 188 | this._fill(clear); 189 | }; 190 | 191 | Piece.prototype.draw = function (ctx) { 192 | this._fill(this.color); 193 | }; 194 | 195 | var pieces = [ 196 | [I, "cyan"], 197 | [J, "blue"], 198 | [L, "orange"], 199 | [O, "yellow"], 200 | [S, "green"], 201 | [T, "purple"], 202 | [Z, "red"], 203 | ]; 204 | var piece = null; 205 | 206 | var dropStart = Date.now(); 207 | var downI = {}; 208 | document.body.addEventListener( 209 | "keydown", 210 | function (e) { 211 | if (downI[e.keyCode] !== null) { 212 | clearInterval(downI[e.keyCode]); 213 | } 214 | key(e.keyCode); 215 | downI[e.keyCode] = setInterval(key.bind(this, e.keyCode), 200); 216 | }, 217 | false 218 | ); 219 | document.body.addEventListener( 220 | "keyup", 221 | function (e) { 222 | if (downI[e.keyCode] !== null) { 223 | clearInterval(downI[e.keyCode]); 224 | } 225 | downI[e.keyCode] = null; 226 | }, 227 | false 228 | ); 229 | 230 | function key(k) { 231 | if (done) { 232 | return; 233 | } 234 | if (k == 38) { 235 | // Player pressed up 236 | piece.rotate(); 237 | dropStart = Date.now(); 238 | } 239 | if (k == 40) { 240 | // Player holding down 241 | piece.down(); 242 | } 243 | if (k == 37) { 244 | // Player holding left 245 | piece.moveLeft(); 246 | dropStart = Date.now(); 247 | } 248 | if (k == 39) { 249 | // Player holding right 250 | piece.moveRight(); 251 | dropStart = Date.now(); 252 | } 253 | } 254 | 255 | function drawBoard() { 256 | var fs = ctx.fillStyle; 257 | for (var y = 0; y < height; y++) { 258 | for (var x = 0; x < width; x++) { 259 | ctx.fillStyle = board[y][x] || clear; 260 | drawSquare(x, y, tilesz, tilesz); 261 | } 262 | } 263 | ctx.fillStyle = fs; 264 | } 265 | 266 | function main() { 267 | var now = Date.now(); 268 | var delta = now - dropStart; 269 | 270 | if (delta > 1000) { 271 | piece.down(); 272 | dropStart = now; 273 | } 274 | 275 | if (!done) { 276 | requestAnimationFrame(main); 277 | } 278 | } 279 | 280 | piece = newPiece(); 281 | drawBoard(); 282 | linecount.textContent = "Lines: 0"; 283 | main(); 284 | -------------------------------------------------------------------------------- /static/js/tetrominoes.js: -------------------------------------------------------------------------------- 1 | var I = [ 2 | [ 3 | [0, 0, 0, 0], 4 | [1, 1, 1, 1], 5 | [0, 0, 0, 0], 6 | [0, 0, 0, 0], 7 | ], 8 | [ 9 | [0, 0, 1, 0], 10 | [0, 0, 1, 0], 11 | [0, 0, 1, 0], 12 | [0, 0, 1, 0], 13 | ], 14 | [ 15 | [0, 0, 0, 0], 16 | [0, 0, 0, 0], 17 | [1, 1, 1, 1], 18 | [0, 0, 0, 0], 19 | ], 20 | [ 21 | [0, 1, 0, 0], 22 | [0, 1, 0, 0], 23 | [0, 1, 0, 0], 24 | [0, 1, 0, 0], 25 | ] 26 | ]; 27 | 28 | var J = [ 29 | [ 30 | [1, 0, 0], 31 | [1, 1, 1], 32 | [0, 0, 0] 33 | ], 34 | [ 35 | [0, 1, 1], 36 | [0, 1, 0], 37 | [0, 1, 0] 38 | ], 39 | [ 40 | [0, 0, 0], 41 | [1, 1, 1], 42 | [0, 0, 1] 43 | ], 44 | [ 45 | [0, 1, 0], 46 | [0, 1, 0], 47 | [1, 1, 0] 48 | ] 49 | ]; 50 | 51 | var L = [ 52 | [ 53 | [0, 0, 1], 54 | [1, 1, 1], 55 | [0, 0, 0] 56 | ], 57 | [ 58 | [0, 1, 0], 59 | [0, 1, 0], 60 | [0, 1, 1] 61 | ], 62 | [ 63 | [0, 0, 0], 64 | [1, 1, 1], 65 | [1, 0, 0] 66 | ], 67 | [ 68 | [1, 1, 0], 69 | [0, 1, 0], 70 | [0, 1, 0] 71 | ] 72 | ]; 73 | 74 | var O = [ 75 | [ 76 | [0, 0, 0, 0], 77 | [0, 1, 1, 0], 78 | [0, 1, 1, 0], 79 | [0, 0, 0, 0], 80 | ] 81 | ]; 82 | 83 | var S = [ 84 | [ 85 | [0, 1, 1], 86 | [1, 1, 0], 87 | [0, 0, 0] 88 | ], 89 | [ 90 | [0, 1, 0], 91 | [0, 1, 1], 92 | [0, 0, 1] 93 | ], 94 | [ 95 | [0, 0, 0], 96 | [0, 1, 1], 97 | [1, 1, 0] 98 | ], 99 | [ 100 | [1, 0, 0], 101 | [1, 1, 0], 102 | [0, 1, 0] 103 | ] 104 | ]; 105 | 106 | var T = [ 107 | [ 108 | [0, 1, 0], 109 | [1, 1, 1], 110 | [0, 0, 0] 111 | ], 112 | [ 113 | [0, 1, 0], 114 | [0, 1, 1], 115 | [0, 1, 0] 116 | ], 117 | [ 118 | [0, 0, 0], 119 | [1, 1, 1], 120 | [0, 1, 0] 121 | ], 122 | [ 123 | [0, 1, 0], 124 | [1, 1, 0], 125 | [0, 1, 0] 126 | ] 127 | ]; 128 | 129 | var Z = [ 130 | [ 131 | [1, 1, 0], 132 | [0, 1, 1], 133 | [0, 0, 0] 134 | ], 135 | [ 136 | [0, 0, 1], 137 | [0, 1, 1], 138 | [0, 1, 0] 139 | ], 140 | [ 141 | [0, 0, 0], 142 | [1, 1, 0], 143 | [0, 1, 1] 144 | ], 145 | [ 146 | [0, 1, 0], 147 | [1, 1, 0], 148 | [1, 0, 0] 149 | ] 150 | ]; 151 | -------------------------------------------------------------------------------- /static/js/tic-tac-toe.js: -------------------------------------------------------------------------------- 1 | var N_SIZE = 3, 2 | EMPTY = ' ', 3 | boxes = [], 4 | turn = 'X', 5 | score, 6 | moves 7 | var x = document.getElementById('myAudio') 8 | var y = document.getElementById('win') 9 | // right click disable start------------------------- 10 | document.addEventListener( 11 | 'contextmenu', 12 | function (e) { 13 | e.preventDefault() 14 | }, 15 | false 16 | ) 17 | // right click disable end ------------------------------- 18 | function init() { 19 | var board = document.createElement('table') 20 | board.setAttribute('border', 1) 21 | board.setAttribute('cellspacing', 0) 22 | 23 | var identifier = 1 24 | for (var i = 0; i < N_SIZE; i++) { 25 | var row = document.createElement('tr') 26 | board.appendChild(row) 27 | for (var j = 0; j < N_SIZE; j++) { 28 | var cell = document.createElement('td') 29 | cell.setAttribute('height', 120) 30 | cell.setAttribute('width', 120) 31 | cell.setAttribute('align', 'center') 32 | cell.setAttribute('valign', 'center') 33 | cell.classList.add('col' + j, 'row' + i) 34 | if (i == j) { 35 | cell.classList.add('diagonal0') 36 | } 37 | if (j == N_SIZE - i - 1) { 38 | cell.classList.add('diagonal1') 39 | } 40 | cell.identifier = identifier 41 | cell.addEventListener('click', set) 42 | row.appendChild(cell) 43 | boxes.push(cell) 44 | identifier += identifier 45 | } 46 | } 47 | 48 | document.getElementById('tictactoe').appendChild(board) 49 | startNewGame() 50 | } 51 | 52 | /* 53 | * New game 54 | */ 55 | function startNewGame() { 56 | score = { 57 | X: 0, 58 | O: 0, 59 | } 60 | moves = 0 61 | turn = 'X' 62 | boxes.forEach(function (square) { 63 | square.innerHTML = EMPTY 64 | }) 65 | } 66 | 67 | /* 68 | * Check if a win or not 69 | */ 70 | function win(clicked) { 71 | // Get all cell classes 72 | var memberOf = clicked.className.split(/\s+/) 73 | for (var i = 0; i < memberOf.length; i++) { 74 | var testClass = '.' + memberOf[i] 75 | var items = contains('#tictactoe ' + testClass, turn) 76 | x.play() 77 | // winning condition: turn == N_SIZE 78 | if (items.length == N_SIZE) { 79 | return true 80 | } 81 | } 82 | return false 83 | } 84 | 85 | function contains(selector, text) { 86 | var elements = document.querySelectorAll(selector) 87 | return [].filter.call(elements, function (element) { 88 | return RegExp(text).test(element.textContent) 89 | }) 90 | } 91 | 92 | /* 93 | * Sets clicked square and also updates the turn. 94 | */ 95 | function set() { 96 | if (this.innerHTML !== EMPTY) { 97 | return 98 | } 99 | this.innerHTML = turn 100 | moves += 1 101 | score[turn] += this.identifier 102 | if (win(this)) { 103 | y.play() 104 | swal('Winner: Player ' + turn) 105 | startNewGame() 106 | } else if (moves === N_SIZE * N_SIZE) { 107 | y.play() 108 | swal('Draw') 109 | startNewGame() 110 | } else { 111 | turn = turn === 'X' ? 'O' : 'X' 112 | document.getElementById('turn').textContent = 'Player ' + turn 113 | } 114 | } 115 | 116 | init() 117 | -------------------------------------------------------------------------------- /static/js/wall-breaker.js: -------------------------------------------------------------------------------- 1 | const rulesBtn = document.getElementById('rulesbtn') 2 | const closeBtn = document.getElementById('closebtn') 3 | const rules = document.getElementById('rules') 4 | const canvas = document.getElementById('canvas') 5 | const ctx = canvas.getContext('2d') 6 | 7 | const gameoversound = new Audio('../static/music/wallbreaker/gameover.mp3') 8 | const movesound = new Audio('../static/music/wallbreaker/move.mp3') 9 | 10 | let score = 0 11 | const brickRowCount = 9 12 | const brickColumnCount = 5 13 | const delay = 500 14 | 15 | //create ball 16 | 17 | const ball = { 18 | x: canvas.width / 2, 19 | y: canvas.height / 2, 20 | size: 10, 21 | speed: 4, 22 | dx: 4, 23 | dy: -4, 24 | visible: true, 25 | } 26 | 27 | //create paddle 28 | const paddle = { 29 | x: canvas.width / 2 - 40, 30 | y: canvas.height - 20, 31 | w: 80, 32 | h: 10, 33 | speed: 8, 34 | dx: 0, 35 | visible: true, 36 | } 37 | 38 | //create brick props 39 | 40 | const brickInfo = { 41 | w: 70, 42 | h: 20, 43 | padding: 10, 44 | offsetX: 45, 45 | offsetY: 60, 46 | visible: true, 47 | } 48 | 49 | // create bricks 50 | const bricks = [] 51 | for (let i = 0; i < brickRowCount; i++) { 52 | bricks[i] = [] 53 | for (let j = 0; j < brickColumnCount; j++) { 54 | const x = i * (brickInfo.w + brickInfo.padding) + brickInfo.offsetX 55 | const y = j * (brickInfo.h + brickInfo.padding) + brickInfo.offsetY 56 | bricks[i][j] = { x, y, ...brickInfo } 57 | } 58 | } 59 | 60 | // Draw ball on canvas 61 | function drawBall() { 62 | ctx.beginPath() 63 | ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2) 64 | ctx.fillStyle = ball.visible ? '#800080' : 'transparent' 65 | ctx.fill() 66 | ctx.closePath() 67 | } 68 | 69 | // Draw paddle on canvas 70 | function drawPaddle() { 71 | ctx.beginPath() 72 | ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h) 73 | ctx.fillStyle = paddle.visible ? '#800080' : 'transparent' 74 | ctx.fill() 75 | ctx.closePath() 76 | } 77 | 78 | // Draw score on canvas 79 | function drawScore() { 80 | ctx.font = '20px Arial' 81 | ctx.fillText(`Score: ${score}`, canvas.width - 100, 30) 82 | } 83 | 84 | function drawBricks() { 85 | bricks.forEach((column) => { 86 | column.forEach((brick) => { 87 | ctx.beginPath() 88 | ctx.rect(brick.x, brick.y, brick.w, brick.h) 89 | ctx.fillStyle = brick.visible ? '#800080' : 'transparent' 90 | ctx.fill() 91 | ctx.closePath() 92 | }) 93 | }) 94 | } 95 | 96 | // Move paddle on canvas 97 | function movePaddle() { 98 | paddle.x += paddle.dx 99 | 100 | // Wall detection 101 | if (paddle.x + paddle.w > canvas.width) { 102 | paddle.x = canvas.width - paddle.w 103 | } 104 | 105 | if (paddle.x < 0) { 106 | paddle.x = 0 107 | } 108 | } 109 | 110 | // Move ball on canvas 111 | function moveBall() { 112 | ball.x += ball.dx 113 | ball.y += ball.dy 114 | 115 | // Wall collision (right/left) 116 | if (ball.x + ball.size > canvas.width || ball.x - ball.size < 0) { 117 | ball.dx *= -1 // ball.dx = ball.dx * -1 118 | } 119 | 120 | // Wall collision (top/bottom) 121 | if (ball.y + ball.size > canvas.height || ball.y - ball.size < 0) { 122 | ball.dy *= -1 123 | } 124 | 125 | // Paddle collision 126 | if ( 127 | ball.x - ball.size > paddle.x && 128 | ball.x + ball.size < paddle.x + paddle.w && 129 | ball.y + ball.size > paddle.y 130 | ) { 131 | ball.dy = -ball.speed 132 | } 133 | 134 | // Brick collision 135 | bricks.forEach((column) => { 136 | column.forEach((brick) => { 137 | if (brick.visible) { 138 | if ( 139 | ball.x - ball.size > brick.x && // left brick side check 140 | ball.x + ball.size < brick.x + brick.w && // right brick side check 141 | ball.y + ball.size > brick.y && // top brick side check 142 | ball.y - ball.size < brick.y + brick.h // bottom brick side check 143 | ) { 144 | ball.dy *= -1 145 | brick.visible = false 146 | 147 | increaseScore() 148 | } 149 | } 150 | }) 151 | }) 152 | 153 | // Hit bottom wall - Lose 154 | if (ball.y + ball.size > canvas.height) { 155 | showAllBricks() 156 | score = 0 157 | gameoversound.play() 158 | alert('Game over!! click ok to play again') 159 | } 160 | } 161 | 162 | // Increase score 163 | function increaseScore() { 164 | score++ 165 | movesound.play() 166 | if (score % (brickRowCount * brickColumnCount) === 0) { 167 | ball.visible = false 168 | paddle.visible = false 169 | 170 | //After 0.5 sec restart the game 171 | setTimeout(function () { 172 | showAllBricks() 173 | score = 0 174 | paddle.x = canvas.width / 2 - 40 175 | paddle.y = canvas.height - 20 176 | ball.x = canvas.width / 2 177 | ball.y = canvas.height / 2 178 | ball.visible = true 179 | paddle.visible = true 180 | }, delay) 181 | } 182 | } 183 | 184 | // Make all bricks appear 185 | function showAllBricks() { 186 | bricks.forEach((column) => { 187 | column.forEach((brick) => (brick.visible = true)) 188 | }) 189 | } 190 | 191 | // Draw everything 192 | function draw() { 193 | // clear canvas 194 | ctx.clearRect(0, 0, canvas.width, canvas.height) 195 | 196 | drawBall() 197 | drawPaddle() 198 | drawScore() 199 | drawBricks() 200 | } 201 | 202 | // Update canvas drawing and animation 203 | function update() { 204 | movePaddle() 205 | moveBall() 206 | 207 | // Draw everything 208 | draw() 209 | 210 | requestAnimationFrame(update) 211 | } 212 | 213 | update() 214 | 215 | //down key event 216 | function keyDown(e) { 217 | if (e.key === 'Right' || e.key === 'ArrowRight') { 218 | paddle.dx = paddle.speed 219 | } else if (e.key === 'Left' || e.key === 'ArrowLeft') { 220 | paddle.dx = -paddle.speed 221 | } 222 | } 223 | 224 | //up key event 225 | function keyUp(e) { 226 | if ( 227 | e.key === 'Right' || 228 | e.key === 'ArrowRight' || 229 | e.key === 'Left' || 230 | e.key === 'ArrowLeft' 231 | ) { 232 | paddle.dx = 0 233 | } 234 | } 235 | 236 | //keyboard event handlers 237 | document.addEventListener('keydown', keyDown) 238 | document.addEventListener('keyup', keyUp) 239 | 240 | //rules and close even hanlers 241 | rulesBtn.addEventListener('click', () => rules.classList.add('show')) 242 | closeBtn.addEventListener('click', () => rules.classList.remove('show')) 243 | -------------------------------------------------------------------------------- /static/js/whack-a-mole.js: -------------------------------------------------------------------------------- 1 | const score = document.querySelector('.score span') //within score, within span we're keeping point records 2 | const holes = document.querySelectorAll('.hole') //all the 9 holes, All -> coz many holes 3 | const playb = document.querySelector('.buttons .play') 4 | const stopb = document.querySelector('.buttons .stop') 5 | const cursor = document.querySelector('.cursor img') 6 | 7 | //positioning the hammer img with cursor 8 | 9 | window.addEventListener('mousemove', (event) => { 10 | //whenever mouse is moved in the screen this func runs, 11 | //console.log(event) //from console we get pageX and pageY (in pixels) 12 | cursor.style.top = event.pageY + 'px' //PageY --> position of cursor from the top of the window 13 | cursor.style.left = event.pageX + 'px' //pageX --> position of cursor from the left of the window 14 | 15 | window.addEventListener('click', () => { 16 | //whenever we click with the hammer img there will be some animnation 17 | cursor.style.animation = 'hit 0.1s ease' ///now define the animation we just created (hit) in css 18 | setTimeout(() => { 19 | //the hammer bends only once, to make it multiple time we use this function and remove the animation after 0.1sec 20 | cursor.style.removeProperty('animation') 21 | }, 100) 22 | }) 23 | }) 24 | 25 | //handling the play button 26 | 27 | playb.addEventListener('click', () => { 28 | playb.style.display = 'none' //once you click on play button it dissapears 29 | stopb.style.display = 'inline-block' //and stop button is diplayed on screen 30 | 31 | //start the game 32 | 33 | let hole 34 | let points = 0 35 | 36 | const startGame = setInterval(() => { 37 | //after every 0.7 sec for infinite no. of times until we stop it 38 | //selecting random holes to display the mole in that 39 | const a = Math.floor(Math.random() * 9) //for each hole 40 | hole = holes[a] 41 | 42 | //creating the img tag 43 | let image = document.createElement('img') //creating image object 44 | image.setAttribute('src', '../static/images/whack-a-mole/mole.png') //giving attribute name and location 45 | image.setAttribute('class', 'mole') //give image a class named mole 46 | 47 | setTimeout(() => { 48 | //removing the mole image once displayed 49 | hole.removeChild(image) 50 | }, 800) 51 | 52 | //append and remove child timing should be different 53 | 54 | //inserting the image in selected random hole 55 | hole.appendChild(image) 56 | }, 1000) 57 | 58 | //setting the points 59 | window.addEventListener('click', (event) => { 60 | if (event.target == hole) score.innerText = ++points // if we click on the random hole no. 'hole' it will increase the point value 61 | }) 62 | 63 | //handling the stop button 64 | 65 | stopb.addEventListener('click', () => { 66 | clearInterval(startGame) //on clicking the stop button, it stops infinite startGame loop 67 | 68 | playb.style.display = 'inline-block' //play button is diplayed on screen 69 | stopb.style.display = 'none' //once you click on stop button it dissapears 70 | score.innerText = 0 71 | }) 72 | }) 73 | -------------------------------------------------------------------------------- /static/music/PacMan/ready.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/PacMan/ready.mp3 -------------------------------------------------------------------------------- /static/music/Simon-Game/blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/Simon-Game/blue.mp3 -------------------------------------------------------------------------------- /static/music/Simon-Game/green.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/Simon-Game/green.mp3 -------------------------------------------------------------------------------- /static/music/Simon-Game/red.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/Simon-Game/red.mp3 -------------------------------------------------------------------------------- /static/music/Simon-Game/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/Simon-Game/wrong.mp3 -------------------------------------------------------------------------------- /static/music/Simon-Game/yellow.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/Simon-Game/yellow.mp3 -------------------------------------------------------------------------------- /static/music/Snakegame/food.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/Snakegame/food.mp3 -------------------------------------------------------------------------------- /static/music/Snakegame/gameover.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/Snakegame/gameover.mp3 -------------------------------------------------------------------------------- /static/music/Snakegame/move.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/Snakegame/move.mp3 -------------------------------------------------------------------------------- /static/music/Snakegame/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/Snakegame/music.mp3 -------------------------------------------------------------------------------- /static/music/connect-four/click.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/connect-four/click.mp3 -------------------------------------------------------------------------------- /static/music/connect-four/lost.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/connect-four/lost.wav -------------------------------------------------------------------------------- /static/music/connect-four/win.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/connect-four/win.wav -------------------------------------------------------------------------------- /static/music/hangman/click.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/hangman/click.mp3 -------------------------------------------------------------------------------- /static/music/hangman/lost.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/hangman/lost.wav -------------------------------------------------------------------------------- /static/music/hangman/win.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/hangman/win.wav -------------------------------------------------------------------------------- /static/music/pingpong/hit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/pingpong/hit.mp3 -------------------------------------------------------------------------------- /static/music/pingpong/score.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/pingpong/score.mp3 -------------------------------------------------------------------------------- /static/music/pingpong/wall.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/pingpong/wall.mp3 -------------------------------------------------------------------------------- /static/music/tic-tac-toe/click.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/tic-tac-toe/click.mp3 -------------------------------------------------------------------------------- /static/music/tic-tac-toe/win.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/tic-tac-toe/win.wav -------------------------------------------------------------------------------- /static/music/wallbreaker/gameover.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/wallbreaker/gameover.mp3 -------------------------------------------------------------------------------- /static/music/wallbreaker/move.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geekymeeky/JS-games/2af3ae746a7b69dbaf04599512228f6294e743d5/static/music/wallbreaker/move.mp3 --------------------------------------------------------------------------------