Your a snake and needs to eat Squares to get longer's game

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

No:10922

←

Prev Next

→

Your a snake and needs to eat Squares to get longe..ALL
Developer User4715｜Date and time 23/8/5 20:42:22
Build time 34.002 sec｜Game capacity 3.817KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

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

.snake, .square {
        width: 20px;
        height: 20px;
        position: absolute;
      }

.snake {
        background-color: green;
      }

.square {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

function startGame() {
        setInterval(moveSnake, 200);
      }

// Create a new square at random position
      function createSquare() {
        var squareElement = document.createElement('div');
        squareElement.classList.add('square');
        squareElement.style.left = getRandomPosition() + 'px';
        squareElement.style.top = getRandomPosition() + 'px';
        gameBoard.appendChild(squareElement);
        return squareElement;
      }

// Get a random position for the square
      function getRandomPosition() {
        return Math.floor(Math.random() * 15) * 20;
      }

// Handle key press events to change the snake's direction
      document.addEventListener('keydown', function(e) {
        e.preventDefault();
        if (e.key === 'ArrowUp' && direction !== 'down') {
          direction = 'up';
        } else if (e.key === 'ArrowDown' && direction !== 'up') {
          direction = 'down';
        } else if (e.key === 'ArrowLeft' && direction !== 'right') {
          direction = 'left';
        } else if (e.key === 'ArrowRight' && direction !== 'left') {
          direction = 'right';
        }
      });

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

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

// Check for collision with the square
        if (head.x === square.offsetLeft && head.y === square.offsetTop) {
          score++;
          snake.push({});
          square.remove();
          square = createSquare();
        }

// Check for collision with itself
        if (isSelfCollision(head)) {
          alert('Game Over! Your score: ' + score);
          clearInterval();
        }

// Move the snake
        snake.unshift(head);
        if (snake.length > score + 1) {
          snake.pop();
        }

// Render the snake
        renderSnake();
      }

// Check if the snake collided with itself
      function isSelfCollision(head) {
        return snake.slice(1).some(function(segment) {
          return segment.x === head.x && segment.y === head.y;
        });
      }

// Render the snake on the game board
      function renderSnake() {
        var snakesElements = document.querySelectorAll('.snake');
        snakesElements.forEach(function(snakeElement) {
          snakeElement.remove();
        });

snake.forEach(function(segment) {
          var segmentElement = document.createElement('div');
          segmentElement.classList.add('snake');
          segmentElement.style.left = segment.x + 'px';
          segmentElement.style.top = segment.y + 'px';
          gameBoard.appendChild(segmentElement);
        });
      }

startGame();
    </script>
  </body>
</html>