snake game you move slow's game

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

No:37161

←

Prev Next

→

snake game you move slow
Developer User17003｜Date and time 24/1/20 14:02:58
Build time 14.942 sec｜Game capacity 4.463KB｜

Script

Sure, here's a simple implementation of the classic Snake game using JavaScript and HTML. Save this code in a single HTML file and open it in your web browser. You can control the snake using the arrow keys on your keyboard. The snake initially moves slowly, and as it eats the food, it gradually speeds up.

In this game, you control a snake using the arrow keys on your keyboard. The snake moves around the game board to eat food represented by a red square. As the snake eats the food, its length increases, and the game speeds up. The aim is to make the snake as long as possible without running into the game board boundaries or itself.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      position: relative;
      border: 1px solid black;
    }

.snake {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: green;
    }

#food {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: red;
    }
  </style>
</head>
<body>
<script>
  document.addEventListener("DOMContentLoaded", function(event) { 
    const gameBoardSize = 20; // Size of the game board in cells
    const cellSize = 20; // Size of each cell in pixels
    const initialSnakeSpeed = 200; // Initial speed of the snake in milliseconds
    const speedIncreaseRate = 0.95; // Speed increase factor

let gameBoard = document.getElementById("game-board");
    let snakeHead = document.createElement("div");
    snakeHead.classList.add("snake");
    gameBoard.appendChild(snakeHead);
    let food = document.getElementById("food");

let snake = [{
      x: Math.floor(gameBoardSize / 2), // Initial snake position in the middle of the board
      y: Math.floor(gameBoardSize / 2)
    }];
    let direction = {x: 0, y: 0};
    let snakeSpeed = initialSnakeSpeed;

let gameLoop = setInterval(moveSnake, snakeSpeed);

function moveSnake() {
      const newHeadPos = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};

// Check if the snake collides with the game board boundaries
      if (
        newHeadPos.x < 0 ||
        newHeadPos.x >= gameBoardSize ||
        newHeadPos.y < 0 ||
        newHeadPos.y >= gameBoardSize
      ) {
        clearInterval(gameLoop);
        alert("Game Over!");
        return;
      }

snake.unshift(newHeadPos);

// Check if the snake collides with itself
      if (checkSelfCollision()) {
        clearInterval(gameLoop);
        alert("Game Over!");
        return;
      }

// Check if the snake eats the food
      if (newHeadPos.x === foodPos.x && newHeadPos.y === foodPos.y) {
        // Increase snake's speed when it eats the food
        snakeSpeed *= speedIncreaseRate;
        clearInterval(gameLoop);
        gameLoop = setInterval(moveSnake, snakeSpeed);
        createFood();
      } else {
        snake.pop();
      }

drawSnake();
    }

function drawSnake() {
      gameBoard.innerHTML = "";

snake.forEach((part) => {
        let snakePart = document.createElement("div");
        snakePart.style.left = part.x * cellSize + "px";
        snakePart.style.top = part.y * cellSize + "px";
        snakePart.classList.add("snake");
        gameBoard.appendChild(snakePart);
      });

// Draw the food
      food.style.left = foodPos.x * cellSize + "px";
      food.style.top = foodPos.y * cellSize + "px";
    }

function createFood() {
      foodPos = {
        x: Math.floor(Math.random() * gameBoardSize),
        y: Math.floor(Math.random() * gameBoardSize)
      };
    }

function checkSelfCollision() {
      const snakeHeadPos = snake[0];

for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === snakeHeadPos.x && snake[i].y === snakeHeadPos.y) {
          return true;
        }
      }

return false;
    }

createFood();
    document.addEventListener("keydown", handleKeyDown);
  });
</script>

</body>
</html>
```