Skip to main content

Snake game html code

 Hello everyone here is the coder boy for your help!!!


Well, it is really amazing to code to help others if you want any type of code you can mail me but now let's continue to our today's code.

Let's look at the simple snake game I made with html code.



Snake Game
Below is the html code of the above-age calculator. You can copy it down for your own purpose. You can use it (smile my friend that's the main point).

<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      var canvas = document.getElementById("gameCanvas");
      var context = canvas.getContext("2d");

      var snake = [];
      snake[0] = {
        x: 200,
        y: 200
      };

      var food = {
        x: Math.floor(Math.random() * 20) * 20,
        y: Math.floor(Math.random() * 20) * 20
      };

      var direction;

      document.addEventListener("keydown", function(event) {
        if (event.keyCode == 37) {
          direction = "left";
        } else if (event.keyCode == 38) {
          direction = "up";
        } else if (event.keyCode == 39) {
          direction = "right";
        } else if (event.keyCode == 40) {
          direction = "down";
        }
      });

      function drawSnake() {
        for (var i = 0; i < snake.length; i++) {
          context.fillStyle = "green";
          context.fillRect(snake[i].x, snake[i].y, 20, 20);
        }
      }

      function drawFood() {
        context.fillStyle = "red";
        context.fillRect(food.x, food.y, 20, 20);
      }

      function moveSnake() {
        var head = {
          x: snake[0].x,
          y: snake[0].y
        };

        if (direction == "left") {
          head.x -= 20;
        } else if (direction == "up") {
          head.y -= 20;
        } else if (direction == "right") {
          head.x += 20;
        } else if (direction == "down") {
          head. y += 20;
        }

        if (head.x == food.x && head.y == food.y) {
          food = {
            x: Math.floor(Math.random() * 20) * 20,
            y: Math.floor(Math.random() * 20) * 20
          };
        } else {
          snake.pop();
        }

        snake.unshift(head);
      }

      function checkCollision() {
        for (var i = 1; i < snake.length; i++) {
          if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) {
            return true;
          }
        }

        if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
          return true;
        }

        return false;
      }

      function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        drawSnake();
        drawFood();
        moveSnake();

        if (checkCollision()) {
          alert("Game over!");
          clearInterval(intervalId);
        }
      }

      var intervalId = setInterval(gameLoop, 100);
    </script>
  </body>
</html>

what is snake game Html?

The Snake game is a classic arcade game that originated in the late 1970s. The objective of the game is to control a snake, which is represented by a line or series of blocks, as it moves around a screen. The player must eat food, which appears randomly on the screen, in order to grow the snake. As the snake grows, it becomes increasingly difficult to avoid running into the walls or the snake's own body. The game ends when the snake crashes into an obstacle.

In the context of HTML, the Snake game can be created using the HTML5 canvas element and JavaScript. The canvas element provides a drawing area on which graphics can be drawn dynamically, and JavaScript can be used to control the movement of the snake and the placement of food on the canvas. The game can be controlled using keyboard input, with the arrow keys typically used to change the direction of the snake.

How it works?

The Snake game works by updating the position of the snake and the food on the canvas in response to user input and game logic. Here is a brief overview of how the game works:

  • Initialize the game by creating the canvas element, setting up the initial state of the game (snake position, direction, food position), and defining the game loop.
  • In each iteration of the game loop, clear the canvas and redraw the snake, food, and any other game elements that may be present.
  • Check for user input, and update the direction of the snake accordingly.
  • Move the snake in the current direction by adding a new head segment and removing the tail segment.
  • Check for collisions between the snake and the walls, the snake's own body, or the food.
  • If the snake collides with the food, add a new segment to the snake and generate a new food position.
  • If the snake collides with an obstacle or the game ends for any other reason, reset the game state and display the game-over message.

