Code Monkey home page Code Monkey logo

snake-game-js's Introduction

Snake Game

A classic Snake game built using HTML, CSS, and JavaScript. This simple game allows players to control a snake, guiding it to eat food and grow longer while avoiding collisions with the boundary and itself.

How to Play

  • Use the arrow keys on your keyboard to control the direction of the snake.
  • Guide the snake to eat the food that appears on the screen.
  • Each time the snake eats food, it grows longer.
  • Avoid collisions with the boundary of the game area and with the snake itself.
  • The game ends when the snake collides with the boundary or itself.

Technologies Used

  • HTML5
  • CSS3
  • JavaScript

Installation

No installation is required to play the game. Simply open the index.html file in your web browser to start playing.

Contributing

Contributions are welcome! If you find any bugs or have suggestions for improvements, please check the list of open issues before submitting a new one.

You can contribute by solving the given issues or by creating new ones and solving them. To contribute, follow these steps:

  1. Check for existing issues: Before starting work on a new issue, please check if there's already an open issue for it. If not, feel free to create one.

  2. Fork the repository: Click on the "Fork" button at the top right corner of the repository page to create a copy of the repository on your GitHub account.

  3. Clone the repository: Clone the forked repository to your local machine using the following command:

  4. Make changes: Make your desired changes to the codebase.

  5. Commit your changes: Commit your changes with a descriptive commit message using the following command:

  6. Push changes: Push your changes to your forked repository on GitHub using the following command:

  7. Submit a pull request: Finally, submit a pull request from your forked repository to the original repository. Ensure to provide a clear description of your changes in the pull request.

Thank you for contributing!

snake-game-js's People

Contributors

rootcircle avatar

Watchers

 avatar  avatar

snake-game-js's Issues

Implement Score and Max Score Feature

Description:

Currently, the Snake game lacks a scoring system. Implement a scoring mechanism to track points earned when the snake consumes food. Additionally, maintain the highest score achieved using local storage.

Tasks:

  • Implement scoring logic and display the current score.
  • Track and display the highest score achieved during the session.
  • Ensure persistence of the highest score using local storage.

Resolution:

