snake but you get longer. and go slow The food is bigger 10 times.'s game

Click here for free DL of the app version that can save data.

No:37492

←

Prev Next

→

snake but you get longer. and go slow The food is..ALL
Developer User17003｜Date and time 24/1/21 4:29:58
Build time 14.039 sec｜Game capacity 3.904KB｜

Script

Sure! Here's a simple implementation of the Snake game in a single HTML file using JavaScript:

To play the game, simply save the above code in an HTML file and open it in a web browser (preferably on a smartphone). The game starts automatically, and you can control the snake's movement by using the arrow keys. The goal is to eat the red food and avoid colliding with the game boundary or the snake's own body. As the game progresses, the snake becomes longer. The food appears larger and the snake moves relatively slowly. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

Sure! Here's a simple implementation of the Snake game in a single HTML file using JavaScript:

```html
<!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>

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
      snake = [{x: 200, y: 200}];
      food = getRandomFood();
      score = 0;

document.addEventListener("keydown", changeDirection);

// Move the snake every 200ms
      setInterval(gameLoop, 200);
    }

// Game loop
    function gameLoop() {
      clearCanvas();
      moveSnake();
      drawSnake();
      drawFood();
      checkCollision();
    }

// Clear the canvas
    function clearCanvas() {
      context.fillStyle = "white";
      context.fillRect(0, 0, canvas.width, canvas.height);
    }

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

// Update the head position based on the current direction
      if (direction === "UP") head.y -= 10;
      if (direction === "DOWN") head.y += 10;
      if (direction === "LEFT") head.x -= 10;
      if (direction === "RIGHT") head.x += 10;

// Insert the new head at the beginning of the snake
      snake.unshift(head);

// Remove the tail of the snake
      if (snake.length > score + 1) {
        snake.pop();
      }
    }

// Draw the snake
    function drawSnake() {
      context.fillStyle = "green";
      snake.forEach(segment => {
        context.fillRect(segment.x, segment.y, 10, 10);
      });
      context.fillStyle = "black";
      context.strokeRect(snake[0].x, snake[0].y, 10, 10);
    }

// Change direction based on key press
    function changeDirection(event) {
      if (event.keyCode === 37 && direction !== "RIGHT") {
        direction = "LEFT";
      }
      if (event.keyCode === 38 && direction !== "DOWN") {
        direction = "UP";
      }
      if (event.keyCode === 39 && direction !== "LEFT") {
        direction = "RIGHT";
      }
      if (event.keyCode === 40 && direction !== "UP") {
        direction = "DOWN";
      }
    }

// Generate random food position
    function getRandomFood() {
      var x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
      var y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
      return {x: x, y: y};
    }

// Draw the food
    function drawFood() {
      context.fillStyle = "red";
      context.fillRect(food.x, food.y, 10, 10);
    }

// Check for collision with food or game boundary
    function checkCollision() {
      // Check collision with food
      if (snake[0].x === food.x && snake[0].y === food.y) {
        score++;
        food = getRandomFood();
      }

// Check collision with self or game boundary
      if (
        snake[0].x < 0 ||
        snake[0].x >= canvas.width ||
        snake[0].y < 0 ||
        snake[0].y >= canvas.height ||
        snake.slice(1).some(segment => segment.x === snake[0].x && segment.y === snake[0].y)
      ) {
        // Game over
        alert("Game Over! Your Score: " + score);
        init();
      }
    }

// Start the game
    init();
  </script>
</body>
</html>
```