This process repeats continuously until the game is ended by the player or some other condition.

    How to use it? 

      To play a Snake game created using HTML and JavaScript, you can follow these general steps:

      • Open a web browser and navigate to the webpage hosting the Snake game.
      • Once the game has loaded, use the arrow keys on your keyboard to control the direction of the snake.
      • Move the snake around the screen to eat the food that appears randomly. Each time the snake eats a piece of food, it grows longer and the game becomes more challenging.
      • Avoid running into the walls or the snake's own body, as this will cause the game to end.
      • Continue playing until you either reach the maximum possible length for the snake or run into an obstacle, at which point the game will display a game-over message.
      • The exact controls and gameplay mechanics may vary depending on the specific Snake game you are playing, but these general steps should help you get started.

       Features

      The features of a Snake game created using HTML and JavaScript can vary depending on how it was designed and implemented. However, some common features of a Snake game may include:

      • Snake movement: The player can control the movement of the snake using the arrow keys or other input methods.

      • Food generation: Food appears randomly on the screen, and the player must move the snake to eat it.
      • Scoring: The player earns points for each piece of food that the snake eats.
      • Snake length: The length of the snake grows each time it eats a piece of food.
      • Obstacles: Walls or other obstacles on the screen that the player must avoid.
      • Game over: The game ends when the snake collides with an obstacle or its own body.
      • Restart: The player can restart the game after it ends.
      • Sound effects: Optional sound effects can be added to enhance the gaming experience.
      These are just some of the features that can be included in a Snake game using HTML and JavaScript. More advanced versions of the game may also include additional features, such as power-ups, special game modes, or multiplayer capabilities.

        Conclusion 

        In conclusion, a Snake game created using HTML and JavaScript is a fun and engaging way to learn about web development and programming. By using the canvas element and JavaScript, developers can create a dynamic game that can be played in a web browser on any device. The game can be customized with various features and mechanics to make it more challenging and enjoyable for players. Overall, creating and playing a Snake game in HTML and JavaScript is a great way to improve your coding skills and have some fun at the same time.

        Comments

        Post a Comment

        Popular posts from this blog

        Moving ball in the box with html

        Hello everyone here is the coder boy for your help!!! Well, it is really amazing to code to help others if you want any type of code you can mail me but now let's continue to our today's code. Let's look at the simple moving ball animation I made with html code. Bouncing Ball Game Below is the html code of the above simple moving ball animation. You can copy it down for your own purpose. You can use it (smile my friend that's the main point) . <!DOCTYPE html> <html> <head> <title>Bouncing Ball Game</title> <style> #game-board { width: 400px; height: 400px; border: 1px solid black; position: relative; } #ball { width: 50px; height: 50px; border-radius: 50%; background-color: red; position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="game-board"> <div id="ball"></di...
        Post a Comment
        Read more

        Html code for simple WOW text animation

          Hello everyone here is the coder boy for your help!!! Well, it is really amazing to code to help others if you want any type of code you can mail me but now let's continue to our today's code. Let's look at the simple text animation I made with html code. Amazing HTML WOW! Hover over the text to see the animation Below is the html code of the above simple text animation. You can copy it down for your own purpose. You can use it (smile my friend that's the main point). <!DOCTYPE html> <html> <head> <title>Amazing HTML</title> </head> <body > <h1 style="text-align: center; font-size: 8em; margin-top: 20%; text-shadow: 0 0 10px #fff; cursor: pointer; background-color: black; display: inline-block; padding: 10px 20px;" onmouseover="this.style.textShadow='0 0 50px #fff';" onmouseout="this.style.textShadow='0 0 10px #fff';" > WOW! ...
        Post a Comment
        Read more

        Html code for age calculation

        Hello everyone here is the coder boy for your help!!! Well, it is really amazing to code to help others if you want any type of code you can mail me but now let's continue to our today's code. Age Calculator Lets take a look at the age calculator that I made with html code. Age Calculator Enter your date of birth: Calculate Age Your age is: Below is the html code of the above-age calculator. You can copy it down for your own purpose. You can use it (smile my friend that's the main point).
        Post a Comment
        Read more