Solve the tasks outlined above and submit a pull request referencing this issue ID (#ISSUE_ID) with a screenshot or video demonstrating the implemented feature.

Implement Difficulty Modes

Description:

Introduce different difficulty modes in the Snake game: easy, medium, and hard. Each mode will offer a unique gameplay experience, with varying levels of challenge and complexity. In the easy mode, the game will remain simple without any additional obstacles. The medium mode will introduce one obstacle in the center of the game area, adding a moderate level of challenge. Finally, the hard mode will feature four obstacles symmetrically placed across the board, providing a high level of difficulty.

Tasks:

  • Implement functionality to select and switch between difficulty modes.
  • Design and integrate the gameplay elements for each difficulty mode as described.
  • Ensure that the easy mode maintains the existing gameplay without additional obstacles.
  • Create one obstacle in the center for the medium mode.
  • Introduce four obstacles symmetrically across the board for the hard mode.

Resolution:

Solve the tasks outlined above and submit a pull request referencing this issue ID (#ISSUE_ID) with a screenshot or video demonstrating the implemented feature.

Add Celebration Popup for High Score Achievements

Description:

Enhance the player experience by introducing a celebration popup when a new high score is achieved during gameplay. This popup will appear immediately after the player reaches a new high score, providing positive reinforcement and acknowledging their accomplishment. The celebration popup should be visually appealing and include congratulatory messages or animations to make the player feel rewarded for their achievement.

Tasks:

  • Design a visually appealing celebration popup to appear when a new high score is reached.
  • Implement logic to trigger the celebration popup when the player achieves a new high score.
  • Include congratulatory messages or animations in the popup to acknowledge the player's accomplishment.

Resolution:

Solve the tasks outlined above and submit a pull request referencing this issue ID (#ISSUE_ID) with a demonstration of the implemented celebration popup appearing when a new high score is achieved during gameplay.

Improve Food Generation to Avoid Overlapping with Snake Body

Description:

Currently, food in the Snake game is generated at random positions on the game board. However, this can lead to situations where the food appears on the snake's body. To enhance gameplay fairness and avoid such occurrences, implement a mechanism to ensure that food is generated at positions where it does not overlap with the snake's body.

Tasks:

  • Revise the food generation logic to prevent food from appearing on the snake's body.
  • Implement checks to verify the validity of potential food positions before spawning food.
  • Ensure that the food generation mechanism maintains randomness while avoiding overlap with the snake's body.

Resolution:

Solve the tasks outlined above and submit a pull request referencing this issue ID (#ISSUE_ID) with a demonstration of the improved food generation mechanism, ensuring that food does not overlap with the snake's body during gameplay.

Increase Snake Speed when Eating Food

Description:

Currently, the Snake game maintains a constant speed throughout gameplay, regardless of the snake's actions. To introduce dynamic gameplay and add a level of challenge, implement a feature where the speed of the snake increases each time it consumes food. This will make the game progressively more difficult as the snake grows longer and moves faster.

Tasks:

  • Implement logic to increase the speed of the snake by 0.1 units when it consumes food.

Resolution:

Solve the tasks outlined above and submit a pull request referencing this issue ID (#ISSUE_ID) with a screenshot or video demonstrating the implemented feature.

Implement Game Over on Snake Biting Itself

Description:

Currently, the game only ends when the snake collides with the boundaries. However, to enhance gameplay realism and challenge, update the game logic to trigger a game over when the snake bites itself.

Tasks:

  • Update game logic to detect when the snake bites itself.
  • Implement functionality to end the game when the snake bites itself.
  • Ensure that the game over condition on self-biting provides appropriate feedback to the player.

Resolution:

Solve the tasks outlined above and submit a pull request referencing this issue ID (#ISSUE_ID) with a screenshot or video demonstrating the implemented feature.

Add Pause, Mute, and Full Screen Buttons

Description:

Currently, the Snake game lacks essential controls for player convenience and customization. To improve user experience and accessibility, implement buttons for pausing/resuming the game, muting/unmuting game sounds, and toggling full-screen mode.

Tasks:

  • Design and implement a pause button to allow players to pause and resume gameplay at any time.
  • Add functionality to mute and unmute game sounds with a dedicated mute button.
  • Implement a full-screen button to enable players to switch between windowed and full-screen mode.
  • Ensure that the buttons are intuitively placed and visually distinguishable for easy access.

Resolution:

Solve the tasks outlined above and submit a pull request referencing this issue ID (#ISSUE_ID) with a screenshot or video demonstrating the implemented feature.

Enhance Mobile Compatibility and Controls

Description:

The Snake game is currently playable on computers using arrow keys, but lacks support for mobile devices. To broaden accessibility and improve user experience, make the game responsive for mobile devices and implement intuitive controls suited for touchscreens. This may involve adding on-screen buttons to control the snake's direction or incorporating swipe gestures for movement.

Tasks:

  • Adapt the game layout and controls to be responsive for mobile devices.
  • Implement on-screen buttons for controlling the snake's direction in mobile view.
  • Alternatively, if feasible, integrate swipe gestures for intuitive movement on touchscreens.

Resolution:

Solve the tasks outlined above and submit a pull request referencing this issue ID (#ISSUE_ID) with a screenshot or video demonstrating the responsive design and mobile controls.

Improve Game Over Popup Appearance and Functionality

Description:

Currently, when the game ends, an unattractive alert is displayed to the player. Enhance the user experience by replacing the existing alert with a visually appealing popup that includes the player's score and highest score achieved. Additionally, if the player achieves a new highest score, include an indication of this achievement. Finally, add a "Play Again" button to the popup to allow players to easily restart the game without refreshing the page.

Tasks:

  • Design and implement a visually appealing popup for the game over screen.
  • Display the player's score achieved in the popup.
  • Include an indication if the player achieves a new highest score.
  • Add a "Play Again" button to the popup to enable quick game restart.

Resolution:

Solve the tasks outlined above and submit a pull request referencing this issue ID (#ISSUE_ID) with a demonstration of the improved game over popup.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.